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 Introduction to Jott.ly
2 Installing Skeleton
3 Deleting Default Content
4 Adding a Header and Images
5 Adding Benefits and Pricing
6 Using Blockquotes for Testimonials
7 Adding an Email Input and Footer
8 Integrating a Grid Layout
9 Applying a Grid Layout to the Benefits Section
10 Applying a Grid Layout to the Pricing Section
11 Improving the Testimonial, Call-to-Action and Footer Layouts
12 Integrating Google Fonts
13 Introduction to Styling
14 Styling the Header
15 Styling Components and the Benefits Section
16 Styling the Pricing Section
17 Styling the Testimonials and Call-to-Action Sections
18 Styling the Footer
19 Animating CSS
20 HTML with Animated CSS Classes
21 Animation Effects
22 Managing your Code
23 Deploying to Github Pages