In this unit, you'll get over your fear of CSS and begin to understand some of the more fundamental tenets of good site design. This isn't a full course on front end design, but it should give you the tools you need to deeply understand CSS frameworks and to put a good looking facade on your genius back end.
In this section, we'll cover the whole range of HTML5 so you'll be completely comfortable with putting the right elements in the right places on a page.
Let's get acquainted with what this will look like from here on out.
When do you link to the relative URL versus the absolute? How do you set up internal links?
Rich media experiences make your pages come alive but there are some things you'll need to know to avoid slow load times.
To get some practice with everything you've picked up so far, you'll rebuild YouTube's video page.
Displaying and inputting data are two of your chief duties as a web developer. We'll cover the tools at your disposal, including tables and lists for display and forms for input.
Tables aren't used as much as they once were but can still be a great way to display structured content.
Lists are used everywhere and even in some unexpected places like navigation bars.
Forms allow the user to submit data to your application and represent one of the trickiest parts of setting up your HTML structure.
Here we'll cover each of the foundational CSS concepts in greater depth than you probably have before.
Even though you're already comfortable with CSS, it's worth revisiting the basics.
Even experienced developers often have trouble with the details of the box model, which governs how elements are displayed on the page.
Positioning elements on the page can give you fits, so learning how elements play together is well worth your time.
Long content pieces of yesteryear are being replaced with rich multimedia experiences and the Times has led the charge. See if you can apply what you learned about positioning by cloning one of their articles.
It's one thing to have the toolbox and a whole other to understand the best way to use it. We'll explore some of these best practices in this section.
Here you'll learn about placing and positioning background images and working with gradients.
If you want to make your websites stop looking like they came from the 1990's, you'll need to gain an understanding for at least the best practices of design and User Experience (UX). Not knowing this stuff is like charging over the next hill without any idea of why you're doing it.
A grounding in some fundamental design definitions and tenets will go a long way.
Understanding fonts and typography is far from a design geek's domain -- they greatly affect the ease of use for your pages.
Content isn't just thrown onto the page without a care -- grid systems apply logic and order to the way information is displayed.
These days you need to make sure your pages display easily on multiple viewport sizes by using fluid layouts and media queries. Luckily there are CSS frameworks like Twitter Bootstrap that can save you a ton of time developing standard pages and which come with responsive functionality for free.
Your websites will need to degrade gracefully as your users move from a full browser to an iPad to a mobile phone, and here you'll learn how.
It's time to put your newfound responsive superpowers to use by building The Next Web's responsive homepage.
Now that you've mastered the fundamentals of HTML and CSS, it's time to make your workflow a whole lot easier with CSS frameworks.
We'll take you beyond the basics of CSS and into a variety of additional topics from how to add some stylistic flair to your elements to using tools like preprocessors to save time and reduce repetition in your code.
Dive into some of the more interesting stylistic tools at your disposal like transitions and animations that use only CSS3.
Learn about preprocessors like SASS which can make your CSS act more like real code... which is a good thing because it'll save you time and gray hairs.
This final project will require you to apply almost everything you've learned up until now since you'll be building your own version of a grid-based CSS framework. Luckily you can use it on your projects from here on out!