CSS Development (with CSS3!)

Create Flexible, Interesting, and Usable Designs for Desktop &Mobile Websites with CSS tutorial for beginners using CSS3
4.3 (153 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
25,818 students enrolled
$20
Take This Course
  • Lectures 32
  • Contents Video: 4.5 hours
    Other: 10 mins
  • Skill Level All Levels
  • Languages English, captions
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 10/2012 English Closed captions available

Course Description

Anyone who has worked in web development for more than five minutes can tell you: the difference between an outstanding site and a terrible site is the quality of the CSS. With our CSS Tutorial for Beginners course, you can learn to make high-quality, graphically amazing and thoroughly impressive web sites.

All it takes is a little creativity and a strong understanding of CSS design and code and your website will look exactly the way you want it to.

LearnToProgram’s Zachary Kingston brings you this dynamic and comprehensive CSS course. This CSS Tutorial for Beginners is perfect for both beginners who don’t understand how to use CSS and experts who don’t understand why they cannot get their website to look exactly the way they want it to.

Watch over 4 hours of engaging video lectures, sharpen your skills with fun and creative lab exercises, and study the dozens of style sheet examples provided.  With this CSS course, you will become fully competent in CSS and master of your website!

Take this ultimate CSS Development Course (With CSS3!) course now and start learning CSS.

What are the requirements?

  • Some Understanding of HTML
  • Mac or PC with Internet Connection
  • Text Editor and Web Browser

What am I going to get from this course?

  • How to Use CSS Selctors
  • How to Integrate CSS in to Web and Mobile
  • How To Style Text
  • How to Style Lists
  • How to use Sprite Sheets
  • How to Work with Images in CSS
  • How to Create a CSS Drop down model
  • How to use and apply the CSS Box model to Page Layout
  • How to Create CSS Tranformations
  • How to Create CSS Animations
  • How to Understand and Use CSS Position
  • What considerations to take when using CSS for mobile

What is the target audience?

  • Web Designers
  • Web Developers
  • Programmers
  • Web Development Students
  • Print Designers Learning Web
  • Software Developers
  • HTML Coders
  • PHP Developers
  • Creatives
  • Mobile Developers

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Welcome to CSS
05:38
In this introductory video, Zach Kingston gives you an overview of what CSS is and some history behind it.
08:57
In this section Zach walks you through modifying a simple Hello World web page with CSS by changing background colors, font colors and gives you a glimpse of how CSS handles multiple declarations of the same attribute.
14:02
Understanding the structure of your HTML will give you a stronger handle on writing great CSS. Zach introduces some new terms that will be important when it comes to really getting to understand your HTML. These new terms prove very useful as Zach shows you how create more specific CSS rules. He also gives you a handy algorithm to help you determine the priority level of the rules you are writing.
07:02
There are three ways to add CSS to your web page: Inline, within a "<style>" tag and in a separate CSS file. In this video Zach demonstrates all three methods and shows you how they interact when used on the same page.
06:33
CSS3 is currently under development, but even though this is the case you can still learn it's new features and test them out on your web page to a certain extent. In this video Zach introduces CSS3 and how to start using it.
1 page
Complete this lab exercise after you finish watching the lectures from this section.
Section 2: Styling Specific Elements
16:21
CSS gives you the control over what your web site will look like. In this video Zach shows you some useful attributes to be aware of while styling text elements on page.
09:39
Tables and lists are common elements that you will run into while designing your web page and there are a lot of options available to you through CSS. In this video Zach demonstrates how to change background colors for specific parts of your table and he shows you a few of the options you have for ordered and unordered list bullets.
09:13
There are countless ways that backgrounds can be and have been styled. In this video Zach shows you some useful tips and tricks when it comes to designing your web page's background.
11:56

The Sliding-Door Technique is used to create a button that appears to re-size based on the text that is contained within it. It involves two separate images and some work with padding to get the correct placement of the text.

08:08
A Sprite Sheet is just a single image file that contains multiple separated images. In this video Zach shows you how to work with sprite sheets to display the images one at a time through an appropriately sized window.
10:23
The navigation around your web site is something to keep in mind while designing your web site because it can very quickly become messy and unorganized. Drop Down Menus are a very useful and aesthetically pleasing way to organize the way a user navigates throughout your web site. In this video Zach walks you through creating your own drop down menu and makes you aware of some things that you should watch for while writing your CSS.
1 page
Complete this lab exercise after you finish watching the lectures from this section.
Section 3: The Box Model
10:01
The box model is a concept used while developing in CSS. Each HTML element has it's own box model that needs to be needs to be kept in mind while styling your page. In this video Zach demonstrates the effects of changing the different attributes that contribute to the box model and in turn the look and feel of the element.
10:27
The content area of the box model is the portion that displays what is contained within an HTML element. In this video Zach shows you how to deal with re-sizing images and content overflow.
12:22
Borders and outlines can help give your images and other elements definition and can help your page look more organized when needed. In this video Zach walks you through a few of the options you have when styling borders and outlines.
11:08
It is important to be aware of the amount of margin and padding of the elements on your page. In this video Zach shows you how to work with these two attributes and helps you become aware of some problems you may run into while working with them.
1 page
Complete this lab exercise after you finish watching the lectures from this section.
Section 4: Animations with CSS3
24:31
Even though CSS3 is still under development, you still have access to a good number of provisional features. In this video Zach starts with the transform attribute. This allows you to take an element and scale, rotate, or skew it along two, and in some cases, three dimensions.
15:40
The transition attribute available through CSS3 allows you to set transitions that are triggered when a designated event is triggered. In this video Zach demonstrates the use of transitions and shows you define multiple aspects of the transition.
18:27
With the implementation of CSS3 animations, you no longer need to rely on javascript to add simple animation and movement of elements onto your page. In this video Zach shows you what you'll need to know to get this great feature working on your page. By using a sprite sheet and defining two simple animation functions Zach creates an animation of a little man walk back and forth across your screen!
1 page
Complete this lab exercise after you finish watching the lectures from this section.
Section 5: Putting Elements Together
09:47
Understanding block and inline elements in HTML is something that can be somewhat frustrating when it comes to styling your page. In this video Zach gives you an in depth explanation of block versus inline while also showing you the effects of changing around the display attribute of your elements.
10:06
CSS gives you the power to control the position of the elements on your page. In this video Zach goes through the options that you have when it comes to positioning elements.
15:05
Another way to help position your elements is the "float" attribute. By setting your element to float to the left or right the surrounding content on your page makes space to display the element fully while continuing to display it's own contents around it.
2 pages
Complete this lab exercise after you finish watching the lectures from this section.
Section 6: CSS for Mobile
07:51
Mobile browsers are quickly becoming the one of the more dominant outlets where users view your web site. This is definitely something to keep in mind when designing and styling your web pages. In this video Zach shows you why it is important to keep this in mind and he also shows you where to get the tools you'll need to test your web page on a handheld device emulator.
22:22
In this video Zach shows you how to create a web page that is prepared for both large and small screen sizes. He shows you what you'll need to set up so that your web page can keep the same overall look and feel while adapting to the size of the screen that the user is view it on.
1 page
Complete this lab exercise after you finish watching the lectures from this section.
Section 7: Final Project
2 pages
This is the CSS Development Final Project. This project ties together everything you have learned throughout the course to make a complete web page that includes complete stylization, simple animations, drop down menus and more.
Section 8: Lab Solutions
Completed Lab Exercises
Article
Section 9: Bonus Lecture
Article

Here's some bonus material to help you continue learning.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

LearnToProgram, Inc., Learn Web, Mobile and Game Development

LearnToProgram Media is a leading publisher of web, mobile, and game development courses that are used by over 500,000 people in 65 countries. LearnToProgram's valuable network of technical resources includes content on YouTube, iTunes, and Roku, as well as books, free tutorials, and online courses.

With a mission of “teaching the world to code" LearnToProgram instructors are teachers first and technical experts second. Their primary skill is relating complex technical information to nontechnical people learning web, mobile and game development. The entirely online, self-paced sales model allows students to learn at their own pace.

With over 40 courses on the market, LearnToProgram offers students flexible programs in web development, mobile application development and game development. Currently the company's most popular online courses include Become a Certified Web Developer and 10 Apps in 10 Weeks.

The company is based outside of Hartford, Connecticut.

Instructor Biography

Zachary Kingston is a recent Clarkson University graduate with degrees in Computer Science and Psychology. He hopes to use his diverse set of skills  to create and teach technology in a unique, user friendly manner. Based out of Jericho Vermont, he works as a software contractor, exploring his interests in education and entrepreneurial business. 


Life long learning is important to Zachary which is represented by his eclectic and broad employment history. At one point he made a living teaching tourists about ice cream. He has also written many different software applications using a variety of development platforms. In the future, Zachary hopes to start his own game development company or teach computer science at the secondary level.


While Zachary was originally drawn to programming for the specific purpose of game design, his formal and practical educations have greatly broadened his appreciation for the discipline. As programming languages continue to become simultaneously more powerful and easier to use, he believes the time is right for computer science to become a core discipline in schools. 


During his free time, Zachary can be found frantically developing video games  hiking, winter camping, frigid Vermont winters, and crisp summers. Zachary's immediate family also lives in Vermont. He believes his greatest achievement is somehow maintaining a five-year relationship.

Ready to start learning?
Take This Course