Mobile First & Responsive Web Design: Build Modern Websites!

1. Welcome to the course: Hi everybody. My name is Chris and welcome. This course is all about taking a responsive mobile-first approach to building websites. Making sure we provide the same great experience for users, no matter what device they may be viewing our website on. With the boom in smartphones and tablets, this is become more and more important. As we go through the course, you will learn about creating websites from scratch using the mobile-first approach.We'll look at some great tools which can really help us. You will discover grid systems, and fluid design. We will look at how the Flexbox is used, build a Flexbox grid, and discover how useful it is when solving common layout problems, such as the sticky footer. You will discover how to convert static elements, such as pixels to be fluid and responsive. You will learn about responsive essentials such as the viewport meta tag and media queries. We will deal with seven images on different sized devices using the pitch element and also take a look at image on-page optimization. We'll also take a look at how jQuery plugins can help out great features to our responsive websites, such as social sharing buttons and Carousels. Then we'll put into practice everything you've learned so far by building a fully responsive website from scratch, which scales down and looks great on any size device. We will also cover responsive framework such as Bootstrap, and also use jQuery Mobile to build a touch optimized mobile version of our clothing project. You'll also be shown some really useful tools whilst putting together everything you learn into real examples and projects. This course is designed to be beginner friendly. However, a basic HTML and CSS knowledge is recommended. Thanks for your interest in this course and let's get started. 2. What you will need and useful tools: Hi everybody and welcome back. In this video, we'll be taking a look at some useful tools for building responsive websites and also what you will need for the course. First of all, we're going to need a text editor. Throughout the course, I'll be using a program called brackets, which is available to download for free from brackets.io. Brackets has lots of great features and it's got a really good live preview. So you can check your changes in the browser as you type. Also if you work with Photoshop, PSD files, brackets makes it really easy to extract the data from that and pull it into your text editor. It's actually made by Adobe, which is the same people who make Photoshop so it's really easy to integrate the two, especially good plug-ins and extensions. But don't feel like it's hard to use brackets as many of the popular editors out there such as Sublime Text, coda, Notepad plus plus, and maneuvers, but do use whatever you feel most comfortable using. Our next user important thing on this course is a web browser. I'll be using Chrome throughout the course, but feel free to use any browser you want. Although I really would recommend installing Chrome, because later on in the course we'll be using Google's PageSpeed Insights and also the chrome developer tools. When building websites, we should also have all the popular web browsers installed in our machine, anyway, just for testing, just to keep a lookout for any inconsistencies across different browsers. So if you choose to install Google chrome, your builds take full advantage of the developer tools. Many of the other popular browsers have developer tools as well, but we're just going to go over the chrome ones for now. If you just control-click or right-click and then select Inspect Elements, we'll get the developer tools, you can have it across the bottom of the page or if you click the button on the right-hand side, we can get it on the side. One of the benefits of using Chrome, we can see what our website will look like on desktop devices or we can select the mobile phone icon and we can select the device in the top there. We've got a selection of all the most popular smartphones and tablets which are on the market today, so we can see how a website will look like on a Samsung Galaxy, for example. So we've clicked on the S4 and you may need to click Refresh just so it appears as we intended. We can also check out the iPod 3 and 4 and see how our website will look on that. Then by clicking on the mobile phone again, we can switch back to the desktop. We can see how our page will look on desktops. Such a really good tool for testing our website on different devices. Another really popular tool that I want to show you is BrowserSync, which is available from BrowserSync.io. As you can see, BrowserSync is a time-saving, synchronized browser testing tool. It can really save us a lot of time when building websites. We regularly want to test our sites in different browsers to see how it's going to react and also on different devices. BrowserSync automatically keeps an eye on our project files and it updates all the browsers and devices we'll have open, rather than going through them all individually and refreshing every time we make a change, we can see it happen instantly and live. There's a quick video on BrowserSync, where you can find out small information. There is also more information available on the homepage, as well as preview on different browsers, we can also plug in different devices and check how our page would look on those two. BrowserSync will take care of refreshing them as well. If we go down on the page, there's information on how to get started. Installation is via the command line, so I'm not going to go over the process of installing BrowseSync in this video because some people do get put off using the command line, and BrowserSync might not be a tool that you may wish to use. But if you are interested, have a good read over the website and take a look at the installation notes and it is really useful and it can save you a lot of time during testing. The last thing I want to show you is the Google Developers website. If we head over to developers.google.com/webmasters/mobile-sites. It really is worth a read, some good information on there. There's a getting started section where you can get some useful pointers of Google of how to make your website more mobile-friendly. A great tool is the mobile-friendly test, it allows us to copy and paste a URL into the bar and then Google analyzes the webpage and checks if it's mobile friendly. If we click on the brackets, URL, and we'll just copy this in and select Analyze. It only takes a few seconds to go through. The brackets some page is mobile-friendly and it even shows a simulation on the left of how the page would look on a mobile device. Do take a look over the Google developers website, there's a lot of great information on there regarding mobile on responsive design. That's it for the video, I'm sure you'll find many more useful tools yourself. Okay, so thank you and I will see you in the next video. 3. Why mobile first?: You may be wondering where all the forces about design in mobile-first. Well, everybody has their own way of building websites and no one way is necessarily right or wrong. But for me, and many of us, a mobile-first approach seems more logical, even frameworks such as Twitter Bootstrap and Foundation, are built to be mobile-first. For me when building websites, it makes sense to start small and add more content as we have more available screen space. Because mobile users account for such a large percentage of Internet usage today, we need to make sure that the mobile user experience is considered from the start, and not as an afterthought. Because mobile devices generally have less available space and possibly a slower connection, if we consider small screens from the start, we get into a good habit of focusing on displaying only the core content and functionality required for all mobile users. This provides a much better user experience, rather than simply shrinking down a desktop site to fit on a mobile and making all the content really small and possibly unreadable. When designing websites, I generally find it easier to add content, as more screen space is available, rather than take it away. One last thing, squeeze in just in time before we release this course, Google is now officially boosting mobile-friendly websites further up the search rankings or mobile search results. As you can see from the Webmaster blog, Google has provided us with a example of what's acceptable and what we boosted further up the rankings. You can see the demonstration on the left has really small and unreadable text, and also the buttons may be too small to touch. Also the search bar is crammed up in the top corner, but if we look at the mobile-friendly sites, we've got a search bar which takes up a lot more width, so it's a lot easier to use on a mobile device. We've got a nice menu on very mobile-friendly and also the text is a lot more readable. It's a larger font size, and there's a lot less text appearing on the page any one time. Have a read of the blog if that interests you, so hopefully that gives you a better idea of why we are designing mobile-first. That's the end of this section, join me in the next section where we'll look at fluid grids and responsive essentials. We'll gain a better understanding of what a fluid grid is and how it's useful for responsive designs. We'll take a look at using relative units rather than using fixed sizes such as pixels. We'll take a look at the viewport meta tag, and why it's essential for a responsive design. We'll also take a look at media queries and breakpoints, and find out how we can incorporate them into our designs. 4. What is responsive design?: Hi everybody and welcome back. In this video, we'll be taking a look at what responsive design is. We'll be taking a look at some example websites and we'll shrink the browser down to take a look at how they will react on smaller and larger screens, to simulate what they would look like on a mobile phone, a tablet, and a desktop PC. Responsive design is a technique which allows a website to respond to any device regardless of its size. When building websites, our design should look great whether it's on a mobile device, a tablet, a laptop, or a desktop. When building websites, it is impossible to design for every size of tablet and smartphone available on the market today. There's constantly new designs coming out all the time, and as web developers or web designers, we can never keep up with all those, so responsive design to solve that problem. We overcome this mainly by adding media queries to create breakpoints in our design, providing a fluid grid rather than using fixed sizes and using techniques such as responsive images, all of which we'll look at in more detail later in this course. Responsive design is still relatively new, it's only been around since about 2011 when a guy called Ethan Marcotte released a book called Responsive Web Design, and since then it really gained popularity especially with all the different size phones and tablets you can buy now. Let's take a look at some examples of responsive websites. First of all, I've gone to the microsoft.com homepage and it's a nicely laid out website, you can see on a laptop or a desktop. We've got the menu at the top, we've got the search bar. There is a large sliding carousel, and as we scroll further down the page, sections are arranged horizontally across the page. There's four different content sections spread from left to right. The same as you go further and further down. But if we look at this on a smaller device with a lot less screen width, we won't be able to have so many elements spread across the page, so by reducing the browser down to about a tablet size, the four columns which were there before, then change to two columns side by side with the remaining two stuck below. The slideshow on the menu is still in place as it was. If we go further down, all the rest of the page is stacked into two columns, so let's see what happens if we're on a smartphone. If we shrink the browser down even further to simulate a smartphone size, we lose the menu which was there before. You can see, the menu changes to a responsive drop-down menu, and it changes to the top right hand corner. Also the search bar, if you noticed, that went from a wide search bar to just being the magnifying glass image which you can click on. A lot more space is created by losing the menu, that's a nice drop-down menu now. We've still got the two columns side by side, so if we shrink the browser even further, all the sections which we spread across the page before, now take up the full width for the mobile device. If we scroll down the four elements which were side by side before are now stacked on top of each other, the same with the For Work section. The footer area is also stacked on top of each other, so back to the top. That's a nice example of a responsive website and how we can make the most of the available screen size. Next we're going to be looking at the Bootstrap homepage. Bootstrap is going to be a framework which we'll use and look at more later on in the course, but for now we'll just take a look at the homepage. I've headed over to getbootstrap.com. Scrolling down the page, we've got the three content areas in the middle, arranged horizontally again same as the Microsoft website. We've also got the example projects build with Bootstrap. There's four different projects arranged from left to right, let's take a look at what happens when we shrink the browser down. As we get towards a tablet size, all the elements which are floated to the left on the right-hand side, all move to the center of the web page. If we go further down, the three content areas should reduce down. That's what's called a break point in the design, it's when the layout changes a certain screen width. You can see if it go slightly bigger and slightly smaller, the three content areas which were side by side, then change to be the full width of the web page and stacked on top of each other. Going further down the page, the four examples now just take up 50 percent of the width rather than having four side by side. All the texts, buttons and sharing buttons are all centered in the middle of the page, so nothing gets cut off on mobile devices. Let's go back to the top, and the menu, has changed to a drop-down menu, the same as the Microsoft homepage did. If we click on that, we'll make the screen a bit smaller, all the buttons are concealed until we click the drop-down menu so they take up less space on the smartphone, so let's scale the browser back up. As well as here in breakpoints and design changes, the text can also shrink and expand to take up more or less space on the page, but we'll take a look at Bootstrap in more detail later on in the course. The last example I wanted to show you is the BBC News website. We can see by the headline that the BBC News website has recently changed to be responsive, so let's take a look at the website and see what changes as we get on smaller screens. We've got the logo area, in the top corner, we've got two navigation bars. We've got the main headlines on new stories on the left-hand side. We've also got some top stories and Feature sections down the right-hand side in a separate column. Scrolling further down, it remains pretty consistent. We've got a column on the left and a column on the right. Then there's the most popular section as we scroll further down, and the footer section and some more stories at the bottom. If we take a look back at the top of the page and we start scaling in the browser down, if we reduce it down to roughly a tablet size, we can see a layout change already. We lose the sidebar with the top stories which was there before, we lose that now, and the top new stories span the full width of the device. Scrolling down, I'm sure the side bar will appear below all the content. There we go, there's the features on the Top Stories section which was on the right-hand column before, but it's now stuck below to better make use of the available space. The Most Popular section which was also on the right-hand side before, is now stuck below. If we go a little bit further, the features are displayed in a row of three. Let's drop the browser down and see what happens, so there's a breakpoint there. As soon as you hit the breakpoint, the Most Popular section takes up the full width rather than having two columns, and up to the Feature section, it gradually reduces down in size and then it drops to just having two side by side. Back up, you can see that all the elements and all the information on the page is now the full width to take up all the available space on a smartphone. Back up to the top, the menu area, where there was two menus, one across the top and one below. The menu which was at the top of the page, is still actually there, but there's now a "More" button, so rather than having them shrunk down really small, we just get the first couple of buttons and then the rest are available if you click the "More" section. The menu which was below the logo, is now hidden and only available if we click the "Menu" button, so that will work a lot better on smartphones. Also to maximize the amount of space, the "Search" icon now needs to be clicked on to be taken to the search. They go, that's an example of three websites which are full responsive and look really good on all size devices. If we just stretch the browser back up, you can see that the search bar now expands as it has more available space. That's the end of the video. Hopefully that gives you a better understanding of what a responsive design looks like and how the layout can change on different sized devices. Next time you are on Internet take a look at some websites, some of your favorite websites that you visit regularly and try expanding and shrinking the browser, see what happens, and check if the website that you view on a daily basis are responsive. If you shrink the browser down and the content gets cut off, that means the web page is a fixed size website and it's not responsive. It doesn't automatically mean that the mobile users are not catered for, they may have a separate mobile site which users are redirected tool when they view it on a smartphone. That's it, join me next video and we'll take a look at some useful tools, and also have a look at what you will need for the rest of the course. 5. Getting started with the fluid grid: Welcome back to this new section. This section is called fluid grids responsive essentials. We're going to get started by looking at the fluid grid, why it's important for a responsive design. To better understand why we're using a fluid grid relative sizes, we'll build a simple demonstration using three boxes. I've got Brackets open. If you open up Brackets or your text editor of choice, I'm going to get started by creating a new project folder. I'm going to save mine on the desktop or save it wherever you prefer, whether it's the documents folder or if you have a projects folder. I'm going to call this the fluid grid. Once that's saved, we can just simply drag it into the text editor. Let's make this full screen. I'm going to start by creating a new page, which is going to be the index page, so "Command-N" or "Control-N" on a Windows machine. I'm going to save that straight away. We'll call it index.html. If you're experienced at building websites and you want to pause the video and create a basic HTML structure, go ahead and do that now or feel free to follow along with me. I'm going to create the basic HTML structure. I'm going to create three boxes on the screen. I'm going to start by creating them using pixels, then we'll change it to percentages. Then we can see the effect of changing from fixed sizes to relative sizes. So we'll start by adding the DOCTYPE and then the HTML section, and also the language to be en, English, and then the head section, the page title, and the characters that aren't essential for this demo, but we'll put them in anyway just to keep it all correct. I'm just going to call my page Fluid Grid, and I will add the meta character set to be the standard HTML5 UTF-8. Then moving down, just the body section integrate. Let's start by creating a container div. Within that div, we're going to create three more divs. So we're going to have a class, which is going to be equal to, we'll call a box, and we'll work out what the CSS soon. We'll just give it a name of box. If you're using Brackets, you can just press "Command" or "Control-D", and that will duplicate each line. Otherwise, copy and paste or type it back out again. If we go back up to the head section, we're just going to add some CSS style so we can see our three boxes more clearly on the screen. So let's add the style tags. To start, we'll add some styles to the body. We'll set the width to be the classic 960 pixels. We'll center the page by using margin zero auto. Then we'll add the styles for our box class. These are all going to fixed sizes, and then we'll show you how to convert to percentages and the effect that that will have on the boxes. So let's create our three boxes, we'll give them a width of 300 pixels. We'll add some margin of 10 pixels just keep them separated. To see them more clearly on the screen, we'll add some padding of a 100 pixels top and bottom, and zero on the left and right. Change the color by giving the background-color property. I'm just going change mine to red. Lastly, we'll add a float of left. Let's just save that and check that out in the live preview. If it's your first time using Brackets, if you just click the lightning bolt symbol in the top-right, and it should open the web browser. There we go. So that appeared exactly how we wanted. If we drag the browser and we shrink the sizes down, what happens is the three boxes get pushed off the edge of the screen. If we were looking at this on a small tablet or a smartphone, we'd only get half the content appearing and the rest would be cut off. That's something we really don't want, so we'll take a look at how we can solve that now. We've head back into Brackets, and we'll take a look at a way of converting our fixed-size pixels, which you see before was very inflexible and it wouldn't stretch to accommodate the screen size. So we'll change that to percentages. That allows the browser to get smaller and larger and the content flows bigger and smaller. The way we change a fixed size, such as a pixel, to a percentage is if we take the target size that we're looking for, in our case it's 300 pixels, and then we divide it by its parent element or its container, which, in our case, is the body container of 960 pixels. So let's type this in the comments so we can see more clearly. We take the 300 pixels target and then we divide that by 960, which is the parent container, and that gives a results of 0.3125. If we move the decimal point two places, that equates to 31.2 percent. So we'll change that to 31.2 percent. Next, the margin, which is 10 percent. If you understand that one, feel free to do the margin yourself. Just pause the video and give it a go. If not, follow along. Again, we'll put down a comment so it doesn't affect the rest of the styles. We'll use the tag size of 10 and divide that by 960, which, again, is its container. That is equal to 0.01 or one percent. We'll change the margin to be simply one percent. For the purposes of this demo, the padding doesn't really matter. We'll just change that to 10 percent. Then if we move over to the container, we'll also change that from a fixed size of 960 pixels to be 80 percent. Let's check this out on our live preview. Okay. If we've done all correctly, it should appear the same as before. All we've done is change from 300 pixels to a percentage size. If we scale down the browser, no matter what size we get to, the three boxes will always stay as 31.2 percent of the container. Rather than what happened in the first example, where the three boxes got pushed off the edge of the screen because we were using fixed sizes, the sizes now will always stay on the screen and they will shrink and expand as we have more available screen space. There we go. Hopefully, that's give you a better indication of why we use percentages and relative units in responsive design rather than using fixed sizes such as pixels. This allows our designs to stretch and shrink to be much more accommodating on large or small devices. Combining fluid sizes, we have media queries, which we'll look at later on in this section, really just help our designs to become fully responsive. That's it for this example. Join me in the next video and we'll take a look at some more relative units. 6. Relative units: Welcome back everybody. This video is all about relative units. So now we have looked at how changing from fixed pixels to percentages can make our designs fluid. Relative units are used in responsive design because they are not of fixed size, so you can scale better on different screen sizes. We've looked at using percentages, but there are also other relative units we can use, so let's take a look. So if we head back to the demo that we used before and we don't need this, the three divs. So if we delete the three boxes, and then in the styles, if we get rid of that too, we'll get started by just adding a little bit of texts in P tags, and we'll just type in relative units. So we can see what we're doing as we go. I'm just going to put the Screen side-by-side. There we go and I'll get rid of the sidebar. Okay, so let's get started in the style tags, we'll create a div. Okay, so we can see our demo a bit better. We'll start by adding a background color and I'll set mine to orange. So it's clear and you can see that by default, the div takes up the full width of the viewport. So let's take a look at some relative sizes and how we can change this now. So if we set the width of the div to be 50 percent, I think it's pretty obvious what's going to happen there, it's going to take up 50 percent of the viewport. If we make the browser wider or narrower, it's always going to be 50 percent of the viewport but as well as the percentages, there's other things we can use. We can also set that to 50 VW and that is a similar thing that sets that to 50 percent of the viewport width. So again, as it stretches wider, it will always stay 50 percent. You can change this to any value you want, we can change that to 25 and that was a quarter of the viewport width and setting a viewport width can be really useful when dealing with responsive images. We can set the image to take up more or less of the viewport if we're using a small or larger devices. So for example, you may want an image on a mobile device to be the full width of the viewport, to take up all the available space yet on a desktop site, we may want a small image because we've got a lot more screen space, but we will look at responsive images later on in the course. As well as using the viewport width property, we can also use it to set the viewport height. We do this by selecting the height property and rather than using VW, we can change that to VH and that will take up 25 percent of the height of the viewport. Again, this can be set to whatever we want, if we want the element to take up the full height of the screen or viewport, we can change that to 100. We can change that down to 50, to be 50 percent of the viewport height. So next we'll look at another popular relative unit which is called the em. Em's are very popular for change in font sizes. So we'll tag our paragraph by selecting the P. We're going to change the font size. So historically we've set font sizes to be in pixels, such as 36 pixels, and that is very effective, but it has lots of limitations. The text size can't scale up or down depending on the screen size. So a good way of combating this is by using the em. So to use the em, we can simply type two and then EM and that simply makes the text size twice as high as it would normally be. So two em's is the font size effectively doubled and we can set this to any property we want. We can set it to 1.5 for example, it doesn't need to be a rounded number. If we want the font-size be three times the size it would normally be, we can set that to three. So we've taken a look at some of the more commonly used relative units, such as the em percentage, and using the viewport height and width. So now let's take a look at the Mozilla and W3 schools website and we can take a look at some other properties which you may find useful. So to start we've gone to the Mozilla Developer website and in the CSS section under the length property, we can take a look down the page and we can take a look at some of the relative units. So we've looked at the em, which is based on the calculated font size of the elements or it's inherited size. There's also a similar one which is a rem and rather than using the calculated or the inherited font size, this is based on the font size of the root elements or the font size of the HTML, and if we scroll down the page, we can see that there's the viewport height on the viewport width that we used earlier and in addition to those being 1/100th of the viewports, there's also the vmin and the vmax which do a very similar thing but they're based on the viewport smallest or largest dimension. Next, more information can be found from the W3 Schools website if we look in the CSS section under the CSS unit part. So if we scroll down, the first we can see is the browser support table and this gives us the version of all the popular browsers which first fully supported any of the relative units listed there and scrolling down the small relative unit sizes is the em, which we looked at before and there's also a Try it button if you want to have a little play about with that and change some of the properties on there. There's also a couple of other ones which we haven't really looked up but aren't really commonly used. There's also the rem that we took a look at before, and the viewport width and height, and also the minimum and max as well as the percentage. So if you'd like more information about relative units, take a look at the two websites that we're just taking a look at there and have a better read over, but hopefully that's going to be a better idea of why we use relative units and how that can be really important to responsive design. Join me in the next video and we'll take a look at the viewpoint meta-tag. 7. Viewport Meta Tag : Welcome back everybody. This video is all about the viewport meta tag. Now, we need to include the viewport meta tag into our projects to make sure our pages appear as we intended. We include in the head section of our documents the same as any of our meta tag. Before we look at the viewport meta tag and how it's constructed, first, I just want to show you the effects of what happens if we remove it to our responsive web design. I've just opened up the designer clothing project, which will be building in this course, and I'm just going to right-click and go into the Chrome Developer Tools, which is "Inspect Elements", and if we click on the "Mobile Phone" to get the mobile phone view, I've selected the Apple iPhone 6, it doesn't really matter. Then I'm just going to open up the head section, and if we look for the meta name equals viewport, that's the full meta tag, so we'll look at this in more detail soon. But first I'm just going to double-click, and just delete that. I've just keep an eye at the mobile view here before I hit "Return". Did you catch up? We've gone from a nicely scaled mobile site to now a large desktop view, but zoomed out. So the reason for that is, if there's no viewport tag in our project, the web browser on a mobile phone automatically assumes that the page is looking out, is a full desktop size of around 1,980 pixels wide. This causes the browser to zoom out, to try and fill all the content onto one page, and this can make our webpage look really small and unreadable. Now, you got better idea of why we include the viewport meta tag. Let's take a look at how it's constructed. So back in brackets of created a basic HTML page with some sample text, and if we go in the head section, we'll start by adding a meta name of equal to viewport, and then we set the content attribute. We can separate different attributes using commas. So I'm going to start by adding the width equals to device-width, which sets width of the webpage to be equal to the device's width. This stops any problems like the demonstration we've seen before. It stops our browser zooming out and assume when we're looking at a desktop size webpage. Then next, separate by commas. Next, we'll set the initial scale to be equal to one, and close off, and this controls the scale or the zoom of our website when the page is first loaded. We usually want this to be set to one so no zoom in applies for a website. That's it, that's how we include the viewport meta tag into our projects. Make sure you always include it in your projects to make sure that we control how our webpage will look in browsers rather than the browser decide. 8. Media Queries & Breakpoints: Welcome back. In this video, we're going to take a look at media queries and breakpoints in our designs. In previous videos, we looked at relative units, and how including these into our projects can really make our sites fluid. Now combining these with media queries are the heart of what makes responsive websites to change layouts on different screen sizes. Media queries filter CSS styles based on the device display type, size or orientation. So let's take a look. We head back over to brackets. I'll just a part of our demonstration that we used early on in the course with the free boxes and rename the file media queries. We've got all three boxes all laid down on the page. Now there's various ways we can include media queries into our projects. The first one is going to be in the head section between the style tags. We'll start by using the @ symbol and then type in media. We're going to targets all screens, so we'll type screen on that. There's other options we can use, but we'll look at that later on in the video. Then type "and." Then if we open up our brackets, we're going to set the width that we want the styles to apply to. If we type in min-width and then a colon, and then I'm going to set 800 pixels and then we open up our braces the same way as normal CSS styles. What we're doing now is we can put our styles between the curly braces the same way as any other CSS styles. These styles would only apply when the minimum width of the screen is 800 pixels or greater. We can also set these to max-width. So if we're using a larger screen and then we're shrinking down to a smaller device, we would use max-width there. But because we're designing mobile-first, we are going to be looking at the minimum width proper anymore. If this was a real website, we may have the free boxes to appear in horizontally across the page on a desktop view, but on a mobile device, we may want the stacked on top of each other. The way we do that, if we just copy all the styles that we've already got set and if we paste them into the media query. To start, we'll just change the background-color of the boxes to blue, just to check if that's working. There we go, that's working fine. If we shrink the browser down, all the styles that are outside of the media query will apply first. Then once we hit a minimum width of 800 pixels wide, the style should change to be what's included in a media query. So that's working fine. We can just delete the body section because all the styles are inherited from above. We don't need to retype those. To get the boxes stacked on top of each other for the mobile view, we're going to go outside of the media query and look at the box section. We just simply change the width of the individual boxes to be 100 percent. We could remove the float, so don't need that anymore. In the media query, we don't need to copy the margin or the padding cause that inherited from above. Let's just save that and check that out in the preview. So shrinking the page down, that appears exactly how we want to. In fact, if this is a mobile device, where we want the boxes to span the full width that's available. We'll initially set the body width to be 100 percent. Then back in the media query, we can change the body back to have a width of 80 percent. It looks a lot better. So hope that all makes sense. So the initial styles that we set in our CSS applied on the smaller view. Then once we get to a screen size, 800 pixels or wider, all the styles within the media query will then overwrite. So as we got bigger, we can change layouts or we can change colors, font sizes, or any other styles. Let us tidy this up a little bit. We're not limited to just adding more media query to our website. We can add some more, so feel free to pause the video and give that a go. Set a minimum width of 1200 pixels and add some styles to the media query just to check it's working okay of why is follow along. So add media screen and minimum width, we'll set this one to be 1200 pixels. Just to check its working, we're just going to change the body background-color. We'll just set this one to aqua just so it's obvious when it's working. Let's save that and hit back into our web browser and assumes we hit 1200 pixels. There we go, our background-color should change, that's all working as expected. That's one way of include media queries. We can include them in their heads just like that. Another way of doing it is we can create three different style sheets and we can put all those styles for each media query into its own style sheet and we can link those free style sheets into the head. The way we do that is by adding a stylesheet as normal and give them the type of text CSS. Then in the link, in the href, we'll call our first file, we'll call it a small.css. This will contain all the styles for the small view. This is an intermediate query in the description because it's going to be the default or the mobile-first styles. So we'll do exactly the same. I'll just Command D to duplicate this twice. We'll call the second one the medium.css and we'll create these in just a moment and then large for the larger view. Because small.css file is the first one, this will be loaded first. We can include our media queries in each style sheet link. We do this by typing media equal to screen. Then in brackets, we'll type in the min-width, just exactly the same as we did before. Let's make this wide so we can see it all on one line. The minimum width is 800 pixels and close it off, and add this to the large as well. We'll just copy the media query we've just used and we'll paste it in the large one as well. We just want to change the minimum width to be 1,200 pixels this time. We'll create our free folders now. This should make our small CSS file appear as default. Then when the screen gets above 800 pixels, the medium file will be loaded. With the large CSS file, that should be loaded once the minimum width is 1,200 pixels or greater. We'll start by creating our small file. The small file will contain all the initial styles that were created outside of the media query. We'll just cut them and Command N or Control N to create a new page. We'll paste that in. I'm going to save that in our project as small.css. Now back in to the index page, we just copy the styles for the medium view. We don't need the media query for now, so delete that. Then another new page and paste that in. This is the styles for 800 pixels and over. We'll call this medium.css. Back into the index page, we just simply had a background color change for the body when the screen got really big. We'll get rid of the style tags and then create our new page. Paste in the background color and save that as large. Just a change of spelling there, I'll just rename that large.css. There we go. Back into the index page and check out the preview. This should be exactly the same because we're using the same styles. We'll just put them in their own folders. We'll just check the preview, check it's all working okay. Just fresh it up. The small view is looking fine. As we stretch the browser out, the boxes should change to be three in a row. There we go. Once we hit 1,200 pixels, we should get a change of background color. There we are. That's all working fine. It's working exactly the same as it did before. All we've done is move the three sets of styles that were used before into their their files and link the stylesheets separately in the head. That's two effective ways of including media queries into your project. The third and the final way I'm going to show you is by putting all the media queries into one CSS file. This is going to be the way that we'll be doing it for the project later on in the course. This is the way I prefer to do because only having one stylesheet, means it will only make one request to the server. We don't need the medium and large stylesheets anymore, so we can delete them. We can keep the small CSS file and we can use this as our only CSS file. If you want to pause the video now and give that a go, create two media queries, one with a minimum width of 800 pixels and then below one with a minimum width of 1,200 pixels. Then copy the styles that we used in the medium large stylesheets and place them between the media queries. We start by typing @media. We'll use the screen and the minimum width of 800 pixels. Then between our curly braces, we'll copy the styles back from the medium.css file and paste them in. Then we'll do the same for the last media query. But this one is going to be for 1,200 pixels and bigger. We'll copy the large.css, we'll paste that back between the media query and save that. If we go back to the preview and refresh, and just check this is all working okay. If it's working fine and if it's all being put in place correctly, we shouldn't see any change, it should appear exactly as before. It's just the media queries are all in one file rather than in three separate stylesheets. As we get wider, once we're 800 pixels, we hit the break point there, and we get the three boxes as we should. Then next at 1,200 pixels, we get the background color change. There we go. That's how we include media queries into our project. That's three different ways of including them. In this video, we've included the screen and we've also looked at the minimum and the maximum width. Now if we take a look at the W3Schools website. If we head out to the w3schools.com website, we'll take a look at the media query section. When we scroll down, you'll see the @media rule has just been brought in the latest CSS standards, CSS3. Some examples which we just looked at before. This one is in the maximum width. We can see the browser support which is available for it. The thing I wanted to show you was the different media types. In the example we looked at before, we just used the screen type, but there's various different types of media we can use. We can select all, which selects all the media types available. There is one such as print, which you can use for a printer view. We've got the screen which we looked at before and there's also one such as tv, which is no longer in use. Further down in the media features section, we looked at the minimum and the maximum width. As you can see, there's many other options you can use, some are more commonly used than others. We can also set the media queries to be based on the devices resolution. We can also change the CSS rules depending on the orientation, whether the device is in landscape or portrait mode. Feel free to have a better read up for the website. That's the end of the video on this section. I hope you've learned a lot and I hope you've now got a better idea of how we can use media queries in responsive design. Join me in the next section and we'll start getting our hands dirty by building a real project. 9. Wireframe with Gliffy: Hi guys and welcome back. The section is called let's get building, and I'm sure you're all eager to get started on building a project, putting into practice what we've learned so far. So this is a little look at what we're going to be building in this section. It's a designer clothing website, and of course it's going to be fully responsive. This is what the project looks like on a desktop. We've got the responsive drop-down menu. We've got the search bars. Scrolling down, we've got a large image which we're going to use in place of the rotating carousel. We'll add the rotating carousel later on in the jQuery section. Then we've got different images for linking to different parts of the website. We've got a e-mail sign-up section and a little bit of text about us, and then the photo section at the bottom. Also later on in the jQuery section, we'll add some responsive sharing buttons to the project. But for now, let's take a look at what it looks like on a mobile device. So shrinking the browser down. Once you get below 1,100 pixels, we should get a reduced font size. If you keep going to below 800 pixels, the logo, user navigation, and search bar is now stacked and in the center of the page. The menu shrinks into a drop-down menu to take up less space. If we go a little further, we can see that the images and all the links are now stacked on top of each other rather than being side-by-side across the page. The same with the footer area, all the links are now arranged vertically. So before we get started on building this, I'm just going to take you over to a wireframe and website called Gliffy.com. I use this website to create a simple wireframe. Just because we are going to be using a responsive grid, we need to know how many columns each section is going to be taking up. So a quick sketch or a quick diagram can really help with this. If we look at the image on the left, this is the mobile view or the small screen view. I wanted all the elements to span the full width of the page. As you've seen before, we've got the logo and the user navigation stretch the full width, and the same with the search bar and the navigation. Then all the promotion areas and the content links, and pretty much the same as you go down, everything is going to be stacked on top of each-other, stretched to the full width of the smartphone. We're going to make this really easy to achieve. We're going to download a responsive grid. The responsive grid is going to be mobile first. Once you set the mobile breakpoints, it will automatically make all our elements stretch the full width of the page below a certain break point. Then once we get to the larger sizes, we're going to be using a 12-column grid. So in the header section, we want the logo take-up six parts of the 12-column grid, so it will take up half. The same on the right hand side, we've got the user navigation and the search bar, both taking up six parts of 12. We've got the main navigation to span the full width of the page. So that will take up 12 parts of 12 or be 100 percent wide. We've got free promotion areas, which will also take up equal space, four parts. Then our placeholder image for the carousel will be the full width. All images on the links will also be four columns wide, so they'll take up one-third each. Then the e-mail, sign-up and the about us text will be half each. So that'll be six parts of 12. Then the sharing buttons will take up the full width of the page. Lastly, the footer area. Again, we'll divide it up into three, so that will be four parts of 12. So if we're organized, when we create sketch or a wireframe for our project, we know exactly how many sections each pie is going to take up. So we don't have to keep messing about with it as we're building. It also gives us an idea of the layout and how it's going to look before we start building. So if you want to print this diagram, so we can use as a reference when you're building, click on the Downloads tab for this video and save it or print it off. But for now, thank you and we'll move on to setting up our project. 10. Setting up the project: Let's now look at our project wireframe. Let's get started with setting up the project. In this video, we'll be setting up our basic HTML5 skeleton. We'll be adding the responsive viewport meta tag, which we looked at earlier on the course. We'll be including a CSS file called normalize, and we'll take a little look at that soon. We'll download in the responsive grid linking that in the head section. We'll be creating a custom stylesheets to add on our own styles and to overwrite some parts. We'll be downloading and setting up the jQuery slimMenu, which will be our responsive navigation. I will be setting up jQuery to ensure that the slimMenu works properly. We'll also need that later on in the course, we include the jQuery, sliding carousel, and sharing buttons. Lastly, we'll include Font Awesome to provide our icons for the websites. Let's head back into our a text editor and get the project setup. To begin, we'll create a New Folder. I'm sure to place mine on the desktop. We're going to call it designer-clothing.com. Then we're going to drag that into brackets. If we open up our folder, we just need to create our CSS folder. We'll call that CSS. We also need a new folder for our JavaScript. That will be js folder. You should have downloaded the images by now. I'm going to drag that folder also into our project. If you've not downloaded the images, just skip back to the first video of this section, and you'll be able to download them from there. I'm going to close that for now. Back into Brackets. I'm going to press "Command" and to create a new page. This is going to be our index page, so let's save that straight away as index.html. Let's put our basic structure in place. We'll start with the DOCTYPE of html, then our html section on the head, and our page title will be Designer Clothing.com. The meta character set will be the HTML5 standard of utf-8. Hopefully, you can remember how to do the meta viewport. We include that with the meta name equals to viewport and then we set the content to be width equals device width, and then separated by commas. We're going to set the initial scale or the initial zoom level to be one and close that. We'll come back to the head section in just a moment, we just want to put the structures in place first. We'll add the body. That's the basic setup. If we head over to Google. To get started, we'll just Google normalize.css. It's the GitHub page we need. The second link in my case. I will just hit the "Download" button to get started. If you've not used the normalize.css before, we just include it the same way as any other normal CSS file, and it's basically just a bunch of styles to make sure our web page looking more consistent across different browsers. There's also things such as the reset.css which you can download and it's quite popular, whereas the reset take things back to the start. There's no default paddings, margins, etc. Including the normalizing to your project makes it a little bit more cross-browser friendly. The elements render more consistently in different browsers. That should have downloaded by now. We'll just get rid of that. We'll include that in our project. We'll start by going to our downloads, then unzipping it. Then if we just copy the normalize.css and then back into a project, we'll paste that in our own CSS folder. Now let's link this in the head section. Under the viewpoint metatag, I'm just going to create a comment, just a section of the stylesheets. Let's link it in, link rel equals stylesheet and the type is equal to text/css, and the href link, it's now a CSS folder. It's called normalize.css. Slots included. Now that's all we need to do to include that file. Next, we'll take a look add in the responsive grid. If we head back over to Google and we search for the responsive grid. This should be the first result that comes up. We need to go to the responsivegridsystem.com. Now the responsive grid system is really simple and lightweight grid to use in our projects, it's really easy to get started with. We can create any number of columns we want. We're going to be for a 12 column layout on our project, it scales up and down in the browser width, and all of the offsets and columns are already preset for us, so it saves a lot of work for us. Another useful feature is we can set our content areas into sections, and we can also add groups as well to automatically include the clear fix, so we don't have any flow problems. To include that, we click on "Generate Code" and then we need to select how many columns we want. We're going to be going for 12 in this projects. We'll leave the margin at the default 1.6 percent. That seems to work really well and then click calculate. That generates the CSS for us. It's as simple as copying the CSS. I'm pasting it into our project. Creates a new CSS file. We'll save that straight away as responsive-grid.css, and that needs to go in our CSS folder. We'll paste that in and save it again. We could pretty much leave that as it is. The only thing I want to change is the media query. I want the content to go full width at 800 pixels rather than 480. In this media query, all of the column sizes we can pick will change to 100 percent of the width once we get to below 800 pixels wide, which is what we've seen in the wireframe early on. Then we go above 800 pixels, and the width all change to be a certain percentage. Back over to the index page, which come to Command D to duplicate that. We'll link the style exactly the same. This one we just called the responsive-grid.css. Next, we'll create another new page and this is going to be for our custom stylesheets. We'll just call it style.css, and we'll put this in the CSS folder and click "Save". We don't need to do anything with that for now. We just need to link it in the head section. We'll just duplicate the link again. This one was style.css. There we go. So that's our normalize included, that's our responsive grid in place and our Custom style. So next we need to work on the responsive navigation. This was a jQuery plugin called the slimMenu. So back over to Google, and if we search for the SlimMenu. It's the first result that comes up. It's the GitHub page. So slimMenu, as you can see, is a lightweight jQuery plug-in to create responsive navigations. Just a little bit down the page is an example of what we're going to be using. We can actually scale the browser down and you can see what happens. You get the nice drop-down effect once it gets below a certain size. So back to full size, we can get started by downloading. So we're going to go for the zip. Head over to the downloads and we can unzip that. Okay, so we need the slimmenu.css, and we'll copy that and we'll paste it into our project CSS folder, there we go. Back to the head section, we'll include this in the CSS links. Now, I'm going to place the link for this between the responsive grid and the style.css. So if we duplicate that and change the responsive grid to slimmenu.css. Okay, so that's the CSS in place. Back to our downloaded folder. Next, we'll copy the JavaScript. We'll go for the minified version this time, so the jquery.slimmenu.min.js and copy that, and this time it goes in our JavaScript folder. Paste that in. We can get rid of these now. Then we want to link the JavaScript file we just included. So we'll include this in the script tags. We'll set the source to be our JS folder, and it was in jquery.slimmenu.min.js. I've included this at the bottom of the body section. You can include it in the heads, but I like to include mine at the end of the page so it doesn't hold up any page loading. We'll just add a comment to keep this nice and readable. So we'll just call this the Slimmenu. Great, so that's included now. Back over to the slimMenu website. If we scroll down to the instructions, we've already included the CSS, so we don't need to do that. We've already included the JavaScript file, as it recommends just before the closing body tag. We'll leave this section until we start creating the content. This is the on ordered list for the menu. We need to give it an ID of navigation and a class of slimMenu so it links up correctly with the CSS files. Then we need to initialize a plug-in. So if we copy this section and paste this in the bottom of the body section again, this one needs to go between script tags, so create the "Script Tags" and then paste that in. Then copy and paste the comment above the script there, and we'll call this the script for the slimMenu. So we're nearly there now, we just need to include jQuery just to make the slim menu work properly, and also a Font Awesome to include our icons into the project. So back over to the web browser. If we go to Google again, just simply search for jQuery. We need to go to jQuery.com and then hit the big Download button. So I'm going to include jQuery version one, the compressed version. So just click on that to get that started. So once that's downloaded, head back to the download section. I'm going to just remove the version number. So we'll just call this jquery.min.js and copy that. Head back over to our project and in the JS folder, paste that back in there. Then we'll link this in the bottom of the webpage again. So we'll just comment this, we'll call this jQuery, and we'll just put a note that this is required for the sharing buttons, which we'll get to later, and also the slimMenu. That's included between script tags. So again, it's in our JavaScript folder and it's the jquery.min.js that we need. Save that. So we're nearly there now, the only thing we need to add now to the project is the link to Font Awesome. Now, we're going to head back to Google and search for Font Awesome. We're going to include this in a slightly different way, we're not going to download it into our project linked to it. We're going to use what's called the CDN. So just search for Font Awesome and head to the GitHub page. If you've not used Font Awesome before, it's really useful to add lots of nice icons into our projects. We can just click on the icon section and you can take a look through all the different ones available. They're really easy to include, and we'll show you how to do that as we get building on the website. But for now if we go to get started, and as I mentioned before, we're going to use what's called the CDN, which basically means that the fonts are hosted by MaxCDN. So we don't need to download and install anything, we just need to copy and paste the link at the top of the page and then put that into our project in the head section. So that's how easy it is to include it. We'll put a comment for this called Font Awesome. Okay, so that's great, that's our project all set up now. We'll just check the slides and check that we haven't missed anything before we move any further. Okay. So we've included our basic HTML5 skeleton, we included it at the start. We've placed in the head section the viewport meta tag. We've downloaded and linked the normalize.css so our website appears more consistently across different browsers. We've downloaded and included the responsive grid. We've created our custom stylesheet. We've set up the CSS and the JavaScript for the jQuery slimMenu. We've also included jQuery into our project. Then lastly, we've included Font Awesome. So that's great, we've achieved everything we set out at the start of this video. So next we'll start creating the content for our website. See you there. 11. Header & Navigation: Welcome back. In the last video, we created the HTML5 skeleton, and we included all the basic structure, and we linked in all the required CSS and JavaScript files to get started. In this video, we're going to get started by including the header section. We'll be including the logo in the top left-hand side. We'll be including the user navigation, the search bar, which is going to be 50 percent of the width. There'll be six parts of the 12-column grid. We'll be including the main navigation, which was the jQuery slim menu that we imported in the last video. When we're working with the responsive grid, it makes it really easy to cater for the mobile user because all the sections will already be set to a 100 percent wide. We just need to concentrate when building on how many sections the desktop site has. Let's head back into brackets or your text editor. We'll continue in the body section. If we create a bit of space for ourself. We're going to create the header section to start with. The way we include the responsive grid is we set a div, we give the div a class equal to section. If you remember from the website, the section was a horizontal row of content, so give it that class. Then we set the class of group, we use this when we want to group elements together and it also includes the clear fix. We don't need to include that in our own CSS. Then, within this section on group div, we're going to create a second div with the class. We start with col for columns class, and then we add the number of columns we want. We select span, and the logo is half the width of the page, so it's 6 of 12, and close the div. Everything that we'll put between this div will be a 100 percent wide on the smaller mobile view. But when we get to the desktop size, it will appear half the width for the page. Next, we'll add the logo. The logo is just simply text. We'll give that the P tags and we'll give that an id of logo. We're just going to call this DESIGNER CLOTHING. We'll just put a break tag in between the DESIGNER CLOTHING to keep them on separate lines. Then we want.com to be highlighted. If we look at the final project, the.com is a slightly smaller font size and it's got a different color. We'll put them in between a span tag. We'll give the span a class of highlighted. We can change that with the CSS later. Then between the span tags, we'll add the.com. Now, that will just miss the closing/ in the p tag. There we go. We'll save that and we'll check it on the preview and see if that's all working okay. There we go. There's not much to it yet, but it is in place, so that's all working fine. Next, we'll move on to the user menu at the top, and we'll create after the columns closing tag but still within the section and group. We'll create one more div. This is going to be 50 percent of the page width again. It's going to be the same as above. It's going to be the span. It's going to be six parts of 12. This will be a unordered list. Between the ul tags, we'll create our first list item, and this is going to be links. We'll put the href tags in there too, which gives us a hashtag for now because we haven't got a page linked to yet. The first one was called MY ACCOUNT, and each one of the links is going to have a Font Awesome icon. We include Font Awesome by opening up a I tag, and then the opening tag has a class equal to fa, for Font Awesome. Then we put the name of the icon we want. In our case, we want the home one, so it's fa-home. We'll save that and we'll check if that's working. There we go. We've got the link and the little images appear on the right hand side so we can continue with the rest of the unordered list. I'll duplicate this twice because there's three links. The second link was MY BASKET, and the third link was for the CHECKOUT. The BASKET has a name of fa-tag. The last one was fa-shopping-cart. All the names to these Font Awesome icons are on the Font Awesome website that we looked at in the last video. You simply go to the icons, select one that you like, and then change the name to suit. We'll take a look at that. Yeah, that's just what we want, so back into brackets, we can continue now. Just going to add a comment to the closing div. When we're using the grid, there's lots of different opening and closing divs. Sometimes it makes sense just to add some comments in just so we know exactly where we are in the code. This was the end of the Section and Group. If you're using brackets and you are unsure which is the closing div for which path, you can just simply click on it, and it will highlight the opening and closing tags. Copy that. The one above was the end of the six column grid, and we'll place this on the first section as well. There we go. That's the first path finished. Hopefully, the grid system makes sense to you. We can continue now by adding the search bar. Back into the finished project, the search bar, if you remember from the wireframe was also 50 percent of the width or six parts. We'll put them in its own container, but still within the header section. We'll create the div with a class of section and also group, and then the div for the grid. It's called span_6_of_12. Let's duplicate this. The first div, we're just going to leave empty, we are just leave that in place just to create some space on the left of the search bar. Between the second div, we will add our search bar, and we will do this between the form tags. The search will be a input which has an ID of search, and let's give the type of search. Then lastly we'll add the placeholder text to be search also and close up. Next, we want to add the input for the button. We're going to say ID equal to click-btn, the type of button and the value to create the text of GO and close up. Set the search bar in place, we'll just check on the preview and see how that's looking. It's exactly where we want it to be. It doesn't look too great yet without any CSS styling, but it's all in place, so we'll continue. We'll just comment the sections off, so we know where we are. That's the closing div for the columns, then we'll also copy the section in group and paste that in, and we'll just move this up, I'll move header up. That's the end of the header section. Next, we'll create the navigation section. In the finished project, this is going to be the full width of the page, It's going to span 12 columns, so hopefully you get the hang of this now. The first thing we need to do, again, is set the div with class of section and group as our container, then within this, we'll set the div, the amount of columns with the class of col and span 12 of 12, and then we'll just put the comments at the start so we can see where are at. This is going to be the 12 column, and this is the end of the section on group. We'll start by putting the navigation tags, so we'll start by creating the unordered list, and if you remember from the slimMenu website, we need to give the unordered list the ID of navigation to link it to the CSS. There was also a class we need to add of slimMenu. Because this is a drop-down menu and there is parent and child links, we need to create this a little bit different to a normal unordered list. We'll start by creating the first list item. The first list item was For HIM and this is a link. We got the href tags and the hashtag, and in capitals it was FOR HIM, then straight after the FOR HIM section, we're going to put in the font awesome link, so that was in the i tags. If you remember how to do this, we give it a class of fa and then the name, so the icon we'll be using is fa-mars. That's the main link, this is going to be the first what we see. Next, we need to create a Nova unordered list, still between the li tags, and this is going to be for the drop-down menu. We'll create a unordered list, and just so we can tag this for the CSS later, we'll give this a class of sub-nav. Between the ul tags, we can create our list items as normal, and they're going to be links, so href equals the hashtag, and let's check our links. The first one we need is clothing and shoes, accessories and sale. Clothing is our first link, we can duplicate this another three times, link 2 was Shoes. The third link was Accessories, and the final link was SALE sale was in a different color to the three free links, so we'll surround these with the span tags and type in Sale. We will give span the class of sale text and we'll change it later on in the CSS. We'll close off the unordered list and we close off the first list item. We will do exactly the same just to make sure it's all the same, we'll copy this whole list section and paste it immediately below the first list. Everything in the drop-down was the same, the FOR HER links are exactly the same as the FOR HIM ones, we just need to change the text to HER, we need to create the font awesome logo of venus. All the links are the same. The sale tax will have the same CSS, so that's all fine, just save that and check it's all working okay. Yes, that starts to take shape. We've got the icons in place as well. Everything between these li tags is our first link and then we've got all our second link there. The next two links are on drop-down menus, so they are a lot more simple to make, we need to add the New Collections and the Sale. These are simple list items, but they are going to be links, so we need to put the href in again and close out. The first one is New Collections, the second list item is for the Sale, this is a link 2, this is for the sales section, and we want these to be in the cell text span, so I'm just going to copy the span from above and paste in between the a tags, that's the end of the jQuery menu, we'll just save that and we'll head into the live preview and check if It's all working fine. We've got the FOR HIM, the FOR HER, New Collections and the Sale links, just as we wants. The drop-down navigations are working, they don't look very good yet, but they will sort that out later with the CSS. If we scale the browser down, that's working as we want, everything moves to 100 percent of the width and all the drop-down link seems to work fine. I think this is a good place to stop this video, join me in next video, and we'll continue with the project. 12. Adding the main content: Welcome back. This is where we are right now with the project. In the last video, we created the logo in the top left hand corner. We created the unordered lists for the user navigation. We created a new section which had a blank part on the left-hand side, and also the search bar on the right-hand side. We created the jQuery slim menu, which has the drop-down navigational working and when we shrink down the browser, that changed to a nice drop-down menu, which is mobile friendly. Next in this video, we'll be moving down to the free promotion areas, the free boxes which are just below the jQuery navigation. We'll be putting in place the main image. Now this is just going to be a placeholder image until we got it later on in the course in the jQuery section will be adding a responsive jQuery rotating carousel. Then we'll move further down the page and will add all the images below with all the links to the different parts of the website. So back over to brackets. If we find where we left off, we need to start working from below the jQuery navigation. Let's start. We'll create the div again and hopefully you can remember how to do this. We give this a class of section and also group. In this section, we're going to add our own sub enough class so we can work with the CSS later. The free promotion areas will be a third of the webpage. They're going to take up four parts of 12. The div will have a class of col. Then this time it's going to be span four of 12. The free content areas are simply just text. They'll go between P tags. The first one was get five percent off your first order. Then the second and the third box will be the same, so we'll copy them. We will paste that in twice. The middle link was free shipping on everything. Let's just change the text. On the third link or the third box was price much guarantee. We'll just copy the comments from above. I'll place it at the closing div. Let's check that in the preview. That's looking good. We'll add the border in the CSS, but for now it's all in place. Each section sectioned one third of the webpage. We'll just drop the browser size down and that is exactly what we want. Once we hit below 800 pixels, the columns are stacked on top of each other for the mobile view. Everything's working fine so far. Next we'll add all the images. The images will be also in columns four of 12. The two images on the left will be four parts. The central image will also be four parts. Same with the two images on the right. They all take up the same space. You know what to do now, it's div class off section on group. We are just actually at the main image in first before put these in place, we just need to create a full width section for the image. This is going to be 12 parts of 12, to span 12 of 12. Then include an image in the usual way. Image sauce. It's equal to the images folder and our image is called shoes.JPEG and check the preview. Now I can start with all the images below. We'll just copy the div with the section group so we don't have to keep writing that out. These are four parts to the class of col and then span four sections of 12. Okay, I'm just going to add one more class to the container. This class is going to be Gallery. Because the text on the finished project sits on top of the main image, we're going to set the container and we'll have that set to a position of relative. We can set the text to be absolute, positioned exactly where we want to. To set the text to absolute, we're going to give them a class of feature between active we'll make them links with the href tags. We want the whole of the image and all the text to be a link. We'll put our image on the text between the A tags. We'll include the image, image source and it's in the images folder. Now the first image that we are going to use has name of accessories.JPEG. We'll close it off and still within the link tags, we're going to include the text of accessories, which is the first image there. Next we'll include the latest fashion link. Now because this is in the same column, we'll make sure that we keep that between the closing div. Just before the closing div for the four of 12, we'll just create some space and copy the whole of the feature and paste that in the low. On the text was latest fashion. We'll change the image. This was model.JPEG. Let's save and take a look in the preview. That's fine for now until we have the CSS. That's the closing div and I will just bring this up. We'll just copy some of the comments. This goes at the last div and we also need the end of the columns comments that we got a nice four of 12. There is just one image in the middle section. That's the Get Dressed Up part. I will include that now. That's in a div four out of 12. We can copy all of the feature section again. It's going to be the same as one above but is just going to be one image this time. The text was get dressed up. The image will change up from accessories this is one was girl.JPEG. Let's check that on the preview. It'll be all over the place now, but don't worry about that yet. We'll solve that in the CSS section. Lastly, the third column, the third column is also going to have to images as well. On the right-hand side, the same as the initial one, we've done. We can simply copy that our section. The whole four of 12 div, we can copy that and paste that in. We'll paste it in to make sure it's still within the end of the section and group. We need to change the text to footwear and set for summer. Set for summer at the bottom. Then the images. The footwear image was simply feet.JPEG. The last one was flower.JPEG. That should be everything in place now. We'll check the preview and all our five images are in place. All the text and the links, all working fine. Let's drop this down to the mobile view. All the images are in columns, so that's all working well. We've make good progress in this video. Join me in the next video and we will continue with the HTML. We'll add the e-mail sign-up section, which is below the images there. We'll add the about us text and then create the photo section. 13. Creating the sign up area & footer: Hi guys. Let's continue where we left off with the project. We're making good progress. We've completed the header section. We have moved down and created the free promotion areas. We've created the main image, which is going to be used for the slideshow later on in the course. We've added all the images and links below. Little bit of a mess at the minute but we'll fix that with CSS soon. We nearly finished by adding only HTML. If we go to the final project and we take a look, the only things we need to add to the project now is the e-mail sign-up section on the left, and then the about us text on the right. We then need to move to the footer area. We're going to create three different sections which appear horizontally across the page until we get down to the smart phone size, and then they will be stacked on top of each other. So let's start. If we locate the end of the section in group that we'd used in the last video, we'll actually create a comment to start with. I will call this the e-mail and about us section. We'll create the div with the section on group class. Hopefully you're getting a hang of this now. So the e-mail section on the left, and the about us text on the right will be in a container which takes up half the page. So that will be the div class col, and I'm going to expand six parts of 12. This is for the e-mail section. We'll just copy this and we'll paste it below, then we've got our two sections, one for the e-mail and one for the about us section. In e-mail parts, we want the e-mail to be in a form. Between the form tags, we'll include the text. So sign up to our e-mail, and the colons at the end. Then to put this on a separate line, we'll include the break tags. The e-mail is going to be a input. We have an ID of e-mail, and the type is going to be e-mail, and also the name, name equals e-mail. We'll create another input for the button. So input this ID will be equal to e-mail sign-up with a type of button and lastly, the value, which is the sign-up text. Let's check that. Okay, that's in place on the preview. So next we can move down to the second div to put the about us text in. We can style the text with the CSS. We'll add one more class of about us. Then we can start working on the text. So the text will be in p tags. We're just going to look at the final project, which you can write a little bit about us text. You can pull any text you want in there or you can copy along with me. We're going to have DesignerClothing.com highlighted too. So we'll start by writing, Welcome to, and then we'll put DesignerClothing.com in strong tags. Then after the closing strong tag, we'll continue with the text, so we are a global fashion leader offering all of the latest styles to cater for all tastes and budgets. We have hundreds of new items ordered every week. There we go. So add your own text into that or copy along with mine if you want, and that's the end of the about us text. We've got the closing div for the columns and the closing div for the section group. We'll copy the comments and paste them in, and also the ones for the columns. There we go. So that was six columns of 12. We'll do the same for the e-mail section. That was six parts of 12 too. Now let's take a look on the preview. That's looking good. They're both taking up 50 percent of the page, the text is all in place and also the e-mail sign-up section is in place. Now we can move down onto the footer section. The footer section is in free unordered lists which stack on top of each other on the mobile view. Let's create a comment of footer, and let's create the div class of section and group. That will be the container for the full footer section. Each and all the list takes up four parts of 12 or one-third of the page. First we'll add the footer tags, and then we'll create our div with four parts of 12. So four of 12 and in this div, we're going to create the unordered list. Each unordered list has four list items. This is the li tags, and there are also going to be links. Put the href tags in. Then the text. So the first one was about us. We can just duplicate this three more times. Then we need contact us as a second link. Then we need returns info and delivery info. There we go. We'll save and check that. There's the first unordered list in place. Next, we'll move on to the middle one with the terms and conditions. That's pretty much exactly the same. So we can copy the full div and paste it below making sure it's still within the footer section, and one more time for the third section of the footer. So about us, we need to change to terms and conditions. We use the HTML entity, the ampersand symbol, to terms and conditions. Then we need to change the links to privacy cookies and our blog. Privacy cookies and the last one is our blog. For the third part, on the finished website, you can see the third part is just a list of credit cards which is accepted by the website. These aren't going to be links. So we can take out the four links. We don't need those anymore. We just need the list items, and the first card is American Express, and just [inaudible] a bit, we're going to include the font-awesome images, we'll include the credit card icons. Same as before, we'll use the i tags and set the class to be equal to fa. The American Express icon is included by adding the name of fa-cc-amex and these are all available on the Font Awesome website, and close that and make sure we've got the closing i tag. We'll check if that worked. Yeah, there's a little symbol next to it. So now we know that it's working. We can duplicate it three more times, and add the VISA online too, rather than Amex, this is called visa. The second last one is MasterCard dominate PayPal. Change the name Font Awesome to MasterCard and PayPal for the last link, and the name is fa-paypal. That's the end of the footer area. We'll just add some comments. Just keep it nice and tidy. The section on the group is a very large closing div there, so we'll add that. I will check the preview. Of course, that's looking good. The free unordered lists appear horizontally across the page. We've got all the little Font Awesome icons working. So we'll shrink the page down and we'll check if they'll stack on top of each other. There we go. So the e-mail sign-up section, the about us text, and the free footer areas appear exactly how we want them. That's all the HTML in place to the project. We'll finish with that now, and in the next video, we'll start looking to add in the CSS and the styles for the mobile first view. 14. Mobile first styling: Welcome back to the project. We're really starting to take shape now. We've got all the HTML included for the project. We've got the header section with the responsive drop-down menu. We've got all the promotion areas and the main image in place. Moving down. It looks a bit of a mess at the minute, but all the images and links that are in place, and we'll deal with that with the CSS soon. We've got the e-mail section and the About Us text in place. Lastly, we've created the footer section with the three different unordered lists. Now we'll get started with the CSS. We're first going to create the global and mobile-first styles. If we go back into Brackets, and if we go back into our custom CSS file. We can start working with this. I'm just going to create some comments because we're going to perform all the media queries and styles into one file. I'm just going to create section so we can see exactly what we're doing. This section is called GLOBAL STYLES AND MOBILE FIRST. This will include all the styles which will be used for not just the mobile view, but also the styles which will apply throughout the whole of the website. The first thing we're going to do is we're going to set the HTML background-color, and we're going to set that background color to be the hex value of f7d9d9. We won't really see that in the mobile view. Just in this video, we'll shrink the browser down so we can see exactly what we're doing. We'll just get all on one screen. Next we'll look at the body. Because of style in the mobile view, we're going to set the width, and that is going to be 100 percent, so it takes up all the available space on the smartphone. We'll send to the website using margin zero auto. We'll set the background color of the body to be white, so that's fff. The content section you see on the mobile view or in the middle of the full web page on the desktop site will all have a background color of white, and the background color for the HTML will only show on the far left and the far right-hand corner when the page on desktop views. Next, the font. We'll be using Arial to start with, and then Helvetica, and then as a backup, we'll pull in a generic sans-serif font. The text color, it's got a value of 534c4c. Something which is really important on responsive designs, we want to set the image to be a width of 100 percent. You can also set that to a max width for 100 percent, but we're just going to set it to width so we can make the images scale slightly larger or slightly smaller. Next, we'll style the anchor tag. I'm just going to make sure that the links throughout the site don't have any text-decoration. We'll set the text-decoration to be none, and that will apply throughout site unless we overwrite it. Also the color of links, we're going to change them to 534c4c, the same as the text in the body. That's some general styles to the website. Now I'm going to take a look at the logo section, the logo heart, and ID of logo. I we'll set this to be aligned in the center, so use text-align, center to bring it into the middle, so it's not go off on any of the edges. Next, we'll make it a little bit bigger. It's quite small at the minute. We'll set the font size to be a relative unit. We looked at ems early on in the course. We'll set that to 1.4 ems, so that's 1.4 times the size it would normally be. We're going to set to margin, we'll set 20 pixels on the top and zero on the over three sides. We give the.com a span. We give that a class of highlighted. Just so we could change the color, the font size. The color was going to be that pink color we've seen early on, so that had a value of c158ad, and we change the font size to be slightly smaller. That can be 0.8 ems. Let us finish with the logo. It looks a lot better now. It's slightly larger. It's being centered in the middle of the web page, and we've got the.com to be slightly different color. Moving on. Let's start work on the user navigation. We'll start with the header section, unordered list. We'll set the width to be 100 percent to span the full width of the mobile device. Text-align to be center. We'll change the margin to be 10 pixels on the top and bottom, and zero on the left and right, and remove any default padding to zero. That brings the navigation into the middle of the page. We'll select the header list items next. We'll start changing the colors, so display as block to start with, and then we'll add some padding to make the buttons a little bit bigger. We'll just set that to 10 pixels just to space them a little bit better. We're going to change the background color. The background color is now going to be eee, so we set it to a nice light gray. The navigation is looking better. I just want to move the icons just a little bit away from the text, they look a bit bunched up. When creating the font awesome icons, they had a class of fa before the font name. We'll just add a little bit of margin on the left-hand side just to 5 pixels, and that stops them all from bunching up. That looks a lot better. I'm going to just leave the search bar now. We'll style that a bit later on with the rest of the input buttons for the e-mail section. For now we'll just move on to the main menu. We'll put a comment in place just for the main menu. The main menu has a class of menu-collapser. We got this from the developer tools by right-clicking and going to inspect the elements. For the menu-collapser, we're going to set the background color to be aaa, which is a light gray color. We'll set the text-align to be in the center. That pushes the text into the middle of the page. Then if we drop the menu down, we're going to start working on the links, the For Him, For Her, New Collections, and the Sale's section. They were in the navigation and they're hyperlinks, so we'll select a. We're going to change the background color of the links. We'll set this to 50657b. It's the blue color that you see. Next, we'll change the color of the links for the subnav which is clothing, shoes, accessories, and sale so it's a bit more clearer. We'll select the slimmenu class unordered list, and we use the greater than symbol and then li a. This selects all of the list items which are hyperlinks, which are direct children of the slimmenu's unordered list. If this is a symbol that you've not used before, I'd really recommend doing a Google search for 30 CSS selectors you must memorize. There's a great article which includes this method and many more, and some really good information on there which you may find useful. The only thing we'll do here is we'll change the background color. We want the background color to be fcfcfc. We still got a gray background appear on the left-hand side, so we'll remove that. The way to select that is by selecting the ul slimmenu class and the list items, and then the direct child unordered list. If this doesn't make sense, the way to look at is we selected the list items which are part of the slimmenu, which is the For Him, For Her, New Collections, and Sale. Then the direct unordered list below that is the subnav. We're just going to change the background color of the subnav. We'll change that back to white, so that looks a lot better. The sale text in the finished project is a different color on the last link there, so we included a class of sale-text. We'll change the color of the font to be dd5454, and that'll change that to be red. Also does the same on the drop down menu as well because they've got the same class. That's the menu all finished. We'll just stretch it out and see if it looks okay on the larger view. Yeah, everything looks exactly how it should do. We've got the drop-down navigation working, all the colors are correct. We've got the sale text in the red color. When we drop it down to the mobile size, everything looks as it should. I'll just add one comment to the end, just to state that's the MENU END. We'll leave that for now. Join me in the next video and we'll continue with the CSS for the mobile view. 15. Mobile styles continued & adding media queries: Welcome back, everybody. This is going to be the final part of the designer Club and project. We've got to start with the styling for the mobile view. We've created the drop-down menu and changed all the colors for the sublinks. We've centralized the logo on the user navigation. We'll continue where we left off and we'll start by creating the styles for the search bar. Also further down on page at the same time, we'll create some styles for the email sign-up section. So just below the close and menu commands, we'll start by tagging the form. We just want to set the text line in the form to be in the center. That moves the whole of the search bar into the middle of the page. We can target more than one inputs at the same time. If we use the square brackets, we'll go for the type equal to search, I'll separated by commas, we'll select the input type of button, and then the input with the type of e-mail. So we can do all these at the same time. All we need to do to this is we're going to change the height to be two Ms, that will make them twice as high as it would normally be, just take up a bit more of space. So it looks good on the email, on the search path. Then below this, we just want the search bar to be a bit wider. So on this style, we'll just select the input with the type equal to search. We'll set the width to be equal to, we'll give it a try at 50 percent. It's a bit better but just a bit further. Seventy percent looks better. Then we'll go down to the e-mail section, and we'll change the width for that too. So input type equals email. We'll set the width to be, we'll try 30 percent, it's not quite big enough, 40, it's not quite wide enough, we'll change that to 60 percent. We're halfway to that, the inputs look a lot better now. Back up to the top, we'll start working on the promotion areas. The free boxes were given a class of sub-nav. I want to target the text so we use the p. So text-align start with. Like the rest of the items on the mobile view, we'll put that to be centralized. If there's any default margin, we'll just remove that with this. We want them to be a little bit higher so that could be punched up now. So we'll set that to 40 pixels. We'll also adjust the line height to be 40 pixels to match, and that will also vertically align the text in the container. We just want to put a border. If you check out the final project, the finished project has a border on the free promotion areas. So that's what we'll look at next. The border needs to be all the way around, and that's going to be just one pixel. We want the line to be solid. Now, we'll set the color to be aaa. Sides are looking a lot better now, it's really starting to take shape now. The image is in the right place there. But what we wants to do next is we're going to target the images and the text. So if I remember rightly, we give the images a container with a feature class. So we can set the position to be relative. This allows us to set the text to be absolute, and then we can position the text within the image container. We'll start with the feature class. The only reason we need that in is just to set the position to be relative. The text had a gallery class, and we'll select the P. So this just gets the text. To get the text where we want, we'll set the position to be absolute. Below the positioning, we'll set the bottom to be five pixels, so that should make the text appear five pixels from the bottom of the relative container. We'll change the color and we want that to have a value of c158ad. Text-align to be centralized. To make that work, we need to add the width of 100 percent. Now, that pushes all the texts into the center of the page. The text is looking a bit small, so we'll set the font size to be 1.5 ems. Next, we're going to add a little bit of padding to the top and bottom. We'll set that to two percent on the top and bottom, and zero on the left and right. The text is not very clear as it is. The background color on some of the images makes it quite hard to read, particularly the footwear one. If you look at the finished project, we've added a background color and a transparency to it. I'll show you how to do that now. Underneath the padding, we'll set the solid background color that we want, that's going to be ddd. Just so the background color is not such a solid color, we can change the opacity to be 0.7 which is effectively 70 percent. That works well on the majority browsers, but we'll put a second rule in there of filter, just to target Internet Explorer 8 and earlier. The way we do that is we set the filter Alpha and then in brackets, we set the opacity to be equal to 70 percent. That's it. So that should be friendly for Internet Explorer 8 and bellow users. We'll just take a look up and down to check all the text is in the correct place. Yes, that looks all fine. We're scrolling down the web page, there is not much more we need to do so we're now on the mobile view. We'll start with the About Us text next that simply had a class of about us. We'll set the text aligned to be centralized. It's a little bit more readable. We'll increase the line height to 1.5 ems, just to space out the height. That looks a lot better, that's pretty much all we need to do for the About Us section. We'll next look at the footer area. We need to add a background color. Take a look at the finished website. We need to align the text in the center, we'll also add the border, the dotted border on the top and bottom, and we'll change the background color. Let's start. In the footer ul section, change the width to be 100 percent to span the full width of the container. This allows us to change the text line to be centered. That's not quite pushed into the center so we'll remove any default padding. We'll change that back to zero. Let's change the background color of the list items. We'll select the footer li, and we'll set them to have a display of black. The buttons are a bit smaller and bit bunched up, so we'll change the padding to be 10 pixels so a bit more spaced out, and the background color is going to be eee. On the border, we'll put the border on the top which is going to be one pixel. The line we want to be dotted and the color is going to be aaa. Let's check if that's working okay. It's hard to see but it's actually there, it's a dotted line but it is just enough to make sure that the buttons look like they are divided up. Because you've added the board onto the top, it appeared on the top of all the buttons, but we need one on the very bottom. So footer, list item, and then we'll select the last child which will select only the last item in the list. Then we'll add a border onto the bottom of this last child. The same as both, we'll do one pixel, the lines to be dotted too much, and the color to be aaa. I just put a mistake there, we'll change that to dotted. That's all finished. We'll just check it now, check it's all looking fine. The full area is looking good. The e-mail sign-up section on the [inaudible] text, all the images are links. They're looking exactly how they should be, the same for the header section and the navigation. Now that's all in place, we'll start adding some media queries to make it look better on larger devices. When we scale the browser up, you can see that the website starts to break and we need to change the size of the logo, we need to change the user navigation just a little bit, playing about with some parts of it. But the majority of the website styling is being taken care of in the mobile view. So it's not a lot of work to do. We just need to add a few media queries. If you want to pause the video now and add the media queries yourself and work through the larger sizes and just make everything look good, feel free to do that now. Otherwise, follow along with me and see what I would've done. Hopefully, you can remember how to add the media query. We use the at media, and then we just want to target the screen, and we're going to set the minimum width. The first media query I want to do is just going to be a minor breakpoint. The reason I'm going to do that is because if we stretch the browser up to about 600 pixels, I'd like the user navigation to be rather than stacked on top in a block form, I like that to be in line across the page. Now, we've got a little bit more space. We'll do that at 600 pixels. This is going to be the only style in this media query. We'll look at the header list items. We simply just need to change the display to be in line. I think that looks a lot better. So we'll stop this video there and we'll continue the project in the next video. 16. Finishing our project: The next we're going to stretch the browser a little bit further out. The changes we want to make for this, we just want to contain the body width to be 90 percent rather than expanding from the full left of the page, right to the full right. It looks pretty bunched up against the edges, so we'll restrict the body width to be 90 percent of the viewport, we'll also change the logo. We just want the logo to be a little bit bigger, and we'll position on the left-hand side rather than being aligned in the center of the container. I think now we'll enlarger the screen as well. We'll change the background color of the buttons, we'll just change them back to be transparent and may be do a little bit work with the e-mail section. I'm going to create another media query, I want to change that if we scale down, we set the last break point to be at 600 pixels. We'll just keep going a little bit further until the content looks like it needs change. I think about 800 pixels we'll start changing the layout again. We'll add another media query to be screen again, and we'll set the minimum width to be 800 pixels this time. Let's start with the body. We're just going to change the width for the body, rather than expanding the full width of the page, we'll change that to 90 percent, and this stops the page from going right to the edge. You can see early on we put a background color of the HTML to the pink color, and you can see that shown through now. Some of the contents such as the free boxes on the edge of the navigation goes right up to the edge of that, so we'll set so I'm padding on the body, we'll just set that to 10 pixels, there we go, and that just pushes in the contents which it's not right up against the edge of the screen. It's all we need to do for the body. Next, we said would look at the logo, which had an ID of logo. The logo needs to be moved into the top left-hand corner rather than being in the center, maybe I just wants to be a little bit bigger too, so we change the text line to be left, and we'll set the font size to be 2 ems, let's take a look at that. It's pushed on little bit at the top, so we'll just remove any default margin to 0, I'll expect that to align with the user navigation on the right now. Next we'll take a look at the use navigation at the top. If we take a look at the mobile styles, we set the menu to be aligned into the center on the header on order list. We'll just position up back to the right by using the text-align property of right. It's just a little change, but it pushes the menu back over to where it should be rather than being centralized. We'll change the background color to be transparent again rather than the light gray color. We'll target the header list items, then we'll just change the background color, we'll change that to transparent. Now, let's take a look. I think that looks a lot better on the desktop view. If you take a look down the page, everything else is looking quite good. I think we'll just make the e-mail section just slightly bigger and maybe just apply a bit of margin to the top, just it looks bunched up to the top of the container there. Still within the media query, we want to select the input, and the type is equal to e-mail. Let's check what the width falls before on the e-mail. The width on the mobile view was 60 percent, so maybe just take that a little bit bigger. We want the width, we'll try 70 percent and see how that looks. Yes, that looks a little better. Just to push it down a bit, we'll add a little bit margin to the top, just a 5 percent, and we'll see how that looks. Maybe just a little bit more, we'll change are up to 8 percent. It looks a little bit better. Lets just scale this up and down, and see if everything looks fine. Footer area is all looking fine. The problem we've got at the top is you can see that the user navigation, a certain size doesn't quite fit on the page, so there's not quite enough room there. One way we can look at fixing this, we have the logo taken up six parts of 12 and also the use navigation taking an equal six parts. We don't quite need the six parts for the logo because it's pressed up against the left-hand side there. I think if we go back into the HTML and we'll just make a small change to the grid. The logo, we can change that to just five parts, and then we'll make the navigation seven parts and we'll see how that looks. Yeah, that looks a lot better. Just one thing I've noticed is the text in the free promotion areas doesn't quite fit in the boxes, so we need to change that. We'll just scroll back up, and it was the sub-nav p, so I just copy that class. I will try changing the font size, tried up not to 0.8ems, and see how that looks. You can get away with it slightly bigger 0.85, that all fits on. We're very close to being finished now. The last thing I want to do is we're going to add a larger breakpoint just when the screen gets really wide because we don't want the content to be stretched too far on really big monitor,so I'm just going to restrict the width of the body to maybe around 1500 pixels, and we'll also set a break-point to change the size of the fonts just to increase them for large monitors. We've just head back into your text editor and create one more media query. I'm going to go for about 1100 pixels, but feel free to change that if you want. Let's come outside the media query there, and we'll add one more, so @media. Again, the screen and the min-width at 1100 pixels. So to restrict the width for the body, we'll set the body with a max width, and we'll change that to 1500 pixels. Just to make everything slightly bigger, we'll boost the font size for everything to be 1.1 ems, and let's take a look at that. Once we get to 1100 pixels, there we go, the font size get slightly bigger. Once we get more screen space available, I think we'll just make the logo to slightly bigger too. The ID of Logo, we'll just set the font size of the logo to be 2.2 ems, and we'll see how that looks, that looks a lot better now. I think that I should be able to just take a look at the project and check everything is working okay. On the largest sizes, everything seems to be laid out nice, it often seems to be breaking, all the font size is readable and is laid out correctly. If you shrink down to a tablet size, the layout still looks good and everything is as it should be. If go a little bit further, we get a minor break point where the user navigation changes to be in line and the responsive drop-down menu is hidden. Even further down to smartphone's size, the logo navigation looks fine, the search bar looks good. On the jQuery menu, is all nicely styled and all the images and text are all in place. That's the end of the project and that's the end of the section. If you join me in the next section, we'll start looking at adding some jQuery plugins we can use, so function which, I will see you in the next section. 17. Responsive Sliding Carousel: Hi everybody. Welcome back. The last section we finished off our designer clothing project. This section is called jQuery plugins for responsive design. We'll be taking a look at some jQuery plugins which we can add to our project to really improve the look and functionality of our site. This is a little look at the project that we built before, but with the jQuery plugins added on. The first thing we'll be adding is the sliding carousel which you can see in the middle. Its got the direction arrows either side and it rotates between different images. A little bit further down the page, we've also added the social sharing buttons. Of course, they're responsive. If we shrink the browser down, they scale down nicely to suit the device we're viewing on. Similarly, if we go up to the carousel, that works nicely on smartphones too. To integrate this into our project. So if we head over to Google, we need to look for the FlexSlider by WooThemes. If we search for flexslider, we need to go to woothemes.com/flexslider which in our case is the first link. To start, we'll just click on the "Download FlexSlider" button. If we take a look at the website, there's some examples you can see. There is more information about what you can include. You can include horizontal or vertical sliding effects. You can use fade-ins. You can include more than one slider in your website if you want. There's also support for touch swipes. To get started, we scroll down to the Get Started section. Let's get started. If we copy the link to the CSS back into our project in the index page, I'm going to paste this in and we'll do that just above our custom style sheet. I will put now a link in the CSS folder. We just get the file path correct now, so we don't forget. Back to the homepage, we don't need to copy the script, the second item, because we've already got jQuery in our project, so we'll copy the script tags at the very end. This is just going to be a link to our FlexSlider JavaScript folder which we just downloaded. Back to the bottom of our page, we'll paste that in just below the jQuery link. We'll add a comment. We'll just call this the Flexslider js. We'll change the source because we put that in the JavaScript folder. We change that now. Back to the WooThemes FlexSlider homepage, we need to go to step 2 and find the markup. If we copy that and head back into the project, we need to replace the shoes image which you put in as a placeholder until we got the carousel. We need to replace the image which is there. We'll delete that whole line. We can keep the container because that's the container flow of fluid grid. If we paste the code in there, an example text has three different images on there. I'm just going to remove the third one because we've just got two images that we're going to include. You can add more if you want, but in the image source and in the Images folder, we'll put back in place the shoes.jpg image. For the second image, again, in our Images folder, we're going to use the sunglasses.jpg image. Then we'll copy the JavaScript. Step number 3. If we copy step number 3, I'll go to the bottom of our page with the rest of the JavaScript. I'm going to paste that in just below the FlexSlider file. There we go. We'll save that, so that is finished with that. We need to go to our "Downloads". Now we need to unzip the FlexSlider file that we downloaded before and open up the contents. First, we need to open up our project. We'll copy the flexslider.CSS file from the download into our project. We'll copy the jQuery flexslider.js into our JavaScript folder. We need to copy the Fonts folder. We also need to put that into our CSS. This will contain the direction arrows that we use for rotating the carousel. That should be all the files and folders in place. We can just get rid of those now. Back into our text editor, everything should be linked correctly. We've got all the file paths correct, hopefully. Let's save that and take a look in the preview and see how that looks. The images are rotating as they should be. We've got a little square instead of the direction arrows either side, so we'll just check what's happening there. If we go back into our folder, we just need to make sure the fonts is nested inside our CSS folder. Then were going to refresh this. There we go. There's our direction arrows appearing as they should be. We've got the little dots at the bottom to indicate there's two different images. Now we can click on them and just check that they're working. Great, that's all working fine. That's it. That's how easy it is to include a responsive carousel into our project using a jQuery plugin such as FlexSlider. Thanks for joining me. I will see you in the next video where we'll look at the responsive social sharing buttons. 18. Responsive Social Share buttons: In the last video, we added the responsive rotating carousel, which looks really good. In this video, we'll continue on by adding responsive social sharing buttons. If we go over to Google, and we search for ridiculously responsive social sharing buttons, it's a bit of a mouthful, but it really is a good plugin. We need to go onto the GitHub page under kni-labs/rrssb, and click on that. You can start by clicking on the zip file and getting that downloaded. If we scroll down to the bottom of the page, we've got an example in the middle, which shows a demonstration of the buttons as they get larger and smaller. Scrolling down, we need to find the usage section. Just like in the last video with the rotating carousel, there's actually only a few steps we need to take to get this included into our project. Hopefully, we've got the zip file downloaded now. The first step we need to do, we're going to copy the CSS link. We'll put this, and heading to our text editor, I'm just going to place mine just above our custom style sheet. The file path looks correct. We've ordered the CSS folder, and we'll dragging the CSS file off the download soon. Next, we need to find out where we're going to put it. In the projects, I'm going to include my sharing buttons just below the About Us text and e-mail sign-up section. Back in Brackets, we need to locate the about us text. Down towards the end of the project, there is a closing div for the final section just before the footer. We'll add the sharing buttons into their own div. A div with a class of section and group. We want them to span the full width of the web page, so we'll give them the class col and then span. They're going to be 12 of 12. Head back over to the homepage, and then go to step 2 and copy all the sample code back into your text editor. We need to paste this in between the 12 column section. Now, there is lot of sample code, that is nothing we'll really need to worry about just yet. If we go back to the homepage and if we continue down to step 3, we're just going to copy the script at the very bottom, which is a link to the JavaScript file, which we're going to include in our project too. We don't need to include jQuery because it's already in our project. Back into our index page, at the very bottom, I'm going to paste this in as the last script. I will just comment this. We'll call this the social share buttons. Now we need to include the downloaded files into our own project folder. If we open up our designer-clothing.com folder and head to the download section, if we unzip the package we downloaded before and open it up, so we'll start with the CSS. If we are heading into the CSS folder, we need the rrssp.css. We'll just copy that into our own CSS folder. There we go. Then into the JavaScript, we'll copy the minifile version into our JavaScript folder. There we go. That's all we need to import into the project. If we go back into our index page and we just check the file puffs are correct. Down at the JavaScript, I was already in a JavaScript folder or a JS folder, so that's correct. Back up to the top, to the CSS, the link that we copied before already has a CSS folder reference, so we'll okay that too. Let's open up the project in our browser and check if that's working fine. Scroll down to the bottom. That's looking good. We can scale our browser down and see how buttons respond. Great. Look it on a smartphone too and on the larger screens. Now we've all working. There are just one or two little changes I want to make. I don't want to have the e-mail button on there because we already got our own e-mail section above, which just leaves us with the Facebook and Twitter link. I'd like to add a Google+ and a Pinterest link. The way we do that, if we go back into our share buttons folder we download before, you'll notice there's index.html page. I'm just going to open this up in our text editor, and this has lots of sample code we can copy and paste over to the project. To start with, we'll look for the Google+ link. There's Twitter and there's Google+. We'll start with the list class, and that's the Google+ one we need. If you just scroll down to the highlighted close in this tag, I would copy this section. Then into our own index page. If we scroll through all the code, so we've got the e-mail section. I'm just going to delete this e-mail section there between the li tags, which leaves us with the Facebook link, the Twitter link. Below the clothes on list tag for the Twitter link, we'll paste in the Google+ link. I'll just create some spacer. Back into the sample index page, we'll look for the list item with class of Pinterest and we'll do the same. We'll just copy this section, and then paste this into our project. Let's take a look at the preview. Just check we haven't broken anything. That looks nice. The e-mail section has gone and the Google+ and the Pinterest section are now where they should be. Let's drop the browser size down and check it's also working on the smaller screen. Yeah, that looks good. The button is scaling down nicely to fit on the smaller smartphones and then scale up for the desktop and laptop sites. That's our four sharing buttons integrated into our website. If you need to change the four buttons to any of the social media sites, just head over to the sample index page that we just copied the Google+ and Pinterest button from and take what you need from there. It really is as simple as copying and pasting a list item. That's it for this video. Thanks for watching. I hope that gives you an indication of how easy it is to include responsive jQuery plugins into your projects. 19. Responsive images introduction: Hi, everybody. Welcome back to this new section called responsive images and improving page load times. Dealing with images on responsive on mobile websites is pretty essential nowadays. So in this section, we'll be taking a look at some ways to optimize our website and improve our page load times. We'll be taking a look at the pitch element and adaptive images, which are two great methods of serving correctly-scaled images. This really helps our images not only look better, but also improves download times on smaller phones and tablets. The project we've been building so far is quite image-intensive. This is deliberate. We can look at some ways to improve the site and also consider alternatives to using images too. I've set up an example using a nice-looking dog. The image on the top is 400 pixels wide and the image on bottom is 1,280 pixels wide. The smaller image, it may load faster looking at it on a smartphone, but when stretched to a large monitor, it may start to look stretched and lose the image quality. Once you get bigger, you can see that it loses some of the finer details. But if we scroll down to the larger image, which is 1,280 pixels wide, you can see a lot more detail because the bottom image is closer to its original size and vice versa. The opposite happens when the large image is shrunk down to be a lot smaller than it should be when, for example, it's on a smartphone, they may not look as good. So we'll shrink this down to a smartphone size. You can see it's not as detailed. It looks a bit more blurry than it did before. Not only does it have a impact on the image quality, if we download an image which is far too big for the device we're looking at, it can really slow down our page load times and portfolio uses. Let's now move on and take a look at how we can optimize our images. 20. Reducing Image File Sizes: Welcome back. We're going to take a quick look at how we can optimize our images which we used in the project. So this is a project that we built early on. On the homepage, there's quite a lot of images to download. So we're going to take some steps to try and improve that now. The first we want to do is we're going to head over to Google and we're going to use a tool called ImageOptim. Search for ImageOptim, and it's the first result that pops up. We need to go to imageoptim.com. Once you get to the homepage, you can read up on the tool and find out a bit more information. But simply, all we need to know is that it's a free app which makes images take up less space on the disk and it can help improve our performance. So all we need to do is download it. Simply drag and drop the images into the folder and that takes care of all the optimization. Click on the "Download" button, if you're on a Mac, if you're on a Windows, I believe the icon below takes you to an alternative version, you can download there. Once that's downloaded, we can just unzip it and open up. Once it is already, you'll be shown a drag and drop screen, the same as I've gotten here. If we head into our project folder and find the images, if we open up the images folder we can see on the right-hand side all the sizes of all the images, and this is what we're going to try and improve now. Head back, and once you find the images folder, we can drag this in to ImageOptim. Just give that a few moments to get work. It doesn't take long at all. Once it's ready, we can see a list of the savings on the right-hand side and there's a summary at the bottom. We saved an average of seven percent per image, and some of the images are up to 11.2 percent which is the shoes.jpg, such a really good saving, and saving seven percent overall may not seem like a huge amount but it's a good return for just a minutes or two's work. Once it's all finished, we can just close that. All the compressed images are automatically saved. We don't need to do anything else. We can get rid of our project folder. If we go back into the project, so although images look great on our website and we can optimize images about a page load times, it's sometimes worth considering using alternatives to images such as vectors. Vectors can often download faster and the scale up and down without losing any equality. Another website worth taking a look at, if we head back to Google, and we search for the Unicode table and find the unicode-table.com. This website has a list of thousands of different popular characters we can use in our projects and it's often worth taking a look through to see we can replace our images with any characters which will make our webpage a lot more efficient, and they're perfect for responsive design because they scale up and down without losing any quality. We can take a look through the characters on the homepage, or there's a search bar at the top. If we also click the drop-down menu, there's some categories which we can click, and just take a look through, see if any of them can be used in your projects. So that's it for this video. Thanks for listening, and we'll see you in the next video. We will continue to optimize our webpage by magnifying all files and taking a look at Google's PageSpeed Insights. 21. Minification & Page Speed Insights: Welcome. We've got started on our project optimization by compressing our images, and next we're going to take a look at minification and download on Google's PageSpeed Insights and taking a look at the recommendations on there. So let's start by heading over to Google and if we search for the PageSpeed Insights extension, and then click on the Google Developers websites. So I've already got PageSpeed Insights installed, so all you need to do is simply click on the button at the bottom and get the extension started. Then once you've done that, if you head into the project, and then we need to right-click, and go to Inspect Element, then go up to the Developer Tools. So you may have this on the bottom or you may have it on the right-hand side. You just click on the button on the right-hand side and you can switch. I'm just going to keep it on the right-hand side for now. The way to get started with PageSpeed Insights, on the row of options on the top, the very last one should be PageSpeed. So if we select that and then click on "Start Analyzing" and it should give you a few moments to get to work. So once that's finished, you'll get a list of recommendations on the left-hand side and also a list of everything that's already being done. So the recommendations were again, the serve scaled images. So we'll be looking at the scaled images later on in this section by using the picture elements and adaptive images. So we'll just leave that one for now, but the main ones we're going to be looking at in this video is the minification of the JavaScript and CSS. So minification is the process of taking all files and removing everything that the browser finds unnecessary, such as the comments were put in place and any whitespace which doesn't need to be there. So we'll get started with the CSS, and with the suggestions, it says we could potentially save 47 percent of the file size. So to get started with minification, we're just going head to Google and we're going to look for the CSS minifier. So we need the cssminifier.com and it's easy to use. We just simply copy and paste our CSS files into the left-hand box, and then select minify, and then we'll get the minified version on the right-hand side which we can copy and paste back into our project. So if we go back into the text editor and open up the project, find the CSS folder. So I'm going to start from the top. I'll start with flexslider.css and we're just going to do Command A to select all and copy, and then go back into CSS minifier, paste that in, then select Minify. Copy the minified output and then paste that back into the project and save. So the CSS looks a little bit different now. It works exactly the same, but it's just all a bit more bunched up. All the whitespace and comments has been removed, but it will do exactly the same job. So it's going to be quite a bit of copying and pasting for this video, we're going to go through all the CSS files, so if you want to pause that and go through them yourself, feel free to do that, or you can follow along with me. Next we're going to go to Normalize, then copy that in, and paste that back in and save. Next is the responsive grid. Paste that back in and save. So what we're getting there now is the the sharing buttons. The sharing buttons have already been minified. It looks as though we've already imported the minified CSS version into the project, so we can leave that. Under slimmenu, we'll copy that into the minifier too. There we go and save, and the last one we need to do is our custom stylesheet. So select all and copy, then minify and paste that back into the project and save. So then if we head back into PageSpeed Insights and we'll just refresh that, and then we'll click Start Analyzing again, and you see on our list of improvements on the left-hand side, we've lost the minify CSS recommendation, so we've taken care of that. If we go to Already Done and just check it's there. There's our minify CSS that's all working correctly. Something else which is already in there is the optimized images recommendation. So the compression we applied in the last video was all work correctly. So next we'll start with the minified JavaScript. If we go back to the CSS minifier, at the top of the page is also the JavaScript minifier. So if we select that and we can do exactly the same with the JavaScript that we'd just done with the CSS. So we'll start working with the FlexSlider, and we'll copy that, and paste, and we'll minify just the same. So we'll copy the minified outputs, paste and save. Again if you want to pause the video and go through this yourself, feel free to do that. Next we'll go to jQuery. We don't need to do the jQuery file because that's already minified. We downloaded the jQuery.min version when we included that on the project. So we'll move down to the slim menu. The slim menu will copy and paste that in, and save that one. The only one we need to do next is the sharing buttons, but that looks like we've got the minified version as well, but we'll just actually copy and paste that into the minifier anyway just to get rid of the comments, and paste that back in and save, then back to the PageSpeed Insights. Refresh and then we'll start analyzing once more. There we go. So the JavaScript recommendation has now been removed, and it's being placed in already done part. The minified JavaScript, so that's all taken care of. So we're getting somewhere. Now we've optimized our images, we've minified our CSS and JavaScript files. I'm going to leave the minified HTML recommendation for now. If you want to take that and do it as a little challenge, you can do it by yourself, but otherwise join me in the next video, I will start taking a look at the picture elements which can help us serve different size images for different devices. 22. Picture Element: Welcome back everybody. This video is all about using the picture elements to serve scaled images for our websites. We looked at an example in the introduction and we took a look at the two images of the dogs, which was a large image and a small image and we talked about the problems associated with stretching and shrinking images. We use a picture element to only display the right size image for the right size device. I've set up a basic index page with the style tags and the only styles we've included for this example is we set the image to be the width of 100 percent. We set this to the width rather than maximum width, just so the images can go slightly smaller or slightly larger if required. You'll see in the project folder, I've got an image of a dog. A dog which is 640 pixels wide, and a larger dog which is 1,280 pixels wide. When you use the picture element to display these three different images, once the browser size gets to three different sizes. I've included the free images as a download so if you want to follow along, you can do. But before we start, I just want to show you the script tag which we've got in the head section. This is what's called the picturefill. We include this because not all browsers provide full support for the picture element yet. If we just go into Google and we search for caniuse and go to caniuse.com. Then if we search for the picture, let's take look at the browser spot. I'm using Chrome in this example, so pretty safe using Chrome. Chrome has supported the picture element for sometime now. But if we look at Internet Explorer for example, Internet Explorer doesn't provide any support for picture nor do some of the early versions of Firefox or Safari. This is why we need to include a picturefill. The way to include that in our project is if we search for picturefill. If we go to the Scottjehl GitHub page, then hit the Download button and give it a few seconds to download. Once that's downloaded, if we just unzip the download, then head into the folder then if we go to the source folder and you see there is the picturefill.js. You need to copy and paste that into your text editor. If you're following along, I've included it already just in the same directory as the index page and then link it using the script tags at the top. Let's get started. If we head down to the body section. The way we start it is by setting the picture tags. Like most tags, it's got the opening and closing tag and there is a few different ways of including this. The first one, I'm going to show you a method to combine the image source with a media query. Once a media query hits a certain break point, it will provide a certain image that we set. The way to do that is we set the source and then we include the media and then equals. Then between the quotes, we add some brackets. This bit should look fairly familiar. From the media query section, we'll set the minimum width, we'll use the example of 1,280 pixels and then I'm going to keep this on the next line below, just so it's more clear. You can include all in one line. But next we want to include the source set. This is the location of our image. Our images are included in the same directory. The image for the dog is dog1280.jpg. Then close it off. As it stands, we won't get an image displaying in the browser on smaller screens, an image will only appear once we hit the break point of 1280 pixels. Let's fix that now. If we go below and keep between the picture elements, we can say a media source. We'll do this in the same way but this time we'll include the media query for the 640 pixels dog. Minimum width to be 640 pixels. On the source set is our dog640.jpg and close up. That's our image included for the 640 pixels and above. Then once you get to 1280, we'll get the large image. Below 640 pixels we're going to set a image source in the same ways we normally include a imaging website. This will also be the fallback image if there's any problems loading the source set images. The standard one we included was dog.jpg. Then we'll put some alt text in there. We'll just call this cute dog. Then close. Let's take a look at the preview. Let's go to the smaller sizes. That piece is working, this is the standard dog image which we've included and this will appear up until we hit the break point of 640 pixels. Let's expand the browser. There we go, once we hit 640 pixels, you can see there is a image where it's 640 text on the corner and let's keep going to get to 1,280. There we go. As soon as you get to 1,280 pixels, we get the larger dog image without the 640 text so we can tell that's working properly. Hopefully you can notice on the larger screen by matching a larger image, the dog is a lot more clearer. You can see the fur is a lot more detailed. If you just make it a little bit smaller, once we get the 640 pixels image on the larger screen, we'll loose some of the finer details around the fur. That's working correctly. Back into brackets. As well as including these images just to change sizes when we hit certain breakpoints, we can also use it to crop the image. A good example would be if we had the news article on a sportsperson. If the image was in a team shot, that team shot might look really good on a desktop but when we shrink that down onto a small device, we may want the image to be cropped just to include the person we are writing about. This is a method called the art direction. Also another way of looking at this is we may want a landscape image to appear on the desktop site, but we may want to change to a portrait image on a smartphone. Next we'll take a look at using the picture element not only to change the image size on different break points, but also to combine the media query with different images for high resolution or retina displays. To do that, we can keep the media query. I've not provided any retina images to download. This is just going to be a quick demonstration. For example, in the larger sizes, we may have a images folder with a dog large image. Then we could do the same with the 640 media query. In the images, we could have a dogmedium.jpg. Then for example, in the fallback image, we could have the dogsmall.jpg image. We've got three images. We've got the small, medium, and large, which will be displayed on standard non-retina displays. We can now write in the images by, if we locate the first image, then separate these with a comma. As well as our standard dog image, we can also include a high resolution image. We do this by providing a second image in the images folder and then, for example, we could have a 1.5x version of the dog large. The browser knows that this is for a 1.5x display. We put 1.5x at the end of the line. Again we can put a comma and we can create a third image and this time we can use it for a 2x display. That would be 2xdoglarge.jpg, and then 2x at the end of the line. Then we'll just copy and paste the source set. We conclude this in the medium media query but we just need to change the dog large to dog medium. We can do the same in the fallback image. After the image source, on the next line, we're going to paste in the source set so we can delete the first image we've already got that included in the image source. We just need the 1.5x and the 2x image. We'll change large to small or however you'd call your images. Hopefully that makes sense. If we're looking at our images on a smartphone, on a standard display, we'll get the dog small. If the smartphone we're looking at had a pixel density of 1.5, we would then load the appropriate image. The same if the mobile or smartphone was a 2x display, we'll get the appropriate image. Then on a larger screen, over 640 pixels, again, we will get the standard dog medium image if that was a 1x display or non-retina. If the display was 1.5 or 2x we'll get the appropriate image loaded and exactly the same for the screen size over 1,280 pixels. Such two real useful examples of using the picture elements. The third and final way I'm going to show you is not a method of changing the image size, it's a way of changing the image format. If we type in the source, and then this time we set the type. A good example would be using the reasonably new webP format, we could set the source type to be a image and the webP format and then use the source set and then include the file path to our webP image, so dog.webp. This will load the webP image if the browser spotted it. If not, we could include a fallback image such as a JPG. In the same way, using the standard image source and then we include the file path to our dog.jpg, we close with the alt text in there. If you've not come across the webP format yet, have a little Google search and find out some more information. It's really useful for responsive design because the file sizes are smaller than both JPG and PNG images. That's the end of this video. Hopefully that'll give you something to think about when dealing with responsive images. We've looked at three real useful ways of including the picture elements. Join me in the next video and we'll take a look at a alternative to using the picture element called adaptive images. 23. Adaptive Images: Welcome back guys. In the last video, we took a look at the pitch element to serve different scaled images on different devices and that's a really useful method to include in our projects. But one of the drawbacks of using this method is we need to include different scale versions of the same image to make it work. Now, this is just a short video to show you an alternate method you can use called Adaptive Images. We've head over to adaptive-images.com. Take a look at the homepage. You can see that the Adaptive Images detects your visit screen size and then it automatically creates a scaled version of the images and returns them back. Rather than including many different size versions of the same image, which we had to do for the pitch elements, Adaptive Images just takes the one version of the image and automatically scales our photos. Another useful feature of Adaptive Images is it can be used on your existing projects. It works with the existing HTML markup and it can even be integrated with content management systems such as WordPress. If we scroll down the page, we can find out some more features. It's quite a simple cell process to get integrated into your projects. There's also a example of how it works. Now one of the reasons why I'm not going to create a demonstration using Adaptive Images is because it doesn't work when rescaling the browser. It actually detects the user's screen size rather than the browser size. Creating a video on scale up and down the browser would have no effect. I'm just going to show you this as an alternate method and let you have a play about with yourself if it's something you find of interest. But it's really worth taking some time to find out how it works. It's designed to work with responsive and mobile first websites. If you go to the Features section and select "See more" features, you can find out some more information about how it works. There's a bit more of a detailed installation guide on the right-hand side. If you have some free time, have a little look at that and give it a go and see if it's something which could fit into one of your projects. But for now, thanks for listening. This is the end to the section on responsive images and improvement page load time. I hope you've learned a lot and join me in the next section, we'll start taking a look at the CSS Flexbox. 24. Introduction to Flexbox : Welcome back everybody. This section is all about using the CSS flexbox. The flexbox is a great new CSS feature which is being introduced in CSS version 3 to make page layouts and the positioning of elements much easier. Complex layouts can be created using less lines and cleaner code. We can also have back control of how our elements display, controlling how they shrink, expand, and even the order in which they appear on the screen. Another great flexbox benefit is it avoids the need to use floats in our CSS and therefore removes all the problems associated with using them. The flexbox solves many layout problems designers have had to deal with. We'll look at some of these later on in the section. We're just going to head over to caniuse.com and check the browser spot. If you just search for the flexbox, take a look down at the table. The flexbox has been around for a little while now, but it's only starting to gain real popularity now that the major browsers have provided the full support. As you can see, the Firefox and the Chrome browsers have supported the flexbox property for some while now. But do be careful when using it because some of the early versions of Internet Explorer don't provide support for it yet. Support only began in Internet Explorer in version 10 with the MS prefix. But from version 11 onwards, full support is provided. Let's take a look at how we can use flexbox in practice. I'm just going to create a little example using four boxes. We could have a little play about with those boxes and see how we can rearrange them on the page. I'm going to start by creating a div with a class of wrapper, and this should be the container for all the boxes. Then within the wrapper, I'm going to create the four boxes. These will have a class of item. We'll just number these. I'll copy this and make four boxes because using the CSS soon, we're going to be rearranging all four boxes. Having a number inside, you can see exactly how they're moving about on the screen. That's all we're going to do in the HTML. If we head back up to the style tags, and we'll create some style so we can see the boxes. We'll start with the wrapper. When using a flexbox, we need to add the display flex to the items container, so we'll do that now. Set the display to be flex and I'll put a background cauliflower wrapper. I'll just set that to aqua so it's more clear, and it will set some styles for the individual items and turn them into boxes. We'll start by adding a background color so we can see them better. I'll set mine to orange. Next time I'm into boxes now, we'll set some margin of five pixels. We'll add some padding. We'll set that to be 50 pixels, and then we'll add some heights of the boxes, will put that as 100 pixels. Now we've got our four boxes in place. There's lots of things we can do to rearrange and move these around. We're going to start with the first property, which is going to be the flex direction, and this sets the direction that we want the elements to appear from. We can set them from left to right, which they are by default, from right to left. We can also stack them vertically from top to bottom or from bottom to top. The default is row and that's where it's already set to now meaning that they'll be arranged in a row from left to right. If we want to change that to start from the right hand side of the page to the left, we change to row-reverse. You can see why we've numbered the boxes now. The number 1 box starts on the right hand side, and then it goes from right to left. As well as arranging the items horizontally across the page, we can stack them vertically. We can change the row-reverse to be column, which stacks items on top of each other from the top of the page down to the bottom. Again, we can set the reverse order. We can set number 1 at the bottom of the page and box number 4 at the top of the page. We do that by setting the column reverse. There we go. Let's put the boxes from the bottom of the page up to the top. We'll be using the flex direction in the next video, we're going to be creating a flexbox grid. We'll be using in a similar way to the responsive grid that we used in the project. We will be setting the flex direction of column so the elements are stacked on top of each of it for a mobile view, and we'll change that to row where more screen space is available. We'll just put this back to the default row for now. Let's take a look at small things we can do with the flexbox still within the wrapper or the container. Next we're going to look at justify-content, and this dictates the amount of space around each individual item. The default is flex-start. All the items are bunched up to the start of the direction. We've got the direction set to row, which is left to right. The start of the content is on the left hand side. If we set the flex direction to row-reverse, that would mean the elements are position from the right or left. Therefore, the start would be on the right hand side. We'll just change that back to row. Then we can also change to flex-end. You can probably guess what this does. This moves all the content to the end of the direction. In our case in row, the end is on the far right hand side of the page. We can place all the elements in the center simply by changing that to center and that pushes everything into the middle of the container. We can even space the items out. We can set them to be space-around, and we'll get equal amount of space on the left and right hand side of each item, which is really useful for positioning things on our web pages, as well as space around. We can also change to space-between, and this provides an equal space between each of the items. Next we'll take a look at the align items property. But first we're just going to set the height of the wrapper to be 100vh, stake of the full height of the viewport. Then we'll set align-items, and we can use this to arrange the elements on the page where we want. We can set them to be at the top, the middle, or the bottom. We can even stretch the items from the top to the bottom of the page. We'll start with align item center. We can see what that does is that pushes all the items to the center of the page. This really does solve a problem which has been around for a long time now. Up to now there's been no easy way of doing this using CSS. We've had to use various different methods and hacks to get our items to be vertically centered. We can also align the items to be at the flex-start and flex-end. The flex-end pushes all the items to the bottom of the page. If we change it to the start, all items will be back at the top of the page. The last one we are going to take a look at is stretch to stretch the items from the top to the bottom of the page. This will work. We just need to remove the height from the item because that's a fixed size logo and that makes all the content stretch from the top to the bottom of the page. You can combine all these. You can change the flex direction for example to be column, and this will stretch the full width for the page. We'll just change that back to row, and then we'll change this to center. Now let's move down to the items and we'll start adding some flex properties to the individual items. We are going to simply type in flex. Using the flex we can say how much space each item takes up. First, we'll just change space between back to the default of flex-start. If we set the flex to be a value of one, all of the flex items will take up exactly the same space. We can see this a bit more clearly. I'm just going to copy some text and let's add a bit more content to the divs. I'm just going to place mine in 2 and 4. It doesn't really matter which one you go for. Even with all the extra content we've placed in the two divs, they still take up the exact same width because we set the flex to be 1. If we want each item to be different, we can add a extra class. I'll set mine to the last item. I'll set that to be last. Then we can change the flex direction, and let's set the CSS for last. If we want the item on the very end to take up two times the amount of space as the rest, we set the flux to be 2. We can stretch this out. The first three items are all the same, but the last item should take up twice the amount of available space. This can be set to any value we want. We can set that to 3. The last item has grown even further. Hopefully that gives you a better understanding of how we can use the flexbox in responsive design. Have a little play around with some of the values and see what you can achieve. It really is a powerful feature. Join me in the next video and we'll start taking a look at the flexbox to create a responsive grid. 25. Flexbox grid: Now you've better understanding of what the Flexbox is and how we can use it. Let's now take a look at how we can use Flexbox to create a responsive grid. The grid is going to be quite simple, but it does show the effect that we can have using Flexbox by using very little code. We'll get started by creating a New Project folder on the desktop. We'll name this the Flexbox grid, then drag this into your text editor. Create a new page, I'm going to save this as the index page. Let's put in place our structure. So the doc type of HTML, the HTML section, the head, the page title, which will be the Flexbox grid. The meta charaset is UTF-8, and then we'll put the meta viewport plugged in. The meta name equals two viewport. The content, which equals device width on the initial scale of one. Then lastly the body section, there we go. To get started with the Flexbox grid, we're going to have to create a container and then the individual flex items like we looked at in the last demonstration. Each horizontal row, we'll put in a div with a class of row, and that will be our container for the individual items which we'll give a class of col for column. Let's get started by creating a one con grid. We'll just put a one in place there, and back into the head section, we'll add some styles. First of all, the container with the class of row. Because this is the container, we need to set the display type to be flex, and we'll start with the mobile view. We're going to set the flex direction to be column, beside the sidebar so when we're working with that, let's just refresh that. We can unload it on the preview and put it to one side for now. We can see the individual columns part, will add some styles to the col class. Starting with the mobile view, we want each column to span the full width of the page and we want them to be equal, so we'll set the flex value to be one, we'll just change some background colors just so we can see the grid a bit better, I'll set the line to light green. Just to separate the columns, I'm just going to set a little bit of margin as 0.2 ems. Then let's add some padding, 50 pixels, top and bottom, and zero on the left and right, and we'll set the text align to be in the center. We can see that better, now we can start adding some more columns. Back into the body section, we'll do exactly the same again. We'll add a div, we've a class of row as the container, and we can add as many individual divs as we want in-between the container. I'll put two in place there, and we'll duplicate this to make it twice. As it stands, this will look good on a mobile device. All the columns will be stacked on top of each other. If we do stretch the browser a little bit wider, nothing will actually happen. It will still take up the full page width. To solve that will add a media query soon, and that media query will change the flex direction from column to row. But for now we'll continue adding some more cols to our grid. I'm just going to copy this section and paste it in below, this time it's going to be free, so we'll duplicate that to make three different divs. This row will take up free equal parts or a third of the web page. We'll just add one more, we'll add 12 columns is time. We'll add 10 more divs, there we go. We should check these we'll appear on the Preview. Now let's add our media query, so we can style at least for the Tableau Desktop views. Back between the style tags, we'll just add a media query, so at media, we'll select all. It doesn't really matter what the minimum width was set is equal to this example, I'll just set mine to 600 pixels. We'll target the row container. Whereas the row outside of the media query was stacked into a column, we now want to make the elements arrange horizontally across the page, so we do this by changing the flex direction to be row. Let's head into the preview and just scale the browser back up. Once we hit 600 pixels, there we go. Instead of the elements being stacked then I'll arrange across the page. We set the flex direction to be one, so everything in it's row will take over an equal part, so when there's just one div, it will take up the full width of the page, when it's two divs, each will take over 50 percent. When it's three divs it will take up one-third of the page. We can go up to 12 columns or even further if you wish. It has the flexibility to add as many different sections as you wish. That demonstrates how we can create something such as a responsive flexible grid using the CSS Flexbox and very little code. As a little mini challenge you may want to take these grid a little bit further by adding some CSS to allow for nesting and guttering. But for now, thanks for listening and join me in the next video where we'll take a look at how we can use the Flexbox to achieve the Holy Grail layout. 26. Holy Grain Layout using Flexbox: So welcome back everybody. Hopefully you're now get a better understanding of the Flexbox and how we use it. So I've headed over to Wikipedia to take a look at the Holy Grail web layout. Now, the Holy Grail layout is just simply a multi column web page layout. In fact if we have a navigation on the left hand side, the content area in the middle of the page possibly a side section on the right-hand side, with a full width header at the top, and a full-width footer at the bottom. Now as simple as that sounds, there's always been CSS limitations, which means we've had to apply various hacks methods to get this to work properly up until now. But now Flexbox solves this problem, it makes it really easy to arrange our layout exactly how we want it. So scrolling down the page, there's more information about what the problem is, and also some of the common solutions which have been brought about. Some include using tables and various other methods such as JavaScript or positioning. Broglie's methods create their own work and how various drawbacks, so I'm going to head back over to brackets, I've created a basic webpage to get started from. So we're going to start in the body section. I'm just going to create the basic header, article, nav, aside and footer sections. So we're going to start by including the header at the top of the page. We'll add the name so we can see this better. The content in the middle will be surrounded in a div, and I've given this a ID of container. Within this container I'm going to create the article section, and then the navigation between the nav tags. Then the last one we want to pull between the container is the aside section, there we go. So for head outside of the container, we're also going to put the footer area at the bottom. These are going to be the five sections for the webpage, so if we just save that and check that on the Preview. Okay, it doesn't look anything special now, so let's head into the CSS and see what we can do about that. So Back up between our style tags, I'm going to start with the body. I would move any default margin and padding, we'll set those both to zero. It will start working on the wrapper, which have the ID of container. So hopefully you remember what to do with the container, we need to set the display type to be the flex. Because this is going to be mobile friendly, we're going to set the flex direction to column, so the smaller screens will get the full width display. So we can see our elements arranged on the page will add some styles, will set the header, the article, the nav, aside and footer. We'll give them some margin so they are a little bit spaced out, of five pixels, we want the rounded edge so the border radius also five pixels. Now let's look at the background colors, so we'll change the header and the footer. We can give them the same background color, because they'll be at the top and the bottom of the page. Choose any color you like, I'm going to go for ff6666, which is the red color. Next the article. For the article we'll set the background color to be 99ccff which is blue, and we can also set the minimum height to be 300 pixels. So we can see a little bit on the page, so you can see already it stands take shape. We need to add some more background colors for the nav and the aside section, so let's do that now. I want the background color for these two to be 66ff99, which is a nice green color you can see. Then we'll add some more minimum heights to the navigation, the aside, the header section and the footer, so let's change the minimum height to be 80 pixels. There we go, so let's check this on the preview. That's looking good for a mobile screen. We've got a nice full width header section, the article section also in the middle, and the navigation on the aside section, and then a full width footer at the bottom. In a similar way to the grid in the last video, when we stretch the browser to be full width, we want the article navigation on the aside to be arranged horizontally across the page. So let's do that in a media query. If you feel confident doing that yourself, pause the video and give that a try. If you don't, don't worry, follow along with me. So we'll set the media query to be all, and we'll set the minimum width again to be 600 pixels wide. So to get these three areas arranged horizontally, we need to change the flex direction, that's by targeting the container. So we'll change the flex direction from column to row, let's check what's working. There you go, so once we hit 600 pixels, the navigation, the aside, and the article are arranged horizontally across the page. We'll change the minimum height just so its a little bit taller. We'll set that to be 800 pixels. So the three areas are now bunched up on the left of the page, that's not what we want. We want the article to be positioned in the center, and the navigation and aside to be on either side, and to span the full width of the page, the same as the header and the footer area. So let's do that now. Still within the media query, we'll start with the article. Hopefully you remember how to do this. We set the flex, and because we want the article to be the largest section, I'm going to set the flex value to be three, so it takes up three times the space of the other elements. Now the navigation and aside are a bit too small, so let's start working on those. We'll set the nav to have a flex value of one, and we'll do the same with the aside section. All not to be equal to the navigation, so we'll also set that to one. The navigation and the aside take up one part, and the article takes up three times the available space. The last thing we want to do, we want the article section to be between the navigation and the aside, so we can also set the flex order. To move the navigation to the left-hand side, we simply go in to nav, we set the order to be minus one and that'll make the navigation to appear on the left. So that's exactly how we wanted it, this is the Holy Grail layout achieved using Flexbox. So thanks for listening, and will see you in the next video. 27. Flexbox sticky footer: Welcome back everybody. This video is called the flexbox sticky footer. Taking a look so far of how we can use the flexbox to create a flexible and fluid grid. We've also taken a look at how we can use flexbox to make the holy grail layout a lot more simpler. Next we're going to take a look at how the flexbox can solve the sticky foot problem. Now, when we're creating web pages, if we've got a header and a footer section, the footer section will sometimes want to be at the very bottom of the web page but if there's not enough content, in our case, the text to push the foot right to the bottom of the page, this can be really difficult to achieve. Now, in a similar way to the holy grail, we looked at in the last video, there's various different methods and hacks which web designers have used over the years to trying to get the foot stick to the bottom of the page. But now flexboxes came along and makes it really simple for us. Let's take look how we can achieve this. If we go back into our text editor, I've created a really simple page and there's a simple header section and footer. In the middle we just created a div with id of container and place some dummy text there. Let's head up to our styles. For the purposes of this demo, we're going to add some colors to the header and the footer section just so you can see what we're doing a little bit better. We'll set the background color to be aqua and let's give them a minimum height of 100 pixels. There we go. We can see what's happening a lot by there. As we make the browser wider, the footer area pushes up to be just below the content. Let's take a look how we can push the footer to the bottom of the page. Back into the CSS, we'll select the body section and we'll change the display to be the type of flex. We want the minimum height of the body to be 100vh to take up the full height of the viewport and also the flex-direction to be column and that shouldn't change anything yet. We need to take a look at the container section which has the text in the middle. The ID of container. All we need to do to get this to work is change the flex value of the container to be 1. Then head back over to the web browser. There we go. We've got the footer now pushed to the very bottom of the page even though there isn't enough content in the container to push it right down and that stays at the bottom of the page whenever we shrink or expand the browser. Thanks for listening and that's how easy is to solve the sticky foot problem using the CSS flexbox. 28. Bootstrap Framework: Welcome back everybody. This is a new section called responsive frameworks. When we take a look at a couple of responsive frameworks which can really help speed up on imperial responsive designs. It wouldn't be a responsive cause if we never looked out Bootstrap. Bootstrap was created by two Twitter employees back in 2010. It was originally used in house at Twitter, but then became a open source project for everybody to take advantage of. If you've not used or heard of Bootstrap before, I would really recommend that you give it a try. It's easy to use and it built a mobile first unresponsive out of the box. Let's take a look at what's included. This is the Bootstrap homepage at getbootstrap.com. Let's take a look at some of the details out at the top. This is the getting started section. If take look at that like gives us some indications of how to use Bootstrap. There's also some basic templates and examples. To download, we can include the standard Bootstrap download. There's also a couple of different versions using Less and Sass, but we're just going to use the standard version. We've click on Download Bootstrap, more or less download them we just take a look at the rest of the page. There's a couple of CDN links at the top. We can also see the file structure, what's included. Further down the page, to some examples. This is the basic template which we'll be using to get started. We'll copy that soon and paste it into our index page. Forbid elements also some starter templates which can be used as a good starting point for homepage, which include various different grids and navigations to get started really quickly. Back up to the top. Let's get started. We're not going to build in a Bootstrap project in the same way as the designer clothing project we built earlier on. But we're going to put together a basic website to show how quick and easy is to get started with Bootstrap. Now the download has completed. We're going to head over to the download section and then unzip the Bootstrap file. Then I'm just going to rename this as Bootstrap demo. Let's paste this onto the desktop. There we go. Now we've got down on zipped, we can copy this. We're going to drag this into brackets to get started. Let's take a look at what's included in the download. We've got all the CSS files that we need for the project. We can override any the parts that we want to. This the Font section. This the JavaScript section. We can get started really quickly using the JavaScript components such as the carousels. This includes the standard on the minified version. Now we've got this into our projects. The only file we need to add to get started is the index page. I'm just going to create a new page. Save this into the project as index.html. Then if you go back over to bootstrap.com. If we head to the getting started section, we need to include the basic example that we looked at earlier. Scroll down to the basic template, then hit the Copy button, and then paste the content in to index page and save that. Everything is included that we need to get started. We've got the basic HTML structure. We've got the viewport meta tag included in the head section. We've got the link to the Bootstrap CSS, which is already included in the correct CSS folder, and also the JavaScript at the bottom of the body section. Our standard, we've got the jQuery link and Bootstrap's own JavaScript file. Now that's also just take a look that at the preview. We shouldn't get much content. I think we'll just get the page title and Hello, world. There we go. That's something to start working from. If we head back to the Bootstrap homepage, we need to go into the CSS section at the top of the page. Then I'm going to choose our container type. All the Bootstrap components that we copy and paste into our project need to go between the containers. We're going to use the container fluid class. Let's copy that back into our index page. We don't need the hello, world heading anymore, so we're going to delete that. Let's create some space for ourselves. Then paste in our fluid container. We're also open really to add some content. The first thing I'm going to include is the navigation. If we go up into the component section, and then if we look at the menu on the right hand side, and if we look for the Navbar section. This is one we're going to use in this example. We're just going to copy the standard version. If you just copy that, and if you notice that the container-fluid is actually already included in this demo. We can just delete that from our project and then paste the content in. It's already got it's own container. Let's save that and check that out on the preview. Check it's all working correctly. There we go. That's what we want. If we shrink the browser down, it should be responsive straight away. We get a responsive drop-down menu. Once we get to the smaller screen sizes. Let's stretch that backup. Now we've got the menu in place, will now include a page header. Still in the component section, let's take a little look forbid on-page at the page header section. Then we'll copy the example page header. Copy the sample code back into our index page. If you just locate the end of the navigation section. Blog-up, we'll put in our div with the class that we used before, which was the fluid container. So class equals container-fluid. Then between the container we can paste in our page header. Let's check down the previews that's working okay. There we go. There's our example header included. Back to Bootstrap. Next, I'm going to put in a carousel. Back to the top of the page, carousel's included in the JavaScript section. Click on the JavaScript tab at the top of the page. Then if we go to carousel on the menu, the example one slide is pretty nice, so we'll include that. Click the Copy. This example doesn't have the fluid container, it's not included in the sample. If we create a new container or we can actually paste the code still within the same container as we used for the header. Let's do that. We're pasting just above the closing div, and let's have a look at the preview. The rotating carousel is actually included. It's all working, but we just haven't got any images in yet. Let's change that. If you follow along with this example, you'll need to grab a couple of images off the Internet or use some examples which you already have saved. On my desktop, I've got an Images folder. I'm going to drag this into the Bootstrap demo. Then let's add these images to the carousel. The way to do that is if we go to the image source. We had ours in the Images folder. The first one was called see.jpg. Then the second image in the Images folder, mine was called space.jpg. I'm just going to get rid of these dots, so they don't show up on the slideshow. Let's check this is working okay, back into the preview. Excellent O2 images are included and the carousel looks really good. Next, you shrink down the browser and check this is working okay. Yeah, everything scales down nicely for the smart phone and then stretches backup for the larger displays. Our example is starting to look really good. If we head back into Bootstrap and we'll continue on in some of the content. Back up to the top of the page. Then back in the getting started section. An alternative way of including content into our Bootstrap projects rather than just copying and pasting the individual components. If we take a look at the example index pages that we've seen earlier, we can open up any of the examples we like, such as the justified Nav. Then once we are in there, right-click, and if we go to View Page Source, we can get up all the source code and we can take what we need for this. We don't need the full source code because we've already got our web page started. I'm just going to copy the free content boxes at the bottom of the page. Back into the source code and down to the bottom of the page. If you're working with the Bootstrap source code, you'll generally find diets well commented. You can see exactly what we're doing. Below the jumbotron area, we need to copy the example row of columns with all the sample text. We'll just copy from this section down. We will copy the footer section 2. If we go back into our projects, and below the last closing div, we'll add a wrapper for this section. We'll give a div with a class of container-fluid and paste that in. Let's check that's working okay on the preview. Excellent that's all included. That's all working fine. We've got our free content areas which we've just included, and also the full section at the bottom of the page. There we go, that looks really nice and that's a great example of how we can use Bootstrap to make a responsive website quick and easily. In short space of time, we've included the navigation bar at the top with the drop-down features. We've included the page header. We've included a responsive rotating carousel. We've included some information on content about our website and also a small photo section at the very end. Of course, when we scale down the browser, navigation turns into a drop-down. We've got the search area. The rotating carousel with all the text below scales down if you're on smaller devices. There we go. That's how Bootstrap project finished. Thanks for listening, and if you join me in the next video, we'll take a look at small responsive frameworks. 29. JQuery Mobile Part 1: Welcome back everybody. In this video, we're going to be using the popular jQuery Mobile framework to build a mobile website loosely based on the designer clothing website which we built earlier on. We've head over to jquerymobile.com, we can find out some more information about the framework. Now, on the homepage, it does claim it is useful for desktop devices. But in practice it is generally more used on mobile only sites. If we head over to the demo section, then I'm going to go to the latest stable versions. In a similar way to the Bootstrap homepage that we looked up before, we'll get a menu down the left-hand side. We can select any components that we want to use such as buttons, and then we scroll down to the buttons that we like. If we wanted to use these buttons, for example, we will click on the "View source button below, and then we'd simply copy the mark up and paste it into our projects. There's a lot of different examples, we can pick Checkboxes, we can go to drop-down menus, forms, and a small information with the grid setup, we can include icons. In a similar way to the Bootstrap glyphicons, these are already included into the download. There's navigation bars and various different select menus and widgets we can use, the jQuery tabs and transitions, But we'll come back to this section as we continue building. I'm going to head over to the homepage again. Back to the jQuery Mobile homepage, there's a download section on the right-hand side, but we're not going to use that. That's the download the standard version of jQuery Mobile. We're going to actually customize ours a little bit to make the color schemes a little bit more like the designer clothing website that we built earlier on. Scrolling down, we're going to go to the ThemeRoller section. If we click on the image, just gives it a few moments to load up, and then let's get it started. By using ThemeRoller, it allows us to set up custom colors, CSS, which allows us to download a customized version of jQuery Mobile rather than using all the standard colors. On the left-hand side, there's all the options for changing various parts of the CSS. We get a preview on the right side of how our color scheme will be looking. We can set up more than one color scheme by using the tabs at the top. Let's get started in the global section. We're going to keep the fonts, our Sans Serif, and I'll remove the corner radii's, I'll just dropped them to zero. I've got a list of some of the colors that we used in the project. The icon's we're going to keep With Disc, and I want to change the disc color to be the pink color used in the project, which is C158AD. Let's increase the opacity of the disk to be 40, and you can start to see in the demonstration that the pink color is starting to show on the icons. Then the box shadow section, we can just leave that as default. Next, let's head into the A tab. I will start with the page section. The only thing I want to change in the page section is the background color. I'm going to change that to FFF to make that white. Then in the header and the footer section, I'm going to change the background color to be DDD, which is the light gray color. Let's change all the header sections to be light gray. Next, we'll move to the body section. The text color is all okay and the background is okay as white, so we can leave the body section. The links, we're going to change the color to be C158AD, which is the same color as the icons. The button normal state, we're going to change the background on that to be FCFCFC. Then the button on the hover state, let's change the hover background to DDD. Then the button pressed, the button press we can leave as the default settings. The button active state, we're going to change the background color to be 34495E, which is the blue color which we used in the project. We'll change the border to be exactly the same, so 34495E. That will starts the colors changed. If we look at the A section, you may recognize some of the colors that we used on the project earlier on. The way to include this now is if you click the "Download" button at the top of the page to get us started. The first thing we need to do is give a theme name. I'll call this designer-clothing-mobile. Then I'm just going to copy the head section from the demo, and then download the zip file. Once that's downloaded, if we just unzip the file, go into the Downloads and unzip the ThemeRoller section, copy this to the desktop and let's take a look inside. Included with the download, we've got the standard index page, we've got the theme section. Within the themes folder, we've got our CSS and then we've got a images folder and also a section for the icons that we looked at early on on the demonstration. Let's open up our text editor and then drag in the jQuery project and select the index page. If we open up the index page, there's a lot of sample code on there which we don't need. I'm just going to copy all and delete that, and then let's paste in the head section that we copied before, we'll just put in the rest of the HTML structure. We need to include the body section and the closing HTML tag. There we go. We've got included in the homepage, the viewport meta tag. We've got the links to the custom stylesheets and also the links to the jQuery. Before we move on any further, I'm going to copy and paste one of the stylesheet links and I'm just going to create a custom stylesheet, so let's call this custom.css, and save that. Then let's create the custom CSS file. We'll just leave it blank for now, but we'll call this custom.css and we'll put it in the theme section and save that, then back into the index page. Now we just need to play about with the file paths. We've got everything included in the Themes folder, so we can just take away the CSS section. The name of our CSS from the ThemeRoller was designer-clothing-mobile, so let's change the name of that now. There we go, designer-clothing-mobile.css. Now that's all set up, if we head back over to the jQuery homepage, which was just jquerymobile.com, and then the demo section which we took look at earlier, and then the demonstrations for the latest stable version. To get it set up, we need to find the Pages section, let's look for the basic setup. We need to copy the basic setup for the homepage, so we need to find the section with the page wrapper. Within the wrapper, there should be a header section, a main section and the photo section. We'll copy that and we'll paste that into our body section, and I will just get these organized. To apply the custom CSS we created in the female section to this page. In the page wrapper, we need to add a data theme equals to a, because we created all our styles in the a swatch. I will start working on the Header section, so we just move the rest down for now. Within the Header section, I'm also going to add a data position, and this is going to be equal to fixed. This will make it a fixed header, so we'll stay at the top of the page when we scroll and open and down. So let's get started with the logo section. Within the header div, I'm going to create some h1 tags and then the text of DesignerClothing. The same as earlier project, we're going to include a break tag to put.com on the separate line, and.com is going to be the highlighting color, so we'll do exactly the same, we'll give it the span class equals to highlighted. Then between the span tags, we'll put in the.com. Now let's check this on the preview, see if it's all working okay. There we go. That's the full width Header section that we were looking at before, let's just scale like that, and we can add some style to our highlighted section. If we go into our custom CSS and we select the highlighted class, I will change the color to be c158ad. While we're in our custom CSS file, we'll add some styles for the image. We just want to set the maximum width to be 100 percent and save that. Let's check that out on the preview, and we can see the custom styles will apply to the.com section. Next, let's update navigation, so back into the jQuery homepage. In the Demo section, we need to find the navbar widget, which is on the left-hand side and let's scroll down. We want the navigation bar with the icons on the left-hand side. Under the Icon Position section, I'm going to go for the icon left, so click "View source then copy, and then back into the project, just below the logo section, and still within the header div, let's paste that in. The demonstration comes with the data of footer already included, so we can delete that because we're going to be using this in the Header section, and also delete the closing div for the footer. I'll copy this comments just for the end of the Header section and bring the closing div up. There we go. So let's check this is working oka. Back into the Preview, we'll scale the browser down to a mobile size, refresh, and there we go. So that's our navigation included in the top of the page in the Header section. Next, we'll change the name of some of these buttons and also change the icon. Summary, I'm going to change that to be the Home section and the icon is going to be the Home icon. Next, I'm going to include my basket as the second link. The icon for that is shop and I'll remove the active clustering upon. The third button is Checkout which has an icon of Check. So let's save that and refresh the preview. Perfect, that's exactly what we wanted. The Home button, the my basket, and checkout with the correct icons on the left-hand side. That's all we need to do for the Header section. So now we're going to move down to the main section and let's bring this up a little bit. So in this main section, we're going to include our menu. I'm going to start by creating a new div, which is going to have a data role of collapsible because it's going to be a collapse menu, and data collapsed is going to be set to true. So it's going to be collapse by default. Then within this wrapper, we'll create a heading in h3 tags, and we'll call this the main menu, and then from menu we'll create an order list. So the opening an order list tag, I'm going to add a data role equal to list view. So let's start creating the order list by adding the list items. So to start, we need to add some dividers, which is going to be the names of the main section. So we'll start with the for him divider and also within the opening tag, we need to add the data role to be equal to this divider, and this will split up the menu. So we'll just duplicate this three more times and create the rest of the sections. Next, we need for her. The third divider will be the new collection section and the very last link will be the sale section. So the for him section will start with first, we'll create the list items. There will also be hyperlinks, so like the href tag, then the first section is clothing, then we can duplicate this twice more, and then change that one to shoes. The last link is accessories. So that's the for him section completed. So we can just copy the three list items because is going to be the same for each section, and paste it in the for her section. The same in the new collections and the sale sections. So let's save that, refresh, and take a look in the preview. So we've got the main menu with the heading in place. We can click on this and there we go. There's the drop-down menu that we were looking for. We've got the dividers with the darker backgrounds, and we've got the three sections below each divider, which are all links. If we click on the "Main Menu" again, we can collapse up. So the next thing we need to do is include the images. You should have already downloaded the images for this project, if you haven't done that, head over to the Download section now and download those. So if I drag the images into our project and then head back into the brackets. Let's start by including the main image from the last project. So if we go into the closing div for the main menu, but still within the main section, and we can include the image source. So the images folder and then we need to go to the shoes.jpg image. Now we check on the preview, refresh, and there we go. So that's our main image included. So we're making good progress. We've got the Header section with the logo included. We've got the three menu buttons at the top within the Header section. We've got the collapsible main menu, which has got all of our links inside, and then we've added a main image. So we'll stop this video there and we'll continue the project in the next video. 30. JQuery Mobile Part 2: Welcome back to our jQuery Mobile website. We're making good progress. In the last video, we created a header section with the Menu buttons at the top. We created a collapsible Main Menu and added the main image onto the website. Next, we'll continue by adding a free promotion boxes that we included on our first website. We'll go below the first image. We'll include these as buttons and [inaudible] links. The href needs to be included on there, and the text of the main website. Well, let's get five percent off your first order. Because these are buttons, we need to give them a class. The class is going to be ui-btn. This three buttons, so we'll duplicate that twice. The text of the second link was free shipping on everything. There was a price much guarantee text on the third button, there we go. Let's save and take a look in the project. Great, that's all working. We've got the free promotion button below the main image. Next, we're going to add all of the images and links, which were in the original project. If we head over to our original index page for the main project and if we find the gallery section, if we copy everything between the gallery div, which is all the images and all the links, and then head back into the jQuery project, and let's paste that in. Now we don't need the four of 12 grid anymore. We can delete that, and the closing div. Now we could do the same below. We can delete the four of 12 there on the third one. There we go. We've got all the images and the links now, there we go. Let's refresh the project and see how that's looking. That's great. All the images and all the links that are in place. Next, I just want to move the links to be in the center of the page. We'll put a wrapper around all of the images, and we'll add the style of text align, of center, and close it off. Then I'm going to cut the closing div and add it to the very end of the images. Let's refresh and see how that looks. Excellent. That's exactly what we wanted. That's looking really good now. Next we'll move on to the email section and the About Us text. If we go back into the main project, we can do the same again. We can copy the div with the email section and About Us text. Copy that, paste this back into our jQuery index page. We don't need the class of section in group for the wrapper, because we're not using the responsive grid. We can actually just delete the whole of the email section and we'll rewrite that. We can remove the wrapper with the six of 12 div and delete the closing div. There we go. That leaves the About Us text. Let's start with creating the form. The first one is going to be the input type for the email. That's going to be email, with a name of email, and the same, an ID of email. We'll set the placeholder text to join our email club. Now I close it off, I will hide the sidebar to get more space. Next, we'll create a Submit button. The button in the opening tag will have the type to be submit. We'll add some jQuery classes. The first one will be ui-btn. Then it's going to be quiet a small button, so we'll give it the class of ui-mini. The text will be submit email. The About Us text is on the place below. Let's save that. Refresh the browser, and check how that's looking. That's looking good. The email section is there. There's a Submit button and the About Us text at the bottom. Next we'll start working on the footer section. We're going to include some links at the bottom of the page and then have a slide in panel. We'll start by heading up to the header section. We'll copy the navigation bar from the header, and then paste it in in the footer, in the place of the three dots. Check what's working in the preview. It creates us our three buttons. Now we just need to change the name. The first one is About and the icon is info. Then we'll change the second one to be the Contact button, and the icon for that is the phone. The third link is going to be to activate the panel, so that's going to be a More button, and the icon will be plus. There we go. Next, we need to create the panel. The way we do that, if we go outside the footer section, which by closing comments of the footer there. The way we do that, if we go below the footer, and we'll create a div with a data role equal to the panel. It will give it an ID of myPanel, and then close up. Inside the panel we're going to have the links from the original website from the footer area. Back into the original project, we'll copy the unordered lists for the About Us section on the Terms and Conditions, so copy and paste them back between the panel div. We can remove the span four of 12, we don't need that anymore, and the closing div from the first unordered list. To link the panel to our More button, we need to change the href to be the ID of my panel, and then we'll save and then we'll refresh the preview. Something's gone wrong there. It's not showing at the bottom of the page. Let's take a look at what's happened. We've got the footer section that looks okay. The panel that's in its own div, so that should be okay. Let's take a look. The closing div for the main content. I think that's the problem, the closing div for the main content is highlighting the main page wrapper. There we go. The main section has got an extra div in the middle there. We want to make sure that the closing div for the main section is after all the content. We'll select main again. There we go. That looks a lot better. The main content is now surrounding everything up until after the text. Let's save that and refresh. There we go. There's our free links in the photo section. If click on the "More" button, the sliding panels are working now. If click on the content, it disappears. That's a really good way of including extra navigation in our website. By keeping a hidden until the user needs to see those links. Now, that's all working, that's the end of our mobile website. Thanks for watching, and that's how we create a mobile website using jQuery Mobile. 31. Other popular frameworks: Welcome back to the last video in the responsive framework section. We're just going to take a few moments to take a look at a few more responsive frameworks which you may find useful. We're not going to go into the same amount of detail as we've looked at Twitter Bootstrap and the jQuery Mobile framework. I'm going to start with the Foundation 5 framework by Zurb. Foundation 5 is a little bit similar to the Bootstrap framework. It's a mobile-first responsive framework. It's really easy to get started with. If you just click on the "Getting Started" section at the top. Within the Getting Started section, there's a bit more information about what foundation is. We can also scroll down to find out what's included. There's information about the responsive grid and also the different component that's included. It's really worth taking a lookout. If we head back to the homepage and there's now a link to the Foundation for Apps section, which is relatively new. Foundation for apps is a full responsive front-end framework for creating web apps. If we scroll down the page, there's some examples of what you can use it for. Click on the "Template section". There's various different templates you can download or click on the "Preview" to give you some examples of what you can build. So this is some really good starting points if you want to create some responsive web apps. Also next by the same companies up is a download called ink. That's really useful if you're interested in getting into responsive HTML e-mails. Again, there's some templates to take look at on the Documentation section if that's something you're interested in. The last thing we want to take look at. Now, although WordPress isn't a responsive framework, more and more of the themes which are getting developed for WordPress are coming out as responsive mobile-first. If we click on the "Theme section" and take a look at some of the latest themes, we can click on the "Examples" to get more information. The best way to find out, if you look at the Tag section, it includes a responsive layout, which is also a fluid. Let's check some of the other themes and down to the tags. This one also has a fluid responsive layout. Another great way if you're looking for responsive themes for WordPress, you can type in the Search bar. You can search for responsive. At the minute, there's 1,058 responsive themes, which is a great starting point for building a website. There we go. That's a quick look at some tools which you may find useful. I'm sure you'll come across many tools yourself when building responsive websites, but that's it for now. Thanks for listening. That's the end of the section on responsive frameworks. 32. Thank you: A big welcome back and congratulations on getting to the end of this course. I really hope you've learned a lot from this course. We have covered what responsive a mobile first design is. We've taken a look at relative units, the fluid grid, and media queries. We've looked at wireframing grid layouts and building a responsive project, completely from scratch. We then used responsive jQuery plugins to add features for our website, such as the sharing buttons and the carousel. We then started by optimizing our project to achieve bad page load times. You learned about how the picture element can be used to provide the right size image for any device. We covered the CSS Flexbox and looked at how we can solve many existing layout problems, and even build our own basic grid. Towards the end of the course, we looked at popular frameworks such as Bootstrap and Foundation. Finally, we created a touch optimized version of our Clover website using jQuery Mobile. That's it. A big thank you for taking this course. I hope you've enjoyed it, and can use some of the techniques you've learned in your future projects. 33. Follow me on Skillshare!: A huge congratulations from me for reaching the end of this class. I hope you really enjoyed it and gained some knowledge from it. If you've enjoyed this class, make sure you check out the rest of my classes here on Skillshare, and also follow me for any updates, and also to be informed of any new classes as they become available. Thank you once again, good luck, and hopefully I'll see you again in a future class.