Build Your First Website using HTML, CSS and the Skeleton Framework
A beginners guide to building a modern page layout using Skeleton, and creating elegant animation effects using Animate.css.
Intro to HTML and CSS
You'll go from a beginner with zero developer experience to advanced-beginner, having developed and deployed your first website online. Explore frontend programming's two essential languages: HTML and CSS.
You'll learn how to use a popular code editor, Git and Github as you build your first website.
Using the Skeleton Framework
You'll be introduced to Skeleton, an elegantly-simple and Bootstrap-like framework. Skeleton uses a grid system that allows you to quickly lay out page elements, organize them with minimal styling, and makes it easy to scale-down the website for displaying on mobile devices.
Styling with CSS
While functionality is important, great design can set you apart. You will learn to add external CSS libraries, become familiar with how to style many page elements at once using classes, learn how to customize forms and buttons, and integrate custom web fonts from Google.
One of the best and fastest ways to set your landing page apart from others is to add tasteful animation. Rather than loading all site elements at once, you'll learn to use CSS animation to give the page-load a smooth fade-in transition.
Deploy to Github Pages
Learn to use Git, the ubiquitous version control system. Use Git and Github Pages to publish your new website online for free.
Table of contents
1 Deploying to Github Pages
2 Managing your Code
3 Animation Effects
4 HTML with Animated CSS Classes
5 Animating CSS
6 Styling the Footer
7 Styling the Testimonials and Call-to-Action Sections
8 Styling the Pricing Section
9 Styling Components and the Benefits Section
10 Styling the Header
11 Introduction to Styling
12 Integrating Google Fonts
13 Improving the Testimonial, Call-to-Action and Footer Layouts
14 Applying a Grid Layout to the Pricing Section
15 Applying a Grid Layout to the Benefits Section
16 Integrating a Grid Layout
17 Adding an Email Input and Footer
18 Using Blockquotes for Testimonials
19 Adding Benefits and Pricing
20 Adding a Header and Images
21 Deleting Default Content
22 Installing Skeleton
23 Introduction to Jott.ly