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

Jurjen

@snhmibby90 points

Learning CSS & frontend dev.

Latest solutions

  • Mobile first. Grid with named areas in media query.


    Jurjen•90
    Submitted over 3 years ago

    0 comments
  • CSS Grid with named areas


    Jurjen•90
    Submitted over 3 years ago

    0 comments
  • Used CSS grid and relative positioning.


    Jurjen•90
    Submitted over 3 years ago

    0 comments
  • Used a grid


    Jurjen•90
    Submitted over 3 years ago

    0 comments
  • flex/grid approach


    Jurjen•90
    Submitted over 3 years ago

    1 comment
  • Trying to use grid


    Jurjen•90
    Submitted over 3 years ago

    1 comment
View more solutions

Latest comments

  • Spaceman-In-Disguise•20
    @Spaceman-In-Disguise
    Submitted over 3 years ago

    HTML, CSS, Responsive Web Design, Flexbox

    1
    Jurjen•90
    @snhmibby
    Posted over 3 years ago

    Hey, instead of div's, try to use the html semantic elements (https://www.w3schools.com/html/html5_semantic_elements.asp). In order to reduce the classes used, take advantage of the ordering/element selection capabilities of css. Or better, use SCSS stylesheets, so it's easy to put some hierarchy. Personally, I'd try to keep all layout related things in CSS and only content related stuff in the HTML. So instead of <div class="column", just nothing or a semantic element. and then specify a column layout with css.

  • Saima Sayed•50
    @Saima422
    Submitted over 3 years ago

    Order Summary Component build with react and react-bootstrap

    1
    Jurjen•90
    @snhmibby
    Posted over 3 years ago

    Hello! Some general observations

    • you can add node_modules in .gitignore and only leave json config files. The node_modules directory is so huge github won't even display all of it.
    • If you go all the way to make a component, don't hardcode the order-values but have them passed in as parameters to have practice in building a reusable web component.
    • you have a .scss file, but your code is mostly plain .css. Sass is great because the hierarchy of your styles can mimick the hierarchy of your HTML, which greatly improves read- and understandability.
    Marked as helpful
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