• Programs
  • About
  • Contact
Become a Web Developer
Become a Designer

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.

Topics Covered

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.

Development Environment

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.

Adding Animations

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

What you'll build


Get the book

About the author

Mentors joey

Joey Kirk

Joey is the UX/UI Design Program Director at Bloc. Joey has led and helped develop UX teams for several companies. He has also led design for a number of startups as well as helping form the UX team for one of the largest domestic media companies. He has 10 years of experience designing over 250 products and is deeply passionate about sharing his craft.