Start a free Courses trial
to watch this video
In this chapter, we introduce the CSS3 based project that we'll be designing and developing. We'll also learn about the importance of web standards and CSS3.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upHi, I'm Nick Pettit. 0:00 We're going to design and develop a web-based photo gallery using CSS3 0:02 as the primary driving technology. 0:07 Before we get started, let's go ahead and take a look 0:09 at the project that we'll be creating. 0:12 [?music?] 0:14 [Master Class: CSS3 with Nick Pettit] 0:28 [My Photos] 0:36 So here we have our CSS3-based photo gallery 0:38 and you can hover over these photos 0:43 and they'll have a nice box shadow underneath them, 0:45 and when we click on them, the photos will enlarge--just like that-- 0:49 and they'll rotate a little bit, 0:54 and we have some pretty nifty effects going on here. 0:57 All of this code is reusable to a certain extent 1:02 because in a real world project, 1:06 not all of the code will be 100 percent flexible, 1:09 reusable, plug and play ready. 1:12 Projects like this typically have tighter specifications, 1:15 so what we lose in flexiblity 1:18 we get back in speed of development and ease of maintainability. 1:21 So for example, these pictures are a specific size, 1:25 so you can't use a bunch of differently-sized photos 1:29 in this particular gallery. 1:33 So let's go ahead and take a look at the code 1:35 that is driving this page. 1:38 We'll switch over to our text editor. 1:40 Here, you can see that we have some pretty clean and simple HTML. 1:42 All that's on this page is a container, 1:47 a first-level headline, 1:52 an unordered list, 1:54 and a bunch of photos inside of the unordered list. 1:57 Down here at the bottom, 2:01 we have a second-level headline 2:03 and a paragraph just describing the gallery. 2:06 This project is using CSS3 all over the place, 2:09 so let's go ahead and take a look at our style sheet. 2:13 For the background of the page, we're using CSS3 gradients, 2:17 and we're also using multiple backgrounds, 2:22 which is a new feature in CSS3. 2:24 Additionally, we're using CSS3 fonts, and we're downloading fonts from the web. 2:29 We are using text shadows, as you can see right there. 2:37 We're using a few more web fonts. 2:46 We're using the multi-column layout module. 2:48 We have a few box shadows on the photos, 2:56 and for the animations, we're also using webkit-transitions and transforms. 3:04 So if we scroll down here just a little bit, 3:10 you can see that we're rotating our photos when they are made larger. 3:13 Finally, what I'd like to show you is some of the JavaScript that we're using. 3:18 This photo gallery is rather flexible, 3:25 and so for the behavioral stuff and the interaction of actually clicking on the photos, 3:28 we're using jQuery, 3:33 and this gives us a clean separation of structural information with the HTML, 3:35 presentational information with the CSS, 3:41 and behavioral information with the JavaScript. 3:43 We're still using CSS3 for the actual animations. 3:47 jQuery is only used for the act of clicking on the photos. 3:51 This project looks simple on the surface; it has some wow factor 3:58 and under the hood, there are lots of interesting challenges and problems 4:02 that we'll solve along the way. 4:06 [?music?] 4:08 [Technology] 4:10 So, you might be wondering, "Why use CSS3?" 4:14 Well, web standards are really important for the preservation 4:17 and availability of information now and in the future. 4:20 There are many reasons to use CSS3, 4:24 but fundamentally, CSS3 allows for faster load times and more semantic markup. 4:26 These are really important concepts to understand, 4:32 so let's go ahead and talk about each one. 4:35 There are three umbrella technologies that comprise web standards, 4:38 and in most web projects, you're going to use all of them. 4:41 HTML is the structural layer, 4:45 CSS is the presentational layer, 4:47 and JavaScript is behavioral. 4:50 These three technologies provide us with just about everything we need 4:52 to build a website. 4:56 The HTML can hold the content, the CSS describes what it looks like, 4:58 and the JavaScript makes it interactive. 5:02 If that seems confusing, 5:05 it might help to compare a website to something in the real world. 5:06 Take a building, for example. 5:09 HTML would be the steel beams and concrete that form the foundation and infrastructure. 5:11 By itself, HTML is enough, but it's kind of plain. 5:16 You can think of CSS as the paint, the carpeting, and the facade of the building. 5:21 Basically, CSS is just a way of enhancing your HTML 5:26 so that the information is more easily interpreted by people. 5:30 Going one step further with this analogy, 5:35 JavaScript might be all the internal wiring and plumbing. 5:37 When you flick on a light switch, some sort of magic happens 5:41 and the light turns on. 5:44 This is how JavaScript should be used on a web page. 5:46 When the user clicks or interacts with something on the page, 5:49 JavaScript events get fired and execute code 5:52 that typically makes something happen on the page and gives the user feedback. 5:55 Each one of these layers--HTML, CSS, and JavaScript-- 5:59 have a specific purpose. 6:03 In a real-world project, there's almost always going to be some overlap, 6:05 but ideally, you should try to maintain a clean separation between each layer 6:09 as much as possible. 6:14 For example, if you start including too many presentational class names in your HTML, 6:16 suddenly, your HTML is not only describing the structure of the document-- 6:21 it's also describing what it should look like. 6:25 That's bad. 6:27 Another nice thing that CSS3 allows for is animation. 6:29 Using transforms, transitions, and animation, 6:33 you can cut out tons of complex JavaScript 6:36 that used to animate all of the stuff manually. 6:39 CSS3 can do a lot of things like curved borders and shadows 6:42 that until now had to be done with images. 6:46 For example, if you wanted to add curved borders, you had to create curved images 6:50 for all four corners, or make two images for a top or bottom, 6:55 or something ugly like that. 6:59 This isn't ideal because not only does it mean that the page takes longer to load; 7:01 it also means that you have to do more work any time you want to change something 7:06 or even experiment. 7:11 With CSS3, it's fast to try out new borders and shadows. 7:13 There's a lot more to it than that, though. 7:17 As I mentioned previously, you can use CSS3 for animations 7:19 rather than relying on JavaScript to do the heavy lifting. 7:23 Any time that you can make the browser do all of the hard work 7:27 as opposed to JavaScript, it's a huge performance win. 7:30 This is especially true in some browsers, like mobile Safari on IOS 7:34 where transforms and transitions are hardware-accelerated by the GPU. 7:38 As you're probably aware, CSS3 is still an evolving standard, 7:44 so you might be wondering if CSS3 is ready to use on a real website 7:49 and the answer is "Absolutely!" 7:53 CSS3 support is getting better all the time. 7:55 Safari, Chrome, Firefox, and Opera 8:00 are all continuously improving their CSS3 support 8:02 and they already have really good CSS3 support right now. 8:06 Currently, Internet Explorer really isn't all that great, 8:10 but IE9 includes CSS3 selectors, 8:13 rounded corners, and lots more to be excited about. 8:17 In fact, lots of properties come from older versions of browsers, 8:20 including Internet Explorer. 8:24 For example, the font face property comes from a really early version of Internet Explorer. 8:26 Something else I should mention is the controversy 8:32 surrounding the inclusion of transitions and animations in the CSS3 specification. 8:35 Basically, a lot of people think that transitions and animations 8:41 should be left to the behavioral layer, which is JavaScript, 8:45 and not included in the presentational layer, which is CSS. 8:48 In my opinion, it's just time to modernize our definition of what's presentational 8:53 and what's behavioral. 8:57 If you think about it, transitions and animations 8:59 are really quite similar to interactions we already have-- 9:02 namely, the hover pseudo class. 9:05
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up