Make Four Projects From Scratch: CSS And HTML

Become a CSS expert after completing four project using CSS and HTML

(33 ratings)

5,271 students

Created by Eric Tam

Last updated 1/2019

English

English [Auto]

30-Day Money-Back Guarantee

What you'll learn

How to create drawings and special effects using CSS
How to use the more complicated properties in CSS

7 sections • 108 lectures • 5h 34m total length

Preview01:23
Preview00:50
Preview00:47

Preview01:17
Preview00:59
Challenges
01:00
Default Settings And Body Tag
01:01
Penguin's Container
01:49
Head Of Penguin
01:19
Irregular Shape Of Head
01:29
Adding A Before Element To The Head
03:50
Adding An After Element The Head
02:00
Adding Container of Inner Head
01:46
Adding A Before Element to Inner Head
02:37
Adding An After Element To Inner Head
02:22
Penguin's Eyes Container
01:28
Outline Of Penguin's Eye
03:21
Second Part Of Penguin's Eye
02:33
Third Part Of Penguin's Eye
02:01
Adding Right Eye Of Penguin
01:29
Adding Mouth Of Penguin
04:02
Setting Up Body Of Penguin
03:00
Adding After Element Of Penguin
03:30
Adding Container Of Arms And Left Arm
04:34
Adding Right Arm Of Penguin
02:42
Adding Feet To Penguin
04:39

Preview01:18
Preview01:13
Challenges
01:33
Before We Begin
02:27
Setting Up The Body Tag
02:55
Container Of Ghost
02:42
Creating The Ghost Wrapper
01:44
Creating Top of the Ghost: Part 1
01:52
Creating Top Part Of Ghost: Part 2
02:10
Adding Right Shade Of Ghost
03:09
Creating The Gtop Class
02:15
Creating The Ghost's Left Eye
03:18
Creating The Ghost's Right Eye
03:16
Creating The Ghost's Left Blush
02:32
Creating The Ghost's Right Blush
02:11
Creating The Middle Of The Ghost
02:29
Creating The Bottom Of The Ghost
03:05
First Part Of The Wave: The Shovel Class
04:26
Second Part Of the Wave: The Crest Class
04:28
Adding More Shovels
03:21
Adding More Crests
04:39
Adding The Back Shadow
05:18
Adding The Bottom Shadow
03:36
Creating The Floating Motion
03:29
Making The Ghost's Eyes Blink
07:32
Creating The Growing Motion
04:47
Making The Ghost Glow
09:16

Preview00:56
Preview00:57
Challenges
00:35
Default Settings And Body Tag
02:13
Setting Up The Variables
03:12
The Chest's Container
04:59
The Chest Panel Class
02:23
The Chest Panel Front Class
01:46
The Chest Panel Front Frame Class
02:10
Adding A Before Element To Front Frame
02:02
Adding An After Element To Front Frame
01:29
The Chest Panel Back Class
01:43
The Chest Panel Top Class
02:42
The Chest Panel Bottom Class
02:13
The Chest Panel Right Class
03:30
The Chest Panel Left Class
02:01
How To Create A Chest Drawer
03:36
Begin Creating The Chest Drawer
05:32
Details And Summary Tags
03:27
Adding After Tag To Details And Summary
02:34
Adding More To Details Tag
03:13
The Chest Drawer Structure Class
03:21
The Chest Drawer Panel Class
02:21
The Chest Drawer Panel Left Class
03:06
The Chest Drawer Panel Right Class
03:27
The Chest Drawer Panel Bottom Class
03:46
The Chest Drawer Panel Back Class
03:58

Requirements

A basic understanding of HTML and CSS

Description

General Overview

If you are an aspiring web developer hoping to get a deeper understanding of CSS, this course will take your skills to the next level.

All of these projects below will help you better understand some of the more complicated concepts in CSS.

For example, you will become more familiar with how to use variables, functions, box-shadows as well as how to use more complicated CSS properties such as animation and transform.

The projects in this course are made using pure CSS: no knowledge of javascript is required.

THE TWO PROJECTS:

A tapping hand
A penguin
A ghost with glowing orbs
A chest with three drawers

Who this course is for:

Students interested in learning how to apply CSS to real world projects

Eric Tam

Software Developer

4.3 Instructor Rating
278 Reviews
31,231 Students
11 Courses

*Over 100 Five Star Reviews*

I am a self taught software developer currently working with HTML, CSS, Javascript and PHP.

I have been programming for more than seven years.

Most of my courses are project based as I believe the best way to learn is to create your own projects.

If you need any assistance while taking my courses, please feel free to ask. I love helping students out.

Make Four Projects From Scratch: CSS And HTML

What you'll learn

Course content

Introduction3 lectures • 3min

CSS Review14 lectures • 1hr 4min

Project 1: Right Hand13 lectures • 48min

Project 2: Penguin23 lectures • 55min

Project 3: Ghost27 lectures • 1hr 31min

Project 4: Chest With Three Drawers27 lectures • 1hr 13min

Conclusion1 lecture • 1min

Requirements

Description

Who this course is for:

Instructor