QR code using HTML and CSS flex

Community feedback

• 

  Ahmed Kamel•1,190

  @hmadamkPosted about 2 years ago

  • make sure that all of your page is contained by a landmark examples of landmarks are

  header for the top section
  main for your main section
  section with aria-label to describe why you added this section
  footer for the bottom section
  
  

  Marked as helpful

  1

  ---

  

  Kaman Diwash Shrestha•20

  @KamanDShresthaPosted about 2 years ago

  @hmadamk Thank you for advising. Will definitely keep that in mind when building upcoming webpages.

  0
• 

  Tiago José•300

  @tiago-jv0Posted about 2 years ago

  Hello Kaman, great job solving this challenge !!!

  I saw your code and here are some tips in which you could follow to improve it :

  • Your site should have at lest 1 h1 semantic heading so that web crawlers and screen readers know what is the most important piece of content in your site, here's a detailed explain about H1 Tags
  • You should use more landmarks elements to improve your html markup, like section , main headeretc...
  • About the responsiveness part of your question, use you can use @media css feature to change your layout based on some media type and query feature, unfortunately i didn't see any @media in your code, but even tough your site hasn't any @media rule it is still responsive because you used mobile-first approach and it can be views from different screens, however, your site is not adaptative, the same layout on mobile is being presented in table and desktop, please use media queries to make your site more adaptative and improve the design of your solution in tablet and desktop views, you can learn more about media queries here : Media Queries
  • Using div is okay as long as you don't abuse it, before putting a div everywhere in your markup, always think if there is a better element to describe the content you want to put inside, divs are meaningless, if you put divs and spans elements everyone it won't help you with SEO and will make you site not acessible at all.

  Marked as helpful

  1

  ---

  

  Kaman Diwash Shrestha•20

  @KamanDShresthaPosted about 2 years ago

  @tiago-jv0 Thank you for the advice. I will check out media queries and try to implement them and landmark elements in upcoming projects.

  0
• 

  Leo•440

  @SouiciaPosted about 2 years ago

  Hello Kaman,

  Congratulation on finishing your first design!

  While this challenge can't make full use of CSS responsiveness, the fact that your design stays in the middle of the page when resizing proves that it does have the necessary responsiveness. So congratulation on that!

  To learn about CSS (responsiveness, media queries and later on, animation and the rest), they are a lot of resources on YouTube! FreeCodeCamp just released a full CSS tutorial of 11 hours! https://www.youtube.com/watch?v=OXGznpKZ_sA&t=1s&ab_channel=freeCodeCamp.org You can only watch the part you want to learn about, but you can't learn and review too much CSS haha! If you are more interested in smaller tutorials, you can check Kevin Powell, Web Dev Simplified, and others on YouTube that make smaller, more topic focused tutorials.

  Other than that, the CSS is pretty spot-on. The HTML could use a better tag usage however. You will want to use the main tag over the main part of your website, so it should be <main class="mainContent">...</main> and use a <h1> tag for your main title. Then, I also invite you to learn about the following tags: <header>, <nav>, <section>, <aside>, and some more. Following some project tutorials on YouTube should help you with those.

  If you have any questions, please reply me, otherwise I wish you a great day! :)

  1

  ---

  

  Kaman Diwash Shrestha•20

  @KamanDShresthaPosted about 2 years ago

  @Souicia Thank you for the advice. I will definitely check them out. I will also keep in mind to use appropriate tags in future projects.

  0