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

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 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

What you'll build

Preview

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.