Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive landing page (CSS Grid/VueJS)

P

@JamesLaviron

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I'm proud of the way I used grids.

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

I was challenged by grids and how to make it responsive with less code than I used to use.

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

With anything you think could have been done better. Any advice and feedback is good :)

Community feedback

@TedJenkler

Posted

Hi @JamesLaviron,

Nice project! Here are a few suggestions to enhance your work:

Minimize <div> Usage: Try to reduce the use of <div> elements to improve accessibility and SEO. Many of your <div>s could be replaced with a parent element using display: flex and flex-direction: column to stack them vertically. This will help simplify your code and make it cleaner.

Use Semantic Elements: While <section> and <article> are useful, overusing them can sometimes make your code less clean. Balance their use with more flexible layout approaches to keep your code tidy.

Headings and Responsiveness: Good job with the headings and ensuring the project is responsive and visually appealing!

Keep up the great work!

Best, Teodor

Marked as helpful

0

@SvitlanaSuslenkova

Posted

It's better to add background-color to the body here, not to the main. Hope you found this comment helpful :)

Marked as helpful

0

P

@JamesLaviron

Posted

@SvitlanaSuslenkova Any feedback is great but can you explain why or give me a link?

0

@SvitlanaSuslenkova

Posted

@JamesLaviron your backgrond-color ends earlier then my screen (it's not 100vh), I have white stripe without background when I see your project

1

Please log in to post a comment

Log in with GitHub
Discord logo

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