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
@starryrobotAll comments
- @DEEPAK-tech40Submitted almost 2 years ago@starryrobotPosted almost 2 years ago
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 choosespace-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 5li
elements. In order to get the desired effect as seen in the design, you would simply applydisplay: inline
to theli
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 theli
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 doli: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 helpful0 - @jtlaxcalaDevSubmitted almost 2 years ago@starryrobotPosted almost 2 years ago
This is 99% identical to the design! Well done and great effort :)
0 - @xAkashaxSubmitted almost 2 years ago@starryrobotPosted almost 2 years ago
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 helpful0 - @rodevasiaSubmitted almost 2 years ago@starryrobotPosted almost 2 years ago
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!
0 - @rodevasiaSubmitted almost 2 years ago@starryrobotPosted almost 2 years ago
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!
0 - @BimboAdesoyeSubmitted almost 2 years ago
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.
@starryrobotPosted almost 2 years agoThis 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 helpful0