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…
Personal Portfolio - Codepen
Make backgr-color for Nav when you are scrolling. Because sometimes you can’t see btns on other elements, but still can click on them.
Congrats on finishing the last of the responsive design projects. I think your portfolio looks great.
Just a couple of things that I noticed.
- Run your code through the codepen html and css analyzers because there are a few errors that need your attention.
Also I noticed this issue.
Lastly, when I resized the browser window there was a lot of space at the top of the page.
Aside from those few things , I think this a really strong project.
Keep up the good work!
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:
In case you didn’t see in detail, the site looks like this when its width is minimized:
…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.
At all else, great job. Happy coding!
Your page looks good @Miyagii. Some things to revisit;
- A comment in HTML starts with
<!-- and ends with
- a comment does not end with
- Side note, do a search for “html class naming conventions”
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.
Nice job. keep it up!
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.