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.
Start Learning With a Free Trial
You can take all of these and more web design courses with a free 10-day trial of our monthly subscription. So get started today, and immerse yourself in some in-depth, practical projects that will take your skills to the next level.