Making a Portfolio on Visual Studio Code - html

Hello I am attempting to create a Portfolio using HTML, CSS, and Javascript. My only previous experience is making a basic website with standard text and a light\dark theme button. I am trying to get my Title the be on the left of my navigation bar, and my directories to be on the left side of the navigation bar. Could Someone explain how i would do this.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
/* navbar styling */
.navbar{
position: fixed;
width: 100%;
background: crimson;
font-family: 'Ubuntu', sans-serif;
}
.navbar .maxwidth{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
color: #fff;
font-size: 35px;
font-weight: 600;
}
.navbar .menu li{
list-style: none;
display: inline-block;
}
.navbar .menu li a{
color: #fff;
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo"><a href='#'>Portfo<span>lio.</span></a></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contact</li>
</ul>
</div>
</nav>
</body>
</html>

You were doing it pretty much correctly. Your css had a typo. I changed maxwidth to max-width.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
/* navbar styling */
.navbar{
position: fixed;
width: 100%;
background: crimson;
font-family: 'Ubuntu', sans-serif;
}
.navbar .max-width{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
color: #fff;
font-size: 35px;
font-weight: 600;
}
.navbar .menu li{
list-style: none;
display: inline-block;
}
.navbar .menu li a{
color: #fff;
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo"><a href='#'>Portfo<span>lio.</span></a></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contact</li>
</ul>
</div>
</nav>
</body>
</html>

Related

How to make a Fixed or Sticky Navbar using media query?

How to make the navbar into a fixed or sticky position using media query? I want to make it visible when you scroll down the scroll bar of your page. I tried anything I could but I don't really get it.
Here are my examples of codes.
.navbar {
background-color: #111;
padding: 12px 16px;
}
.navbar ul {
list-style-type: none;
text-align: center;
display: flex;
}
.navbar li a{
color: #ccc;
text-decoration: none;
padding: 8px 16px;
margin-left: 20px;
}
/* MEDIA QUERY */
HERE
#media screen and (max-width: 700px) {
.navbar ul{
flex-direction: column;
padding: 20px;
}
.navbar ul a{
margin: 5px 0px;
width: 30%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>About Me</li>
<li>My Skills</li>
<li>Services</li>
<li>Certificates</li>
</ul>
</div>
</body>
</html>
You can make a navbar sticky or fixed by using the CSS position property. Set position property as "sticky" or "fixed".
See the snippet below. You can add it to any view port according to your need I have added it for larger screens.
body {
height: 800px;
background: cyan;
}
.navbar {
background-color: #111;
padding: 12px 16px;
position: sticky;
top: 0;
}
.navbar ul {
list-style-type: none;
text-align: center;
display: flex;
}
.navbar li a{
color: #ccc;
text-decoration: none;
padding: 8px 16px;
margin-left: 20px;
}
#media screen and (max-width: 700px) {
.navbar ul{
flex-direction: column;
padding: 20px;
}
.navbar ul a{
margin: 5px 0px;
width: 30%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>About Me</li>
<li>My Skills</li>
<li>Services</li>
<li>Certificates</li>
</ul>
</div>
</body>
</html>

How do I add an image to the left side of Navigation Menu Bar?

How Do I get an image in line with the Navigation bar on the left side and the menu items listed on the right side? I keep getting my image to go on top of the navigation bar instead of being inline/on the navigation bar.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TLC Music Group</title>
<link rel="stylesheet" href="css/style.css">
<meta name="description" content="Our first page">
<meta name="keywords" content="html tutorial template">
</head>
<body>
<nav>
<ul class="navigationbar">
<li><img src="imgs/tlclogo.png" id=logo alt="TLC Logo" /> </li>
<li>Home</li>
<li>Music</li>
<li>News</li>
</ul>
</nav>
</body>
</html>
.navigationbar ul {
list-style-type: none;
padding: 0px;
margin: 0px;
text-align: center;
float: left;
vertical-align:top;
top: 0;
width: 100%;
overflow: hidden;
background-color: #333
}
#logo {
float: left;
}
li {
float: right;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
Try using display:flex; this will make your life a lot easier. Also put img tag outside un-ordered list for HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TLC Music Group</title>
<link rel="stylesheet" href="css/style.css" />
<meta name="description" content="Our first page" />
<meta name="keywords" content="html tutorial template" />
</head>
<body>
<nav>
<img src="imgs/tlclogo.png" id=logo alt="TLC Logo" />
<ul class="navigationbar">
<li>Home</li>
<li>Music</li>
<li>News</li>
</ul>
</nav>
</body>
</html>
and for CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
ul li {
position: relative;
margin: 0 20px;
list-style: none;
display: inline-block;
cursor: pointer;
}
I hope this will resolve your issue.

Even though I reset the margins in css, there is still a space in between. What is the reason?

I reset the margins of all the elements, but there is a gap in between, which I don't know why.
I tried it in chrome and firefox browsers. Same result in both. I'm waiting for your help. This is really important
enter image description here
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Arial, Helvetica, sans-serif;
}
#nav {
padding: 20px;
}
#menu{
list-style-type: none;
}
#menu li {
display: inline-block;
min-width: 140px;
padding: 15px;
text-align: center;
background-color: rgb(48, 48, 48);
}
#menu li a{
text-decoration: none;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Courses</li>
<li>Contact</li>
<li>Links</li>
</ul>
</div>
</body>
</html>
For the purpose of inline-block displayed elements, whitespace is treated as, well, whitespace. It's the spaces within your code. It would be easier if you were use #menu{ display: flex; } instead of making li into inline-blocks.
i will fix it for you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Courses</li>
<li>Contact</li>
<li>Links</li>
</ul>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Arial, Helvetica, sans-serif;
}
#nav {
padding: 20px;
}
#menu{
list-style-type: none;
}
ul {
font-size: 0;
}
#menu li {
font-size: 16px;
display: inline-block;
min-width: 140px;
padding: 15px;
text-align: center;
background-color: rgb(48, 48, 48);
}
#menu li a{
text-decoration: none;
color: white;
}
There are several ways you could get round this - probably the most inelegant would be to remove the newlines/spaces in your HTML list.
More practical probably is to have the ul display: flex. But you will have to consider what you want to happen responsive-wise. Do you ever need the elements to flow to the next line on a small device?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Arial, Helvetica, sans-serif;
}
#nav {
padding: 20px;
}
#menu{
list-style-type: none;
display: flex;
}
#menu li {
min-width: 140px;
padding: 15px;
text-align: center;
background-color: rgb(48, 48, 48);
}
#menu li a{
text-decoration: none;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Courses</li>
<li>Contact</li>
<li>Links</li>
</ul>
</div>
</body>
</html>

