Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
12
Comments
13
Rabel
@Rabelahmed

All comments

  • Dylan•290
    @dquinn089
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    With my recent experience in JavaScript and familiarity from past projects, I was able to quickly assemble the math logic for my calculator app. While I aim to improve my UI design process by learning front-end libraries like shadcn, I’m proud of how effectively I brought everything together using vanilla HTML and CSS. Despite a few minor imperfections, I’m happy with the result overall.

    What challenges did you encounter, and how did you overcome them?

    One challenge I faced was getting the custom tip input to work correctly. Initially, when I entered a number in the custom input field, the tip amount always displayed as $0.00. The problem was that I mistakenly selected the entire element that wrapped the input, rather than the input field itself, in my JavaScript, so the value wasn't being read properly for the calculations. To fix this, I updated my code to correctly target the inside the `` and made sure the custom tip value was validated and applied in the calculations. Once I made this adjustment, the custom tip functionality worked as expected. I find most of my challenges end up being small mistakes that are like "A needle in a haystack" so to speak.

    What specific areas of your project would you like help with?

    I’d like guidance on improving my JavaScript workflow, particularly with handling form validation and user input, as I encountered issues with correctly accessing input values. Suggestions on structuring my projects more efficiently, especially when integrating JavaScript functionality with CSS would also be helpful.

    Tip Calculator App Solution Built With HTML/CSS/JS

    1
    Rabel•190
    @Rabelahmed
    Posted 10 months ago

    congrats on completing the challenge

  • Skyler Ang•330
    @skyleranglh
    Submitted 11 months ago

    Time Tracking Dashboard with Grid

    1
    Rabel•190
    @Rabelahmed
    Posted 11 months ago

    congrats on completing the challenge

  • amutsamoses•200
    @amutsamoses
    Submitted 11 months ago

    NewLetter-sign-up-form

    1
    Rabel•190
    @Rabelahmed
    Posted 11 months ago

    congrats on completing the challenge

  • bcstith75•120
    @bcstith75
    Submitted 11 months ago

    Article Preview Page

    2
    Rabel•190
    @Rabelahmed
    Posted 11 months ago

    congrats

  • KhamriOussama•80
    @KhamriOussama
    Submitted 12 months ago

    Testimonials grid using css flexbox and grid

    1
    Rabel•190
    @Rabelahmed
    Posted 11 months ago

    looks good

  • ShivamRajput57•170
    @ShivamRajput57
    Submitted 11 months ago

    only use grid

    2
    Rabel•190
    @Rabelahmed
    Posted 11 months ago

    congrats on completing the challenge

  • Aria Frost•50
    @R3Aria
    Submitted 11 months ago
    What specific areas of your project would you like help with?

    I can't seem to get it away from the top without using a margin/padding value, is there a way to do this with a flexbox?

    Blog preview card with HTML and CSS

    3
    Rabel•190
    @Rabelahmed
    Posted 11 months ago

    On the body element for your solution and congrats on completing the challenge

  • Aria Frost•50
    @R3Aria
    Submitted 11 months ago
    What specific areas of your project would you like help with?

    I can't seem to get it away from the top without using a margin/padding value, is there a way to do this with a flexbox?

    Blog preview card with HTML and CSS

    3
    Rabel•190
    @Rabelahmed
    Posted 11 months ago

    display: flex; align-items: center; justify-content: center; min-height:100vh;

    Try this on the parent element of your card component

    Marked as helpful
  • jl-stephenson•100
    @jl-stephenson
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    It was rewarding to learn more about, and implement, semantic HTML.

    More specifically, it was useful to wrestle with responsive images and be pushed to explore the picture element in HTML.

    What challenges did you encounter, and how did you overcome them?

    A general challenge is knowing how closely to stick to the exact specifications of the design vs creating more readable code that deviates slightly.

    It required some thought (and research) to work out which text elements made sense to be in h tags.

    The CSS file is quite bloated. I'm keen to explore methodologies for making CSS more organised and readable, and avoiding repitition as much as possible.

    What specific areas of your project would you like help with?

    Any suggestions for improvements in HTML / CSS!

    Solution with Semantic HTML, mobile-first workflow

    1
    Rabel•190
    @Rabelahmed
    Posted 11 months ago

    looks good

  • muhmd•170
    @unshreif
    Submitted over 1 year ago

    landing recipe page

    1
    Rabel•190
    @Rabelahmed
    Posted 11 months ago

    you should put all of your content in main or section element to separate it from the body element

    Marked as helpful
  • Luisa Fda. Ramirez•50
    @LuRamirezR
    Submitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    I decided to merge all the the platform projects into a single repository for better organization. Additionally, I implemented CSS concepts to establish the foundational design.

    What challenges did you encounter, and how did you overcome them?

    I encountered a challenge on GitHub when trying to link the folder to a new repository. I had to delete the .git folder that was created in the original project, and then I was able to properly initialize the local folder with the repository.

    What specific areas of your project would you like help with?

    I would appreciate feedback on the HTML semantics, the CSS code, and suggestions for improvement.

    Social links profile challenge

    1
    Rabel•190
    @Rabelahmed
    Posted 12 months ago

    maybe put list of links into an unordered list for better html semantics

  • Yogesh Nagar•40
    @yogesh2142
    Submitted 12 months ago

    BLONG PREVIEW CARD

    1
    Rabel•190
    @Rabelahmed
    Posted 12 months ago

    hello , your code looks goods but it is not centered. you can center your card component by using flexbox on it's parent element. try this code on the parent element of card component see if that solves it display: flex; align-items: center; justify-content: center; min-height:100vh;

  • P
    Jamie•180
    @jamiethomas1
    Submitted 12 months ago

    im just trying to get to the next thing jesus

    2
    Rabel•190
    @Rabelahmed
    Posted 12 months ago

    try again you got this

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub