Skip to content
Submitted over 4 years ago

Fylo landing page, fully responsive using flexbox, vanilla html/css

Bo Allan Johansen•350
@boallan
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Fylo landing page with two column layout
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

I've been fiddling with this project for a while, refactoring it several times, cramming as much learning into it as possible. Started desktop-first, converted to mobile-first, and later added some breakpoints to make it responsive.

I've used px values. Thought about redoing it but decided to keep it for now and then learn about relative units in my next challenge. Preprocessors and frameworks are also subjects for a future challenge.

** My first challenge, any and all feedback is appreciated **

  • I've redone the class-names many times, but they still feel a bit clunky. BEM-inspired. Are they understandable? Can they be optimized?
  • HTML semantics, am I using the right tags? Can it be simplified?
  • css file structure, does it make sense?
  • Is the way I handle media queries somewhat meaningful? (There are a lot!)

Or anything else you can think of, from the minor details to the major blunders.

Community feedback

  • Ramsay Sewell•585
    @ramsaysewellPosted over 4 years ago

    Hey Bo Allan,

    I love this solution, you've earned my bookmark :D

    Here are my comments on the bullet points that you've listed:

    • the class-names are self explanatory and easy to understand. I would recommend looking into using SCSS for the BEM classes, this will save you a lot of typing.
    • In a few cases with <article> tags, I would swap them with sections. Think of the difference between them to be a section containing articles of information.
    <section class="blog">
  <article class="blog-post"></article>
  <article class="blog-post"></article>
  <article class="blog-post"></article>
</section>
    • Again, I would look into SCSS/SASS
    • I noticed you set body to a width of 375px, I wouldn't advise setting body to a specific width ever in the css.

    I hope this helps you out somewhat, let me know with a reply or in Slack if you need any help :)

    Happy coding and congrats on your first challenge!

    2
    Bo Allan Johansen•350
    @boallanPosted over 4 years ago

    @ramsaysewell

    Thanks for the feedback :)

    The width is a leftover of my initial mobile-design. I'll definitely be using relative values for my next project.

    I'll look into SCSS/SASS, if not for the next challenge, then soon :)

    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