Also, two things I’m struggling with and that I wasn’t able to fix yet:
1 - Fix header flowing above the beginning of a section when it goes to that certain section (SOLVED)
2 - Fix menu height when screen height is low (check last media querie)
Hamburger CSS3 menu for mobile and tablet (suggested by @ellereeeee thank you!)
Fixed animation scale so that it affects only the image (suggested by @tkhquang thanks!)
Fixed horizontal scrollbar
Fixed nav-link not being perfectly centered
Took out the italic hover effect on the footer (suggested by @Dimayo)
IMPORTANT: While making these changes I was re-doing the header for the laptop and desktop (min-width: 1000px media queries) and I wasn’t able to make my navbar 100% height of its container and nav-ul 100% of its container too… I can’t figure out why? Help please. [SOLVED] ALSO, PLEASE NOTE THAT MY PROJECT IS MOBILE-FIRST.
EDIT #3: I redid my project from almost 0. Find it on another post! And thanks again .
Nice work using semantic HTML and the layout is good. I also like that you restricted the width of the text for readability.
You need an hamburger nav icon for smaller devices. It looks like the navbar goes down automatically on smaller viewports and there’s currently no way to toggle it.
There’s a lot you could for the design. Look at what other people are doing for inspiration. dribbble.com, behance.net, and awwwards.com have plenty of good stuff. Pinterest.com is great too since people post images from everywhere. Look up “jewelry website” and see what comes up. I recommend getting ideas from various places then making it your own.
If you’re serious about working with design it’s worth learning how to use Figma. It’s free, you can learn it in a day or two, and it will help you get settled on a design without having to test designs by coding them.
Hi Tech, beautiful work, but there are some things that I think you should improve:
the .nav-link is kinda not centered 100% since you only set border bottom, my suggestion is that you should set a transparent border top to it.
You made a scale animation for the .item, which is great, but, I don’t think it’s a good idea to also scale the text, only the image is enough, and the tile should maintain its position before and after the transitions (maybe the overflow hidden instead). Because as a user I would hate the contents jumping around when I hover on something.
The input for email, I don’t like it to be centered by default.
There’s always a horizontal scrollbar on your page which is annoying. It was caused by #header {width: 100vw;}, change it to 100% instead.
Regarding your questions:
That was the “offset targeting” problem I mentioned before in the other thread. Simple solution is add a padding-top equals to or bigger than the nav height. My personal solution:
<ul id="navbar">
<li><a href="#about-nav" class="nav-link">ABOUT</a></li>
...
</ul>
...
<span id="about-nav" class="dummy-anchor"></span>
<section id="about">...</section> /* Real about content */
Basically this set the nav-link to targeting the invisible span (dummy anchor) which has the height equals to the header bar and is positioned right above the actual section. Anyway, this may fail the FCC test script since the nav-link ain’t targeting the actual section id but a dummy one. I just want to share this solution.
I’m not quite unsderstand what’s the problem. Did you just set the header and footer to not display on smaller screen? Then what should we fix here?
Nothing to add. I know that you wanted to make the menu in this way, but on the mobile it will occupy 40% of the screen. I also think that you can remove the effect of scale from the text.
You can also remove italics when you hover in the bottom menu. In my opinion it is better to put the color.
But all this is minor compared to what you did. In general, the page looks very cool!
Hey thanks so much to all of you! I much appreciated this feedback and I’m working on it.
elle, regarding the hamburger nav icon, I thought of doing but now that you say it I should do it and I will so thank you for that .
Also, the navbar goes down because I coded it to do so, I thought it would look good xD. But I guess like dima said it takes too much space.
To finish, thank you so much for all of the ressources/websites that you are sharing with me. That’s a tremendous help. You are right that I struggle with having beautiful designs xD.
tkhquang, I don’t understand about the input for email, do you mean like, I shouldn’t have the placeholder centered?
I will change the header: 100vw; to header: 100%; but I don’t understand why it does that when using 100vw on the header?
About your awnser for my first question, THANKS SO MUCH, LOL. I didn’t think of that but that is smart. Regarding the FCC correcting script, if it fails I’ll put a NOTE for the corrector so they know why I did it like that.
For my second question, scale your window like 1000x200 for example and you’ll see that all of the content is stuck under my header.
Dima, thanks! And like I mentionned ealier, you’re right it takes a lot of space so I’ll fix it using hamburger method. For the italic, I’m not sure, what color should I put instead, I thought the italic would look better then a color?
It’s up to you. If you decide to change the color then light blue or green.
Also for the menu on the mobile viewport you can change the positioning to relative or static.
I mean I would like the input I type in there to be align to left hand side instead of being floated center.
100vw makes your page overflow because of the vertical scrollbar, viewport units do not count the document contents. In case you really want to use the vw unit, you can add max-width: 100%; to prevent the overflow.
About your header, I think you should as well do a hamburger menu like the others suggested.
Another thing I forgot to say is that in your CSS, you have both @media queries for min-width and max-width, you shouldn’t do that. If you design your page to be mobile first, only set query min-width for larger screen sizes and vice versa. Doing both is kinda unnecessary and would make it harder to track down problems in your style sheet.
Hamburger CSS3 menu for mobile and tablet (suggested by @ellereeeee thank you!)
Fixed animation scale so that it affects only the image (suggested by @tkhquang thanks!)
Fixed horizontal scrollbar
Fixed nav-link not being perfectly centered
Took out the italic hover effect on the footer (suggested by @Dimayo)
IMPORTANT: While making these changes I was re-doing the header for the laptop and desktop (min-width: 1000px media queries) and I wasn’t able to make my navbar 100% height of its container and nav-ul 100% of its container too… I can’t figure out why? Help please.ALSO, PLEASE NOTE THAT MY PROJECT IS MOBILE-FIRST.
I did it and you’re right it works :D! Thanks so much.
I’ll keep working on another version before I put another edit then update again for more feedback.
Question thought if you don’t mind: why is align-items; strech necessary here and height: 100% or auto don’t do the job alone if applied to #nav-bar and #nav-ul? Like, what’s so different from the other project that you helped me with?
Hi buddy, Please fix the subscription form and make it look a little better, ideas can be found on codepen, you can check mine one at - @therohitdas (codepen)
Add some shadow to the card element, it will look awesome
IMPORTANT MESSAGE: I AM CURRENTLY IN AN EXAMS PERIOD AT SCHOOL MY APOLOGIES TO THOSE WHO HELPED ME AND ARE STILL WAITING FOR POTENTIEL FEEDBACK I’LL DO EVERYTHING AND SHOW IT TO THE YOU THE 24TH JAN.
.
.
