Transcripts
1. Introduction: Hello and welcome to responsive web development, HTML and CSS for Web Designers. I'm Chris, a Freelance Web Developer and Teacher here on Skillshare.com. In this course, I'm going to teach you how to go from design to development when it comes to making websites. The first section of the course will be about the differences between web design and web development. We'll go over responsive design, talk about code, and end with a little bit of SEO. In the second section, we'll take a ready-made design created in photoshop and turn that into a full responsive web page. Despite the title, this class is set up to benefit both Web Designers and Web Developers. For Web Designers, you'll learn how your designs translate into working websites so that you can better communicate with Developers or build out your own designs yourself. For Web developers, you'll learn how to work with Designers and create an accurate copy of their designs in HTML and CSS. Whether you are a Developer wanting to work with a Designer, a Designer wanting to work with a Developer, or just someone who wants to build skills in both areas. This course is for you. So if you're ready to get started, click on the next video and I'll see you on the inside.
2. Design vs Development - Responsiveness: Before we get started creating our website, it's important to understand what the differences are between traditional web design and front end web development. The major one as revealed in the title of this class is Responsiveness. In the context of the web, Responsive Web Design and Development means that the layout and design of your web page responds to the dimensions of the window in which it's contained. Often we think of Responsive Web Design in terms of the three most common devices, a laptop or desktop computer, a tablet or a mobile phone. Some designers might mistake the mobile version of a particular website to be a different website altogether. But usually the mobile website is simply the same as the desktop version, but it is made to be responsive so that it adapts to that smaller screen size. You see, while mobile tablet and PC are the major examples, they simply represent different points on a fluid spectrum. If I take my browser window here, for example, you can see that the web page is already responding to the change in screen width. On Google Chrome, I can simulate the screen width and height of a mobile phone by opening my developer tools and clicking on the toggle device toolbar. Now you can see the same version of the website, but with an adaptive design that will update to any screen size. This can be an area of confusion between designers and developers because designers usually create their designs with a set canvas. At the very least, designers will create a desktop version of the website. But ideally the developers should receive separate designs for all three of the common screen sizes, PC, tablet, and mobile. Outside of those particular screen dimensions, it's up to the developer to ensure that the layout of the web page stays fluid and that any issues that appear between certain screen sizes are sorted out. For designers, they might commonly use a tool like Adobe InDesign or Photoshop to create sections and insert text and images. One way you could conceptualize this is by having each element represented by a box. This concept translates pretty well into web development, except that the boxes will change dimensions or shift position given different screen sizes. Of course, these elements or boxes, if you will, are determined by how HTML and CSS, and that's exactly what we'll get to in the next lesson.
3. Design vs Development - Code & Visual Display: In the previous lesson, we talked about how designers usually create web designs on a static Canvas while in web development, screen sizes and elements up fluid, meaning their dimensions and position can change it anytime, this behavior is made possible via HTML and CSS. I covered HTML and CSS extensively in my previous class, Web Development Fundamentals, HTML and CSS, but for those of you who do not wish to go deep into these topics, HTML is a markup language that gives structure to web pages and applications across the web. CSS is the style sheet language used for describing the presentation of HTML. When a non developer looks at a website, this is what they might see, but in order to create what you see here, you need to write what you see here. This is HTML and this is CSS. We're going to go into how to use each of these in the practical section of this class, but for now the point I'm making is that the web, as we know, it, is made up of content contained in HTML tags, we've rules applied from CSS, which give them style and layout. This is different to how a designer would create a static web page markup. For instance, using a tool like Photoshop, they would select from a variety of interactive controls, and then those selections will be stored in a Photoshop file, the inner code of which you would never see. Now this information is not intended to confuse you, but simply bring to light a major difference between Web Design and Development. As a developer, I've had issues in the past, with communicating with clients who don't understand technical language. For instance, colors, Colors in web development are represented by either Hex codes, RGBA codes, HSLA codes, or a set of recognized labels like white or black. Ideally, designers should make it easy for developers to know what colors to use by being explicit about the exact color required. Another example is dimensions. Similar to colors, it would be ideal for designers to pass on specific dimensions to developers, rather than rely on the developer to be able to pick it up visually. In web development, the most common units are pixels for absolute heights and widths, and EM or percentage for relative heights and widths. In both of these examples, designers can usually go into their software and note down the specific colors or dimensions used, make that available to the developer. The exception being, of course, relative widths and heights. But don't worry if you're a little confused by all this technical speak in the practical section of this class, we're going to actually dive in and translate a design into an actual web page, so stay tuned for that. Until then we just have one more consideration to go over and that is SEO.
4. Design vs Development - SEO: The final point on web development that designers should consider is SEO. SEO stands for search engine optimization. In web development, we should be primarily concerned with one side of SEO. Cold onpage SEO. While onpage SEO includes a lot of different factors to common areas that can cause issues are images and headings. Let's cover images first. Designers may be used to exporting images and documents at the highest quality possible, but this isn't ideal for the web. When building websites, images should only be as big as they need to be. The reason why is about page speed. You see when you link an image in HTML, you're able to set a width and height even in a CSS document or directly in the element. This code is run every time that the website is accessed and that means that the image at this address is loaded in full each time. Of course, there are some exceptions to this, but this is the default behavior. The fact of the matter is, if you take an image and resize it to a smaller size in your code, you simply wasting data and the larger the image, the longer the page will take to load. That's why it's important for the designer to export the images at no more than the highest resolution possible. Or the developer calculates the highest resolution required and resizes the images accordingly. Next, text and headings. When it comes to text, your choice of tags is important for on-page SEO, we'll get into tags when we start to work with HTML directly. But for now it's important to note that the use of the right tags does not simply come down to how it looks. In terms of heading tags, sometimes I see developers make the mistake of using which ever has the intended font size. But if you look into the numbering system for headings in HTML, you'll find that the h1 tag is supposed to define the most important heading and h6, the least important heading. Web designers and other non developers might not understand this concept. So it's important to follow the right structure of headings and update the styles of each tag if the look of them is not correct. Finally, when it comes to text within images, try to avoid this where possible. Images aren't responsive and search engines have a hard time reading text on them, rather than actual text on the page. In the past, using images to get a certain layout or style might have been essential. But nowadays, HTML and CSS go a long way to reducing any desired effect. That's it for the theory section of this class. In the next section, we're going to get practical and actually build ourselves a web page from a mock-up created in Photoshop. I'll see you on the next video.
5. PSD to HTML - Before we get started: So before we get started, it's important that we talk about required knowledge and tools. In terms of software, you're going to need just a web browser and the code editor and for those of you who are new to web development, this is what both of those main. A browser is not only what you use to browse the web, but also what you use to view HTML documents on your computer. A code editor is what you'll use to write your code and edit it. These two are basically the essential tools required for any of my web development classes. You definitely need a place to write code and a place to view it. Additionally, a copy of Adobe Photoshop is desirable but not essential. In the following section, I'm going to be using Photoshop to look at the website design, inspect colors and fonts, and determined padding and margins. However, if you don't have Photoshop, you can still follow along. Finally, in terms of knowledge, I recommend that you already know the basics of HTML and CSS. For a foundational knowledge of HTML and CSS, I recommend you take my previous Skillshare class, web development fundamentals, HTML and CSS. But if you're short on time, the HTML and CSS sections of my first course, understanding web development, a beginners guide to the web should be enough to provide a basic introduction into these two languages. Other than that, I'll be providing the necessary files for you to complete the build in the next lesson.
6. PSD to HTML - Setup: So by now you should have a code editor, a web browser, and even Photoshop ready or as an alternative, any software that reads documents. To take a design for a web-page and turn that into an actual web page, you're going to need the actual Mock up of the web page, the required images and the required fonts, colors, and margins. For those of you who aren't working off a Photoshop file, you'll need your design and to provide you the images, the specific colors, the names of the desired fonts, and if possible, the font sizes and margins between elements. In this case, I'll be providing that information for you. In the case that you do have Photoshop and the designer provides you with a Photoshop file, you'll be able to grab all of that information from the Photoshop file itself. That's what I'll be doing in this class. To get started, we need to go to an address in our browser. I've stored the project files for this project on GitHub. So you just need to go to github.com/christopherdodd/Skillshare. Once you get to that page, you will see a repository here, and right here is Cuda Project.zip. Click on that, and then in here, click on "Download". I'm going to set mine to desktop. So I'm going to select Desktop and click "Save". That one is a zip file of course, so we're going to have to go into our Finder or Windows Explorer, if you're using Windows. Go into Desktop and expand the project. We can get rid of the zip file at this point. When we open up the Cuda Project, there are two folders, one is the design files. We've got the Photoshop file here as denoted by the.psd. So if you don't have Photoshop, don't bother opening that one. Right here we have the PDF which represents the design, so if I open this up, you can see the design that we're going to be making today. This is what we're going to be able to make at the end of this class using HTML and CSS. Of course, there's some images here as well, and that's where our assets folder comes in. In our assets folder, we have those images available to us to bring into our project. If you're not using Photoshop, and you just have the Mock-up to go off, you're going to need the specific colors and fonts. I've put them in a PDF document for you, also in a RTF document, if you want to go in and copy paste, you should be able to copy and paste with most PDF browsers anyway. So if I open this up, you can go in and copy color codes and paste them right into your project. Now that we have our design ready, it's time to actually start coding this project, and that's what we're gonna do in the next video.
7. PSD to HTML - Structure: So now that we have all of our design files ready, we can actually go ahead and start to build this project out in HTML and CSS. In this lesson, we're going to lay the structure using HTML. Then in the following lessons, we're going to use CSS to style it. You will soon see how the project comes together with CSS whereas with HTML alone, it won't look anything like this. So I've got my Photoshop file right open in front of me but, of course, as I mentioned previously, if you don't have Photoshop you can still follow along in our Projects folder here. I've got the mockup in PDF. So what I'm going to be doing using the Photoshop file, and if you have Photoshop feel free to follow along. Obviously, what I can do with the Photoshop file is actually go in and inspect elements. So I can go in here and I can see that the font is Titillium Web, that the font weight is bold, that the font size is 42.16 pixels and if I look on here, it appears to be white but it's actually not a pure white. It's close to white but not pure. So what I've done is if you go into the folder again and you click on Colors and Fonts, what I've done is I've told you explicitly what all these different elements have in terms of font sizes, weights, and colors. Hopefully, and this is a lesson to both designers and developers, designers should provide this to develop as we don't have Photoshop, and developers who don't have Photoshop should request this information from designers. Sometimes designers expect developers to just have a look at this and be able to figure out the font just by size or figure out the font size or weight, that is just impractical. So make sure that whether you're the developer or the designer, these details have been written out or are available in the Photoshop file, okay? All right, so the other thing that I mentioned previously, apart from colors and fonts is dimensions. Even using a free tool like Preview, you can still inspect dimensions. You can click on rectangular selection here and drag a selection, and there's actually a tool in Preview if you're using Mac or I don't know what you would use in PC, but you can actually go and find Inspector. Now as I drag, so I have to do the selection again. You can see over here, I am getting a width and height for that selection. So it's roughly 145 between this logo and the start of this text here. So that's really all we need to know. The rest we can pick out visually, but things like specific dimensions, specific font sizes, font families, font weights, some of that is often that is tricky to identify as developer. So it's important to get that information wherever it's in a document like this or you get the full Photoshop file. All right, so without further ado, let's get started on building our HTML. I'm going to open up ATOM which is my code editor. As you can see here, I got a previous project open, but I'll just close that. What I'm going to do is create a new file. I'm going to open up a new window in Google Chrome which is my preferred browser. What I'm going to do is I'm going to head to [inaudible] to HTML. This is where I get my base level HTML template from. So I'm going to copy that, and I'm going to put it into here. Just like in my other courses on HTML and CSS, I'm going to dig into my Project file and I'm going to call this cuda.html. As we are only building one HTML file in this particular class, I am just naming it Cuda. But if I was building out multiple pages, I would call this Index for the homepage. Just a side note there. So once I save that document, I get all of the nice colors and I also I'm able to open that in my browser. So I'll move this to the other side. I'm going to drag this into my browser and, voila, we've got access to our project now. If I put them side by side, I can see the code and I can see the output here. All right, so first thing I'm going to want to change is the title Cuda. What does Cuda do? I'm going to give it some more keywords, awesome websites and mobile apps, let's go with that, awesome websites and mobile apps. Now just a warning before we get into this, this might take a little bit of time to wrap your head around what I'm about to do. This is not a foundational HTML and CSS course, so I definitely recommend you go and take those courses if you haven't already. But what I'm about to do is lay down the structure that I believe would make sense for this design. There are multiple ways of doing this, and you might not get it right the first time. As you put in CSS, you might have to modify your HTML. All of that is fine. I've actually created this project already, so I have a good understanding of what HTML worked and what didn't, and I did have to make some changes. So just keep that in mind as we go through. Some of my thought process might not be immediately clear to you but, again, that just comes from my foundational knowledge and my experience with building similar projects. So, yeah, watching as I do it and if you have any questions, feel free to ask in the discussion. So that's my little disclaimer before we get started. Let's actually go through and build this. So what I'm seeing here is three sections, okay? So if I open this up, there's this section here which is represented by this purple box. There's this section here which is the nice green box. You got this section which is nice and blue, and down here is actually a fourth section, but that is more of a footer. So you've got Section 1, Section 2, Section 3, and a footer. As you can see, the header, which we can consider this part right here, is actually part of the first section. So I'm going to be nesting that within Section 1, okay? Now the other thing I'm noticing straight away is that there's nothing outside the bounds of these two grid lines, okay? This is something common in web development called a container. Now everything we put on the page, if it's a screen size that's quite big, it doesn't extend to the full width of the screen. It sits within a container of a max width of, well, let's just have a look and see what the max width of this is. You can see here I'm just dragging my selection tool from one side to another. So what we're going to be doing in our HTML is having containers built into each section of 1140 and you'll see that happening in practice very shortly, okay? This could turn into a long lesson so I might split that into two, but let's get started right away. So I'm going to get rid of this, and I'm going to indent that, get some more space in our document, I like a lot of white space. What we're going to do is the first section so I'm going to indent in, create a section. I'm going to give that section an ID of Section 1, very inventive, I know. Then close that tag. If you're new to HTML, you need an opening and closing tag, and you're going to have content in between. Okay. So then we've got two more sections like that. So I'm going to name that Section 2, Section 3 and then we've got a footer. So this is the top-level elements of our web page, three sections and a footer. Now within this particular section, what I'm going to do is create a container, and that's just a div with a class of container. That's going to ensure that all the content inside doesn't get wider than 1140 pixels. I'm just going to copy and paste that into everything including the footer because as you can see the footer is within those bounds as well. Okay. So now we got a section and a container. The next thing I want is a header. So to create this header, I'm going to open and close header tags, and the first thing in the header is an image, so img-src. This is where I can target a logo. So if I go into a directory, we can see assets here and then we can see logo there. So assets/logo.png. Now at any point you can actually go and reload the page and see what you have going on. As you can see here, the image is not coming through. I wonder why. So go and inspect down here. The image is actually coming across but it's white. So because there's a white background and there's a white image, you can't actually see it. For those of you who don't know, this is the Inspector and I'm able to look at any web page and inspect what's going on in real time. So that's really cool if you haven't taken any of my previous classes. So what I'm going to do because we're going to have a bunch of little issues like that. I'm just going to build the HTML out first, and then we're going to look at what it looks like as purely HTML document, and then we're going to build the CSS and you'll get a sense of why we definitely need CSS. So we've got the image. What I'm going to do now is do a nav. So you've got opening and closing nav, and inside I'm going to do an unordered list. Then for list items their LI, So I'm going to create one and then duplicate. So the first one is home, and the other thing about these links is not only are they list items there, of course, links, and to denote a link, we just need to use the a tag. So when you creating links and you don't have the page to link to yet, often times you just use a hash, and you got to close it. There we go. Now we can copy this, and we can just change the name. So home about, and if you're wondering why I'm not doing it in capitals, we can actually do that in CSS, and that's actually just going to make it easier for us. When we're writing our code, we don't have to look at it in capitals, and if we wanted to change it for whatever reason to not capitals after, we could just change a style and that would go back. The other thing here is the first link is active. It's got a box around it. That's what that box is going to mean. You would have seen this on other websites. When you're on the active page, there's some sort of indication, and in this particular design, there's a box around the location that you're at. We're on homepage at the moment so there's a box around home, so the easiest way to do that in the usual convention is to add a clause to the list item of active. So now we've got our nav and our image within a header. Now we can go down and create this next section, which is the main heading and the call to action. I'm going to give this an id, I thought long and hard about this, but I couldn't come up with a better name, main heading and CTA. I know that's long and probably not the best name, but it's the most descriptive. So I'm going with it. Now, this particular heading here, it's the top-level heading of our web page. So it's h1 that we need to use. The other good thing about having Photoshop is I can directly copy the text from the Photoshop file into my HTML document. Final thing other than the heading is of course the button, and in HTML, if you use the button tag, you're going to get some styles that look pretty ugly. I'll show you what I mean by that right here. I'll change this to button then I'll say work with us. You'll see here that's the standard format for a button. So it's easier to style sometimes if you just make this a link and then style it like a button. So it's probably going to link to another page on your website anyway, so we want to create that as a link anyway. I'm just going to give this a class because there's actually two of these buttons, and we're going to want to style them in similar ways. I'm going to give this a class, so we can target it of big button. That's pretty much the first section. Now we go down to the second section, let's identify what the elements are. What we've got is this heading section with a heading, a line, and a paragraph, and then we've got these four columns with an icon, a heading, and paragraph again. First thing I'm going to do is we've already got our container here. I'm going to create this first little section, which I will class as the heading section. Actually, let's not use section because we're using section over here. Let's call it a title box, box is a little bit different, so I don't get it confused with section. In title box. As I said, we have a heading, and we already have a top-level heading, so we're going to have to go further down the list and use heading 2, I'm going to type in services we provide. Again, I'm going to wait till the end to change this all to capitals because we can do that with a style. Next we have this line here, and usually to do a basic line in HTML, all we can do is just use this tag horizontal rule, but it'll be hard to style it exactly like this. So what I'm going to do is have a div, give it a class of line, and then we can use CSS to give it all those styles that will make it look like a line. Then underneath, we'll just have a paragraph tag, and like I did before, I can just select all this text and paste it right in. So we've got our title box here, and now we can start to build our columns. So what we need first is a section all for this. What these things are usually called Blurbs. So I'm going to call the thing that contains all of them as a blurb-row, and then within that I'm going to create four divisions with the class of blurb. Now before we duplicate that out four times, these blurbs are pretty much the same thing. So what I'm going to do is build one of them first and then copy and paste. The first one, we have an image. If I go into assets and then what is the name of it? Flag icon.png. A Little hack is you can go in there, click to try and rename, and then actually just copy the name, so we can put that in there. Then we go to another heading and I'm going to make it a heading 3 because we're moving down the hierarchy, and I'm going to call that branding. Then I'm going to put in the paragraph, and then you've got one blurb. Create some space here, and let's duplicate that out three times. I'm going to expand for this one too. Now we need to go through and change just the icon address, the title, and the text. Going back to here, the next one is going to be the crayon icon.So I'll just copy and paste that file name, and we'll call it design. I might fast forward here because I am basically doing the same thing for all four of them. All right, at the end of all of that, we have got our section two. We have got our title box with a heading, a line, and a paragraph. Then we've got our row of blurbs with four blurbs each with an image, a heading, and a paragraph. So let's just go back and look at these side-by-side. You can see how the HTML translates to the elements we've identified on the design itself. Now we've just got the third section for get in touch. This is going to be the trickiest one because forms are always tricky with responsive design. So just like the last ones, I'm going to go down here, and I can actually copy and paste this title box because it's the same thing. I can change the heading to get in touch, and then I can copy the paragraph text and replace that. Alright, tittle boxes already in. That's great. Now what I'm going to do is create a div for the form. There's only one contact form, so I'm going to give this an id of contact form. Then inside I'm going to actually open a form. This is what gets a form to work. You have to actually put it inside a form. Then what I'm going to do, which might not make perfect sense right now but it will when we start to style it with CSS, is create rows for each of these different rows in the form. It's just going to make it easier to style. We can actually use flex styling, which I'll show you in a later video. I'm going to call this a form-row. I want three of these form-rows. One for name and email, one for message, and one for the button. Now we've got three form-rows. The first one, we're going to put in two inputs. First one, input type, text, going to give it a name of "name" and a placeholder of "your name". The text that goes in this box is called a placeholder in case you didn't realize. That's all we need. Then we can go and create a input for email. Your email is going to be the placeholder for that one. Now down here, this text box is actually not an input tag, believe it or not, so I got to do text area.As an attribute on text area, we are able to say placeholder. For completeness sake, I'll also give it a name, which will be message. The final one, we're going to do another big button, but this time it needs to be an input so that the form can be submitted. We're going to put in another input type of submit, class of big button because it's going to be formatted the same way, and the value will determine what goes in the actual content of the buttons. In this case it's going to be "send message". All right, am sure this lesson's been a long one but bear with me just a little bit more because we've only got one section left, and it's the footer section. So again with the footer section, it's similar to the nav section because we've got a list of links. But I wouldn't call it a nav necessarily because it's not navigating to other places on the website. It's actually linking to external social media sites. Semantically, I'm just going to call it a div instead of a nav to hold all this links. I'm going to give that div a class of footer links. Now as I mentioned, it's a list, so I'm going to create an unordered list and then have the different items. Just like the one above, its' going to be lists with links inside them. So very quickly, and I might fast-forward through a bit of this. I'm going put in the links. All right. The final step, as you can see here, is twitter is in blue. I'm assuming that is for active link. I don't know how it could be an active link where if you're not actually on the twitter page, but we're going to treat it the same way and we're going to give it a class of active. Basically, any of these links with a class of active is going to have that different color. Just like up here, any of these links with a class of active is going to have that box around it. That's the usual way of doing it, so we're sticking to that convention. Sweet. So that's pretty much it guys. For the HTML, I've put in a lot of classes already, but none of those classes are linked to CSS. Let's have a look at what it looks like in the browser. I just need to refresh my page, and walah look at this beautiful design. So guys what you're looking at right now is HTML without any styles whatsoever. There are no inline styles, there's no CSS file, and this is what it looks like.As you can see, CSS is going to do all of the heavy lifting for us when it comes to turning what this is into this. Alright, so that's why this is only one lesson, putting the HTML on, and then the rest of the lessons are going to be on CSS. What we're going to do is we're going to split it up section by section. We're going to actually create style rules. Then you'll see this structure actually come together and look pretty close to what we have here. Hope I haven't lost you in this video. Sorry if it was a bit long. I hope to see you in the next one where we'll actually start to make this look like our design right here. I'll see you in the next video.
8. CSS - Section 1: All right. In the last lesson, we laid out the HTML structure of our newly designed web page. As you can see, HTML does a little bit to get the content on the page, but we need a lot of CSS to make it look like this. That's what the next three lessons will be about. We're going to split it up into three sections, Section 1, Section 2, Section 3, including the footer, and then we're going to work on making it responsive. Of course, we're going to make CSS choices that will ensure the best chance of it being responsive as we go down to lower screen sizes. But inevitably, there's always little issues that come up. We're going to learn how to fix those as well with media queries. Finally, we're going to transform this menu into something that's toggleable. I don't know if that's a word, but basically what's going to happen is this will contract and then we can toggle it on and off on mobile, which is pretty standard feature across a lot of websites these days. In this first lesson, we're going to do the first section and that should keep us busy. First things first, let's go into our code editor, and what we need to do is create a new file to house all of our CSS. I'm going to click New File, and I'm going to save it straight away so we get our coloring, so navigate into your project directory, and let's just put it right with our HTML file. I'm going to call it styles.css. Now the second part of this is linking this CSS file to our HTML document. How we do that is by going inside the head tags, creating a link tag with a rel of style sheet and link to the styles.css file. Because it's in the same folder, we don't need to put any folders or anything. We can just go styles.css. First thing I'm going to want to do is this container, I'm going to start by putting in a class CSS definition. Again, this is not a foundational CSS and HTML class, but dots for classes. See how we've put class as an attribute on some of these tags. We can target that class by putting a dot, and then the name of that class, and then in curly brackets, all of our styles. Same thing for id. If we're identifying a single element on the page, we would use id, and to target an id, we would use hash and then the name. For instance, for this main heading in cta, which we'll get to a little bit, we would target it right like that. Now the first thing I want to do is create a max-width for this container. I remember we said, 1140 pixels. The second thing we're going to want to do is make sure that its centers in the middle of the page. I'm going to give it a margin-left of auto and a margin-right of auto. Basically, when you have an element of a fixed width, you're able to center it within its parent element using margin-left auto and margin-right auto. If we go back to our website now and reload, you can see that it's got some nice spacing on either side. If we drag this in, it'll continue to maintain that nice box, that nice container in the middle of the page right up until we hit a point where the screen width is less than this number here, 1140. We've got our container, that's going to affect the whole page, and now let's work on the first section. What I'd like to use is comments to label the different parts of my CSS document, so I'm going to put a comment in here. This will not do anything. This is just for us looking at the code, and so you can put in a comment by starting with a slash and an asterisk and ending with an asterisk slash. Now I'm going to target my first section using the hash symbol, which I showed you just a moment before. What we're going to do is give this section this purple background. For those of you who have Photoshop, you can actually click on this, and with a few different clicks, you can go in and find the hex code. I can actually now create an attribute for background color, put in the hash, put in the code. If you were to do this without the Photoshop file, it's going to be in your colors and fonts document, and you would just look Section 1 background there it is. Even if you don't have Photoshop, remember, you can still follow along. But I'm going to use Photoshop from now on to find out these things. We've given it the background color, let's see what happens when we refresh the page. Voila, we get this nice background. But we have a problem here. The body has a margin. I don't know why that's happening straight up, but we can easily fix that by, again, I'm going up here because I am putting all of our universal styles at the top. We can target the whole body of our HTML document. I'm going to make sure there's no margin or padding by just putting margin, padding zero. Now it'll go to the edges. As you can see here, we still got our container. We can see our logo now, because we don't have a white background, but we still got a long way to go. In regards to Section 1, I also want to make sure it's tall enough because there is a lot of space in our design. I'm going to either check the box on Photoshop or I can drag a selection and see the approximate height of this element, and we can actually fix our section to be the same. It's about 595-596 tall. What I'm going to do is go back to our section definition here, give it a min height of 595. There we go. It's obviously not going to make sense right now, but what we're going to do is move this up here, move this in the middle, make this a nice big button. Going back to the design, always referring to the design, we've got the first section of our section, or the first area of our section is this header. As you can see, there's a little bit of a margin above. What I'm going to do is join another selection to figure out how much that is, and let's say that's about 55. I like to round it to the nearest five pixels. We're going to go in target header. Remember, if you're targeting a HTML tag or element, you're just targeting all of them. You don't need to use a hash or a dot. You can just explicitly put in whatever element you're targeting and that will affect all elements. Right now, we only have one header tag, so this is only going to affect that one. What I'm going to do is give it a padding top of 55 pixels. I know I said margin, but if we change this to margin, what it's going to do is push the whole section down and then you'll get this white space above here. We don't want that, we want padding top. Expand that. The next thing we're going to work on is this menu. Right now, it's looking like a standard list of links. What I mean by that is we've got this standard styling for links where our browser, will turn it into a blue text and give it underlined, and then also these ugly dots, that is the standard behavior of making things lists and making them links. We need to override that. I'm going to target the list items by first selecting nav, then going into the unordered list, and then targeting all list items within these unordered lists. What I'm going to do is first change the display style. Instead of display block, which it currently is now, I'm going to give it display inline block. I save that. You'll see now, it's now going inline rather than block. Again, this is not a foundational CSS class, but a quick explanation of inline versus block. You can think of block as something that extends the whole width for the page and then stacks on top of each other like our web page is now, you can see everything's just stacked on top of each other. That is the standard behavior of most elements to just display as a block. But using inline block allows us to have these elements inline. If the screen gets to a point where it can't support all of these inline, it'll go back to block. It's a very common display method, inline block. Now I want to get rid of this text decoration as it's known in CSS. I'm going to target one layer deeper and turn off text decoration. Text decoration, none. There we go. We still got blue. I'm going to go in and make the color white, and there we go. One of the thing that I'm noticing now is we've got some pretty ugly fonts. This is probably something I should have set up at the beginning, but I will, I'm discovering it now. Our font that we're using as written here is Titillium Web. How do we Titillium Web into our project? What we're going to do is go into our browser and search for Titillium Web font. Now, we can go into Google Fonts, and Google Fonts store this font in what's called a CDN. A public address that we can link to and bring this font in. I'm going to select this font, and then I'm going to click Customize. Otherwise, it's just going to give us regular, so I'm going to click Customize. It's going to give us a bunch of different options. I want to be able to select light, regular, and bold. Those are what we need for the project. But if you suspect that we'll need more, you can just select all of them. We can also download these fonts and house them on our website. But for the purpose of this course, I'm just going to use this tag here, which we'll link to the font from Google, and then we specify that in our CSS. Google makes it easy for us. We just have to take what it says here and put it in our project. First things first, this goes. I forgot to do the end tag there. Well, it still worked. Anyway, I'm now referring to external fonts now. That should be now linked. What I can do now is sets the body fund. This will be the standard fonts of everything in the body of our document. I can copy that and change the font family to Titillium, I find it really hard to pronounce this one to Titillium Web. Let's close this, go back to our project and see what happens. Hello, we now have a different font. So there's going to be certain points where we're going to use bold and we're going to use lights, I think. But for now we can just set everything to Titillium Web. The next thing I want to do is float the NAB to the right. As you can see here, it's coming underneath the logo and I don't want that. I want it to float to the right. Now it's on the right here. It's looking a bit restricted in this view. But as you can see, when we're bigger than 1140 pixels, it has some nice margin. We're going to get to a smaller screen sizes in a later lesson. But going off what we have here, I'm going to continue working on getting these to how we want them. Again, I just want to remind you before I keep going that you may take a few tries to get it exactly the way that it looks here, and that's totally fine. I had some practice beforehand. Some of my processes might not be immediately clear to you, but just give it a go and try different things if padding doesn't work, try margins. If margins doesn't work, just keep trying and you'll get there eventually do some research. That's how most of us learn web development. But for now, you've got me to walk you through how I did it and hopefully it'll make sense if not as always discussion box below, if you have any questions. Next thing, the padding and the box. I'm going to head into the list item and I'm going to give it some padding. Let's just have a look at the design again. As you can see, there's a little bit of padding on top and bottom, but there's more padding on left and right. I'm just going to estimate that. Let's just drag a bit of a selection toe. You can see the width there's about 17 pixels, and the top is about 15 pixels. It's about 16 pixels on either side actually. Let's start with that. Let's start with 16 pixels padding. For active, I'm going to target that specific element with a class of active using this, give it that background color. Again, I'm using Photoshop to do this, but you can check in the document this particular color. I'll go in here, hash that particular color, and then we can actually see it on the screen there. As you can see now, just putting in that padding and that background color, and we've already made a big difference. Now of course, one thing I can see here is that we've got these harsh edges. What we can do to smooth those out is used what's called border-radius. I'm going to add that to our active link item. Border- radius, five pixels is usually a good amount. There we go. Now as you can see, the padding is a bit more rectangular here. I'm going to modify that slightly. What I'm going to do is change the padding versus top and bottom to left and right. I think that's a little bit closer. Maybe a little less padding on the top. A little more padding on the right. Again, it's not in capitals. The way we can do that is by using text transform, and we can select uppercase. Now every list item within a nav will have uppercase letters. As you can see, there's still a little bit of a difference there, but I'm going to move on because I don't want to spend too long on any tiny little bit of element. Of course, attention to detail is important, but you can go through and experiment with that to make it perfect. Let's have a look. Looks like a head is pretty good right now. Next step is this whole section. I labeled that in a HTML document as main heading and CTA. What I'm going to do is create a style for that. Main heading and CTA. Now what do I want from my main heading and CTA? First of all, I noticed that everything is centered in the page. I also noticed that there is some margin here. If I have a look at that, the margins about 150 pixels. What I'm going to do is give this a margin top of 145 pixels. Now it's more in the center. But then also I'm going to give it a text align of center so that it shows up in the center. There we go. Next thing within this main heading and CTA is the actual heading. I can target the heading that is within main heading and CTA by putting in main heading and CTA with a h1 afterwards. First thing I'm noticing is that the color is white, not black. There we go. The font size is actually much bigger. If I go in here, I can check 42.16. I'm just going to go with 42 pixels. Font Size, 42 pixel. You'll notice that it is a font-weight, bold. Luckily we installed that font weight as well. We can go down here and do font-weight bold. Now let's have a look. Wow, look at that. It's so often that the smallest of changes can make a pretty big impact. It's crazy to think that we started off with what we were looking at before, which was if I just get rid of this style sheet link. This is what we were looking at before. I don't know how long we've been going for maybe 15 minutes of coding. We now have this beautiful peace. Obviously I'm getting ahead of myself. There's one more thing style here and that's the button. But I just wanted to make that point briefly. As the button is going to be styled pretty much the same thing as the send message button down here. I'm going to put a style above section one for big button. Big button has a few different styles on it. Most notably, it has a lot of padding. Again, drawing the selection tool on top, it has about 27. On the sides. It's got like 83. Those numbers won't be exact, but they give us a good starting point. I'm going to go in and do padding of 25, 90, 25, 90. Also for the text, we want it to be White's. Let's have a look now. We can actually see the padding working for us yet. We've also got this underline, so we'll need to fix that. But what we can do is add a style for specifically this button to make it the orange background. Then we can actually see the padding working. What I'm going to do is start with this selector and it's an a tag, so I'm going to select it using an a. One thing I noticed is the underlined, so I'm going to get rid of text decoration. Then the second thing I'm going to do is give it that background color. The background color is, if I go in and inspect this element on Photoshop, there it is, put it in. Now let's see what happens. We've got this big orange button. I'm noticing a few things. The work of US button is in capitals and the font size is actually a little bit bigger as well. Going into here, I can see that it's actually 18 pixels. Just like before to capitalize it, we can use text transform capitalize. We can fix the font size to 18 pixels. Now it gets a little bigger. Unfortunately the capitalize is not the same as uppercase. Sorry about that. Capitalize in case you're wondering, just capitalize the first letter of every word. There we go. Work with us. Another thing I'm noticing is that there's some margin between the button and the text. That's about 60 pixels of margin. As you can see, there's already a little bit of margin already with the heading tag that comes built in. But we can extend it to 60 pixels. I'm going to go to the heading, margin-bottom 60 pixels. That's pushes the button down a little bit. Another thing, border-radius to give it that nice curved edge. There we go. Is there anything else? I think that's pretty good, guys. Our first section is pretty much complete. Obviously when we resize, it works pretty well to a certain point, we're going to get to fixing up responsive issues in a later video. But for section one, I think we've got it to a pretty good state. There might be a few discrepancies there, but I'm pretty happy with that. I hope you were able to follow along with this lesson, we're going to now do pretty much the exact same thing, but with this section and this section and then of course the footer, and then you're going to see this whole project become like this. But then on top of that, we're going to also make it responsive and work well on every screen size. That's the exciting future of this class. I hope to see you in the next lesson. See you then.
9. CSS - Section 2: All right, welcome back guys. In this lesson, we are going to continue with creating the CSS for our learning page to take it from this to this. We are going to focus on this second section right here in this lesson. Then in the next lesson, we'll do the final section. Just like before, I'm going to start with the section itself. If I click on here and click the rectangle, if I'm using Photoshop, I can figure out the fill, so the color of the box and the height of it. Let's dial in those styles straightaway. First of all, I'm going to create some space here so that you guys can see what I'm typing more easily. I'm going to cheat a little and copy what we have here. I'm going to continue separating each section with a comment just for readability for myself and whoever comes and looks at this style sheet later down the track. For Section 2, as I mentioned, background color as I just copied, unfortunately I already filled my clipboard with something else, so I have to go in and copy that again. Then the heights which is up here is 747 pixels. I'm going to go with 745 just because I like to round down and I'm going to use min-height. Now, I use min-height up here as well, and you might have been wondering why I use min-height and not height. It's to do with responsiveness. Right now we want it to have a minimum height when all the, I guess, elements can easily fit inside it. But when we go down to a smaller screen size, you can see here with Section 1, you see the height of the box gets bigger and we want the heights of the section to get bigger, to include all the elements. Now we're going to make this text smaller and change some of the dimensions of the elements as we get into smaller screen sizes. But regardless, we want that to be a minimum height but on smaller screen sizes we're happy for it to extend to as long as it needs to be to include all the content. Hopefully that clears that up if you were wondering. If I scroll down to the second section, save on the document, refresh the page, now you can see we have a green background. If I extend out the full page, the content is actually taller than the min-height in this instance, so we're not actually seeing that min-height in effect. But once we start to put these side-by-side, you'll see that. One thing that I'm noticing that is not quite right is there's a gap between here. I know from experience that heading tags have a top and bottom margin by default. In the inspector we can see this by this orange area. If I hover over the Heading 2, we can see an orange area on top and bottom. I know that that's causing this white space here. What I'm going to do is effect this H2 next. In our HTML we called it a title box, I'm going to again space down, select title-box, H2. What I'm going to do is get rid of the margin-top, so we can get rid of that, and what I'll do later is put in some padding, which I won't do now, but I'll put in some padding top, so it still has some space from this line to the heading. I'm getting a bit ahead of myself by working on this heading already but I just wanted to get rid of that little white space right away. Going back to our overall section, one thing we need for the whole section is the color needs to be white. Again, putting in color white, saving that, and there you go. Now that we've put in the styles for the whole section, let's work on the individual parts. We've got first this title-box area with the heading line and paragraph. As we saw a little earlier, the title-box area has the class of title-box, and we have a H2 a div with a class of line and a P tag. A few things I noticed about the design of this title box is number one, it's centered, so this is floating to the left or aligning to the left, so we need to center the text. Then the second thing is if I expand the screen size, you can see that the line break is happening pretty tight, and how we can get that is by putting in a max width so that it doesn't extend any longer than about that width. First things first, I'm going to space out, put in a title-box style here, text-align center, and let's have a look at how wide this text is. If I draw a selection tool around it, it's about six or nine. Again, I like to round down, so I'm going to do a max-width of 609 pixels. Now what that's going to do is align the text and give it a max-width, but it's still going to show up on the left. Now how we can fix that is now that we have a fixed width, we can put in margin-left order and margin-right order, and now that will show up in the middle. Remember, if we have a fixed width block element, we can center it within its parent element by using margin-left and margin-right order. Now I'm going to go back to this H1 and what I want is some padding on top. Over here you can see there's a lot of padding between the top of the section and the heading. We've gotten rid of the margin so there's going to be no inherent margin now. But that's cool. We can dial in our own padding height, and it looks like it's about 120 pixels. I'm going to go in here, create a padding top of 120 pixels. Fortunately, my coding software every time I save, kills those extra line. I might just put in a comment, just so it stops doing that. Sorry about that. Let's go back to our web page. Now we can see that there's this big space here. It's not going to look quite right until we get this heading quite right. What we need to do for that is make it bigger and make it capitalized. If I go in and select that text, I can see that it's 40 pixels bold, and it's obviously capitalized. Let's go in and do that. Font size, 40 pixels, font-weight, bold, text-transform uppercase. Let's go back into our project, see what happens. There we go. That's pretty much the section heading done. The next thing is the line, and right now there is no line showing up, so we need to create that line using CSS. First of all, we need to target it, so title-box, then line, and I'm going to again use the Photoshop file as reference. We can have a look at the dimensions of this box by clicking on here. We can see that the width of it is 87 and the height is four. Let's dial those into our CSS. Width 87 pixels, height, four pixels. Now it's not going to show up yet. The space is going to be created, as you can see, but it's not going to show up until we give it a color, just like any div in HTML. It's not going to show any color unless we give it a color. If we look at this box, we can see that the fill is pretty much completely black but what it does have is an opacity. I'm able to tell that by looking at the layers and checking here the opacity. If that was a 100 percent, it would just be a solid black line. But see how it fades into the background a bit. That's because it has an opacity of 15 percent. The way we can dial that in, in CSS is by using RGBA. RGBA is a way of putting in a color code. For this little function, there are four parameters. The first one is the red channel, the second one is the green channel, the third one is the blue channel, and the last one, I don't know what "A" stands for, but that's where we can put in the opacity. The RGB code for black is just zeros all around because there is no red, green, or blue. I'm going to do is zero;zero;zero, and then for opacity, I'm going to put it in as a decimal, so 0.15. If I save that, reload the page, you can see we've got a line, but of course it's on the left here. What we're going to do is again, margin-left order and margin-right order, doesn't matter which order you do them in, and now it's in the center. We got our heading, we got to align and we now need to work on this paragraph. I think it's just going to be a matter of changing the font size. If I dig into here, I can see that the font size is 18 pixels and the weight is just regular, so we don't need to change that. Going into title box, targeting the P tag within it, I'm going to set the font size to 18 pixels. Going back, we now see our title box working pretty closely to what we have in our Photo shop file. The only thing I can really notice here that's different in ours is there's a little bit less padding here, so just have a look at that 20 pixels. I'm going to go back into the line. Again, that is because of this heading with its inherit margin, it's going to inherently have some margin bottom. As you can see here, that orange space is the space between the text and the line. What I'm going to do is change the bottom margin of the heading to 20 pixels. Now, you can see it's not exactly perfect because there is some line height in here as well, so we can change the line height. Otherwise, we can just dial down the margin-bottom until it's closer to the actual design. I think that's pretty close enough. Sweet. That's the title box. If I expand the Window, looks pretty good. Now we need to get these columns happening. What I'm going to do is go back into my HTML and have a look at what we've got. We've got a div here called blurb row, and then inside that we have four blurbs. To get them all to sit next to each other, what I'm going to do is give them a more tighter width and then use the display attribute inline-block. Moving across to our CSS file, I'm going to create a rule for the blurb, and what I'm going to do is there's actually four columns here. Now, theoretically, if we have a 100 percent of width to work with, we can make all of these columns 25 percent, and then that'll add up to 100. But in reality there are other things like margin, padding, and borders that add to the horizontal width and height of elements. To be safe, a good number, which is a bit less than 25 is 23.33 percent. I'm going to fix the width of this to 23.33 percent, and because it is a relative width, it means that the width of these elements are going to respond if the container gets smaller than 1,140 pixels, which is what we want and you'll see that working in just a sec. Of course we've got the width, but it's not going to display in line unless we set the display style to inline or inline-block so I've done that. Now, I'm going to switch back to my browser, hit refresh and voila. Now you can see that they're all sitting nicely next to each other. Just to show you, if we didn't make it 25 percent, there would be a little bit of a line break because there's always padding margin and borders that get in the way. 23.3 percent gives it a little bit of breathing space so they can all sit nicely together. The other thing is centering within these columns. As you've seen me do time and time again, I'm going to give it a style of text-align center, and there you can see we've gotten quite a far way. If we go back to our design, we can see that this is actually a bit too close to the paragraph above. Again, I'm just going to check the height of this, that 80 pixels. I'm going to give the blurb row a margin top of 80 pixels. There we go. Going back to the design, now I think it's time to work on the blurbs, and what we can do for the blurbs is update the size of these headings and paragraphs and also capitalize these headings. What I'm going to do for that, target the heading within the blurb, which I think is a H3. Let's just double-check that. Yes, so H3s within the divs with a class of blurbs, we're going to change the font size of those, so let's determine what those are. Twenty four pixels and also bold, so we'll need to change the font weight as well. Font size, 24 pixels and font weight bold, and of course, text transform uppercase. Save that, and now we've got bigger text. There's a little bit of the alignment issue here, but we'll get to that in just a sec. The last thing I want to do before we fix that is just to make sure that these paragraphs are the right font size. What I'm going to do for that is going to Photoshop, select the font, say that 16 pixels, and just dial that in to blurb. Again, starting at blurb and then targeting all Ps within blurb, I'm going to fix the font size to 16 pixels. If we refresh the page, we can see that it's made no change and so that text must have all ready been 16 pixels. Now the final thing I think that we have to do on this section is work on this margin here. I'm going to have a look again with my selection tool, see that's about 60 pixels, and so what I'm going to do is go back into this style for Heading 3 and give it a margin top of 60 pixels. If I save that and refresh the page, you can now see that everything starts to move down. But there's one final issue and that is that this heading for branding is out of line with the rest of the headings. Now, why is that? Well, if you take a second to look at the paragraphs here, each of them are on two lines, except for this one. If we were actually able to go in and change the amount of text in this paragraph, let's just get rid of everything beyond that comma there, you'll see that everything is in alignment again because the text is only going over two lines. We could remove some text and they would align nicely, but that's not really a good solution, especially if we want to put in more text for different blurbs, and it may also still break when we lower the screen size as it's doing now. The best way and the easiest way to get that to work is by using display table. All we got to do is go back here and for blurb instead of inline-block, inline-table, save that, refresh the page, and even with that second or third line of text, everything is aligned nicely as if it was a table with three rows. That's a nice little hack available to us in this version of CSS. If this was a table with three rows, you can see that each row is about the same height now, and of course we've got our columns which we set up before. That's a little hack to get that to work. Sometimes it takes some experimenting with the display style to fix little issues like that. In the next section we're going to actually look at another one called display flex. These different display styles can help you with these issues. Yeah, that pretty much sums up Section 2. If I look back here, it's looking pretty good apart from one more thing and that is that, as you can see here, the same thing as we were talking about up here. There appears to be a max width on these paragraphs, or if I just draw my cursor around it, I can see it's about 200 pixels wide. We're going to go in, give it a max width of 200 pixels and as you can see, it's moving to the left still. We need to go in and do that thing that we've always been doing to get things to center, and that's margin-left order, margin-right order. Save that, and as you can see now, it's creating that space in-between that max width, that is causing these words to break onto a new line. Final check. I think it's looking pretty close to the design. Again, small attention to detail. You could go in and make sure that, if things are five pixels difference, you could go in and make them perfect. But I think for our purposes and for the purpose of this class, we're pretty close to where it needs to be, and if I drag my window in, you can see the effect of those relative width sizes. Remember we used 23.33 percent instead of a pixel width and what that allows for is when we're on these smaller screen sizes, we can start to see them adapt due to the size of their container. As you can see, we're already building in some practices that will ensure the best chance that our web page will be as responsive as possible. Again, once we get down to a size like this, it starts to get a bit messy, so we'll need to fix that up. But otherwise, it's pretty responsive to a certain point and that's the benefit of thinking ahead and using these relative styles. That's Section 2. In the next video, we're going to do Section 3 and also the footer. I look forward to seeing you on that one.
10. CSS - Section 3: All right, welcome back guys. We are now on the homestretch to getting this web page looking nice on at least desktop. We've done section 1 and section 2 now. Now it's just about getting this looking nice. As you can see, our styles that we created for title box have already come through so we don't have to do that section again. That's the great thing about classes and creating styles for them, you get to reuse those styles. The thing that's going to take the most amount of work in this lesson here is going to be this form here. First things first, like we've done in all the previous lessons, we're going to set the overall styles for this section and we're going to follow the same format as the ones previous. I'm just going to copy the whole of section 2s because we're going to use the same attributes. Rename that to section 3, and what we're going to change is the background color and the min-height. As always, I'm going to go into my Photoshop file to figure out what that should be. As always, I can click on "Fill" here and get the exact hex code of the color. I can see the height here its 820 pixels tall. Let's dial those in right away. I'm going to change that hex code to that and change the min-height to 820 pixels. Going back to our project, you can now see that the height has taken affect the color of the text is different and we've got that lovely blue background. With the section styles and also the title box styles already done for us, the only thing we're left to work on for this section is the form itself and that's going to keep us pretty busy because as you can see, this form doesn't look anything like what we have here. First things first, let's have a look at our HTML. As you can see here, we have got a container div with the id of contact form. We've got the actual form inside, and then we've got three form rows, each with different inputs. As you can see here, we've got these two existing on one row, this existing on one row, and the submit button existing on one row as well. Now there's some little issues here like you can't see the text on the button because it's color white and the button is color white. We'll get to that in just a sec. But to start with the parent element, to begin with, let's create a style for contact form. In my CSS, I am creating a style rule for anything with an id of contact form, which is going to be this div right here. What I want to do is just like we've done here for the title box is give it a max width and center it. I'm going to go into my Photoshop file and figure out how big this form is. Rounding to the nearest pixel, it's about 871, 870, sorry. I'm going to go in and give this a max width of 870 pixels. Now that it has a fixed width, we can use margin left order, and margin right order to center it within its parent element. Right now this is all aligned to the left, but if we are to inspect it on the front end, you can see that it is existing in a container now that is centered and restricted to 870 pixels. Now that we've got that foundation, it's time to style the actual elements within and we can do that by using the tag Level Selector. All inputs and text areas, I want the color of the inputted text to be white. Also I want the background to be the background that we have here. If I look at these boxes and in Photoshop, go in, grab the hex code. I can swap over to my code. Software, change the background color to that. Coming back to our design, you can see that it affects every input and every text area. Now the problem with that is that our Submit button is also an input element so it's going to affect this button as well, which might not have been intended and definitely for this, we don`t want the same styles as we have in our input boxes to affect our Input button. What we're going to do is we're going to have to put some attribute selectors on here to make sure that it only selects these two and not this input. This is going to look a bit wonky if you're not used to CSS before, but we can target a attribute and value using these square brackets in CSS. We're going to target the inputs with a type of text. Then we have to create another one because this is actually type of email so copying that and changing the type to email. If I save that, you'll see that it's not affecting the Submit button anymore. Just these inputs and that text area. The other thing I noticed is that it's got this ugly border. I'm going to say border none so that gets rid of that. I'm noticing that the placeholder, despite going in and being able to type in with the color white. As you can see down here, we've changed the color white doesn't actually change the placeholder. It only changes the text that you type into these boxes. To do that, we're going to have to use a little bit of a special selector type, and that is a pseudo selector. How we do that is by typing in and I'm going to select all of these colon, colon, placeholder. That is the way we can target the placeholder of certain elements within CSS. I know it might look kind of funky, but that's just how it is. I'm going to color that to white and then wallah, you can see here that the placeholder's not coming through and there's actually a little bit of text already in there. That's because any space that you put in here, any white space that's going to come across. Let's close up those set of tags and there you go. Textarea, is a strange one because it is an input, but it just doesn't act the same way as an input. Going back to the CSS, there's a few other changes we need to make here. We want to make sure the font size is the same as our design. We want to add some margin as well. Then of course, we need to make these as big as they need to be, so they're quite small at the moment, we want this one to be 50 percent wide, this one to be about 50 percent wide, and this one to extend the whole width of our container. Going into our style sheet here, actually going into our design first. We can go in, use the text tool to select the text here and see that it is 18 pixels. Going in, font size, 18 pixels. Now the font size is bigger, but the fields are just simply too close together. Let's put it in a little bit of margin. I'm going to do a rough calculation here of the margin. The spacing between says about 28. Here, it's about 44, just going to go with 26 for now. Margin, and this might change in future but let's just do 26 for the margin. As you can see, that's a bit too much, so I'm going to dial it back to maybe 16. We're going to need to change that, but that's okay for now. What I want to do is make sure that these extend across the full width of the container, so now I'm going to work on these, row by row. We need to fix the, not only the width but the height of them as well. For the first two, input text and input email. I'll create some space here. We're going to make the width 50 percent and the height. What should we do for height? If we go into the box again, just need to clear that selection. Go into the box, we can see the height is 56 pixels. Let's dial that height in here. Now when we refresh the page, as you can see, like I mentioned before with the columns up here being 25 percent each. If we make them 50 percent each, with the display style of inline, it's going to break to a new line and we'll need to give it a bit less of a width so that it can stick together. There you go, with 45 percent. We're going to need to change that in a little while and I'll show you how we're going to do that in just a sec. But for now we need to make this one extend 100 percent and then we're also going to figure out the height of that one as well. So going into here, clicking the "Rectangle Tool" so we can see the height. We can see that it's 200 pixels. I'm going to target my text area in my CSS, fix the height to 200 pixels, and set the width to a 100 percent. Now you can see that the top line and the second line, roughly goes the full width of the container. Now, like I showed you before, we need this to be 50-50. But because of the margin, because of everything else, it's not lining up, so we got this edge that's not lining up perfectly with this edge. What we're going to do to fix that, is set this back to 50. But then we've got that same problem again. How do we get past this? Well, that's when we can use our friend display flex. If you are wondering before why I created these rows to begin with, Class="form-row">, it was for this exact purpose. So if I go in here and create a style rule for form-row, I can show you the magic of display flex. I'm going to set this to display flex. I'm going to refresh the page and voila. Now you can see that the edges are lining up perfectly and it's flexing, I suppose you could say, to get that result. Even if I resize the page, it still stays perfectly edge to edge aligned. That's the beauty of flex. We're getting pretty close to where we want it to be. I'm noticing two things right now that is different between the Photoshop file and our document, and that is border-radius and also a padding here on the left. I'm going to go and fix that up now. For all inputs, I'm going to go in and change the border-radius to five pixels, like we've done everywhere else and I'm going to have a padding left of about 16. If I refresh the page, you can see starts to look a bit nicer. Now there's also this margin here for text area, and that's about 24 pixels. So on text area specifically, I'm going to give it a padding top of 24 pixels. There you can see that we've got some nice comfortable padding. That's actually pretty close to what we have here. There might be a little bit of difference with the margin, but overall I'm pretty happy with that. I'm ready to move on to our button here. Because we've already set a style for big button up here, we can recycle those styles, and so it's going to be a matter mainly of changing the background color. So the background color of the button, if we go in and select the box here, find its fill attribute and copy. We can change the background color of our input type submit. So you're going into here and targeting it the same way as we targeted our text and email. Just needs to say [type="submit"], and then background color the # code of 30bae7. All right. As you can see, it's coming across a lot nicer now that we put in that background color. But what we need to do as well, is get rid of that ugly border. All right. Just like here, we need to make sure that the text is bigger and capitalized, I believe. Also we need to center this button and we're going to work on a little bit of the margin as well. If I go back into my design, I can check what the font size of my button is. It's 18 pixels. Let's dial that in, font size 18 pixels. And as I mentioned before, it's capitalized. So we're going to have to use text transform uppercase, and then of course, we want it to be centered. Margin-left: auto, margin-right: auto. Save that. Come across and there you go. It's more in the center. We just need to once again fix border-radius. Let's have a look at that compared to our design. Pretty close. The only thing, as I mentioned before, is the margin, so that's about 60 pixels and we could give it a margin-top here of 60 pixels. But if we inspect and we'll see that we're making the row bigger by having a margin here. What I like to do in this instance, set up a margin top on the input submit. I'm going to put an inline style on the form-row before it, and give it a margin-bottom of 60. That just ensures that the heights of these form-rows stay the same, and the margin is set between these rows. Which I think is more appropriate, but at the same time, it doesn't really matter. You could have put the margin on the button as well. All right. That's our form done. Let's move on to the footer quickly and wrap up this section and then move on to media queries. For this, we need to do a similar thing to what we did up here. It's just a bunch of links that are currently arranged as a list, so we need to do a similar thing to what we did for that. I'm actually going to copy and paste what we have here. Scroll down, paste that in. Instead of nav ul li, what we're targeting is footer links, and so you can check that down here. We've got footer links with a ul and then lis. We don't want them capitalized, so I'll give it a text transform uppercase, but let's see what happens when we do that. Great. Now also we need to get rid of the text decoration and make them white. So I'm going to copy and paste that. Again, changing nav to footer links. Now you can't see them unfortunately, because we need to actually change the background color of the footer. So footer is just a tag, so we can go in to our Photoshop file as we have done all throughout this section. Click on the box, figure out the background color of that, and then dial it into our CSS. So there you go. We've got the appropriate background color, but we aren't quite there yet, because we've got this margin above and below the list. So if I am to inspect that, I can find that the actual unordered list, as you can see here by these orange lines, is creating that margin. So I'm going to go in and target that particular unordered lists like this, and set margin to zero. Now if I go back, refresh the page, now, it's back to normal. So two things I'm noticing now from this to this is, number 1, we need to make the font bigger. So inspect that in just a second. Also that we've got this hanging off to the side here, where we would like it to be more centered. So we're going to give the container a max width and center it just like we've done with other elements up here. So if I go back to my Photoshop file here, I can go inspect this text and see that it's 24 pixels. So let's do that now. The font size, 24 pixels. Now with the container, if i look on here, it's about taking a selection tool and putting it from one side to the other, it's about 945 width, so I'm going to create a style on for the links. Max width of that amount, which was 945, and as usual margin-left order, margin-right order, save that. Go back to our document here. Now you can see that it centers. The only other really obvious thing here is that Twitter is a different color in this design, and that's because as far as I can tell, it is an active link, like I mentioned before, I don't know how it could be active when we're not actually on Twitter's website right now. But regardless, we have decided to style it like an active link. So I've copied that hex code, and what I'm going to do, is target the same as I've targeted just above, but this time put dot active on the li, and then color hash 30bae7, and there you go. Now to make it perfect, there are some padding and margin issues here, so as you can see, there's a bit of margin between here and there, about 45 pixels, and on the bottom about the same. Then also between them, there's about 50 pixels between them as well. So to get a result similar to that, what I'm going to do is put some padding on the list itself. Padding top. What was it again? About 50 padding top 50 pixels, padding bottom, 50 pixels, and then between the list items themselves, we've already got some padding, but maybe we can make it a little bit bigger, so I'm going to change these from 16 to 20. Going back into our design, you can now see that there's a lot more padding, and there's some more margin in-between each of these items. It's actually a bit too much, so what i might do is dial that down to about half. So padding top, padding bottom 25. That's starting to look a lot more like what we have down here. Again, there might be a few little discrepancies, but for the purpose of this lesson, I think we've got it pretty close to what it needs to be, and if you resize, you can see that's doing quite well, responsively as well. But as I mentioned in the previous lessons, you can start to see the page break at different points on all sections, if we bring it in a little bit. So with this one, the text gets a bit big and stuck together. The menu breaks onto a new line. That button falls over and goes past the section height. Down here, these columns get super tight and then a forced break on a new line, and of course this,form here, and the footer, we're going to need to make some changes to that. The way we can do that is by using what's called media queries. So right now, you can see a website or a web page that we've developed for desktop that works pretty well and is responsive to a certain point, but what we're going to have to do, is add in those media queries to make sure it looks perfect on every screen size. So in the next video, I'm going to show you how to do that, but I'm very excited that now we have transformed what was. I'm going to do this again just to show the difference. What was this to now this just by putting in some CSS styles. That is the power of CSS right there. So give yourself a pat on your back for coming this far. We've only got a little bit left to do in terms of media queries, then I'm going to show you how to do the mobile menu thing, which is quite common on mobile websites. Talk a little bit about bootstrap as well, and then we'll wrap up the class. So not long now, stick in there guys, and I'll see you on the next video.
11. CSS - Media Queries: Welcome back guys. In this lesson, we're going to talk about media queries, and we're going to use media queries to make our web page fully responsive. Remember, when I resize the page in some earlier lessons, it started to get a bit wonky, starts a break a little bit, and we can fix all of that with media queries. What are media queries? Well, there's actually a few things you can do with media queries. I've got the definition here from w3schools.com. You can use media queries to check up on many things like width and height, orientation, resolution. But in the context of responsive web development, we can use media queries to change the style rules of our elements based on a range of screen sizes. For the range of screen sizes usually we are talking about screen widths. Let's dive in and show you an example right away. The first thing that I known is breaking, and I like to put my media queries at the top of my CSS files so they load first. The first thing I'm noticing is, what I showed you before when I resize the window and I get below 1140 pixels, I start to get tight margins on either side, and I don't want that. Down here, it doesn't really show up, but up here in the header, it does. What I want to do is instead of have margin-left auto, margin-right auto because it's not taking effect anymore because it is smaller than the container. I want to actually fix a margin. What I just did there was inspected an element, and that brought up the developer tools. I'm going to keep the developer tools open for the rest of this lesson. The reason why is as I'm resizing, you can see in the corner here it comes up albeit very briefly with a screen width, so then I can actually see at which point screen widths are breaking. For this particular container, I know that it's going to be when it's less than 140 pixels. I'm not sure what browser you're using, but if you are using Chrome, you can look for the developer tools. I believe they are in the View menu, Developer, Developer Tools. I already have them open, so they just closed. Another view you can use to see those dimensions again, is to click here on the toggle device toolbar, and then you're on Responsive node. You can resize the window, and that width will stay up there. One thing you should note about the responsive view in Google Chrome developer tools is that it simulates a mobile environment. If you want to use it moving forward, before we get into the smallest screen sizes like down here where it's more like a phone or tablet, we're going to have to put in an extra tag in our HTML, and we're going to have to get to this anyway, so we might as well do it now. We need to put in the meta tag for viewport. I don't expect you to know what that is, but if we just type in, meta tag for viewport or viewport meta tag into Google, It'll come up for us. I've been to this link before, which is a pretty good resource from Mozilla. Here, if we scroll down, we can see the viewport tag that we need to put in that project. Before we put it in, what is it? Well, here's a bit of background if you want to read more about it. Basically, it forces the viewport to be the same as the screen size. If you're wondering why that wouldn't be by default, it's a way to make non-mobile optimized sites look in general better on narrow screen sizes. It's actually four pages that are not mobile optimized. Of course, in this day and age where developing all our websites is mobile responsive, so it's almost a given that we would want to put this tag in our HTML. A little bit of a got you there. It's just something we need to remember when developing mobile responsive websites. Make sure that the viewport is equal to the device width. That's all we need to put into our HTML. Let's go back to our styles, and actually build some media queries. I like to put my media queries at the top so that they load fast. How you write one is by using an at symbol media, screen, and then this is when you put in your max-width or min-width. You can also put in heights as well, but for the purpose of this lesson, we just need to do widths. Like I mentioned before, the margin of this container starts to break once where lower than 1140 pixels. I'm going set this to max-width, 1140 pixels. Then you open up the media query by using these curly brackets again. Then inside the curly brackets you can do a CSS rule like usual. I can create a rule for container instead of margin-left auto, margin-right auto, I'm going do margin-left, about 15 pixels, margin-right 15 pixels. If I save that, reload the page, you can see nothing's happened. Let me check this. If I go into the container and inspect it, you'll see that the styles are coming through, but they're crossed out. That means that they're being overridden by these ones here. If I untick these, you'll see that these ones now apply. Of course, we can't untick them for every website uses. We're going to have to figure out a way to fix that for all users. One easy hack we can use is exclamation mark, important. If you put that right after the value for the attribute, save that, refresh the page, then it'll override what we have here. Now, there's a whole hierarchy of specificity in CSS, which I went over in my course on CSS and HTML. If you want to learn more about the hierarchy, you can go check out that course, as I've mentioned before. Basically, we only need to put in an important In order to step above this rule in the hierarchy. Now, there's another way we can do this, and that is by putting this rule in another media query that doesn't apply on this screen size, because this will apply on every screen size because it's not within a media query. I might just do that instead for this particular instance, at least for demonstration purposes. What I can do is put a pretty similar media query above this one, but instead of max-width, I put min-width, and I will dial in the same value, but one extra. Now, I'm going to copy these styles over. The max-width can stay the same on both screen sizes. But I'm going to remove the margin-left and margin-right auto, and only have that when the screen size is bigger than 1141 pixels. If it gets lower than that, then it will be in this range, and the margin-left and margin-right will be 15 pixels each. If I save that, refresh the page over here, you can see the same effect. Drag this responsive window in a bit more and see what changes we might need to make on smaller screen sizes. One thing I've noticed is the footer starts to break onto a new line at about, let's dial it up and see, at 932, that's when this starts to break onto a new line. Now, we need to make a design decision here. What are we actually going to do when the screen size is too small that it can't have all of these with the same font size and padding. Well, what I think is most appropriate is to have the line break, but to have all of the text centered. You see here how GitHub floats to the left. We want GitHub to float in the middle, and we want the lines to be as even as possible, in terms of how many links they have on each line. Again, this is just my thinking. You can do it however you want, but that's what I would think is the best way to do this. I'm going to simulate it here in my developer tools. What I can do is dial down the max-width of footer-links until we start to see more of them dropped down into the second line. Currently, we're on 900, so it's going to have to be lower than that. Let's dial in 850 and see what happens. Hopefully, you guys are comfortable with using the Developer tools. I'm using them extensively throughout this course, obviously, because they are a great tool and you can experiment in real time with different styles. If you're not comfortable with doing it this way, you can always go straight to your CSS file, save, reload the page, save, reload the page, but this is a bit quicker. We have got a second one to drop down to a new line by bringing that max-width down. Now, we actually have an uneven number of links, so we're not going to have the exact same on each row, but four and three is close enough. I'm going to go up until the point when it breaks. That's 676. Now we need to remember to widths. I forgot the breakpoints, so I'm just going to create a media query framework for now. I'll just create a blank space to put that in. But we know we want fully links to update to a max width of that value. When do we want that to happen? If I reload the page, we can re-identify that point where it breaks to a new line. Using the responsive view, I'm dialing down the numbers and it looks like it's 932. We're going to put it in here 932 pixels. Refresh the page. We can see here that our style is being overwritten again. We're going to use that hack of important, and if I refresh again, you can see that once we get down from 933 to any lower, it's going to break onto two lines. Of course, I want this all centered. One thing I can do about that is put in a style of text align center. Again, this is just in my Developer Tools to check if it's working. Yeah, looks good. Let's go in here, and text align center. Reload the page to see that those changes have been made permanent. Yes, now we've got it broken up onto a new line. Before we scroll up and work on the smaller screen sizes, I'm actually noticing a little bit of an issue that you might have missed. That is that there's more space on the left here than there is on the right. This is not exactly sitting exactly in the middle, and this is going to become more pronounced if we lower the screen width. As you can see here, it's definitely off to the side. If I go back to 908 and I have a look at the inspector for the links looks okay in terms of the boxes showing up on screen. But if I go into UL, I can see that the padding, which is represented by the green box, is on the top, bottom, and left. We set the top and bottom padding explicitly, but for some reason there is a left padding. This must be something that comes standard with unordered lists. But it's something we can get rid of by putting in a rule, padding left 0. There you can see we've solved the issue. Of course, to make that permanent, we have to put it in our CSS file. I'm going to create a style for footer links UL and change the padding left to 0. Now when we refresh the page, that change will be permanent. Now that we have that extra space that was taken up by padding, we can actually change this max width if we want to. I can dial it down even more so that more of the links break onto the new line. That's 636, seems to be where it's at. I'm going to update that here. 636. Refresh the page. Now you can see our footer and our footer links online nicely in the center of the page. Going back to 908, and having a look at the page as we bring down the screen width, let's have a look what issues come up. This is getting a bit tight, but I'm not too worried about it yet. Going down to about 800. Was still okay. Going down even further to about 750. Let's have a look now. Everything's looking okay apart from right here, we can see this tidal break into two lines, so it's messing up the alignment a little bit. One way we can fix that is by reducing the font size. I'm just going to dial it down in the actual inspector. 22 should be enough to sort out that issue. But of course, I've got to figure out when that issue starts to happen. I'm going to focus on that heading, drag my window out, and it looks like it's occurring at a max width of 797. As always, I'm going to make a media query for this, and just as a little side note, guys. You don't have to make so many media queries, we could combine some of these actually. But this is just the way I like to do it. Traditionally, you might want to combine these or even have certain break points, like in Bootstrap, which I'll show you later on. But for me, I just like to go through and only fix things once it gets to that exact screen width. That's just the way I like to do it, feel free to do it the other way. That side note is over. I'm going to create a style for the blurb heading to make it 22 pixels. Font size 22 pixels, and because we're overriding a previous style where you have to put important on it, and there you go. At 797 were pretty good, let's drag in our window even more down to about 735. Yeah, 700 or 695. Now you can see that line break starting to happen again with the heading. But that being said, instead of changing the heading font size. Again, I think it's about time that this four column row turn into a two column, two row situation. The way we can do that is by doubling the row width. Obviously as we go into smaller and smaller screen sizes, there's going to be a point where the column breaks off to a new line. We might as well nip it in the back early and then we can fix this heading issue as well. What I'm going to do is experiment with 46.66 percent in my Developer Tools just to see that it works. You can see that it does. I'm going to choose a screen width when this starts to break again. It seems to happen at 732. Again, using media queries, max width 732, blurb width 46.66 percent, and important to make sure it overrides the previous style. Refresh the page. Now you can see that once it gets to 732, it'll break into two rows with two columns each. Another thing I'm noticing that we didn't really see before when they are all lined up next to each other, is we need a bit of margin on the bottom. Here you can see that that is a bit too close to the next section, and these two are a bit too close together. I'm going to give the blurb some margin bottom as well. Margin bottom 30 pixels. There you can see there's a bit more breathing room between the elements. I didn't have to put important on that one because we haven't defined a rule for margin bottom yet. 704, let's dial down to about, let's go with 50 increments, 650. I'm pretty okay with that. Let's go down to 600, form looking okay. Now we have an issue. We can see that our button is extending over into the next section. I'm going to dial up to see when this change happens. It seems to happen exactly at 619. How I'm going to solve this, is this text is looking a bit big anyway. I can reduce the size of that and that will bring that button back into the section. You should be used to writing media queries by now because we've written so many of them already. Just dialing in a max width of 619, and for the heading size, it's on 42 now, I think 35 will suffice. Let's dial it in in the inspector tools. Yeah, that looks pretty good. I'm going to go into main heading and CTA, H1 font size 35 pixels, and of course, important to override that previous style. Now if we refresh the page, that's going to be permanent. As you can see, once it reaches that point, the text gets smaller and we don't have that button going off into the next section. Another thing you'll notice is our menu up here. It's breaking onto a new line and it's not looking great anymore. That's something you can fix up now, but we're actually going to build a mobile menu specifically for mobile. I'm not worried about this at this stage, that's going to be the next lesson. But let's have a look at everything else on our page. Everything else is looking quite all right still. I'm going to keep going, 550. Now we're getting into the sizes that you might see on your phone. Here you can see that the text is a bit big, we're going to have that button breaking again. I can just tell. 450. That's fine, 400 and now you can see that button breaking into that section again. I'm going to pretty much do the same style, but just add a new break-point. At the break point of 404, I want the heading to get even smaller. I'm going to dial it down to 25, just so that it gives us some room to work with when we go into the even smaller screen sizes. I can basically copy what we already have here, change this to 25 and change the break point or the max width to 404. Now, if I refresh the page, you can see once it gets to that point where the button was going to break, it's now coming back into alignment. As you can see here on the services we provide, It's starting to get a little bit tight with these columns, so what I'm going to do is make it a one column row from now on. Let's make it at 404 just to save us writing another media query. What I'm going to do is go in here, blurb, width and let's make it 90 percent. That will make sure that only one goes on each row. We're going to need to put in that important tag as usual. Save, refresh the page, and there you go. Now, we have an issue with margin and then if you can see that but there's a little bit more room on the right than there was on the left, so what I'm going to do is give it an equal margin on the left of 5 percent and a margin on the right of 5 percent. Provided that there's no padding, 5 plus 5 plus 90 will add up to 100 and it should align nicely. As you can see, it has. Scrolling down, it's getting a little bit tight here but let me just go a little bit lowest screen size at 350. Remember ignoring the menu here. On our form, it's getting a bit tight, but everything looks okay. I'm going to dial it down to 300 and at 300, you can start to see how buttons get messed up. Right here, the send message and the work with us button is getting a bit messed up. Now, you don't want to optimize for screen sizes that are like ridiculously small, like 200. Once we get into these smaller screen sizes, I like to simulate the screen sizes of popular devices. On the Galaxy S5, this is what our website is going to look like at 360 pixel width. On the pixel 2 with a 411 width, that's what it's going to look like. At the pixel 2 Excel, that's what it's going to look like, and so on and so forth. If we go on the view for iPhone 5, you can see mobile phones are going as low as 320. I think that's about as low as it gets and that's when you can see that button messing up and also down here. What I'm going to do is work on that button next and maybe that might finish it off for us. If I do some experimenting here, if I lower the font size, maybe that'll work. Yes. So I'm going to do that. Let's figure out at what point. We can always just dial in 320, but I'm going to find the exact point that it messes up so that it's responsive on all screen sizes. Dialing it down, it looks like it happens at around 314 but for some reason, if we refresh the page on 320, iPhone 5, it gets a bit messed up. Let's just do 320 at media screen and max width 320. We're going to reduce the font size of big button to, what was it that we decided? I think it was 15 pixels and we're going to put an important on the end of that. Now, if I refresh the page, you can see that the buttons no longer broken. If I go down to here, this button isn't broken either. Now, what you might want to do is make the place holder and the text that you type in here smaller and maybe you actually want to test on mobile to see if you need to do that. But for the purpose of this class, I think we've got it close enough to mobile responsiveness. Let's have a look at our work by going back into responsive mode and dragging it from a wide screen size to a tight screen size. Let's do it section by section and have a final check to see if anything major breaks apart from the menu of course. Here you can see like it's going to break soon, but we put in those media queries. Again, as we go smaller and smaller, it breaks below 300 but I don't think there's any screen sizes that are less than 300, so we probably don't need to optimize for that. Let's have a look at our second section. As you can see, it starts as a four-column row, gets tighter and tighter. The heading gets smaller and then we break into a two-column row and then at a certain screen size, we break into a one-column row. Then for the form, the form we haven't had to do many changes to. I don't think we even changed anything about it. That's the beauty of flex and how we set it up. If we go lower and lower and lower, it continues to look all right. Maybe we want to reduce the text size of this address here and of course, the footer. If we go down to the bottom, we can see that once we are forced to break onto a new line, it breaks an additional two, links onto a new line, centers it in the middle and then as you drag inner and inner, it stays centered and it's looking okay. There you go, guys. That's our website now fixed up for mobile with media queries. Again, like I mentioned, the menu is the last thing we need to sort out. What we're going to do is have what's called a hamburger icon here, so that you can toggle the menu on and off and we're going to format it more nicely. That's pretty standard in modern websites and web apps. I think that's an important lesson to have. Hopefully, this lesson wasn't too long about media queries. Like I said, I like to have a lot of media queries but you can combine some of these as well and have less breakpoints, less points where things are happening. But how I like to do it is start wide, bring down the screen width and fixed as you go. Different strokes for different folks guys, there's no wrong way of doing it. Just as long as the website shows up well on all screen sizes, that is the most important thing. Thanks for watching guys, I look forward to seeing you in the next video where we're going to work on this mobile menu.
12. Creating a Mobile Menu: To finish off our responsive web page project, what we're going do in this lesson is turn this menu into a togglable mobile responsive menu. As we bring down the screen width here, I can see that it sticks around and breaks onto a new line and at a certain screen size, one of the items breaks on to a third line. Now, this doesn't look too bad without 1, 2, 3, 4, 5 menu links, but on some other websites we might have six or more menu items and once we get to a screen width around here, it starts to get a little bit crowded. It starts to be harder for people to press with their thumbs on mobile and we need a solution. A really common one, and the one we're going to be building out in this project, is something you've probably seen before. I'm going to open up my own website, christhedeveloper.com and you can see we've got a top level menu here that when we bring down the screen size turns into a hamburger icon, which we can now toggle the menu in a vertical fashion. That's the difference between desktop and a mobile version. In order to do this, what we're going to need is HTML and CSS of course, but we're also going to need JavaScript. Because if I'm toggling things on and off, I'm making the web page interactive and for all interactivity on the front end, we need to use JavaScript. The first thing I'm going to want to do is create the link to expand and contract the menu, and what we need for that is the hamburger icon. Now, just like we did with importing the font for Titillium web to use that font within our project, we're going to need to import what's called an icon font. An icon font is pretty much the same thing as a regular text font, except instead of these letters of the alphabet, we're going to have different icons. The icon font that we're going to use for this project and probably the most popular in the world is called Font Awesome, and you can access it by going to fontawesome.com. Just click on Start Using Free, and here is the easiest way to get it set up in your web page, just by copying this piece of HTML. I'm going to copy that and just like I mentioned, when we did the Google tag, we're just going to link it from an external CDN, which means that we don't have to download the font ourselves. There you go, it's a pretty long tag, there is some attributes in here which we don't really need to understand. This is going to import the file that we need in order to access the hamburger icon. Going back to the Font Awesome website, we just need to look up the reference for the hamburger icon. We can go into icons and there's over 5,000 of them, so we can filter here. The one we're looking for is called barrs and you can see here it's the first item. I'm going to click on that one and it's going to give me the exact HTML that we need to put in that project in order to make it show up. I'm going to click to copy and what I'm going to do is, within our header, create some space and I'm going to put it after the nav. I'm going to put in a link tag, and for now I'm just going to have it blank. I'm going to give it an ID of menu icon, and later on I'm going to put some JavaScript code in there so that it's actually going to do something when we click on it. Within that link tag, I'm going to put in the code that we just copied from there. If we go back to our website and refresh the page, you can see that we have the hamburger icon there, but it's right up against the logo and it's blue and it's not really formatted correctly. That's what we're going to have to do next, and the other thing is that we don't want it to show up on desktop EVA. I'm going to add a style attribute to the link and set it to display none. What this is going to do is make sure that by default it doesn't display when we load our website. Now of course we want it to display on a smaller screen size. What I'm going do is find a break point that aligns with one of our media queries just to make it easier, and then I'm going to make it show up on mobile. Opening our developer tools again so that we can see screen whips, I'm going to bring the window width in to a point where I think it needs to break into the mobile menu. Now, because we don't have many menu links, we can actually go pretty far without breaking into the mobile menu. On other websites, you might have six or more links, so you want to make the break point earlier or even hide some of the links. But for us, I'm just going to choose around 797. Again, you can choose where you want to put it, we could do it much later down here like 619, or up here at 797, it's up to you. It's just easier if we use a break point that we've already determined up here in our media queries. Going to our code, I said that we're going to switch over at 797 pixels. What I'm going to do, target menu icon and set it to display inline-block, and we need to make it important because we have already placed the style of display none on the actual element. We're going to need to use important in order to override that. Now refreshing the page, you'll see the icon doesn't show up, but if we bring down the width of the window to lower than 797, you can see it starts to show up there. Now, we need to put in a lot more styles to make this work, so let's get started with that. If we bring the screen we've again, the first thing I notice is that it's blue and it's small. In order to fix that color white and font-size, I'm going to set to 25 pixels. Now if you're a bit confused why we're using font-size, remember we're using icon fonts and just because it's not alphabetical letters, it still acts as a font within HTML. If I refresh the page, you can see it's looking a lot bigger and it's now white. It looks the way we want it to look, but the position of it is still a problem. Now, one thing we might be inclined to do is to float it to the right. Now you can see that it floats in between the image and the menu here. But the thing is on mobile, we don't actually want this menu to show up. We want it to show up vertical when we toggle this on and off. Another thing we're going to have to do in this media query is turn off the menu altogether. If we look over here, it's just inside this nav, which we haven't given an ID to, and we've only used nav once so it's safe for us to use the tag level selector. What we're going to do is set the nav to display none on this screen size. Now if I refresh the page, you can see that once we get to that screen size, the desktop menu will hide and then a hamburger icon will show up. We just need to give it some margin because it's stuck right to the edge here. I'm going to give it 15 pixels of margin on the right. Now, you can see it starts to come off the side. It's also aligning a little bit higher than our logo here, so you might want to give some margin to the top as well, maybe about 10 pixels. There's another way we could do this using position absolute, but I won't confuse you further. There's actually a few ways we could get that icon to show up. I'm going to actually reduce that margin top to five. I think that's a bit more in line. Sweet. Now that we have the desktop menu hiding on mobile, and instead of that, we have this hamburger icon instead, the next thing we're going to have to do is get this hamburger icon to actually toggle the menu. Otherwise, what's the point of hiding the desktop menu to begin with? For that, we're going to need to use JavaScript because each time we need to accept user input and change something on the page, we need to use JavaScript. What I'm going to do is copy and paste some JavaScript in because this is not exactly a JavaScript course. But I will explain what the function that we will be using is and how it actually works. First, before we actually create the function, I want to add an attribute to our link here. This attribute is going to be called on-click, and inside I'm going to add a JavaScript function. The JavaScript function is going to be called Toggle Menu, and to define a function we need to put open and closing brackets and a colon. Now what this is going to do in technical speak is add this function to the on-click event of this link tag. But really all you need to know is this function will trigger when we click on this link. Now to toggle this menu off and on we're going to need to tag it somehow. We could tag it using nav, so just a tag level selector, but there is a chance that there could be multiple nav tags. I'm just going to be a bit more diligent here and actually define this with an ID. I'm going to call this main menu. That's all we need to do in our HTML to get this to work. Now, for the JavaScript which I'm going to put at the bottom of the page. We can put some JavaScript in our HTML document using script tags, and then in-between I'm going copy and paste my function. This is the function that I have prepared earlier. It's called toggle menu. As you can see that matches the name up here, and what it's going to do is grab the element by the ID of main menu, which is right here, the nav and is going to check if it's currently displaying i.e. is the display style block. If so, set the display to none. If not, it's going to be set to block. Quite a simple piece of code. It's just going to toggle the display style from none to block based on whether it's currently in block or currently in none. A pretty basic function there. Now if I save and reload the page, now everything looks the same. But if I click this icon, you can see that it toggles the menu off and on. Now the issue here is that we've got the same menu as we do on desktop. It's the exact same desktop menu, just on a different screen size. The next thing we're going to have to do is change the style of this menu. What I'm going to do so that it doesn't affect the desktop menu is define it in this media query. In this media query, the menu icon is going to display. It is going to have all these attributes. The nav is going to turn off by default, but if we click on it, that then changes to display inline-block. To finish this off, we just need to give styles to this to make it vertical. We already defined an ID, so I can go in and target main-menu using it's ID and to get the results I want I'm going to make the menu full width, and I'm going to make each item in the menu. Using a descendant selector here, I am targeting list items within an unordered list within main menu. I'm going to set that to display block instead of inline-block. If I save that, refresh the page now you can see when you toggle on the menu, you're getting a vertical list. Now the issue with this vertical menu is that it's pushing our hamburger icon down as well. That's because all of our elements are floating. Remember we have set this menu icon to float right and if we scroll down to where we defined the nav, we've set it to float right as well. If these floating elements, if one changes the other one's going to change. We just need to fix this icon to the right rather than have it float. What I'm going to do is use position absolute, and instead of margin top we're going to set it to top 5 pixels and right 15 pixels. You might not be familiar with position absolute, but it's just a way that we can change the positioning of an element to fix it in a certain position and use top, right, left, and bottom to position it based on the window. Refreshing the page. Now it's going to be too far up, but at least it's sticking in the one place. I'm going to experiment with some tops here. Maybe 20 pixels, not much more. Let's try 50 pixels. Let's try 55. Now that I've experimented with that, I'm going to add 50 to our top, make it 55 pixels. There you go, guys. That's one way we can get around the float is by fixing it to this edge of the window by using position absolute. That's looking pretty good so far, but what I want to do to make it more obvious where the menu starts and ends is to give it a border. Going down into our main menu here, I'm going to define a border and it's going to be a 1 pixel, solid white line. Let's try that. Refreshing the page and then toggling it on. You can now see a border around the menu. But I don't quite like it on the sides and top, so I'm going to change that to border bottom so it only go on the bottom. Refresh the page, and now you can see that there is a line here to tell you that that's the end of the menu. We could also put borders on the line items themselves, but that looks okay to me. Maybe we want to actually put one on the top. Border, top, 1 pixel. Again, guys, a lot of this stuff is subjective, so if you want to go in there, refine it a bit more and make it look nicer and mobile, definitely do that. I'd probably want to add a bit more margin to the top. It's like season to taste. There's a lot of subjectivity involved and yeah, just use your own discretion of how you want it to look. But overall, I'm pretty happy with that. If we tested on desktop and mobile now, on desktop if we resize it's not going to show up. But if we refresh the page, it's going to show up and then if we go into smaller screen sizes we can toggle it on and off. If we have it on and then go back over into here, then we can see it turned on. If we wanted to fix that tiny little issue, we could by creating another JavaScript event that would detect when the screen gets bigger and then turn that menu on again. But I think it's a pretty small issue because many people aren't going to be re-sizing their window like this. They're probably going to load their window width at the width that they're going to be using it at. That's a little extra we can put in, but for the purpose of this class I think we've done enough to show the mechanics of how you would get this mobile menu to work and how you would get it to hide on desktop and then show up on mobile. That's it for this responsive web page design. I hope this hasn't been too long of a practical section for you guys. I do have a bonus lesson after this one about Bootstrap. If you're interested in how you can streamline and save time on creating all these styles, definitely stick around for the bonus lesson. The bonus lesson on Bootstrap is going to be about using pre-made styles. As you can see here, the bulk of this class has been writing these CSS styles. But using Bootstrap, we can write our HTML in a certain way with certain classes and not have to write as much CSS. If you're interested in doing what we've just done, been in a faster way using Bootstrap, definitely stick around. I'll see you in the next video.
13. Bonus: Intro to Bootstrap: Welcome everyone to our bonus lesson on Bootstrap, the most popular HTML, CSS, and JavaScript library in the world. What does that all mean? Well, Bootstrap is just a bunch of code that we can plug into our project that allows us to save time writing all of these styles, and also some JavaScript as well. If we go to getbootstrap.com or search Bootstrap in Google, we can get to the Bootstrap website. Now, if you want to dig around, this is not going to be an in-depth video on Bootstrap. Feel free to read the documentation, look at a few examples. What I wanted to do in this particular video is demonstrate how Bootstrap would affect our current project, and how we would change our HTML to use styles that are already built into Bootstrap to save ourselves time creating web pages from set designs or website mockups. I've shown you this a few times throughout the course, but if I go in here and delete the link or comment it out, so it doesn't apply anymore to the style sheet, and I refresh the page, this is what our web page looks like with no CSS. Now, what we can do is add in Bootstrap and see how that affects our HTML page, and then we can use Bootstrap styles and classes to make it look similar to what we had with Bootstrap. Let's go back to our Bootstrap Home and click on "Get started". Now, just like we've done with Google Fonts and Font Awesome, we can download the Font, the CSS, all of that ourselves, and then reference it. But I like to use the CDN, saves us having to download it onto our computer. If I just copy the HTML tag that they've set here, this will load CSS into our document. For the purpose of this lesson, I'm not going bother with the JavaScript. This is just the CSS. Once we load that in, I'm going to refresh this page and see what happens. As you can see, we are seeing some style changes already. The font is different, and we can also see that it's using our container as well. But in the Bootstrap version of a container, there are a lot more breakpoints and parts where it changes the width of the container. Going into our documentation for Bootstrap, let's recreate the header using Bootstrap. I'm going to click on "Components" here, and we can start to use some of the Bootstrap components. For the header, I'm going to find Navbar, which is the equivalent of header in Bootstrap. Here you can see the HTML required to make this Navbar here. In order to get ours to look like that, we wouldn't have to change any CSS because it's already built in. We would just need to put in this HTML. What I'm going to do is copy this, I'm going to place these side-by-side just so I can copy ul tags. Home will be the same set of features. We will put about. Then instead of pricing work, and then this is a disabled link. We don't really need that, so I'm going to delete that. Copy and paste these two again for our other links. Blog and Contact. I'm going to put Blog and Contact. Now that we have copied across menu items, we can just delete our old nav completely. If I save that, go back to our project, let's see how it has affected. Now you can see we've got this navbar created for us. It isn't exactly as our design, but it saves us a lot of time with creating CSS. As you'll see if you went into examples here, all Bootstrap websites look the same because they use the same styles, so you'll get a bit of a Bootstrap look. You might be actually familiar with the Bootstrap look now when you see it. If you see a website that looks like this, you might suspect it to be Bootstrap. You can actually check by going into the source code and checking for the reference to Bootstrap. Here you can see it right there. Again, it's not going to show exactly like our design, but what is a really powerful feature of Bootstrap is the column system. But before we get to these columns here, I want to fix up this button. In Bootstrap, you have Button styles right out of the box. I'm going to click "Buttons" here, and you can use a class of btn btn-primary to turn any link tag into a button that looks like that. That's what I'm going to do. Instead of class big button, I'm going to replace that with class btn, btn-primary, reload the page, and now you can see we've got a Bootstrap style button where if we put our cursor over it, cursor turns to a pointer, and also the color of the button changes, so that we know that it is a button. Like I said, however, it's the columns that make Bootstrap very powerful. In terms of services we provide, we can change this to a column system in Bootstrap. In order to look up how you would do that, we can click on "Layout" here, and we can learn about the grid. Here, you can see the different break points when a style end-up changing at these specific points. Remember, in the previous video I talked about how in my approach we used a lot of different breakpoints. In Bootstrap, they just have 1, 2, 3, 4 major breakpoints. Anyway, that's just a side note. If we scroll down, they don't actually have a section on rows and columns. I think it might be in a different menu here. Let me search in this box, rows, Grid system. Here we go. It's in the Grid menu item in Layout. Here you can see how it works. I encourage you to go read this if you're interested in Bootstrap. It's quite in depth, and it's a great resource to learn how it works. But basically, what you have is divs with a class of row, and then within them, you have divs with a class of col. Then to define what width you want those columns, you can put in another style which will tell the HTML element how big you want it to be. This is, of course, a responsive system. It's going to keep those proportions going as you resize the page. Here we go. Responsive classes. How that relates to our project is we have this blurb row, and then we have blurbs. So instead of blurb row and blurb, I'm just going to get rid of blurb and have it as row, and then change all the blurbs to columns. Because we have four columns that we want of equal width, and Bootstrap works on a 12-column system, we need to divide 12 by 4, and that'll determine what class we use. So 12 divided by 4 is 3, so we can put in a dash here and make it a three-column layout, and then put in the number 3. I save that, refresh the page over here. You'll now see that we've got some pretty nice column straight away. If we resize the page, look at this, they start to resize. At a certain point, it breaks down. Once it breaks down, however, we don't have to create new CSS rules. All we need to do is add more classes to our columns here. We want it to break onto a new line at a certain breakpoint. Using Bootstrap's breakpoints as reference, here you can see extra small, medium, large, and extra large. Let's say, at medium, we want it to be a two-column per row layout. In addition to col 3, have col md for medium and then instead of three, six; which is doubling that number. Now, when we refresh the page, it's changing the column. Unfortunately, when we re-size the page this way, it's not going to change from that col-mid 6 layout. What we're going to have to do is add large in between here. The code for largest is lg. I'm going to save that, refresh the page, and now when it's on that medium, it's going to be a two-column layout. Then when it's on medium screen sizes are lower, it's going to be a two-column layout. You can actually see that it breaks into a one-column layout later as well. Just dragging it out again. You can see that we've got those responsive columns without having to write any CSS ourselves is just about using the right classes up here. If you actually look at the Bootstrap file, it is huge. There are so many different CSS styles. It would take a long, long time to write it ourselves. There's a lot we can do with just classes and IDs in Bootstrap. All the CSS is basically written for us apart from stuff we want to customize ourselves. Like, for instance, the backgrounds that we had, we don't have those background colors right now. We would still have to write some styles ourselves. We still link an external style sheet and write our own styles on top of this. But as you can see, we can take care of some of the common styling aspects by using Bootstrap classes. Another thing I want to bring your attention to is it gave us a mobile menu by default. See how, when we go further in, it contracts. But the problem and the reason why it's not toggling is because we need to import that JavaScript as well. Remember, we only linked the style sheet, not the JavaScript. Just to fix that up quickly, I can copy all these JavaScript's links, go to my head, I'm going to expand out here, put in all these JavaScript links, save, go back to our project, and make it smaller. Now, you can see that our menu is toggling. I'm not going to go through the whole page and recreate it using Bootstrap, that would just take too long, and this is just a bonus lesson. I just wanted to show you that you could use Bootstrap to save some time, leverage some already created styles, and hopefully save you from writing such a big style sheet as you have done right here. The thing that Bootstrap really helps with is what I showed you, the column system is amazing. The columns and containers, we won't have to update ourselves. Bootstrap is very good at making everything fit nicely on different screen sizes. It takes care a lot of that responsive work for us. If you develop with Bootstrap as a starting point, you have a pretty good chance that everything is going to work well on mobile and desktop. That's pretty much it guys. That's the bonus lesson where we're talking about Bootstrap. If you want me to go in depth with Bootstrap, let me know. It could be an idea for a future class. Anyways guys, I hope that you've learned a thing or two about creating web pages based off designs. Again, if there's any particular area that has confused you, whether it be the JavaScript, whether it be the HTML CSS, definitely go and check out my other classes, if you're interested, you can get an in-depth understanding of what everything is doing. Unfortunately, I didn't have time to go over all the fundamentals of HTML and CSS, and stick with the class project. But if you are interested, you can go in and strengthen your knowledge using those classes. Once again, thank you guys for joining me on this class. We're going to wrap up with the conclusion in the next video. That's it, guys. Thanks for watching.
14. Conclusion: So that pretty much concludes this class on Responsive Web development. For your class project, I want you to take a website design, whether it's a template you found online or an existing website, and attempt to replicate it with HTML and CSS. Once you're done, be sure to share it with the rest of the class. Remember guys, translating designs into HTML and CSS, like we've done in this class, is a skill that will get better with practice. So I don't expect you to know exactly what HTML element or CSS style to use in each and every scenario. Most likely, it's going to be a little bit of trial and error, and of course, a fair amount of good old-fashioned Googling. That being said, if you need any tips or guidance, be sure to leave a comment in the discussion box below, and I'll do my best to point you in the right direction. Anyway, guys, thanks for watching. I hope to see you again on some of my other classes.
Christopher Dodd, Web Developer / Educator
