Skip to content
Submitted over 4 years ago

Responsive landing page using CSS Grid/Flexbox and Media Querries

Mindaugas Jocevicius•70
@MindaugasJ88
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Clipboard landing page
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hi, frontend community,

I had completed my first junior project. I think I managed to complete it fully, yet I know I can improve in a lot of areas. I will appreciate if you could review and answer my questions:

  1. How my HTML structure could be improved? Mostly I separated all website into several divs and made divs inside divs and there I put all the content (text, img etc..)
  2. How can I minimize the CSS code? Now I managed to style the website according to desktop and mobile images, but I used a lot of code, a lot of margins, width's for different elements and divs. Also a lot of code in media querries.
  3. How can I improve in making responsive design? Now mostly I had used CSS Grid and mediabreakpoints and I used it in different divs. Do you see more efficient solutions?

Community feedback

  • Roman Filenko•3,335
    @rfilenkoPosted over 4 years ago

    Hey, your solution looks really good, there some issues you can easily fix:

    • write more semantic tags, don't just use divs (header, main, section, ul, etc);
    • add some hover effects on links, buttons, transition for smooth change;
    • reset browser's default styles;
    • if you need to add img as background, use background property for that, like with header-bg.
    • create a div as .container with max-width and center it, so you can apply it multiple times;
    • social icons probably should b icons as well.

    Cheers, Roman

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord