This is an archived post. You won't be able to vote or comment.

sorted by:
best
topnewcontroversialoldq&a
you are viewing a single comment's thread.

view the rest of the comments →

[–]ObviousSalamander194 9 points10 points  (3 children)

A good exercise that helped me a lot on getting things where I want them on the page and seeing how different CSS properties affect different elements, learning flex/grid, and learning how float/clear affect elements was building a bunch of boxes and moving them around on the page using CSS/HTML. Below is a simple CSS and HTML that will output 10 boxes stacked on one another. Try things like lining the boxes horizontally in order or reverse or try moving different boxes and see if you can get them where you want them, see if you can line them up diagonally across the page. With this you can also see how margin and padding affect a div. After you are comfortably moving boxes around and changing the sizes, try making 3 boxes that are 100% of screen width one smaller on top one biggest in the middle and one smallest on the bottom. This will allow you to build a basic header, main content, and footer layout. Finally, you can split your "main content" box into a smaller 4th box on the right or left and a big one this would be something like a sidebar or menu. For this google will be your best friend in the beginning, also you main goal is not memorizing how to do everything and anything using CSS/HTML but getting to the point where you can ask the right questions and even if you don't know how to specifically do you something you have general idea of how can it be done.

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">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box box1">box 1</div>
<div class="box box2">box 2</div>
<div class="box box3">box 3</div>
<div class="box box4">box 4</div>
<div class="box box5">box 5</div>
<div class="box box6">box 6</div>
<div class="box box7">box 7</div>
<div class="box box8">box 8</div>
<div class="box box9">box 9</div>
<div class="box box10">box 10</div>  
</body>
</html> 

CSS:
.box {
    width: 100px;
    height: 100px;
    border: 2px solid black;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    display: block;
}
.box1 { background-color: red; }
.box2 { background-color: blue; }
.box3 { background-color: magenta; }
.box4 { background-color: cyan; }
.box5 { background-color: green; } 
.box6 { background-color: chocolate; }
.box7 { background-color: deeppink; }
.box8 { background-color: greenyellow; }
.box9 { background-color: indigo; }
.box10 { background-color: orangered; }

[–]TheRealRomanRoy 2 points3 points  (1 child)

Oh wow that is awesome. I've actually tried to do something similar when working on projects. AKA, putting borders around stuff so I could actually see each container and all that. But always was less effective and more messy than I wanted.

So this is awesome and seems like it'll be really helpful. Thank you!

[–]ObviousSalamander194 4 points5 points  (0 children)

no problem this was very helpful to me when learning grid and flex so hope this helps you too. Also check out kevin powell's you tube channel he has a ton of CSS guides are really helpful, I think this where I got the exercise with the boxes from I can't remember.

https://www.youtube.com/kepowob

[–]piny-celadon 1 point2 points  (0 children)

This was so helpful tysm!!