All comments

• 

  sorin7345•50

  @sorin7345Submitted over 1 year ago

  Lots of thanks to everyone reviewing or checking my work and a big thumbs up for the community.

  

  Beginner-QR-Code-challenge-using-basic-HTML-and-CSS

  3

  50
  

  Angela Moore•170

  @Cyber-ChicPosted over 1 year ago

  Wonderful job completing your first challenge! 😊

  In addition to the other feedback you've received for this challenge, I have a few more recommendations:

  • There are games you can play to learn how to center content. I suggest trying Flexbox Zombies, Froggy Flexbox and Grid Garden. All 3 of the games are free.

  • Change your background color. You used a slightly different color. To do this I would change your code from:

  background-color: #c4e4e9;
  

  to

  background-color: hsl(218, 44%, 22%);
  

  • Add a <h1> element to your code. All sites should include a minimum of one <h1> element to indicate the the most important (or highest-level) heading on a page.

  • Add a <main> tag around the main content on your webpage. All web pages should include one <main> tag. This is a semantic HTML element that defines the main content on a page such as primary sections, text, articles, etc.

  Example:

  <main>
    <div class='container'>
      <h1>Main heading text</h1>
      <p>paragraph text</p>
    </div>
  </main>
  

  I hope this is helpful! Great work & Happy Coding!

  -Angie

  Marked as helpful

  0
• 

  OLASUNKANMI•20

  @Ademolaolas18Submitted over 1 year ago

  The whole process went well without stress, it's my first time working on front-mentor challenge and its so soft and amazing.

  

  A Div tag as a container using Css display block

  1

  50
  

  Angela Moore•170

  @Cyber-ChicPosted over 1 year ago

  Wonderful job completing your first challenge! 😊

  I have some recommendations that may improve your site:

  • Change your background color. You used a slightly different color. To do this I would change your code from:

  background-color: #e7ebf9;
  

  to

  background-color: hsl(218, 44%, 22%);
  

  • Add a <h1> element to your code. All sites should include a minimum of one <h1> element to indicate the the most important (or highest-level) heading on a page. To fix this, you could change your <h4> element to an <h1> element.

  • Add a <main> tag around the main content on your webpage. All web pages should include one <main> tag. This is a semantic HTML element that defines the main content on a page such as primary sections, text, articles, etc.

  Example:

  <main>
    <div class='container'>
      <h1>Main heading text</h1>
      <p>paragraph text</p>
    </div>
  </main>
  

  • Your code does not look formatted. Formatting your code can make it easier to read. You can format your code using an automatic code formatter such as Prettier · Opinionated Code Formatter.

  I hope this is helpful! Great work & Happy Coding!

  -Angie

  Marked as helpful

  0
• 

  Muhammad Wali•210

  @Wali1209Submitted over 1 year ago

  While building this project I faced some difficulties but I found answers to them online except one! After I download the project I wanted to install "Vite" to my project but was unable to do that. So my question is how can we install "Vite" to an existing project?? and that's it.

  

  QR-Code-Component Using React, TypeScript, HTML, styled-components

  2

  40
  

  Angela Moore•170

  @Cyber-ChicPosted over 1 year ago

  Great job starting your project! 😊

  I have not used Vite and am not sure if this is the information you're looking for, but I think my suggestion may be able to help you:

  I build all of my projects with StackBlitz. You link it to your GitHub account then select the type of project you are trying to create. I select the option to create a Static HTML page, but there are many other options to select including Vite. Your project starts with all of the folders you will need. For example, my Static HTML project starts of with a built in style-sheet, Index folder, JavaScript folder and a second HTML page. Once you are done you can instantly upload your project to GitHub. Additionally, you can also instantly upload your current GitHub Repository to StackBlitz and edit it there. It's a free site that's really easy to use and has helped me immensely.

  Hope this is helpful! Happy coding!

  -Angie

  Marked as helpful

  1

  This comment has received 7 repliesShow
• 

  Dominic Ewe•10

  @sneakynickySubmitted over 1 year ago

  I had difficulty in trying to figure out how to tackle the solution. Overall I think I did it okay, but the solution I thought of seems to be fairly hacky probably because I am inexperienced.

  How should I go about learning CSS concepts, applying and using them to solve real world problems? What are some best practices I should also implement throughout my learning?

  

  QR-Code-Component Challenge

  5

  80
  

  Angela Moore•170

  @Cyber-ChicPosted over 1 year ago

  Your solution looks awesome! Great job completing your first challenge! 😊

  I have a one more recommendation that may improve your site:

  • Add a <h1> element to your code. All sites should include a minimum of one <h1> element to indicate the the most important (or highest-level) heading on a page.

  I hope this is helpful! Happy Coding!

  -Angie

  1

  This comment has received 1 replyShow
