Skip to content
Submitted 4 months ago

Responsive landing page using flexbox

adriantech-beep•390
@adriantech-beep
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social links profile
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I'm proud that my css flexbox always work with this kind of project. maybe i'll try another styling next time.

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

I encountered having trouble with the image and also the favicon. it won't show on the website. But i managed to restore it.I will double check the location of the files next time.

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

I think i used a lot of div elements.Please tell me what to do to make it better.

Community feedback

  • Boris•2,850
    @mkborisPosted 4 months ago

    Nice work adriantech-beep, you are right It's not good practice to wrap every element in div because divs aren't semantic. Here's how you can make it better

    • All content should be wrapped within landmarks. Wrap a main tag around .container.
    • This isn't a form, a form would typically include elements like input, textarea, or button for user input. You could use a div instead of form.
    • For the .navLinks use unordered list for better semantics and accessibility ul instead of divs and wrap each a in li.
    • It's best practice linking Google fonts directly in the HTML head section rather than directly in your CSS file as it enables asynchronous downloading, improving page load times.
    • Media queries, font-size should be defined in rem not px

    Hope this helps

    Marked as helpful
    0
    adriantech-beep•390
    @adriantech-beepPosted 4 months ago

    @mkboris Thank you so much for this. It's a great advice for me as a newbie. I will apply this tips on my next challenges and also try to redo my solution.

    1

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