Why Navbar links are not responding to the transition applied on them [duplicate]

This question already has answers here:
CSS transform doesn't work on inline elements
(2 answers)
Closed 2 years ago.
body {
font-family: sans-serif;
font-size: 25px;
}
.navbar {
width: 100%;
height: auto;
background-color: rgb(97, 77, 47);
}
ul {
list-style-type: none;
display: flex;
justify-content: center;
}
li {
padding: 10px 25px;
}
a {
text-decoration: none;
color: white;
transition: 1s;
}
a:hover {
transform: translate(50px,100px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
I added the transition to my Navbar links to respond when hovered but the transition is not working . I want the links to translate when hovered and therefore I used transform: translate(50px,100px); but apparently it is not working. Don't know why
Add display: block; to the links.
body {
font-family: sans-serif;
font-size: 25px;
}
.navbar {
width: 100%;
height: auto;
background-color: rgb(97, 77, 47);
}
ul {
list-style-type: none;
display: flex;
justify-content: center;
}
li {
padding: 10px 25px;
}
a {
text-decoration: none;
color: white;
transition: 1s;
display: block;
}
a:hover {
transform: translate(50px,100px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Edit: You can refer to this.
The solution would be to add a display property to the links
a {
text-decoration: none;
color: white;
transition: 1s;
display: block;
}
The transform translate property will work with block level elements like a div for example.
Your "a" element is included into a "li" element, so you would probably have to focus on transforming the "li" not the "a". In css it is always important to consider that each element(tag or box) is always included into another one. So the key is to identify which one to modify and how much space is available.
You can try something like below:
body {
font-family: sans-serif;
font-size: 25px;
}
.navbar {
width: 100%;
height: auto;
background-color: rgb(97, 77, 47);
}
ul {
list-style-type: none;
display: flex;
justify-content: center;
}
li {
padding: 10px 25px;
}
a {
text-decoration: none;
color: white;
transition: 1s;
}
li:hover {
background-color: red;
transform: translate(50px,100px);
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>

HTML List Object Styling doesn't apply to the whole block

I am making a navigation bar and trying to follow https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_gray.
My navigation bar isn't working as expected. When I hover over a list object, I only see the text and its small background change colour, not the whole block. How do I make the whole block change colour?
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="default.css">
<title>My Dashboard</title>
</head>
<body>
<!--Navigation Bar-->
<ul id="navbar">
<li>Home</li>
<li>Weather</li>
<li>World Time</li>
<li>Help</li>
</ul>
<!--Navigation Bar End-->
</body>
</html>
default.css:
/*Importing Fonts*/
#import url('https://fonts.googleapis.com/css?family=Raleway:400,700,900');
/*Finish Import*/
#navbar{
font-family: "Raleway SemiBold", serif;
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #13006e;
display: block;
}
#navbar li {
color: white;
display: block;
padding: 8px 16px;
text-decoration: none;
}
#navbar li a:hover{
color:white;
background-color: #008000;
}
Thanks!
Neeron.
you just need to add just a tag to navbar li.
/*Importing Fonts*/
#import url('https://fonts.googleapis.com/css?family=Raleway:400,700,900');
/*Finish Import*/
#navbar{
font-family: "Raleway SemiBold", serif;
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #13006e;
display: block;
}
#navbar li a{
color: white;
display: block;
padding: 8px 16px;
text-decoration: none;
}
#navbar li a:hover{
color:white;
background-color: #008000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="default.css">
<title>My Dashboard</title>
</head>
<body>
<!--Navigation Bar-->
<ul id="navbar">
<li>Home</li>
<li>Weather</li>
<li>World Time</li>
<li>Help</li>
</ul>
<!--Navigation Bar End-->
</body>
</html>