#100DaysOfWeb in Python Transcripts
Chapter: Days 13-16: CSS Layout and Design
Lecture: Demo app introduction
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Let's talk about the demo application that we're going to use throughout this chapter that lets us explore the CSS selectors and properties and so on.
0:10
So I call this Selectorville and now this is, of course, in the GitHub repo under Days 13 to 16, CSS Basics and Demos. You can check it out.
0:19
It doesn't actually require anything special to run. It's just a bunch of static HTML files and whatnot but let's go ahead and have a look.
0:27
Now there's this index.html page and the only thing this does is really provide navigation to the other parts that are relevant.
0:34
So let's go ahead and open this up. So here you can see this is our design foundations CSS idea app. We have things like CSS selectors, the box model
0:45
layout, that's like display modes, and floating items. Now notice, when I went over here and ran this in WebStorm it popped this up.
0:52
Let's just call this something a little cleaner like run site, or something like that. So now I can see we can click run site, great!
1:00
So here's our app. Like I said, you don't have to run it in WebStorm. You just double click the index.html and it'll open up and go
1:06
and we're going to go through all of these different elements and build up this app as we go.
1:11
Some of it's going to be pre-built, like the CSS selectors we just get to play with. Others, like the layout and floating items
1:18
we're going to built that up more from scratch.