Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Personal Transformation Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Online Business Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development CSS

CSS Master Course: For Beginners

Create stunning layouts using CSS3
Rating: 4.8 out of 54.8 (46 ratings)
4,705 students
Created by Jesse Caine
Last updated 6/2019
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • Learn how to use CSS to create beautiful websites

Course content

13 sections • 118 lectures • 16h 57m total length

  • Preview01:52
  • Navigating Atom
    04:43
  • Atom Shortcuts
    09:50
  • Previewing The Four Projects
    10:23

  • What is CSS?
    03:47
  • What is a CSS Rule?
    05:34
  • Basic Selectors
    18:01
  • Web Resources
    00:00
  • The Cascade & Specificity
    21:31
  • Web Resources
    00:00
  • Typography
    13:42
  • Backgrounds
    12:39
  • Shorthands
    12:48
  • Wrapping Up
    07:21

  • Preview09:21
  • Padding
    Preview07:57
  • Borders
    13:04
  • Height & Width
    09:07
  • Display
    16:21
  • Margin
    17:16
  • Outline
    06:42
  • Box-Sizing
    05:27

  • Fluid Vs. Fixed Layouts
    04:19
  • Percentage Unit
    04:05
  • Relative Font Sizes
    05:06
  • Viewport Units
    08:08
  • Em Unit
    10:16
  • Rem Unit
    06:25
  • The Calc() Function
    07:15

  • Preview05:28
  • Preview12:52
  • Overflow
    05:15
  • Relative Positioning
    09:18
  • Absolute Positioning
    14:50
  • Fixed Positioning
    07:04
  • Sticky Positioning
    04:28
  • Z-Index
    04:13

  • Preview Of The Final Version
    00:46
  • Setup
    06:00
  • Landing Section
    13:26
  • Info Section
    11:36
  • Blog Preview Section
    08:06
  • Pricing Section
    17:40
  • Testimonial Section
    07:47
  • Newsletter Section
    07:28
  • Footer Section
    17:58

  • Hierarchy Terms
    05:07
  • Selecting Via Hierarchy
    05:05
  • Attribute Selector
    12:09
  • Pseudo Classes Pt. 1 Child Classes
    04:01
  • Pseudo Classes Pt. 2 Type Classes
    05:21
  • Pseudo Classes Pt. 3 Periodic Selectors
    07:42
  • Pseudo Classes Pt. 4 Highlighting & inputs
    12:15
  • Pseudo Classes Pt. 5 Not
    05:49
  • Pseudo Elements
    Preview16:15
  • Combining Selectors Pt. 1
    06:06
  • Combining Selectors Pt. 2
    09:30

  • Landing
    20:28
  • Navbar
    11:27
  • Action Section
    16:45
  • Info Section
    05:47
  • Featured Section
    07:38
  • Register Section
    12:33
  • Newsletter Section
    07:31
  • Footer Section
    07:47

  • What Are Media Queries?
    04:15
  • Web Resources
    00:00
  • Media Objects
    14:33
  • Types & Features
    12:11
  • Logic
    06:00

  • Preparing The Files
    08:50
  • Navigation & Header
    05:54
  • Articles
    10:24
  • Sidebar
    19:34
  • Footer
    05:31
  • Adding Media Queries
    15:52

Requirements

  • Basic HTML.

Description

This course will take your CSS skills from the absolute basic to advanced.  You'll learn everything you need to know to create complex layouts and elegant designs. During the course, we'll create 4 unique CSS projects, those projects will be covered in sections 6, 8, 10 and 12.


Course Map

Section 2) Basic CSS - This is the first real section of the course.  This section starts off by assuming 0 knowledge of CSS.  As so, I will start off by breaking down in detail the concept of a CSS rule and then move on to basic selectors.  Before the end of this section you'll have all the skills necessary to alter and typographic and backgrounds elements of your web pages.


Section 3) The Box Model - This section will breakdown the CSS box model.  The box model is perhaps the most important concept that a web developer must understand before they can start creating any sort of layouts.  I'll also cover in this section how to set the height and width of HTML elements.


Section 4) CSS Units - Up until this section we'll have only used pixels for unit sizes.  Pixels are great for some things, but not optimal for everything.  This section will show you how you can use relative units to make your projects easier to maintain.


Section 5) Positioning - CSS positioning can be a pretty complex thing, but it doesn't have to be.  This section will simplify many of the more complicated CSS properties.  Most notably things like floats, absolute positioning, vertical align, etc.  After this section, you'll have the tools to create nearly and layout you'll ever need to create.


Section 7) Advanced Selectors - CSS offers many different types of selectors and also allows combining those selectors to create an even more specific selection.  This section will also introduce you to pseudo classes & pseudo elements.


Section 9) Responsive Design - This section is short, but super important for modern web design.  After this section you'll be able to use CSS3 media queries to drastically alter the layout of your pages based off the size of the screen currently viewing it.


Section 11) Animations & Transitions - This section will breakdown CSS transitions and CSS key-frame animations.  CSS transitions will give how hover effects a much smoother transition and can be a great way to add some life into your web pages.  Key-frame animations are more about creating animations that play when the page loads.  This section will also show you how to use the transform property.


Section 13) Bonus - The final section of the course will go over many of the more "fun" CSS concepts that didn't fit anywhere else in the course.  Including CSS variables, Gradients, Shadows, Filter, and much more.


If you have any questions about the course, feel free to message me.  I usually reply very quickly, if anything I'll get back to you as fast as possible. 


I hope to see you in the course!

Who this course is for:

  • Novice Web Developers looking to up their CSS skills.

Featured review

Dead Pool
Dead Pool
121 courses
13 reviews
Rating: 5.0 out of 54 months ago
Loving the course so far. I've had experience making my own sites, and projects, but I like to catch up and learn from lectures, take notes and then create something based off of my learning. This course so far has been a great review as I remember all of the concepts that are necessary starting out with CSS, and learning a few new tricks along the way. Plus I like his teaching method and have another course of his I will complete soon.

Instructor

Jesse Caine
Professional Web Developer
Jesse Caine
  • 4.4 Instructor Rating
  • 985 Reviews
  • 39,479 Students
  • 3 Courses

My name is Jesse Caine, I am a Web Developer from Canada.  I do freelance work when the opportunity arises, but I am usually spending my time making new courses.  I'm always exploring and learning new things.

My goal on the platform is to create awesome courses that are accessible to those of all skill levels.  It doesn't matter whether you are a beginner or someone who is knowledgable about a particular subject, you will be able to find value from my courses.

If you have any questions about my courses, me, or course promotions, feel free to drop me a message.  I try to respond as soon as possible. 

I appreciate any feedback you can offer.  Letting me know what you like or don't like about my courses is greatly beneficial to me.  I've already received lots of feedback and because of it I feel like I can make even better courses.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.