7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 13Length: 2.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 The Project Process

As mentioned, we’ll be using CodePen as a live coding environment. However, before we begin creating our ten projects, let’s take an overview of the process we’ll be following each time.

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.

Back to the top