Had a lot of fun as well as frustrating moments on this project. Would love to see some feedback on things I can improve on for the future. Some of the areas I still need a lot of work and improvement on (as far as I know myself) is CSS Grid and some of the CSS naming as I ran into some complications and duplicates of selectors here and there. One thing as well that I couldn’t wrap my head around is when i transfer my markup and css to Codepen it really doesn’t display as it does via VScode…
Thank you for the recommendation. Originally had intended for it to be static, though the tests were failing me for not having it as sticky. Though I’ve added a background and it looks a lot better.
Thank you for going through my work and offering your suggestions. Yes haha many hours spent scratching my head with these two things you’ve pointed out I spent a while trying to figure out positioning with Grid though it was taking forever and I thought I’d come back to it in the future. The overflow when minimizing the viewport vertically is that to do with VH?
This is an extremely impressive piece of work!
I really like the colors you implemented into this. The spacing and layout are very nice and smooth. Love it.
There are a few things you might want to change to make your site better:
• It’s not very responsive if you view it from a phone. I always test how responsive the site is by changing the editor view as to shown below:
…So I guess, just use some media queries to fix that problem up.
• Make the navbar hide on user click.
So The navbar drops down when the hamburger button is clicked. What I prefer should happen is that when someone presses one of the nav links, the navbar should become hidden.
You have a stacking issue with the .about-me__body section and the mobile nav.
You can give the header a z-index. Or unset the relative position on .about-me__body in the max-width: 800px media query (just like you are unsetting the left property).
Some of your BEM class names are a little unusual. You have modifier classes on element classes that do not have any base styles, so the modifier isn’t actually overwriting or changing anything (i.e. modifying). And on some of the classes, it seems like you are using the element name as the block name and not a class name given to the block. There are no hard rules for naming conventions per se so this might just be some style you like, just know it may be a bit confusing to some readers expecting certain conventions to be followed.
From 800px - 1030px it looks perfect. So I would look at what your doing in the media queries for those two sections and find a way to apply it to the larger and smaller devices.
I spent a while trying to figure out positioning with Grid though it was taking forever and I thought I’d come back to it in the future. The overflow when minimizing the viewport vertically is that to do with VH?
