Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
7
Comments
9

Mohammed Majd

@MajdMohammedMorocco120 points

A 26yo man, interested in different technologies.

I’m currently learning...

CSS and HTML

Latest solutions

  • Responsive layout using CSS Grid and Media Queries


    Mohammed Majd•120
    Submitted about 1 year ago

    When to use certain untis like em. How can I calculate the dimensions in the design so I can clone it better.


    1 comment
  • Responsive layout using CSS Grid and Media Queries


    Mohammed Majd•120
    Submitted about 1 year ago

    I think I still need to practice a lot for a better understanding of the CSS grid layouts


    1 comment
  • Product Preview Card Component | Responsive Design

    #accessibility

    Mohammed Majd•120
    Submitted about 1 year ago

    I need help in different areas, to be honest. I only know a bit about each area ^^


    1 comment
  • Simple code

    #accessibility

    Mohammed Majd•120
    Submitted about 1 year ago

    probably how to work with Sass? I am willing to learn more about it.


    1 comment
  • Accessible and Responsive design

    #accessibility

    Mohammed Majd•120
    Submitted about 1 year ago

    Please review my work. Any feedback is welcomed.


    1 comment
  • Simple Responsive Design

    #accessibility

    Mohammed Majd•120
    Submitted about 1 year ago

    The areas i need help with HTML/CSS structures, using proper CSS units in the right place, get good score in the lighthouse, responsive designs. I think All I need is tones of practice on different type of projects.


    1 comment
View more solutions

Latest comments

  • agnese•360
    @aggie-l
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?
    What challenges did you encounter, and how did you overcome them?
    What specific areas of your project would you like help with?

    I would be happy for any feedback! Thank you :)

    Testimonials grid section using CSS Grid and Flexbox

    2
    Mohammed Majd•120
    @MajdMohammed
    Posted about 1 year ago

    I like your solution, It's short and pretty close to the design.

    Some feedback:

    • You could give your HTML structure a meaning by using Section, Blockquote with two P inside for the quotes.
    • It's better to use rem for media queries, because px doesn't scale well with user preferences for larger text sizes.

    I hope you find this useful. Happy coding!

    Marked as helpful
  • Arcloan•770
    @Arcloan
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    .

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

    Setting the right dimension for the main container.

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

    If anyone has any suggestions in general or regarding the sizing of the main box, that of the element, it will be really appreciated. Thank you :)

    Four card feature section

    1
    Mohammed Majd•120
    @MajdMohammed
    Posted about 1 year ago

    Some feedback:

    • I noticed that you don't use semantic elements, it helps the browser to understand better your HTML structure.
    • h1 instead of h2 will be nice for a proper HTML structure.
    • The font size is too different than the font size on the design given, try to set an accurate font size
    • For the headers inside the cards try to use h2 instead of div, to give your structure a meaning
    • sometimes using main as container and section as child container is way better than using div.
    • your shadow box looks too different, it needs to be a bit closer to the design

    I hope my feedback is useful Happy coding !

    Marked as helpful
  • Omlan•110
    @omlan99
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Can not think of anything right now. Any suggestion will be appreciated.

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

    Nothing as such.

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

    I had approached for mobile design first and used rem as unit this makes mobile version accurate to design but faced difficulties on desktop version to be accurate.

    Product Card

    #sass/scss#accessibility
    1
    Mohammed Majd•120
    @MajdMohammed
    Posted about 1 year ago

    Nice work, But I noticed that the button element is no longer having full width when resizing the screen.

  • booirng•60
    @booirng
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    learning about positions and psudo elements . Semantic html.

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

    creating bullet points and number listing with default color. That was challenging for me. OpenAI helped me solve that as always.

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

    responsive html and css layout and creating layout with flexbox.

    Recipe Page

    1
    Mohammed Majd•120
    @MajdMohammed
    Posted about 1 year ago

    the design is not responsive, as the nutrition list, and some other elements.

  • Amit-Mahi•60
    @Amit-Mahi
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    working with padding and margin.

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

    working with Links and text decoration

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

    overall was fine. any good practices would help.thanks

    Social Link Profile Preview

    #accessibility
    1
    Mohammed Majd•120
    @MajdMohammed
    Posted about 1 year ago

    Hey, I am a beginner too but I have some advice.

    Some feedback:

    • Use a list for the links.
    • Try to not use width in percentage
    • this challenge does not need media queries for a responsive design
  • Fish Ladder•140
    @fish-ladder
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of feeling more comfortable with Flexbox and not needing to look at the documentation so much to achieve the layout I was after.

    Next time I will add font-sizes in rems as custom properties in :root to make text scaling easier.

    What challenges did you encounter, and how did you overcome them?
    1. I thought I had completed the challenge and then realized the font sizes were different in desktop vs mobile layout (should have read the instructions more closely). I needed to revisit my font-size units in order to scale them for the different display sizes.

    2. Using Flexbox and auto margins to horizontally and vertically center the main card worked great except that it shoved the attribution element out of view at the bottom of the page. I fixed this by applying auto margins to the attribution element as well.

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

    How can I better organize my CSS code to make it cleaner?

    Blog Preview Card with Flexbox and em units for font-size scaling

    #accessibility
    1
    Mohammed Majd•120
    @MajdMohammed
    Posted about 1 year ago

    Nice work, I like how your code structured.

View more comments

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