Welcome to the Basic Prep!
These free mini-courses will give you a strong foundation in web development. Track your progress and access advanced courses on HTML/CSS, Ruby and JavaScript for free inside our student portal.
Demo: Demo: Building a Stylesheet
A guide to styling common HTML elements from scratch.
Scroll down...
This demo will focus on styling common raw HTML elements and markup to a production ready level.
The project repo for this demo can be found here.
Once you have the repo cloned or forked you can fire up a local server in the project directory with $ ruby -run -e httpd . -p 3000 and then open it in your browser at http://localhost:3000. Click around the links and have a look around the code!
Setup
The following video introduces the boilerplate markup and styles. This gets us oriented with the project and how subsequent pages will be structured.
The Basics
The basics of CSS start with selectors. This video explains the difference between element, class and ID selectors. It also talks about their use cases and how they effect the priority of applied styles.
The Box Model
The CSS box model is important to have in your mind's eye. This video takes nested HTML elements to highlight the various layers of the box model.
Positioning with Floats
Floats are a commonly used method of positioning elements side by side in a line. This video covers how to accomplish this and its connection with clearfixing.
Relative, Absolute and Fixed Positioning
When you need to get very specific with the position of an element you turn to relative, absolute and fixed positioning. The nuances of these properties can be confusing so the following video dives into the differences between these properties.
Fonts
This video talks about setting default fonts, fallback fonts and catch-all fonts. It also dives into the details of manipulating those fonts and their display. Further, we take a look at including custom fonts from Google Fonts!
Backgrounds
Backgrounds are an effective and simple way to give color and decoration to your pages and elements. This video discusses the various options you have for setting background colors, images and gradients.
Lists
The next video talks about a few ways you can style list appearance and turn a stacked list into a single line nav menu.
Media
This video discusses styling media and specifically talk about tricks to get images displaying responsively.
Tables
The next video dives into the details of styling table borders and how to get them to display how you'd expect from a spreadsheet type look.
Login Form
This video shows a practical use case for CSS styling with a login form.
Blog Post
The next video illustrates styling a simple blog post and how you'd begin to make that page responsive.
Wrapping Up
This demo covered how to setup the basics as far as writing styles for common elements and including stylesheets into your HTML. We're just scratching the surface here but you can certainly already see that there are so many awesome things you can do with CSS!