• 

  devAelo•30

  @devAeloSubmitted over 1 year ago

  Can you give me some feedback i'm a beginner thank you!

  

  Qr code components solution

  4

  70
  

  Angela Moore•170

  @Cyber-ChicPosted over 1 year ago

  Wonderful job completing your first challenge! 😊

  I have a few small recommendations that may improve your site:

  • Add an alt attribute to your code. Alt attributes are required for all non decorative images on a website. The QR code on your site will be scanned. This means that the image is not considered decorative and will require a description. To fix this you could add the following to your <img> tag alt="QR code to frontendmentor.io"

  • Add a <main> tag around the main content on your webpage. All web pages should include a <main> tag. A <main> tag is a semantic HTML element that defines the main content on a page such as primary sections, text, articles, etc.

  Example:

  <main>
    <div class='container'>
      <h1>Main heading text</h1>
      <p>paragraph text</p>
    </div>
  </main>
  

  I hope this is helpful! Great work & Happy Coding!

  -Angie

  Marked as helpful

  0

  This comment has received 2 repliesShow
• 

  Rafael Nunes•30

  @RafaelNunesgSubmitted over 1 year ago

  all feedback is welcome thank you in advance.

  

  qr-code-component-main solution using HTML and css

  3

  60
  

  Angela Moore•170

  @Cyber-ChicPosted over 1 year ago

  Your solution looks awesome! Wonderful job completing your first challenge! 😊

  I have a few small recommendations that may improve your site:

  • Add a <h1> element to your code. All sites should include a minimum of one <h1> element to indicate the the most important (or highest-level) heading on a page. To fix this, you could change your <h2> element to an <h1> element.

  • Add an alt attribute to your code. Alt attributes are required for all non decorative images on a website. The QR code on your site will be scanned. This means that the image is not considered decorative and will require a description. To fix this you could add the following to your <img> tag alt="QR code to frontendmentor.io".

  I hope this is helpful! Great work & Happy Coding!

  -Angie

  Marked as helpful

  0
• 

  Mati•30

  @sdmatiasSubmitted over 1 year ago

  Leave me your opinion about my solution to this challenge. Do you think I could have done it differently? What would you change to my code?

  

  Responsive landing page with HTML CSS Flexbox

  2

  60
  

  Angela Moore•170

  @Cyber-ChicPosted over 1 year ago

  Your solution looks awesome! Wonderful job completing your first challenge! 😊

  I have one small recommendation that may improve your site:

  • Add a summary to your alt attribute. The QR code on your site will be scanned. This means that the image is not considered decorative and will require a description. To fix this you could change your code from alt=" " to alt="QR code to frontendmentor.io".

  I hope this is helpful! Great work & Happy Coding!

  -Angie

  Marked as helpful

  1

  This comment has received 2 repliesShow
• 

  Bruno Fiori•20

  @BrunoSFioriSubmitted over 1 year ago

  

  QR-code-component-solution

  4

  70
  

  Angela Moore•170

  @Cyber-ChicPosted over 1 year ago

  Your solution looks awesome! Great job completing this! 😊

  I have a few small recommendations that may improve your site:

  • Add a <h1> element to your page. All sites should include a minimum of one <h1> element to indicate the the most important (or highest-level) heading on a page.

  • Add alt text to your QR code image. Alt text is used to describe images on a website. My recommended description for this is alt="QR code to frontendmentor.io"

  I hope this is helpful! Happy Coding!

  -Angie

  0
• 

  Angela Moore•170

  @Cyber-ChicSubmitted over 1 year ago

  This is my second challenge on Frontendmentor.io!

  I was able to complete the desktop design, but was not sure how to use @media to switch the background wave image on mobile. Any suggestions or additional feedback regarding how to improve my site would be greatly appreciated.

  Thank you!

  -Angie

  

  Order Summary Component Using Flexbox

  3

  70
  

  Angela Moore•170

  @Cyber-ChicPosted over 1 year ago

  I also noticed that my uploaded designs looks much bigger when I'm editing them, but then look significantly smaller once I post my solution. Any tips for making sure that I size these correctly?

  Thanks!

  -Angie

  0