Preparing

before you start coding, you need a code editor. don't use the neocities one. It's not terrible but having a good editor will improve your workflow and help you code faster. I highly reccomend using Visual Studio Code! With this add on! I also think you should plan out what you're going to code, it'll help A LOT!

Next, make a HTML file to start working on. All you have to do is open Notepad (the app on windows) and just click ctrl+s, don't put anything in it and name the file anynameyouwant.html it's extremely important that the file has .html at the end of the name so your computer knows what type of file it's working with. There are also CSS files that I'll dig into later! I also reccomend making a folder for your site files.

Next, open VSC and open that file and we can get started. When you already have VSC set up you can click the "New File..." button next to your folder name to make HTML files even faster. Keep in mind you have to move your files to your folder for it to show up!

A few tips

You can skip this if you just want to get to coding! If you're using VSC put the exclamation point and basic website bones will show up. You should know about CSS selectors a bit too! To spawn a element just type its name and hit enter. You can quickly add classes and ids like .box for a div with the class "box" and you can also do .box.header.blue for adding 3 classes. It'll work on anything, h1.pink will add a H1 with "pink" as its class. Replace periods with "#" and it'll be an id instead of a class. Everything I'm referencing can be found here! My final tip is a general tip, use REM for height/width/like everything but use EM for font sizes!!! px can be used for small things though

Grid or Flex?

It depends on your case. If you're making a website you should use Flexbox. If you're for example making a gallery of images, you should use Grid. But, they're both useful for making responsive layouts.

Using Flexbox

To start using flex you need to make a div for all your other divs to go inside. Name it "wrapper1" and then put three other divs inside. Okay now lets pause. With wrapper1 let's mess with the CSS.

We put 3 divs in there where are they? they're in there, but we need to mess with their css too.

This is great, but in order for the green div to go completely over the red and blue one we have to go back and edit the gray parent div.

You can read what I did, but in order for it to fit, I added the property "flex-wrap: wrap". That makes so that if the divs in the wrapper don't have to all fit in the same space, the divs can wrap around. If you ever get stuck with Flexbox, try just using the inspect tool. It's super helpful and honestly just clicking random buttons is a good-ish way to learn I guess

We have 3 divs in a parent div, it doesn't look like a site at all... To address that you can put more divs inside of either the red or blue one. Feel free to keep adding and removing divs to your liking aswell. I'm also going to add padding to all of the divs.

Notice how even though I added width and height to be 100% in the div "boxes", they're not fully covering the right and left divs. This is because we added padding. Padding adds more space between the parent element and the children elements. It's the direct opposite of margin, which will add space OUTSIDE of the element. This is why as soon as I start a new project I put padding and margin to 0 using the following code below.

To explain more, the star means to select everything. Every element on the page will have this css built in automatically unless changed. What "box-sizing: border-box;" will do is if I add padding to a div it will stay the same height and width without changing. See more here!

To wrap up the flexbox tutorial here, you can still add even more divs inside the purple ones via editing the HTML and CSS. If you think you still need help try the links above!

Using Grid

wip