Skip to content
OverviewSolutions
6
Comments
2
Manuel Fernando Gallego Arias
@mgallegoa

All comments

  • Manuel Fernando Gallego Arias•120
    @mgallegoaPosted about 2 months ago

    Hi @xStephx,

    Good challege solution and excelent responsive design, I get valious trick looking in your code.

    I didn't work with Tailwind CSS before, glad to heard your thought about the experience in this challenge.

    Just few comments:

    1. If you like the design match perfect with the page (and don't have the Figma values) you can use PerfectPixel extension to match the design with my page, it help me a lot (chrome-extension://dkaagdgjmgdmbnecmcefdhjekcoceebi/settings.html), hoping you too.
    2. Solving this challenge, I learned about FontVariants to improve the file size of fonts and, in fact, improve the site speed, this is a good video from Chrome dev https://www.youtube.com/watch?v=jO8iVc4hEe8&t=27s
    3. I am not sure if it is a good idea to put the "<!-- Intro Section Curvy Illustrations -->" div out of the main, it brocke the html5 structure. Glad to heard you about this.

    Glad if you shot me in: https://www.frontendmentor.io/solutions/responsive-movil-first-fonts-variants-fylo-landing-page-using-bem-0zXUsDuNi0

    :)

    Marked as helpful
    1
  • Manuel Fernando Gallego Arias•120
    @mgallegoaPosted about 2 years ago

    Hi @dhdbrud318,

    Great job with this challenge!!!! loved the sticky menu :)

    Here are some points to consider for improvement, hope help to learn:

    1. I notice a little diference between the designd and the result, exist a lot of tools to solve this. I use the chrome extension PerfectPixel by WellDoneCode if you like to take a look.
    2. For the naming of the stiles you can use a standard. I use BEM convention (https://en.bem.info/methodology/css/) just for CSS.
    3. For accessibility the links should be work with an anchor <a>, there are a lot of user that just navigate in the pages with the keyboard.
    4. The accessibility issues reported for the front end mentor, could be solved adding a <h2> sub title and hide it with CSS display: none. This allow to some screen reader to direct the user in the section or article.
    Marked as helpful
    0