Skip to content
Submitted 3 months ago

Responsive Landing Page by CSS Flexbox

godsidux•50
@godsidux
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I want to prevent my self by repeating same code again. that means want to neat my coding.

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

Face some problems in list styling and table styling in css and I use stackoverflow for it.

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

I would like feedback on the overall design and responsiveness of the landing page, as well as suggestions for improving accessibility and code quality.

Community feedback

  • zh4r•150
    @zh4rPosted 3 months ago

    Close to the design, except for font-weights & colors and other nit-picky stuff, but overall good work.

    For accessibility, you can convert many of the unnecessary divs to semantic HTML elements. For example:
    div.main ––> <main>
    span#line-style ––> <hr>
    div.header ––> <header>
    You can also use <section> for the different sections of the document.

    There should only be one <h1> per page.

    You seem to be using id and class backwards:

    id: use unique ids for different parts of the page. Example:
    <section id="ingredients">
    <section id="instructions">
    This helps with accessibility and user experience. Read more about unique IDs here: Why unique ID attributes matter.

    class: you can make a class and apply it to all elements that need those properties. Example:

    You use <h1 id="title-style"> multiple times.
    Instead, you should make the "title-style" be a class, and apply it to the headings (also, make <h1> be an <h2>), so: <h2 class="title-style">.

    For better responsiveness, play around with rem, em and percentages, instead of px.

    I hope this is easy to understand and is helpful!

    Still pretty good work!

    Marked as helpful
    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