Hi,
Here are final versions of all my projects, thanks to FCC and you guys; the tribute, product landing, and technical doc. pages, as well as survey form and personal portfolio : https://codepen.io/Nesh-code/pen/OJLKLKw
All tests passed on each!
Any opinions/suggestions are welcome!
Hello,
I think you can decrease the height of the menu bar.
I couldn’t open the projects either, but I don’t know if the problem is on my account.
Happy coding.
Change “debug” to “full” in your URLs on your portfolio, and they will open for others to view.
First of all, I really like the showcase content that you had, and your heading seems to be totally fine, but I would suggest adding a background photo to the showcase or hero section. So, you might want to change your code a bit.
#welcome-section {
background: url('/* Path to Background Image */') no-repeat center center/cover;
}
The navbar color you choose is great, but the navbar height is too much, so consider shortening that and adding a branding title to the navbar, such as your name.
Also, consider adding a hover effect to your projects so they pop out whenever someone hovers at them.
One thing I was unable to access was your project, but one thing to do would be great if you hosted them on Github. But if you don’t it is totally fine.
Overall, your website is just amazing and a wonderful piece. Just some changes here and there and your website will look amazing.
If you have any other questions, feel free to reply to me or anyone else that you may find helpful.
Hi Bruno,
I decreased the navbar height and changed the links. I hope it’s fine now
Okay, thank you perekid.
@razzakammar_nano,
Thank you for the insights. I did my best at making the changes as you had advised. Please check this version and let me know: https://codepen.io/Nesh-code/full/OJLKLKw
Thanks
Hello,
A home page has improved a lot, congratulations.
Great Job with those improvements. Now, I want to just focus on the navbar. To ensure that anyone seeing your webpage sees the navbar nicely.
#navbar {
display: flex;
justify-content: space-between;
}
#navbar p {
color: #fff;
padding-right: 18rem; /* The above justify content fixes this */
font-family: 'Saira Stencil One', cursive;
font-size: 25px;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./main.css" />
<title>Quick Navbar</title>
</head>
<body>
<nav>
<div id="brand">
<h1>Hello World</h1>
</div>
<div id="main-nav">
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
background: black;
}
nav {
background: #fe7c00;
display: flex;
justify-content: space-between;
}
#brand {
color: white;
padding: 1rem;
}
#main-nav ul {
display: flex;
}
#main-nav ul li {
list-style: none;
}
#main-nav ul li a {
display: block;
text-decoration: none;
color: white;
padding: 1.3rem 1rem;
}
#main-nav ul li a:hover {
background: white;
color: black;
}
I would suggest reading my navbar and seeing what you can improve on. Sometimes we improve by looking at other people’s code.
If you would like to see a tutorial on navbars, let me know. I run Nano Education channel.
I forgot to say that you have done a great job on the showcase, but at the same time, you would probably want to improve it a bit.
#1 Rule: Do not have words in your background or showcase. Only have actual words on top of the image.
If you would like to see how a showcase is made, check out the video where I create a landing page, just skip to the showcase section,
@razzakammar_nano
Thanks a lot. I’ll work on the navbar; I’ve just noticed that it’s not responsive, I forgot about that.
I really appreciate your assistance
The navbar I gave an example of is responsive, but you have three links so it doesn’t hurt as much.
Check out the navbar I made in this video since it is mobile first looking.