@starryrobot
@DEEPAK-tech40
Submitted
I found this project to be more challenging than I expected, particularly the navigation bar. I couldn't find a way to make it and ended up using online navbar generator. This was a great project for practising CSS grid and I learned a lot through this project. Please feel free to provide me with any feedback.
@starryrobot
Posted
Hey Deepak, great job on the final project!
The navigation is just a flex container with justify-content: space-between and then adding some padding. On one side you have the logo and then on the other you have the contents of the nav. When you choose space-between when applying flex to a div element, it will automatically push the elements in the div apart which creates the desired effect :)
As for the contents of the nav itself, that's simply a ul element and 5 li elements. In order to get the desired effect as seen in the design, you would simply apply display: inline to the li elements which changes the elements from starting on a new one to starting immediately after the last element, so in this case, next to each other.
Then you just add margin-right: [VALUE HERE]px in order to give the li elements space. In order to make sure the last element doesn't have a margin (because it shouldn't as there isn't another element following it) you can do li:last-child { margin-right: 0 } and this will remove the margin on the last element so the added margin doesn't affect the proportions of the nav.
The way I learned this was by watching YouTube videos of websites being designed from scratch! Layout tutorials I find really useful and they can teach you best practices and conventions for designing popular layouts :)
Marked as helpful
@jtlaxcalaDev
Submitted
@starryrobot
Posted
This is 99% identical to the design! Well done and great effort :)
@xAkashax
Submitted
@starryrobot
Posted
Looks good! I think it looks very much like the design :)
I noticed the box shadows are a little dark and intense. Box shadows can be pretty tricky to master so using box shadow generators helps, or finding a site which has box shadow examples with code ready is a solid option in my opinion. I use this website to find box shadows: https://getcssscan.com/css-box-shadow-examples
Also, the font doesn't seem like the same used in the design.
Good work! :D
Marked as helpful
@rodevasia
Submitted
@starryrobot
Posted
Hey again, I checked and it looks really good! In my attempt I struggled with the red dot and laying out the individual notification items. I tried to look at your code but it's Tailwind CSS and not vanilla and so couldn't understand it. Any suggestions on how to implement the red dot and also, what layout method did you use for the items? Thanks and nice work!
@rodevasia
Submitted
@starryrobot
Posted
Hey Robert, The live demo looks really good! It looks like you have a great attention to detail on the design front. Personally I would have liked to have seen this functioning with JS just because it's very well designed and would have been nice to have seen everything in action :)
Great work!
@BimboAdesoye
Submitted
I couldn't find a way to make the images fit the container completely. If anyone has done this project and can please give an insight into how they solved this, it'll be appreciated.
@starryrobot
Posted
This looks great!
I notice from the live demo the mobile version isn't centered.
I usually do this by adding this to the body tag;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
This will ensure the layout spans the full height of the viewport and then aligns everything centrally. Without this, the layout will start from the top of the page and then will stop after the content because there is no defined height set. When setting the body tag to the entirety of the viewport height, everything is spread out across the available space :)
Marked as helpful
