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+ AWS Certified Developer - Associate
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 Meditation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native 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
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup 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

This course includes:

  • 3.5 hours on-demand video
  • 2 articles
  • 80 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
Development Web Development CSS Animations

Upgrade Your Css UI Library - Cards, Buttons, Animations etc

In this course you will learn how to create over 35 different CSS components! Cards, Buttons, loaders... Cool stuff
Rating: 3.5 out of 53.5 (71 ratings)
10,515 students
Created by Jordan Smith
Last updated 8/2019
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • You'll create a UI library of Buttons, Cards, Forms, Animations, Hover Effects and more
  • You'll learn how to take your CSS and HTML skills and create outstanding web components
  • You'll have access to more than 50 videos and their source code that you will be free to use in your own projects
  • You'll learn new ways to use CSS properties
  • You'll find downloadable lectures, code and design assets for all projects
  • You'll get friendly and fast support in the course's Q&A section
  • You'll learn how to use before and after pseudo elements to create amazing designs

Course content

5 sections • 37 lectures • 3h 22m total length

  • Introduction
    01:25
  • Preview01:56
  • How to use Font-Awesome
    02:25

  • Auto Typing Text Animation
    04:06
  • Typing Text Animation - Version 2
    05:28
  • Floating Text Animation - Amazing for Your Header!
    04:16
  • Shining Text Animation
    02:52
  • Floating Rings Loader Animation
    06:04
  • Preview06:42
  • Loader Ripple Animation
    04:33
  • Loading Fill Animation
    04:08
  • Loader Ring Animation
    03:53
  • Loader Animation With 15 Circles
    04:30
  • Loading Snake Animation
    11:18

  • Portfolio For Your Landing page Collection
    03:51
  • Fliping Gallery Box Animation
    05:07
  • Image and Text Reveal Animation
    07:16
  • Special Tilting Menu
    09:29
  • Rain Animation
    03:31
  • Cards Linear Gradient Hover Effect
    07:08
  • Quote Card With Linear Gradient Animation
    08:23
  • London Cards With Hover Effect
    07:03
  • Card with Clip Path Hover Effect
    07:13

  • Preview06:28
  • Button With Snake Border Animation
    09:03
  • Button With Border Snake Animation - Version 2
    08:08
  • Social Buttons Flipping Box
    06:14
  • Social Glowing Gradient Buttons
    07:20
  • Activate Button
    07:03
  • Switch Button With Cool Transform Animation
    03:31
  • Power On Button
    06:56
  • Switch Button With Background Change Animation
    05:56
  • Button With Underline Over Effect
    03:09
  • Button With Linear Gradient Effect
    04:29
  • Button Hover Cubic Bezier
    05:53
  • Button With Before and After Transition Animation
    05:18

  • Please Read =)
    00:14

Requirements

  • At least some basic knowledge of CSS
  • At least some basic knowledge of HTML
  • Any computer and OS will work — Windows, macOS or Linux
  • There is no need for any paid software
  • Optional - Basic knowledge of JavaScript (Most videos doesn't requires JavaScript)

Description

                                                  Hi and welcome to an awesome Udemy CSS Course!

                                                                     Creativity is key.


Are you looking to take your CSS skills to the next level?

Does adding 35 more components to your CSS portfolio sound good?

If so, you're in the right place!

CSS is an art and we are all artists!

Throughout the course you will learn how to create more than 50 different CSS components:

Cards - Buttons - Loading pages - Galleries - Forms - Navigation Bars- Sticky headers and footers.


This course is all about CSS!   

----- No  JavaScript knowledge is required -------

We may use Javascript for a few hamburger buttons but don't worry! It's only 3-4 lines of code and will be used sparingly.


If you didn't check out the course video please go ahead and do that :)


Each lecture is for a different component and you'll get the source code as well!

The course has just been launched. We have 35 lessons at the moment and are trying to make more.


The best thing about the course is the support team!

We take great pride in our support.

We will do our best to answer every question within 24 hours. There are no stupid questions. Well, maybe some but we'll answer them anyway :).

Support is our priority!


Basic knowledge of CSS is required! 


During the course, we will use different CSS techniques to show different methods.

Grid (with auto fit and minmax), Flex-box, perspective, and others.

We will be here to answer any questions that you have!

If you're ready to become a better CSS developer hurry up and enroll!

If you're not satisfied there is a 30 - day money-back guarantee. In other words - nothing to lose.


Remember the true power is the QA section where you will find answers and explanations for everything!!


 

Who this course is for:

  • Front-end developers who want to upgrade their UI library with new CSS components.
  • CSS developers who want to modernize their CSS knowledge
  • CSS developers who want to add animations to their toolbox
  • Front-end developers who want to take their Designing skills to the next level
  • Front-end developers who want to take their CSS and HTML skills to the next level
  • Front-end developers who want to better understand CSS by practicing
  • Front-end developers who just want source code . -_-

Instructor

Jordan Smith
Front End Developer
Jordan Smith
  • 3.5 Instructor Rating
  • 71 Reviews
  • 11,313 Students
  • 1 Course

Hi, My name is Jordan Smith.

In the last 5 years I learned HTML, CSS, JavaScript and little bit Python.
I created more than 1000 videos that I want to share with Udemy Students.


If you want to hear more about myself you more than welcome to send me a PM and I gladly will share with you some of my life experiences and i also would like to hear on your life experiences.

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