@derekschatz
Nicholas Anich
@NicholasAnichAll comments
- @NicholasAnich
Hey! 🤗
I'd highly suggest looking at flexbox or grid!
If I were to pick one for this project I'd recommend flexbox.
In simplified terms... Flexbox allows you to group certain items like a container and control the children elements inside the container. :D
Just look up flexbox on youtube and bam!
- @Bisratworku@NicholasAnich
Hello! 🤗 First off, great job so far!
Noticed you're using max-width for media queries, which is fine. However, doing media queries I've found it's easier to do a mobile first approach and use min-width.
example:
@media (min-width: 37.5em) { // do something for tablet here... } // 600px(screen size) / 16px (root font-size)
https://css-tricks.com/a-complete-guide-to-css-media-queries/
I know it can be preference but the big take away is sometimes you don't have to style as much for mobile as you would with other screen sizes since it's already responsive. Again, max-width (You could even use both!) is fine but you'll save yourself a ton of work by doing a mobile first approach. 😋
Also, I noticed you're linking these huge font files with many weights when you only need 3. Only pick the font weights needed for the project to reduce file size unless you're trying to have it be a variable font.
This is all you need really for the project specs:
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800&family=Open+Sans&family=Poppins:wght@400;600&display=swap" rel="stylesheet">Anyways, sorry for the long comment. Great job and keep it up! :D
- @SelvedinFrontEnd@NicholasAnich
Yo, Great job so far!
The Eye part was really tricky, If I could give you a hint, the image could have multiple layers. Perhaps the main image could just be a background image of sorts and then you could come in with some absolute positioning making sure the eye is at a certain z-index. :D
You got this, almost there!
Marked as helpful - @fnwork@NicholasAnich
Hey, Happy Holidays! Awesome job so far! This one definitely seems tough. If I could give any tips and maybe you've already heard about it but there's a great extension called "axe Devtools" (made by deque I believe) that helps scope out accessibility issues! You can have it scan your page and it'll give you suggestions on accessibility and how to fix them! :D I swear I don't work for them lmao.
I'm still workin on my chops too but that tool is great! Anyways keep up the good work!
Marked as helpful
