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

Intro section with dropdown navigation

Daniel 160

@DanoSvK

Desktop design screenshot for the Intro section with dropdown navigation coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello,

so I finally finished this challenge after some struggle mainly with CSS. I would like to ask you about your opinion and also some advice. I feel like I am overengineering especially CSS. How can I learn to make code cleaner and more logical without trial and error? Also, how can I learn to create better layouts? I feel like I keep struggling with these 2 things.

Thanks for any advice and opinion

Community feedback

David 8,000

@DavidMorgade

Posted

Hello, congratulations on finishing the challenge!.

I will throw you a few tips that helped me a lot improving my CSS and making me write less and getting the same results.

1 - Try to use a methodology like BEM, this are conventions on writing classes than can organize your code much better, every time you have a child of a parent, you define it with the name of the parent, two underscores, and the name that you want for example:

header header__heading header__text header__container main main__image main__paragraph main__prize main__prize--discounted

You can learn a lot about BEM here.

2 - Start using pre-processors like SASS or LESS, with this you can write CSS but with super powers, having indentation, variables, mixins... seriously, learning a preprocessor will boost your CSS skills by A LOT.

3 - Was going to say that you should learn Grid and Flexbox too, but you are using both of them in the project, so keep improving those skills building more complex layout, there are a few here on frontendmentor that can help you improve a lot.

4 - Try to improve your semantic html, for example, use a image instead of a div with a background image, because for example in this case fits more properly a directly html image. Use sections and articles instead of divs, for example, in this project the left side with the heading and the text, can be clearly a section instead of a div.

Well but anyway, your project looks pretty neat and is quite responsive so you dont have to worry, just take those projects that have complex layouts to improve your skills.

Hope my little tips helps!

Marked as helpful

1

Daniel 160

@DanoSvK

Posted

@DavidMorgade ´Thanks, I will definitely try to solve more complex layout challenges and I will definitely check BEM. Regarding SASS I have to practice it mote I guess, I feel like I am not efficient enough with it yet.

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