Today we are starting out by demonstrating how to create a layout for a website using CSS.
We decided to create a new file/site for the purpose of learning layout within CSS. We started by simply creating a little 2x1 grid with two items. This is what that looks like.
Next we added some spacing a discussed the differences between rows and columns and which would be more suitable for our page. We decided rows would work better. It was at this point I suspected we may be making a nav bar as it began to look like one. Here’s how it looks so far.
We then explored segmenting our items into different parts, for this we sought to make item one 1/3 of the page and item two 2/3 of the page. I feel this is a super useful thing to cover as it has such a large impact on the layout of the site. The code to do so makes sense to me so I think it’ll be easy to use down the line. Here is how that looks.
Next we implemented this layout into our Women in Design website. You can see clearly that the page is now divided into 1/3 and 2/3, split into contents hyperlinks and the information.
