I decided to brush up on front end raw coding and try some of the challenges that were not in the curriculum when I went through it the first time.
I’m glad I did because I’m learning and reinforcing a lot. But I feel like design/css is still a weak point even after years…but getting better.
What would you suggest to help the 2nd half of this product page (the 3 boxes at the end) make a better visual impact?
Also I would appreciate any feedback on the elegance of my CSS code, or lack thereof. It’s time for me to finally learn SASS or some other pre-processor I think.
I just ran out of steam and it already passes all the tests. Appreciate any feedback. The real product page link follows my pen.
My pen:
Real product:
The two effects I would highly recommend are the box-shadow function, and the hover state.
Box-shadow will give your divs more of a 3 dimensional look.
The hover state, (which you are already using in your navbar> can do so many more things. I suggest watching a couple youTube videos on in. That’s what I did for my newest project.
Overall, looks good though!
Thanks! I get so lazy with CSS…so many details and if you don’t use it everyday, it’ gets stale. I usually find something I like and then copy it, but then get frustrated when I can’t customize!
I added a few effects and it definitely looks better.
Do you have a link to your new project?
Looks great! I love the transitions and the multiple layers with the shadows.
Here is mine… (don’t laugh)
The thing I am noticing, is that your code is almost all in absolute values. You are changing everything by the number of pixels. Try and understand the relative units - ‘em’, ‘rem’, ‘vh’, ‘vw’ and ‘fr’ for grid and flexbox. It’s gonna save your butt when you start resizing your viewport. If you change the width of the window with my project up, you’ll notice that the boxes adjust automatically, and when it gets skinny enough (1000px), the navbar disappears altogether.
If i’m not sure about how something functions, I go to youtube and also w3schools. Independent research and repetition is the key to understanding the language more and more.
1 Like
I appreciate your input. I’d much rather spend my time on algorithms and back end solutions. Putting equal time into the front end would be a big help. Thank you.