Mobile First Responsive Landing Page using HTML and SCSS

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Hi @fidellim

  This looks good previewing on mobile 👍

  I have some suggestions for improvements for your code, I hope you find them helpful

  • look up how to write good alt text on images. If it deserves a description, it needs to describe the image a bit better, otherwise no description
  • register button would most likely trigger navigation. Therefore you should be using anchor tag, not button
  • social media icons on a site have purpose. They should be wrapped in anchor tags as they too would trigger navigation. These links would need to have aria-labels with the name of the social media too. It's a good rule of thumb that if something is changing color in a design or designed to be clicked on in some way, it should use an interactive element.
  • don't forget to add visible focus states to interactive elements too. That's really important for keyboard users.
  • in css you are nesting selectors really deep. This is considered bad practice as it increases specificity of each selector and will make things really hard to style on bigger projects. Try to use single class selectors as much as possible.
  • the gap property isn't fully supported yet for flexbox in all browsers so be careful using it. I would be using margins instead for now (and then css would be shorter too, as no need for block elements to be displayed as a flex column). Alternatively, you may like to try css grid for this layout, as it is 2 dimensional and gap is fully supported with css grid.
  • in media queries you only need to override specific properties that are different to the base styles. It looks like you are repeating a lot that doesn't need repeating.

  Good luck

  1

  ---

  

  Fidel Lim•2,775

  @fidellimPosted over 3 years ago

  @grace-snow thank you so much for that detailed report! I will surely have a look at these again and apply them in the next challenges.

  0
• 

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  It looks good you did the challenge pretty good I have a different take on the transitions maybe if you look at you yours in a browser dragging the window between desktop and mobile and them look at mine then you can see two different strategies at play. I am trying to keep the elements in the transition from mobile to desktop not growing bigger than the desktop elements during the transition https://palgramming.github.io/Frontend_Mentor_Challenges/huddle_landing_page_single_introductory_section/index.html

  1

  ---

  

  Fidel Lim•2,775

  @fidellimPosted over 3 years ago

  @palgramming ohhhh okokkk. You're solution looks good as well! How long have you been learning front-end? If you don't mind me asking.

  0

  

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  @fidellim well not just frontend but programming in general seriously about 2 years. I did stuff back in early 2000s back when all the layout was tables and every time you wanted to make a design you made images and then sliced them into pieces for the web. Then I took a big break from programming and did other things and now I have come back to programming in general

  0

  

  Fidel Lim•2,775

  @fidellimPosted over 3 years ago

  @palgramming oh wowww! anyways thanks for the feedback and good luck on your journey with programming :)

  0