1. Web Design
  2. CSS

Get Hands-On With These 8 Practical Project-Based Courses

Scroll to top

Theory is fine, but sometimes the best way to learn is by diving into a practical project. So in this article, I'm going to give you a quick introduction to eight courses that are designed to let you learn by building things yourselves—with comprehensive guidance along the way, of course. 

In these courses, you'll learn about various different aspects of web design, from animation to user interface design. And, even better, you'll complete a range of useful projects, building everything from menus and sliders to image galleries and notification bars.

1. 6 Flexbox Projects for Web Designers

The CSS Flexbox model is starting to see more widespread use and is now supported in all major browsers. In this course, Craig Campbell will build upon his CSS: Flexbox Essentials course as he outlines six practical CSS projects for everyday use.

2. 10 CSS3 Projects: Branding and Presentation

In this course you’ll be using CSS3 to complete ten branding and presentation projects, from a personal business card to a PowerPoint-style presentation. These projects will help you understand some of the newest design techniques that CSS3 brings to the table. Kezz Bracey will guide you through the ten projects, and you’ll be using CodePen to build each one.

3. 10 CSS3 Projects: UI and Layout

In this course you’ll be creating ten UI and layout projects that will help you learn some of the awesome new design techniques that CSS3 brings to the table. You'll be using CodePen—each time, instructor Kezz Bracey will ask you to make a copy of the base “pen”, after which you can follow along as she builds the final product. Watch the video below for a little preview of the ten projects you’ll make.  

4. Practical Web Animation

The days of animation-heavy websites are fading, but there is still something to be said for a site with small amounts of subtle, eye-catching motion to help users interpret interfaces. In this course, Craig Campbell will show you practical ways to create animations for buttons, pricing tables, and other web elements, using concise CSS and jQuery to do so.  

5. GreenSock Animation Platform: First Steps

GreenSock is a JavaScript framework which makes it easy to animate HTML elements. During this course, you will take your first steps in learning how to use this powerful framework. As long as you have an understanding of HTML and CSS, along with a basic knowledge of JavaScript, you’ll be equipped with everything you need to follow along.

6. Advanced Animation With GSAP Plugins

In this course, you will go beyond the basics of GreenSock animation as Craig takes you on a tour of the plugins that ship with GSAP.

7. 3 GreenSock Projects: Practical Animation With GSAP

In this course, Craig will walk you through three projects where you will learn how to create programmatic animations, in real-world scenarios, using the GreenSock Animation Platform. You'll learn how to create an animated preloader, an SVG logo animation, and a custom content slider.

8. Up and Running With CSS Transitions

In this Coffee Break Course, Craig will show you everything you need to know to quickly get started creating animations using the CSS transition properties. In just ten minutes, you'll learn how to create motion using nothing more than a few CSS properties.

Watch Any Course Now

You can take any of our courses straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to these courses, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you now get unlimited downloads from the huge Envato Elements library of 200,000+ photos and 26,000+ design assets and templates. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.