Build Your First: HTML & CSS

Loading the player…


Review file structure of site and functionality:

Today I work on lesson two. This lesson is all about folders, files and images. First of all, let’s review our folders. The main folder is called the assets folder. And it sits in the root of our directory. Inside we have folders for CSS, images and JavaScript. The CSS folder includes a file called base.css, layout.css, modules.css, and normalize.css. For our CSS files, we’re going to follow the SMACSS principle, which breaks CSS Files down to base, layout, modules, states, and themes. Now we’re not going to use states or themes CSS files for this course as they’re not really needed. Base.css is used for all the base styles such as element selectors: h1, blockquote, table, etc. Layout.css is used to define the overall grids and layout components. Modules.css is used for the reusable, modular parts of our design. They are the callouts, sidebar sections, product lists, navigation, and so on. Normalize is used to make browsers render all elements more consistently and in line with modern standards. Next up is the image folder, and as you can imagine that’s holding all of our images, as well as our apple touch icons. The JS folder, or Java Script folder, contains HTML5 and respond.min files. And HTML5Shiv enables us to style HTML5 elements in versions of Internet Explorer prior to version nine. And these versions didn’t a lot unknown elements be styled without JavaScript. Respond.min.js is a light weight polyfill that forces Internet Explorer.

Introduction to CSS media queries:

Six to eight to support min and max-width CSS3 Media Queries. Now if you never heard of them before, media queries are an extension to the CSS2 media types. They give us much more control over how we deliver CSS to different devices. So here’s an example. @media, and then brackets, min-width 38em. Now this rule would be applied by any device that has a minimum viewport width of 38 em.

GitHub Repo