header {
display: flex;
justify-content: space-between;
}
.logo {
width: 30vw;
margin: 20px;
}
.menu {
list-style-type: none;
display: flex;
justify-content: space-evenly;
width: 70vw;
margin: 20px;
}
HTML Part:
<header class="header-container">
<h1 class="logo">Logo</h1>
<nav class="main-nav">
<ul class="menu-list">
<li class="menu-item"><a href="#">Home</a></li>
<li class="menu-item"><a href="#">About</a></li>
<li class="menu-item"><a href="#">Contact</a></li>
</ul>
</nav>
</header>
CSS Part:
*{
margin: 0;
padding: 0;
box-sizing:border-box;
}
body{
background-color:rgb(177, 216, 37);
}
/* header style for menu*/
.header-container {
display:flex;
}
.logo {
padding-left:25px;
width:30%;
}
.main-nav {
width:70%;
}
.menu-list{
/*takes bullet in list out*/
list-style-type: none;
display: flex;
/*inner flexbox*/
justify-content: flex-end;
padding-right: 30px;
}
.menu-item{
margin:20px;
font-size:16px;
}
Hey, here is my code. I did my best to complete it. Please comment if you see any ways I can improve!
HTML
<header>
<h1 class="logo">Logo</h1>
<nav class="row-container">
<ul class="row-container-list">
<li class="row-container-list-item"><a href="#">Home</a></li>
<li class="row-container-list-item"><a href="#">About</a></li>
<li class="row-container-list-item"><a href="#">Contact</a></li>
</ul>
</nav>
</header>
CSS
.logo {
margin: 50px 10% 10px 10%;
}
.row-container {
margin: 50px 23% 10px 23%;
}
.row-container-list {
list-style-type: none;
display: flex;
padding: 0;
}
.row-container-list-item {
margin: 0px 40% 10px 50%;
}
header {
font-family: Tahoma, Geneva, sans-serif;
font-size: 16px;
letter-spacing: 0px;
word-spacing: 0px;
color: #000000;
font-weight: 400;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: none;
border: 1.5px solid #00b670;
border-radius: 10px;
display:flex
}
h1 { font-weight:normal; }
Hello! My code is here. I struggled with this one so not sure how correct it is.
HTML
<!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>Web layout</title>
<link rel="stylesheet" href="./css/styles_page_layout.css">
</head>
<body>
<header>
<div class="column-container">
<h1 class="column">Logo</h1>
<nav>
<ul class="unordered-list">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main>
<article>
<h2>Article heading</h2>
<section>
<p>Lorem ipsum dolor sit amet.</p>
</section>
</article>
</main>
<aside>
Here are banners and ads...
</aside>
<footer>
<p>Copyright © 2022 Iveta</p>
</footer>
</body>
</html>
CSS
.column-container{
display: flex;
flex-direction: row;
align-items: center;
border: 2px solid lightgrey;
border-radius: 10px;
font-family: Helvetica;
font-style: normal;
}
.column{
width: 70%;
padding-left: 3%;
font-weight: normal;
}
.unordered-list {
list-style-type: none;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-end;
padding-right: 50px;
margin: 0;
}
li{
margin: 10px;
font-size: 18px;
}
a:link {
text-decoration: none;
}
@Ivetaa your code looks fine dont worry if struggked with it. thats the real learning. once you got it to work on your own then booom you know your making progress. well done
Thank you so much, Evan!
HTML part:
<!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>Web layout</title>
<link rel="stylesheet" href="./flexbox-assignment.css">
</head>
<body>
<header class="header">
<h1 class="logo">Logo</h1>
<nav>
<ul class="unordered-list">
<li class="list-item"><a href="#">Home</a></li>
<li class="list-item"><a href="#">About</a></li>
<li class="list-item"><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section></section>
<article>
<h2>Article heading</h2>
<section>
</style>
<p>Lorem, <span>ipsum</span> dolor sit amet consectetur adipisicing elit. At quae in distinctio soluta earum architecto dolor eius? Asperiores facere sapiente repellat consequatur sint, libero, adipisci labore, amet placeat perferendis ipsa?</p>
</section>
<aside>
<p>By the way.. This is just some extra content.</p>
</aside>
</article>
</main>
<aside>
Here would be banners and ads...
</aside>
<footer>
<p>Copyright © 2022 Edvinas Zostautas</p>
</footer>
</body>
</html>
CSS Part:
header * {
margin: 0px;
padding: 0px;
padding-top: 1%;
padding-bottom: 2px;
font-weight: lighter;
}
.header {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
border: 3px solid rgb(82, 199, 173);
}
.logo {
width: 30%;
font-size: 2.5em;
margin-left: 20px;
}
.unordered-list {
list-style-type: none;
display: flex;
width: 70%;
font-size: 1.8em;
}
.list-item {
margin-right: 70px;
}
a:link {
text-decoration: none;
}
Here is how it looks:
If you can, please tell me if I could improve something or avoid using something.
Try marking the code and pressing the button highlighted in grey. Then it will come out nicely.
Looks great Good job 
hey @Sedna great job. one thing you can do to make thi slook much nicer is to use google fonts. and change your font family to get rid of the ugly times new roman text. i have a nice font im using in my project at the minute. if you paste this into your head in your index.html file in the public folder
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Syne:wght@400;500;600;700;800&display=swap" rel="stylesheet">
and then in any component you are rendering text in style the font family to
font-family: SuisseIntl,Helvetica,Arial,sans-serif;
and your text will appear much nicer,
Thanks! It does look nice 
no worries. typography is actually one of the things i hate most about frontend design it can be very difficult to get nice fonts. however this one is nice. i found it from a website. pro tip if you on a website and like their font, copen up the console and inspect the element and you can see what font family they use. its really helpful for a variety of things, not just fonts. very helpful for getting svg logos too
also another pro react tip. you should make a globalStyles.js file and wrap your entire app with it then you will have access to lodes of predefined styled like colours, font sizes etc. when your doing frontend design you should generally create a colour theme like primaryLight, secondaryLight, tertiaryLight, primaryDark, secondaryDark, tertiaryDark, fontSizeBig, fontSizeMedium … and so on. ive attached below the theme and globaly styles im using at the moment for a personal project. you should always start first with developing the teme colours when starting a serious react project.
example of colour themes
export const skyBlueLighter = "#F1F7FE";
export const skyBlueLight = "#DAEBFF";
export const skyBlue = "#C1DEFF";
export const blueLight = "#0073E5";
export const blue = "#006FE8";
export const blueDark = "#0064CF";
// export const blueDark = "#0051A8";
export const graphiteLight = "#001C3A";
export const graphite = "#001933";
export const graphiteDark = "#001124";
export const tooltipBlack = "#333333";
export const redLighter = "#FDD8D9";
export const redLight = "#FF4545";
export const red = "#E63E3E";
export const redDark = "#BF3434";
export const bitcoinOrange = "#FF9900";
export const orangeLight = "#FFB74D";
export const orange = "#FF9800";
export const orangeDark = "#F57C00";
export const bitcoinCashGreen = "#6CC64B";
export const greenLight = "#3CBC98";
export const green = "#34A384";
export const greenDark = "#2C8A6F";
export const textDark = "#3F3F48";
export const textLight = "#6B6D70";
export const textLighter = "#87888C";
export const textDisabled = "#DCE0E3";
export const grayDisabled = "#c1c2c4";
export const grayLight = "#EBEDF2";
export const gray = "#D2D4D9";
export const grayDark = "#D2D4D9";
export const grayPlaceholder = "#D0D2D9";
export const greyHeaderBackground = "#FBFBFC";
export const backgroundDefault = "#FBFBFB";
export const backgroundWhite = "#FFFFFF";
export const backgroundAlternative = "#FDFDFE";
export const white = "#FFFFFF";
export const whiteDarker = "#FDFDFD";
export const black = "#001B3A";
export const strokeDefault = "#DBE0E8";
export const alertWarning = "#AD5700";
export const alertWarningBackground = "#FBF3E9";
export const alertInfo = "#5027E2";
export const alertInfoBackground = "#F7F3FF";
export const alertError = "#D60000";
export const alertErrorBackground = "#FBE8E8";
export const alertSuccess = "#1E4620";
export const alertSuccessBackground = "#EDF7EA";
this makes it easier to maintain your code as you rproject eveloves over time because u just need to edit the colour you want to chang once in this theme file rather than trying to find every instance you define it indiviudally across multiple files
CSS
body {
background-color: beige;
}
header {
display: flex;
justify-content: space-between;
height: 100px;
}
.first-paragraph{
border: 2px dashed darkblue;
}
#moralis-reference{
text-shadow: 2px 2px 7px darkgray;
}
button {
border: none;
box-shadow: 3px 3px 7px rgb(44,44,44, 0.6);
cursor: pointer;
}
[type=text], [type=number], [type=submit] {
padding: 8px;
}
.block {
display: block;
}
.inline {
display: inline;
}
.highup{
list-style-type: none;
display: flex;
justify-content: flex-end;
flex-basis: 70%;
}
.highup li {
margin: 0 20px;
font-family: Arial, Helvetica, sans-serif;
}
h1{
font-family: sans-serif;
font-weight: bold;
flex-basis: 30%;
}
.highup li a{
text-decoration: none;
color: blue;
font-size: 1.5rem;
}```
HTML
<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>Web layout</title>
<link rel="stylesheet" href="./css/styles.css">
<header>
<h1>Logo</h1>
<nav>
<ul class="highup">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>
<section>
<p>Lorem ipsum dolor sit.</p>
<aside>Somethin's missing</aside>
<footer>
<p>footer here, Copyright ©</p>
</footer>
</section>
</h2>
</article>
</main>
<form action="#" method="POST">
<label>
Coin:
<input type="text" name="coinName" placeholder="Coin">
</label>
Amount:
<input type="num" min="0" name="coinQuantity" placeholder="Amount" required>
<input type="password" name="password" placeholser="password">
<button type="submit">Buy</button>
</form>
I have problems with shifting the menu list to the right end. I have already added “justify-content: flex-end;” to “.menu-list”. May I know what am I doing wrong please?
<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="flexbox.assign.css">
</head>
<body>
<header class="header-container"></header>
<h1 class="logo">Logo</h1>
<nav class="main-nav">
<ul class="menu-list">
<li class="menu-item">Home</li>
<li class="menu-item">About</li>
<li class="menu-item">Contact</li>
</ul>
</nav>
</header>
<h2>Article Heading</h2>
<p>Lorem ipsum dolor sit amet.</p>
<p>By the way...</p>
<p>Here be banner and ads</p>
<p>Copyright @ 2021 Lion Club</p>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;;
}
.header-container{
display: flex;
}
.logo{
width: 30%;
}
.main-nav{
width: 70%
}
.menu-list{
list-style-type: none;
display: flex;
justify-content: flex-end;
padding-right: 30px;
}
.menu-item{
margin: 0px 20px;
}
I think you forget to delete the header close tag.
<header class="header-container">
<h1 class="logo">Logo</h1>
<nav class="main-nav">
<ul class="menu-list">
<li class="menu-item">Home</li>
<li class="menu-item">About</li>
<li class="menu-item">Contact</li>
</ul>
</nav>
</header>
try justify-content: space-between. you also have avery large padding right of 30px; and a magin right of 20px which means that no matter what you do there is going to be a 50px gap from the right of the page to your nav menu. so play around with these paddings and margins, but in navs i always use justify-content: space between as this will evenly space you items across the page
HTML side:
<!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>Web layout</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header class="headerContainer">
<h1 class="Logo">Logo</h1>
<nav class="navMenu">
<ul class="navButton">
<li class="navItems"><a href="#">Home</a></li>
<li class="navItems"><a href="#">About</a></li>
<li class="navItems"><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article heading</h2>
<section>
<p>Lorem ipsum dolor sit amet.</p>
</section>
</article>
</main>
<aside>
Here are Banners and ads......
</aside>
<footer>
</footer>
<form action="#" method="POST">
<label>
Coin:
<input type="text" name="coinName" placeholder="COIN">
</label>
<label>
Amount:
<input type="number" name="" id="" required>
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
CSS part:
body {
background-color: black;
color: #33ff33;
text-shadow: 2px 2px 3px #33ff33;
font-family: "Courier New", Courier, monospace;
font-size: 16px;
letter-spacing: 1.2px;
word-spacing: 0px;
}
/* header styles*/
.navButton {
list-style-type: none;
display: flex;
justify-content: flex-end;
}
.navItems {
margin: 20px;
font-size: 16px;
text-decoration: none;
font-weight: bold;
padding-right: 30px;
}
.headerContainer {
display: flex;
justify-content: space-between;
}
.logo {
width: 30%;
padding-left: 25px;
}
.navMenu {
width: 70%;
}
.hello {
color: #D54AFF;
text-shadow: 2px 2px 3px #660099;
}
.first-paragraph {
color: cyan;
text-shadow: 2px 2px 3px darkturquoise;
border: 1px solid cyan;
}
.second-paragraph {
color: gold;
border: 2px solid gold;
text-shadow: 2px 2px 3px darkgoldenrod;
}
a {
color: lime;
cursor: pointer;
text-shadow: 2px 2px 3px #33ff33;
}
a:hover {
color: #D54AFF;
text-shadow: 2px 2px 3px #660099;
}
a:focus {
color: #D54AFF;
text-shadow: 2px 2px 3px #660099;
}
a:active {
color: #D54AFF;
text-shadow: 2px 2px 3px #660099;
}
#linkThing {
color: azure;
text-shadow: 2px 2px 3px darkgray;
}
input {
color: rgb(51, 255, 51);
font-size: 16px;
line-height: 16px;
padding: 11px;
border-radius: 16px;
font-family: "Courier New", Courier, monospace;
font-weight: normal;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: none;
background: black;
box-shadow: 5px 5px 15px 5px #177217;
border: 2px solid rgb(28, 164, 71);
display: inline-block;
}
::placeholder {
color: #33ff33;
}
::selection {
color: rgb(51, 255, 51);
font-size: 16px;
line-height: 16px;
padding: 11px;
border-radius: 16px;
font-family: "Courier New", Courier, monospace;
font-weight: normal;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: none;
background: black;
box-shadow: 5px 5px 15px 5px #177217;
border: 2px solid rgb(28, 164, 71);
display: inline-block;
border-color: #33ff33;
}
input:focus {
color: #33ff33;
outline: none;
border: 2px solid #33ff33;
}
.myButton {
color: rgb(51, 255, 51);
font-size: 16px;
line-height: 16px;
padding: 11px;
border-radius: 16px;
font-family: "Courier New", Courier, monospace;
font-weight: normal;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: none;
background-image: linear-gradient(to right, rgb(45, 226, 45) 0%, rgb(33, 165, 33) 50%, rgb(23, 114, 23) 100%);
box-shadow: 5px 5px 15px 5px #177217;
border: 2px solid rgb(28, 164, 71);
display: inline-block;
}
.myButton:hover {
background: #2DE22D;
}
.myButton:active {
background: #177217;
}
.column-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: column;
align-items: center;
}
.column {
width: 40%;
justify-content: center;
}
sorry i got crazy with colors and stufff hahhaahha
HTML part:
<!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="./css/style02.css">
</head>
<body>
<header>
<h1 class="logo">Logo</h1>
<nav class="top-menu">
<ul class="menu">
<li class="menu_link"><a href="#" >Home</a></li>
<li class="menu_link"><a href="#" >About</a></li>
<li class="menu_link"><a href="#" >Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article heading</h2>
<section>
<p>Lorem ipsum dolor sit amet.</p>
</section>
<aside>
By the way...
</aside>
</article>
</main>
<aside>
Here be banners adn ads...
</aside>
<footer>
<h1>Copyright © 2022 catInABlog</h1>
<nav>
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" >About</a></li>
<li><a href="#" >Contact</a></li>
</ul>
</nav>
</footer>
</body>
</html>
CSS part:
header{
display:flex;
border:solid 1px #21BF96;
border-radius: 5px;
padding:10px 50px;
height:50px;
}
.logo{
display:flex;
align-items:flex-end;
width:30%;
margin:0px;
}
nav.top-menu{
display:flex;
width:70%;
justify-content: flex-end;
align-items:flex-end;
}
.menu{
display:flex;
list-style-type: none;
margin:0px;
}
.menu_link a{
display:flex;
color:black;
font-size:18px;
text-decoration: none;
min-width:70px;
}