sorin7345โข 50
@sorin7345
Submitted
Lots of thanks to everyone reviewing or checking my work and a big thumbs up for the community.
Angela Moore
@Cyber-Chic
All comments
- Angela Mooreโข 160
@Cyber-Chic
Posted
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
@Ademolaolas18
Submitted
The whole process went well without stress, it's my first time working on front-mentor challenge and its so soft and amazing.
Angela Mooreโข 160@Cyber-Chic
Posted
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
@Wali1209
Submitted
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.
Angela Mooreโข 160@Cyber-Chic
Posted
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 - Dominic Eweโข 10
@sneakynicky
Submitted
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?
Angela Mooreโข 160@Cyber-Chic
Posted
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 - devAeloโข 30
@devAelo
Submitted
Can you give me some feedback i'm a beginner thank you!
Angela Mooreโข 160@Cyber-Chic
Posted
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 -
- Rafael Nunesโข 30
@RafaelNunesg
Submitted
all feedback is welcome thank you in advance.
Angela Mooreโข 160@Cyber-Chic
Posted
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
@sdmatias
Submitted
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?
Angela Mooreโข 160@Cyber-Chic
Posted
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 - Bruno Fioriโข 20
@BrunoSFiori
Submitted
Angela Mooreโข 160@Cyber-Chic
Posted
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โข 160
@Cyber-Chic
Submitted
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
Angela Mooreโข 160@Cyber-Chic
Posted
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
