Lots of thanks to everyone reviewing or checking my work and a big thumbs up for the community.
Angela Moore
@Cyber-ChicAll comments
- @sorin7345Submitted over 1 year ago@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 helpful0 -
- @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.
@Cyber-ChicPosted over 1 year agoWonderful 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 helpful0 - @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.
@Cyber-ChicPosted over 1 year agoGreat 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 helpful1 - @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?
@Cyber-ChicPosted over 1 year agoYour 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 - @devAeloSubmitted over 1 year ago
Can you give me some feedback i'm a beginner thank you!
@Cyber-ChicPosted over 1 year agoWonderful 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 helpful0 -
- @RafaelNunesgSubmitted over 1 year ago
all feedback is welcome thank you in advance.
@Cyber-ChicPosted over 1 year agoYour 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 helpful0 -
- @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?
@Cyber-ChicPosted over 1 year agoYour 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 helpful1 - @BrunoSFioriSubmitted over 1 year ago@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 -
- @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
@Cyber-ChicPosted over 1 year agoI 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