Start a free Courses trial
to watch this video
In this video, we'll dive directly into coding the HTML markup for our project.
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 up[Master Class Fluid Grids] [HTML Markup] 0:00 In the previous master class about responsive web design, we learned how to create 0:06 low fidelity and high fidelity markups when planning for responsive layouts. 0:11 Now, we're going to start building our project using just html and css 0:15 and when we're writing our style sheet we'll do all of our fluid grid calculations. 0:20 Before we get started, we should take a look at the directory structure 0:26 that we're starting off with. 0:30 This is our web root, and we have a folder called "images" that I've created, 0:32 and we have a folder called "videos" that I've also created. 0:38 First, we'll jump into the images folder, and the first image we have here 0:43 is called "app.screenshot.jpeg", and this is simply a screenshot of our application 0:48 which we'll be using for the poster image in our HTML5 video tag, and we'll also be using it 0:56 as a fall back should a browser not support HTML5 video. 1:03 So we'll go back and the next image is geonotation.png, and that's the image that 1:08 we created in Photoshop which is the logo for our application. 1:16 We have noise.png which in the browser here you can't really see, but we'll be overlaying 1:22 this image on top of the gradient on our call to action button. 1:29 Next we have phone.png. 1:34 This is quite a large image, and this will be the container for our HTML5 video. 1:38 Next we have phonestatic.jpg, and this is yet another fall back image 1:46 should a browser not support HTML5 video. 1:53 We'll get more into that later. 1:58 We'll go back here and we're going to jump inside the icons folder, which is inside of our 2:00 images folder, and here we have 4 images that we've picked up from the Crystal Project 2:06 for KDE, and we have our lightning bolt. 2:12 We have a globe. 2:16 There is a heart. 2:19 And we have a notepad. 2:22 So we'll go back here. 2:24 We'll go back into the images folder, and then we'll go back all the way up to the web root 2:26 and then we're going to jump into the videos folder here, 2:33 and here we have 4 different videos. 2:37 The first one is just the original screen cast that I took of the HTML5 mobile application 2:41 that we're advertising in this project, and I've re-encoded this video into 3 different formats. 2:48 We have mp4, ogv, and a newer format called webm. 2:55 Currently, there isn't a single codec that is supported across all browsers, 3:01 we do need to encode our HTML5 videos into multiple codecs. 3:06 So go ahead and click on app_demo.mp4 and this is basically what the video looks like. 3:12 It's just a screen cast of an iphone and it doesn't necessarily have to be an iphone. 3:20 This could be representative of really any phone since we're advertising 3:26 a web application. 3:30 So we'll go ahead and go back here, 3:33 and now we're ready to go ahead and jump into our text editor. 3:35 So again, we have the same directory structure here. 3:39 We have our images folder, and we have our videos folder, and 3:43 now we're going to go ahead and create our first file. 3:51 So first we're going to type out our HTML5 doc type, 3:58 which looks like this, DOCTYPE in all caps. 4:02 Then we'll type out our HTML tag. 4:07 The language will be English, 4:11 and we'll go ahead and close that. 4:14 We'll open up the head tag 4:19 and close it 4:22 and we'll open up the body tag 4:24 and close that. 4:27 So let's start out with our head tag. 4:29 First, we'll go ahead and set the character set to utf-8, 4:32 and then we're going to put a title tag on this 4:43 and the project we're advertising is called "GeoNotation" so we'll put that 4:48 for our title, and for now that'll wrap it up for our head tag, but we'll be revisiting this later. 4:55 So let's go ahead and move onto our body tag, and the first thing we're going to do is we're 5:02 going to create a div with the id "wrapper", 5:07 and this will contain pretty much everything that's going to be on our site. 5:11 Next, we need another div called "main_content." 5:17 We'll go ahead and close that. 5:24 Moving further in, we're going to create a div with the id "header" 5:30 and close that and then inside of our header, we're going to create another nested div 5:36 with the id "logo." 5:43 Inside of our logo div, we're going to create a first level headline, 5:50 and this will be where our logo will go for our site, and inside of the first level headline we'll 5:58 put the name "GeoNotation." 6:06 We need to put the actual image that is our logo, which again is in the images folder, 6:10 and we named it "geonotation.png" 6:19 and we should put some alternate text on here, and we'll just say "Logo for the Geonotation 6:25 application" and then after our image we'll create a second level headline, 6:34 and this will be our tagline just below our GeoNotation logo, and it will say 6:42 "Take notes anywhere." 6:48 Go ahead and save this out and we'll scroll down a little bit here, 6:52 and just outside of our logo we'll go ahead and open up a paragraph, 6:58 and inside of our paragraph, we'll say "Have you ever written something down, only to later 7:03 be confused by your own note?" and then expounding upon that, 7:14 we'll go ahead and create another paragraph 7:23 and inside of this one we'll just actually go ahead and copy and paste 7:28 some text from off screen, so I think you get the idea, 7:32 and then we're done with our header div. 7:37 So let's go ahead and skip down here and make some room to work. 7:41 So just after our header div, we'll create another div with the id "phone", 7:45 and we'll go ahead and close that 7:52 and inside of our phone div, we're going to create a video container. 7:57 Now, this phone div is what will actually contain an image of our phone. 8:07 This video container will contain an HTML5 video. 8:12 So let's go ahead and create that now. 8:17 We'll type out our video tag. 8:20 We're going to give it a width of 100%, 8:23 and this will be for our fluid grid, which we'll be talking about later on. 8:29 We're going to create a poster image for our video 8:33 and this will be the image that is shown when the video is not playing. 8:37 This will be taken from the images folder, 8:43 and this is the file called "app_screenshot.jpg" 8:46 and then finally, we just need to add the controls attribute, 8:54 and this will just put some video controls on top of our video. 8:59 So we'll go ahead and close our video tag, 9:04 and then inside we need to put our sources. 9:08 Now, I've already encoded our video to several different sources because that's not really 9:13 the focus of this Master Class, but we'll just go ahead and drop in those sources now. 9:18 So our first source tag will be from the videos folder, 9:23 and we're going to pick up "app_demo.mp4", and this is going to be of type "video/mp4", 9:30 and the codecs we're using on this are going to be inside of double quotes which are then 9:46 inside of single quotes and will be avc1.42E01E,mp4a.40.2", 9:52 and then we'll skip down to the next line 10:10 and put in our next source, and this will again be from the videos folder 10:14 File name is "app_demo.webm" and this is a newer codec that works in Google Chrome 10:20 and a few other browsers and the type for this will be "video/webm" and the codecs 10:30 will be "vp8, vorbis." 10:42 We just have one more source here. 10:49 The next one will again be from the videos folder. 10:53 It will be "app_demo.ogv." 10:58 Type will be "video/ogg" and the codecs will be "theora, vorbis." 11:06 So now we're done with our video sources, but we still need to add in one more thing, 11:21 and that is an image that is again our app_screenshot, 11:27 and this will occasionally show up in browsers that do not support the HTML5 video tag, 11:35 but will still show this image. 11:42 So the alt text for this will just be "Screenshot of GeoNotation" and we're going to give it 11:44 an id so that we can target it with css later, 11:55 and the id will be "video_app_screenshot." 12:00 So we'll go ahead and skip down here. 12:07 We're done with our HTML5 video container there. 12:09 We'll save that out and make a little bit of room to work here, 12:13 and we'll move on to the 3rd column in our layout which will give the id "misc." 12:18 We'll close that 12:27 and the first thing inside of this column will be a link with the id "call_to_action" 12:30 and we also need to give it the href of "http://mc-mobile-app.s3.amazonaws.com/ 12:40 index.html" and this will just link to the project that was created in a previous Master Class. 12:59 Inside of this link we'll put the text "Start Taking Notes" and then below this link 13:08 we're going to create a few block quotes here which will be testimonials about the app 13:20 and our first block quote will be "Holy heck, it's awesome!" and then after that we'll create a 13:26 div with a - Ryan Carson and close the div 13:37 and then we'll create a 2nd block quote 13:46 and inside of this one we'll go ahead and put a quote from myself that says 13:51 "This changes everything." 13:58 And we'll go ahead and open a div here and say it's from Nick Pettit 14:02 and we'll go ahead and close that. 14:08 So that about finishes things up for our main content div 14:11 so we can go ahead and delete this extra space here. 14:14 However, just after our main contect div we're going to create an unordered list with the id 14:20 "features" and this will be where we put all of the features that are listed 14:27 at the bottom of the page. 14:36 So our first list item will have the id "global" and we're going to give it the class "feature." 14:38 And we'll go ahead and close that list item and we'll create a div inside of it 14:48 with the class icon 14:54 and we're going to put an image inside of this div 14:58 from the images folder inside the icons folder and it will be "globe.png", 15:04 and we''ll give it the alternate text "An icon of a globe." 15:13 And then still inside of our list item we'll create another div with the class info and 15:21 this will be information that's placed next to our icon. 15:29 So it will create a 3rd level headline tag 15:33 and we'll say "Global" and then we'll expound upon that point and we'll say 15:37 "Keep track of your notes using advanced geolocation technology." 15:44 So that about wraps things up for our first list item, but we need to create 3 more, 15:55 so we'll go ahead and and copy this, and we'll paste it 3 times, one, two, and three, 16:02 and then we just need to change the information inside of 16:11 teach one of these ones that we pasted. 16:15 So this first one that we pasted will have the id "easy." 16:18 We're going to change the source on the image to "notes.png" 16:24 and we'll change the alternate text to say "An icon of a notepad." and then we just need to 16:32 change the description here to say "This app is even easier to use than regular old pen 16:41 and paper" and of course we do need to change this h3 as well and it'll say "easy." 16:51 Now we just have have 2 more here. 16:59 We need an id of "friendly." 17:02 We'll change the image to the icon of a heart and we'll change the alt text appropriately. 17:06 We need to again change our description, and for this one we'll say "You'll love 17:16 the experience of taking notes and interacting with GeoNotation." 17:23 And then for the h3 we'll also say "friendly" and now we're onto our final list item here, 17:33 and we'll change the id to say "fast" and we'll use our lightning bolt to represent the 17:41 speediness of the app. 17:49 We'll change the alternate text appropriately and say "An icon of a lightning bolt." 17:51 We'll change our description to say "GeoNotation is, quite simply, 18:00 the fastest note-taking app on the market." 18:08 and then we'll go ahead and change our h3 to say "fast" 18:17 and then we'll delete our extra space here, 18:25 and we can get rid of the extra space in between each one of our list items, 18:30 and then we'll go ahead and save that out and switch back to the browser, 18:40 and when we refresh the page here, you can see that we now have a fist level headline 18:45 that says "GeoNotation." 18:52 Just below that inside of our logo div we have the GeoNotation logo. 18:54 We have a 2nd level headline which is our tagline that says "Take notes anywhere." 19:02 We have a brief description of our app and all of these things will go in the left hand column. 19:08 We then have a very large image of our application, and that's actually just the poster 19:18 for this HTML5 video. 19:25 Now remember, we put width of 100% on this, which is why it appears to be so large. 19:28 We'll go ahead and pause that. 19:35 Then on the right side of our page we have the "Start Taking Notes" call to action button. 19:40 We have a few block quote testimonials, "Holy heck it's awesome" and "This changes 19:47 everything" and then we have a few very large icons here with the headers "Global", "Easy" 19:52 "Friendly" and "Fast" and that should about wrap things up for our html markup, 20:01 having good semantic markup like this is the foundation for creating 20:10 a very good, responsive design. 20:14
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