Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:13Length:2.6 hours

Next lesson playing in 5 seconds


Free Preview: 10 CSS3 Projects: Branding and Presentation


  • Overview
  • Transcript

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. We’ll be using CodePen to build each one.

Learn CSS: The Complete Guide

We've built a complete guide to help you learn CSS, whether you're just getting started with the basics or you want to explore more advanced CSS.

1. Introduction

1.1 Introduction

Being up to speed with CSS3 is essential for ensuring that you have every possible web design technique at your disposal. CSS has evolved into a rich and powerful language, now with the ability to do things that in the past required third-party plugins or intensive JavaScript. In this course, you'll be creating ten full CSS3 projects that will give you hands-on experience with some of the awesome new possibilities that are now available for designers. You'll be creating all kinds of things from animated logos to image galleries, to motion typography, just to name a few. And along the way, you'll be learning all the ins and outs of CSS3, including animations, flexbox, new ways to use gradients, new selectors, viewport relative units and much, much more. So let's go ahead and get started on ten CSS3 branding and presentation projects. I'll see you in the first project.

1.2 The Project Process

Hi, this is Kezz Bracey for Tutsplus. Now before we go and start working on our CSS3 projects, we're just gonna have a quick overview of the process that we're gonna go through for each lesson. We're gonna be using CodePen to create our projects and that's at codepen.io. If you haven't used codepen before it's an awesome coding tool that lets you type your HTML and your CSS in these little panels here, and you'll see a preview of your code updating in real time as you work on it. For each project when you go into the lesson's course video on tutsplus, look at the related links section below the video. Down there you'll get a link to the base pin for the project. And this base pin will have the preliminary HTML and CSS for the project already set up. Now, on screen now is one of these base projects. At the start of each lesson, you should open up the base pin for the project and fork it into your own new pin. Now, you can do this by hitting the fork button here. And that will create an exact duplicate of the base pin that you can work on as you follow the lesson. If you have a code pen account make sure you sign it before you fork the base pin so you can keep track of your progress easily under your profile. And after your fork the pin, you can also close off the JavaScript editor so you have a little bit more room because we'll be working purely in HTML and CSS. Each one of the base pins has two common CSS settings, which you can view by hitting the little gear icon in the top left corner of the CSS panel. Now we're always gonna be using the normalize setting, that's gonna import normalize.css. And then we're also going to always have AutoProof checked. And that's gonna mean that we can just write straight CSS3 syntax without having to replicate our code within multiple browser prefixes. And those automatically added browser prefixes are gonna help a lot with making sure that you have as much cross compatibility as possible with the code that you're gonna be writing. But the other thing that you need to bear in mind is we are working with CSS 3. So that means that there are gonna be things we do that aren't going to work in older browsers. So as you go through each project, make sure that you pay attention to which of the new elements there, and have a look underneath the video for each project. And we'll give you some links there to caniuse.com, which will tell you which browsers support the CSS3 properties that are used in that project. And in some cases the pins will also have some external google fonts or CSS files pulled in via the settings in the HTML pane. And you can check out this box here, to see what extra resources are being pulled into the project. In the related links section for each lesson, along with the link to the base pin, you'll also see a link to the completed pin. And this is gonna show you what the project you're working on will look like once it's finished. Now for each lesson I'm gonna to be using all the allotted time to go through understanding and producing the CSS3 code that's involved. So I'm not gonna be taking out any time in the lesson videos to show you what the completed project is gonna look like. But what you can do is before each lesson starts, just have a look at that completed code pin link. And then you'll know what you're gonna be working on before you get going. And as you finish each one of the projects that we're gonna be going through, we would love to see what you've done. So, as you finish each one, tweet your pin to #10CSS3projects. And you can also follow us on Twitter @wdtuts. Alright, so now we are all set to go. In the next lesson we'll get started on your first CSS 3 project. I'll see you there.