App Overview and Resource Material: Branding Page

Many of the tutorials that I found simply use things such as some blocks with some colored backgrounds and then they move them around on the page and that is fine for learning CSS grid in a theoretical manner.

I wanted to make this course much more practical. So in each section of this course, we're going to be building out an actual real-life project. And so in this section then this is going to be the most introductory project that we're going to go through. We're going to build out and see how I built out this branding guidelines page for DailySmarty.

large

So you can actually go and look at this page right now if you go to www.dailysmarty.com/corporate/branding and you can see that this is a real life project and I built this all using CSS grids. So what were going to do is we are going to dissect this and we're going to see how we can leverage CSS grid in order to build a page out like this. So I think you're really going to like working with the grid and you're going to see how much more practical it is and how you're able to use tools like grid, combine them with tools like flex box and that you don't even need to utilize frameworks such as Twitter Bootstrap or Foundation or anything like that.

So this is going to be a really fun course and hopefully you'll be able by the end of it to feel like you can build out some pretty cool applications and you can do it just using plain vanilla CSS. And so what you are going to build is right here and what you're going to be able to start off with is you can go into bottega-code-school/css-grid, go to this repo.

large

Right here I have the basics directory and inside of basics I have the full solution that we will build out right here. But you don't have to worry about that because we're going to be typing out all manually and walking through it. But if you do want access to the images then you can simply click on this and then download each one of these images to your local system.

large

So I have VScode open right here and if I take a look on the left hand side you can see that each one of these downloaded and I can access it.

large

So with all of that being said that is the project we're going to build and it's how you can go and access to the reference material that we're going to use for this project. And in the next guide we're going to walk through entering in the boilerplate code that we're going to use for building out this app.

Starter Code

<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <title>CSS Grid</title>
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=PT+Serif" rel="stylesheet">

  <style>
    body {
      font-family: 'Lato', sans-serif;
      background-color: #ffffff;
    }
    p,
    li {
      font-family: 'PT Serif', serif;
    }
  </style>
</head>

<body>
</body>

</html>

Starter Code

Resources