@ApplePieGiraffe
Posted
Hi, Lucas 👾! 👋
Nice to see you complete another challenge! 😀 Fantastic work on this challenge! 🙌
You've also been doing an amazing job giving feedback to the community! Keep it up! 🤩
After taking a look at your solution, here are a few things I'd like to suggest,
- Most of the content of the page should be contained within the
mainelement (with the exception of theheaderandfooterelements). All of thesectionelements that you have outside of themainelement can be moved to be inside it. - There is no need to use an
articleelement within the "Keep track of your snippets" section because that is not a self-contained element identified by a heading. A simpledivshould be fine inside there. (The same goes for other sections of the site similar to this.) - The items inside the "Keep track of your snippets" can be
lielements contained within aul(because those are a list of features). - I would suggest perhaps using flexbox to center things more often than using auto margin. I find that working that way often to be easier and it allows you to save margin for adding specific amounts of space around things. (That is, unless you are working with large containers that have lots of elements inside them. Using auto margin to center those containers works rather nicely.)
- Setting the
alttext for the icons in the "Supercharge your workflow" section to be an empty string so that it will be ignored by screen readers. That’s because those elements aren't necessary or important to the content of the page and as a result doesn’t need to be read by screen readers. This will make it easier for user who use those tools to navigate your page. - Adding some more descriptive
alttext to the logos near the bottom of the page (just something simple like "Hewlett Packard logo" instead of just "hp". That’s becausealttext is read by screen readers to describe images to users, so it’s important to writealttext that makes sense and will give users a good sense of the content and purpose of an image. - Turning the social media icons in the footer of the page into links by wrapping each of them in a link tag.
If you have any questions, let me know! 🙂
Hope you find this helpful. 😊
Keep coding (and happy coding, too)! 😁
Marked as helpful
@ApplePieGiraffe
Posted
Also, your CSS file is a bit long! 😅
For your next project, consider looking into using a preprocessor such as Sass. It'll add superpowers to your CSS (through features like nesting and functions) and also allow you to split your styles into multiple files which will help reduce the number of styles you have and make writing and organizing CSS a little easier (or much easier for large projects).
Marked as helpful
@ApplePieGiraffe
Posted
And btw, where is the Easter egg? I tried to find it but maybe I'm blind! 😆
Marked as helpful
@correlucas
Posted
@ApplePieGiraffe the computer on hover in the hero section 😂
@correlucas
Posted
@ApplePieGiraffe Hey Josh 😃
The main should wrap all the content except header and footer? I was thinking main should be used in the main block of content like the hero section and etc. I’ll fix it so. Also the article issue I was thinking was correct placed. Can you point me some material where i get explanation for these tags?
About the SASS is really something I want to study, I’m going fast in this last 5 challenges to finish all html-css challenges with Vanilla CSS-Html to study other stuff as JS, Frameworks and SASS. Do you think the way I did creating classes for paddings that repeat across the page were wrong?
Thank you for the time spent writing the feedback I appreciate that.
@ApplePieGiraffe
Posted
@correlucas
Hey, Lucas!
Sorry, for my late reply!
Here's a very good article on how to use semantic HTML. It'll explain tags like main, article, section, and more and when to use them. 😉
Creating utility classes for stuff like padding isn't a bad idea, but it would be good to use rem instead of px so that those padding values will scale with the font-size of the page (which is a good for accessibility).
Best of luck with the your next challenge!
@ApplePieGiraffe
Posted
@correlucas
Haha, I see that Easter egg (and the goal you're going for)! 😂 Keep it up! 😉
