Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
6
Comments
2

Manuel Fernando Gallego Arias

@mgallegoaMedellin - Colombia120 points

Full-Stack dev - Architect

Latest solutions

  • Responsive, movil first, fonts variants, Fylo landing page using BEM

    #bem#accessibility

    Manuel Fernando Gallego Arias•120
    Submitted 9 months ago
    1. Fonts size for the heading and pharagraps.
    2. Do I use correct flex and/or grid? why?
    3. Do I use correct BEM naming?

    1 comment
  • Responsive and validation form sing up

    #accessibility#bem

    Manuel Fernando Gallego Arias•120
    Submitted 9 months ago

    0 comments
  • Responsive card with social links using grid and css

    #accessibility

    Manuel Fernando Gallego Arias•120
    Submitted 9 months ago

    1 comment
  • Responsibe, mobil first, font size wroud, BEM, CSS, HTML

    #accessibility#bem

    Manuel Fernando Gallego Arias•120
    Submitted 9 months ago

    Accesibility


    1 comment
  • Responsive landing page using Grid

    #bem#accessibility

    Manuel Fernando Gallego Arias•120
    Submitted almost 3 years ago

    1 comment
  • Using plain html and CSS with BEM standard

    #bem

    Manuel Fernando Gallego Arias•120
    Submitted over 3 years ago

    0 comments

Latest comments

  • Stefan Bojkovski•720
    @xStephx
    Submitted 10 months ago

    Solution Fylo dark theme landing page

    #tailwind-css
    10
    Manuel Fernando Gallego Arias•120
    @mgallegoa
    Posted 9 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
  • yookateoh•220
    @dhdbrud318
    Submitted almost 3 years ago

    Sunnyside agency landing page

    1
    Manuel Fernando Gallego Arias•120
    @mgallegoa
    Posted almost 3 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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub