I definitely have a lot of redundant CSS. My workflow for this project was really weird and led me to designing each section one by one instead of finding matching elements. Also always looking for feedback on responsive design.
Mostly things to do with HTML.
Thank you very much.
I had an extremely difficult time trying to align the bulleted list how it's presented in the design. I never figured it out, would like some help figuring that out if anyone has suggestions.
What specific areas of your project would you like help with?Aligning the bulleted list to be centered, especially with the some of the texts needing to be bolded. I couldn't figure it out.
Very nice! I can see you put a lot of work into the responsiveness and it definitely looks great. I can also see that you have figured out the bullet list alignments as well. Sorry I can't provide much feedback, maybe you can add a 'role=main' class to your div wrapper to help out screen readers? :)
Most of proud of the sleekness of the page and the hover properties
What challenges did you encounter, and how did you overcome them?I had some issues with the padding around my buttons and properly selecting elements to ensure proper styling. I found in this case having the CSS in the same file as the HTML made it easier to see what elements and properties belonged to what.
What specific areas of your project would you like help with?I definitely would like to improve my CSS grid skills.
Great work with the design and hover properties! :D
If you want to use flexbox to center your container on the vertical axis you can add the following to your code:
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
Also, for accessibility and general user experience reasons, make sure you look out for colors that are super similar if they are overlapping on the design. For example, when you hover over your links the light green color is very similar to the white font color you have chosen. An easy way to fix this is simply also change the font color on hover -
.button:hover {
background-color: hsl(75, 94%, 57%);
color: black;
}
Good luck with your future projects! :D
Nice work! I enjoy how you set up the :root styling to allow flexible color changing throughout the website!
Most of the things that could be improved that I noticed when looking at your code relates to usability. For example - images should be provided 'alt' text to help with screen readers. Also, some containers should be provided with roles as well. Your 'container' class div should be given a 'role=main' property as it holds the main content on your webpage. This is also helpful for people navigating websites with screen readers. Good luck with future challenges!
This is my very first project with HTML and CSS. A small but exciting first step into the world of frontend development! ^^
What challenges did you encounter, and how did you overcome them?I wouldn’t say there were any major challenges, just some minor things that I asked ChatGPT about. Overall, this was a pretty easy task.
What specific areas of your project would you like help with?I’d like to make sure I’m on the right track with this. Does my CSS seem too bloated?
You did a very good job! ^^. In particular I think your semantic tags are well implemented and easy to read.
I did find some bloat in the CSS I believe. You should not have to apply flexbox properties to any of the .qr classes as you have applied it to the body and that they are all children of. That should remove some bloat from your CSS. Sorry for not being able to provide you with much more feedback, I am also very new to all of this. Good luck in your Web Dev journey! :-)
