Beginner HTML & CSS: Build your own personal blog!

1. Welcome to the course!: Welcome to beginner HTML and CSS. I'm excited to have you with me in this course. My name is Chris, and I'm a web developer and also an experienced online course creator teaching thousands of certified students. This course will introduce you to both HTML and CSS, to the main building blocks, crane websites. If this is new to, you, don't worry. This course has been designed for beginners, and I've created this course with warm gold mines. Let's take beginners and give them the skills and confidence to go ahead and create their own websites from scratch. By the end of this course, you will build your own fully customized personal blog projects with multiple pages. The project will have a full size landing page to give a little information about yourself or your block. The theme and design in this blog is completely up to you. I encourage you to come up with your own ideas. This will then link to other pages, including your own blog page. Now only we'll create the site to look good on computer screens. We'll also make sure that the design is responsive too. This means it will change styles and layout. The different sized screens to look good on mobile and tablet sizes too. All the skills you will learn will be immediately put into practice to reinforce everything and also give you a real-world example of how they are used. After finishing this course, you will have the confidence and also the skills to build more websites from scratch using HTML and CSS along with some resources and fervor rennin to take away, to keep you learning long after you finish. This is just a taste of what you will learn throughout this course. Enroll in the course and begin your journey into the exciting world of building websites. 2. Required tools: If you're new to build a website, it can be common to think a technical subject like this will need a super powerful computer and lots of tools or software. This is not the case, however, as long as your computer can run a program such as Word, and also browse the Internet, you are good to go. To follow along with this course, there are only two main things you will need, and they are both free to use and download. First is something which you probably already have if you're watching this course, and this is a web browser. I'll be using Google Chrome for this course and it's also the one I would recommend. We will look at the Chrome developer tools later on in this course too. If you have any of the other main web browser, such as Firefox, Safari, Internet Explorer, or the newer Microsoft Edge, this is completely fine to use too. You may want to download more than one to test your website in different browsers. Next up is a text editor. This is a place where you will write your code. Here, you can see some popular text editors available, and also the links to each. First of all, there's Visual Studio Code, which I will be using, and it's also available for Mac, Windows, or Linux. It's free to download and use. Atom is also popular and is built by GitHub. It has a good back-in. It's available for Mac, Windows, and Linux, and also free to use. Sublime Text has also been popular for a long time and is a great web text editor. This is the only one here where there is a cost to purchase a license. However, it is free to download and also to evaluate. Currently, there is no time limits on the evaluation period. Again, it is available for Mac, Windows, and Linux. Bracket is also popular too and has a good life preview, meaning the changes as shown in the browser as you type, without having to refresh the page. This is also available for Mac, Windows, and Linux too. You can actually write a website with any text program, such as Word, but there are many benefits to using a dedicated editor for the web, such as color-coding, arrow highlighting, and auto completion, to name a few. As I said before, I'll be using the first one here called Visual Studio Code. Head over to there or another of your choice and download the software for your platform. Once this is done, come back in the next video and we'd take a closer look at what is HTML and CSS. 3. What is HTML & CSS?: During this course, we'll be building our project and learning about HTML and CSS. What exactly is HTML and CSS? Well, we start with HTML. HTML stands for hypertext markup language.HTML is the standard markup language for creating websites and applications. Currently, the latest version is HTML5 and in each version which gets introduced, there's new features added. We'll talk about these as well for the course. HTML elements are the building blocks of a webpage. Most elements consist of a opening and closing tag with some content in between. So this example at the bottom is a p tag, and this is used for adding paragraphs of text. We have the opening tag on the left and then a closing tag on the right with the forward slash. Then we place some content in between. For this example, it is just simply some text. We can also add some attributes to these HTML elements and it provides some additional information. We add these attributes to the opening tag. So we can see with the example at the bottom, we've added a ID attributes to this paragraph of text and then gave his ID a name of header text. We can then use this name of header text. Later on to add some CSS or even work with it using JavaScript. Next up we have CSS. CSS stands for cascading style sheets. It is a stylesheet language used for describing the look and also the formatting of a web document written in a markup language, such as HTML. CSS is used for styling, positioning, and layout. CSS3 is the latest version, which includes lots of new features, such as adding transformations and animations, to name a few. So as we go through the course, we'll learn lots more about HTML and CSS, but for now, just remember that HTML provides the content of the web page. Then we use CSS for any styling and layout. 4. Choose your theme!: We're just about ready to jump into starting to build our project and begin learning about HTML and CSS. Just before we do this, I'd like to take a moment to think about a theme for your project. On the screen here, this is a project which I will build in. Which will be a personal travel blog. Of course, you're free to follow along with me, and stick with the same theme of travel. However, I would encourage you to take a moment to think about something personal to you. It could be something such as a sports book, a blog about web development or coding in general, or even about your favorite food for example. The project which will build can be customized to suit pretty much any type of blog you can think of. Go ahead and be as creative as you like. Maybe write down a few ideas and once your idea has been finalized. We can then move on to the next video where we'll start our project. 5. Starting a web project: We're now going to jump straight into building our blog project. The landing page will be the main entry page for the website. It make sense to begin here. It is also the most simple page and will link to the rest of the pages we create too, such as the blog and the about me page. Creating a new website project is relatively simple. We begin with a new project folder. This folder will then contain all the files for our website, such as the different pages and also the images. I'm going to place mine on the desktop for easy access. You can add yours anywhere you find most convenient. Such as the documents. Yeah, I'm going to control-click or right-click and create a new folder. I'm going to call this the trouble block. So displays are anyway, find convenience. You should have already downloaded Visual Studio Code by now, or an alternative editor. To open up this project in the editor all you need to do is select your code editor and then go to file. You can select your folder from there. Or you can simply drag in the project folder and begin working. So you now see the project folder inside the sidebar. We can see the title of Travel Blogger. Now it's time to create the new file to contain the code for our landing page. Traditionally, the main or the default page in a website is called the index.html page. Let's create this now. So you can go to File and New File or Command or Control N to create a new webpage. You want to save this straight away as the index.html page. Making sure this has the HTML extension on the end, because the webpage will be an HTML. Also make sure this is saving inside of the travel blog project too. It's saved and you will now see the new page inside the project folder, in the sidebar. I'm going to just type in Hello into the index.html and then save that. If you want to open this web page up in the browser to see the contents, all we need to do is open up the travel blog folder and then double-click on the index.html. We can now see Hello! Inside the browser. So this is just plain text rather than valid HTML. But congratulations on getting the first web page open inside the browser. Now this project is setup. Let's now move on to look into how to correctly structure a webpage. 6. Structuring HTML pages: When creating HTML pages, which are to be read by the browser, it is really important we structure our code correctly. The first thing we need to do in our index page is add a doctype declaration. This declares which version of HTML we're using. HTML5 is the latest version, and the doctype looks like this. Open up the tags, use an exclamation mark and then doctype and HTML. Doctype s the early versions of HTML, were a lot longer and more complicated, but HTML5 is now nice and simple. The doctype is not case sensitive. But I always like to type it in uppercase anyway, then we have the roots HTML elements and that looks just like this. So most HTML elements, there is an open tag and also a closing tag which starts with the forward slash. This is the main route element, meaning everything else must be added between these tags, with the doctype being the only exception. Inside of the opening tag, I'm going to add a language attribute. An attribute is just some additional information about the elements. I'm going to be creating a site in English, so the language code is "en". So add the language attributes I am just going to set to ""en". If you want to use a different language, you can find a full list by searching for HTML language codes and then select your language from there. This main HTML element now contains two elements nested inside. First, we have the "head" section. Just like that. Again, this has the "opening" and also the "closing" tags. The section contains data sometimes referred to as metadata, which is information about the HTML document. This information is not displayed inside the browser, but it provides important information about your website, such as the site title, the description, and also links over files to which we'll look at later. Then other section is the body. So the opening body tag and then the closing tag with the forward slash. So just like a human would have the head section on top and then the body section. This section contains all the websites content which is displayed inside the browser, such as any text or any images. So basically the head contains our website's data which is not displayed. And the body is for our website's content which is displayed in the browser. We can now add some contents in side of the head section. First up is the metadata. Let's add the meta element. The metatag does not contain a closing tag. Inside here we can add an attribute called the character set. Here we can specify the character encoding for the web page. The most commonly used is called UTF-8. You can find the list of available character sets inside the resources. The last metatag I will add is for the viewport. So again, open up the meta tag this time, the name is equal to "viewport". The viewport is the visible area of the web page. In the past it used to just be a computer screen. But since smartphones and tablets, the viewport size can now vary considerably. So this is why this viewport tag is important. First, we add the content and we set the content width to be equal to the device width. This allows the width of the page to be equal to the width of the device that it's being viewed on. Then separated by a comma, we can add the initial scale to be equal to 1. This sets the zoom level when the page is first loaded. This can help keep zooming consistent when rotating devices from landscape to portrait, for example. Finally, I'm going to add the site title just underneath. So this has the opening and the closing title tags. With the forward slash for the closing tag, then we can have the title inside. So I'm going to call my "Chris Dixon's Travel Blog". Then give that safe. So this title element will be displayed inside the browser. So if we go over to Google Chrome and hit refresh, we now see the title appears in the top tab there. So this is the basic structure we need for any HTML page. If this is all new to you don't worry about memorizing all the issues yet. We'll use the same structure across all of our pages. So soon it will become more familiar. I know this part can seem a little boring. We're not seeing anything on the screen yet. But we'll move on now to adding some more content on the landing page. So next up we'll add the head section, which will contain the site title and also the navigation links to other pages. 7. Creating the header: Now it's time to begin adding a site header. This header will contain the site title and also the links to other pages. We can also reuses code and have a consistent header across all of our pages. To begin that, start in the index.html page and add this in between the body tags. Just under the opening for the body. We can open up the header tags and again, like most essentially opening and also the closure inside. The header element is not mandatory. However, it is an element provided chains, hey, HTML5. So make sense to make use of it. The actual element itself won't display on the screen. So we save and refresh. We still can't see any content inside the browser. But instead it describes to the browser which content it will contain. Let's go ahead and add some content between the header tags. Begin with the name of the site at the top of the page. We're going to add this within the H1 tags. So H one is a heading elements. Headings are added with tags from page one right through to H6. H1 being the top level of the most important cited in and H six being the least important. The text displayed is also larger for H1 and then gets gradually smaller right down to H6. Our site title is an important piece of information. So this is a good use for the H1 tag. I'm going to add the site title in-between of Chris Dixon's travel blog. Just give that save and then we can head over to the browser and then refresh. Now we see the heading at the top of the page. We'll make use of the over size of headings to as we go through these projects. Next, we can add the navigation links to the other pages. We also have a surrounding elements for these two called nav. So just underneath H1, I'm going to create the nav elements with the opening and closing tag. Both the nav and the header, are what we call semantic elements. Meaning they describe the content within them. This is because a search engine such as Google can see these elements and know exactly what they are. So header will contain these Site header and nav will contain the site navigation and so on. Most of the time we create our links using a list. So we didn't nav, we can create an unordered list by using the UL tags. An ordered simply means that each item in the list will not be numbered. For example, 123, and so on for each item. Then to create each item in the list, or in our case, the list of pages. We add the LI tags and then within the target we can add the name of each one of our links. I'm going to begin with the homepage. Then our second link, again within the LI tags is going to be the about me page and the third one is going to be for the book. So the name that we add in between these list items, is going to be the name which we see on the screen. If you go over and refresh the browser. We now see home about me and also the blog. You can see by default that is a bullet next to each item on the left. If want this list to be numbered, for example 1,2,3, we can change the UL tags. Do we have here two OL for a ordered list? This looks a lot different from the finish site, however, which we looked at earlier. This is because we've only added the HTML content. The CSS styling and layout will make this look a lot nicer in a later video. 8. Semantic HTML and layout: I want to take a quick step back from adding to this website, and take a moment to look at what we call semantic elements. Semantic elements are simply elements which clearly describe their contents, not only to the browser but to other developers too, looking at your code. Already in our index page, we have used some semantic tanks, both the header and nav are classed as semantic, as I tell the browser that the content between them, zebra header or a navigation section. This is a diagram of a typical website. The body contains all the content we see on the screen, as we already know. Here we see some typical sections of a website. Each section has a div elements. A div is a section or a division used to group content together. As you can see here, we use one for each part of the website, each having a id attribute, so we can add a styling using CSS. This is how things have been done for a long time and still are. Div elements are perfectly fine to use. In fact, we'll use them during this project too. Here we add some more div elements, this time nested inside of the existing ones. Again, this is fine and also very common. However, since HTML five, we now have some alternative elements to use, just like you can see here. Rather than using a generic div tag, we can now use these semantic or descriptive elements. Both the div and also all the new elements which you see here, still have an opening, and also a closing tag to surround the content, just like the header and the nav which we previously looked at. There's also main, which contains the main content of the website. This is not to be used for any content which is repeated in other pages such as sidebars. For example, the aside element we see on the right is often used for sidebars, and is usually repeated across the website, therefore it's best to be kept separate from the main content. As you can see, there is also a elements for the footer now too. So this is the example we've seen earlier, but this time with the newer semantic elements. Here you can see an article element which is ideal for uses such as a blog post or a widget, which has self-contained content. There is also a section element below too. This, as it sounds, defines the section of our web document. This is to group related content together. We also now have the nav element, which we've already seen. This is for navigation sections. Note that we have placed this inside of the header for this example. However, this is not required. I can be placed outside of the header or even nested inside of of areas too. We can also take things even further by reusing elements, such as the header or the footer to define the header and footer sections of an article, or even play sections inside of other elements, such as the sidebar. Remember though, this is just one common way to use these. They are not forced upon us in any particular way, and the use case will also differ depending on the style of website in which you are building. 9. Links, nesting & indentation: We've added our list of pages to the navigation. But if you click on them, nothing seems to happen. Is it because we've only added them as a list rather than telling the browser that they should link to other pages? We do this by adding a A element which stands for anchor. This can be added in between the LI tags, just like this. I'm going to first cut the home text and then add the A tags. This has a opening and a closing tag and then we can paste the text back inside. I'm going to do the same for the about me. I'm going to cut the text out and add the A element and paste this back inside and then the same for the blog and give that a save. Then we can add a element to the A tag called the HREF. HREF simply allows us to add a location to link to. We'll be linking to other pages, so we're going to add the names of our pages here. Add the HREF attribute inside of the opening tag. The index.html will link back to the homepage, so this is going to be index.html. This is a relative file path. I'm going leave the about me page empty for now as this will be a challenge for you later on in the course. We've not created the blog page yet, but we'll add this soon. To prepare for this, I'm also going to add the HREF inside here and this is going to link to the blog.html page. Give that a save and then if we go over to the browser and hit refresh, we can now see that the home and the blog is now turned into a link. We can see the underline and also the cursor changes to a hand symbol to show that this is a link. Let's click on the "Blog" and you can see the page isn't found because we haven't created the blog page yet. Let's go back and the Home link should keep us on the same page. With these links now working, I want to take a quick look at nesting and indentation. Already we've used both of these inside of our text editor. We've already talked about how we can nest elements inside of a list, just like nesting the NAV within the header section. With the NAV links we've just added, this is also really important too. If we take a closer look at this list item, we see we have the home text in the middle. Then working outwards, we see the A tags on each side of this text. In third row, we have the surrounding LI tags on the outside. These are then surrounded by the UL tags and so on. Not nesting properly is a common beginner mistake and one which often causes your website to not display as intended. This is something to watch out for and something which can avoid any problems. Indentation is how many times or spaces each line is set in from the left. Your text editor may do this automatically for you, like you can see mine has. You will often see indentation the equivalent of two or four spaces depending on your preference. For example, we can see both the body tags indented at the same level with this line here. Then inside, we see the next ones which you come across, which is the two header tags, and they're both in line too. This then continue depending on how many elements are nested inside of a list. There's no standard which we must follow when indenting. A law is just down to personal preference. However, using them correctly and consistently makes your code more readable and we can also see more clearly what content is nested inside. 10. Div tags and text: Let's now move on to adding the final HTML content to this landing page. Remember when we looked at the slides a few videos ago. We looked at descriptive elements and also using div elements. Well, I'm going to create a element using a div as a container for this main text of "Hi, I'm Chris, follow me on my journey around world." Lets begin by going over to the index.html. Below the closing header tag I'm going to create this div section. So the opening tag and also the closing tag. Then we can nest inside here a p element. The p element represents a paragraph of text and we can use it to add our text inside. So I'm going to add my text within here. Of course, add the texts which suits your blog. It can be absolutely anything you want. So "Hi, I'm Chris, follow me on my journey around the world," and then give that a "Save." Go to the browser, and then hit "Refresh." Now we can see the line of text is being added. We can also add more than one p element too and this will separate each block of text onto a new line, also with some spacing in between. So this is now all of the content you see on the screen. Compared to the finished blog though it doesn't look very pretty. We'll get into styling soon with CSS. First of all, there are a few elements which you can add to HTML to change the text. You will see on this finished version a few things. First, detect a split over two lines. Also the word 'world' is emphasized. This is all done with HTML tags. First of all, to break the text onto a new line, we simply add a break element where we want this break to happen. I'm going to add mine just after the name of Chris. So go over to the p tags. Then we can add a break element. This is one of the few elements which doesn't have a closing tag, so we're okay to leave it just as is there. Now if we refresh, we see after the word Chris, that the second line has been created. The reason why this doesn't have a closing tag is simply because we don't add any content inside. It's just added wherever we need it. Now we can add some tags around the world text, so it stands out. First, we can wrap the word world with m tags. So the m tag just before, and also the closing tag just after. The m element adds extra emphasis on the text and typically displays in the browser as Italic. We can see by saving that and then refreshing the browser. Now we can see the word has changed to Italic. Also, we can add a strong element. You can surround all this m section with the strong tags. So add it just before the opening tag and then just after the closing m tag. The strong element gives the texts strong importance. This is also typically displayed in bold. Again, this emphasizes the importance of understanding how nesting works. As we have the word in the center, and then the m tag surrounding it and then finally the strong tags on the outside. Then head back over to the browser and then refresh. You can see the text is a little bit bolder. It can be hard to see the strong element at the moment but it will be more visible later when we increase the size of the text and also add a background image. So with all HTML now in place. Let's now move on to adding some styling to this page. 11. Internal CSS and Google fonts: Although we're learning a lot about HTML so far, websites don't really begin to look good until we add some styling, CSS styles can change our website appearance from something like we currently have here to then something like this, which is the finish site. One wave, I mean CSS, is to add style tags to the head section of our documents. If open up the text editor and then go to the index.html. Go back up to the top head section, and then just below the title we can add the style elements. Just like this. This has the opening and also the closing tag. We can add any styling we want between these two tags. This way of doing things is called internal CSS. This is because the styles are only meant to be used internally on this page. Later we'll also cover an alternative way to do this. Then we need to choose which elements we want to style, by using a selector. A selector can be a name the of the elements which we've already used, such as header, p or li, for example. I'm going to begin by selecting the HTML, so add HTML there. Since HTML is a root element, all styles we add here will apply to the whole site. Any CSS styling rules for the selector needs to placed inside of a pair of curly braces, just like this. Since it's HTML selector applies to the whole page, a good use for this maybe to add the font which you want to use. To keep it consistent across the website, we can use the font-family property to set the font. You can see the text editor automatically gives some suggestions for us to use. I'm going to choose Arial as an example with the semicolon at the end. You will notice that it's three different names appearing, and this is the order of priority. First, we have Arial, and this is the font which we'll use if the browser supports it. If not, it will move on to Helvetica, which is the second priority. If neither Arial or Helvetica is available, the generic family name will be used, such as serif or sans-serif. This is one way to add fonts, another is by visiting a font website and selecting one from there. You can do a search for web-fonts if you want to take a closer look at some more, a popular one is Google fonts. I'm going to go out to the web browser and then search for Google fonts, and this is the website which I'll be using for my blog. Let's go down to fonts.google.com. You can see some of the popular ones. You can do a search or also narrow down by category. The one I'm going to use for my blog is called quicksand. I'm going to do a search for this and then hit "Enter," and you can see the quicksand one appears in the search. Of course, feel free to choose a different one if you prefer. At this, we just need to click on the red plus symbol. Then to add this to our website, we go down to the bottom and expand. Then we have the link to the CSS style sheet. This is a link to Google fonts, which allows us to use this in our project. So copy this full link. I'm going to use Command or Control C to copy this and go back out to the index.html, and then we need to paste this inside the head section. I'm going to add this, just blow the title and paste that in. We need to do this because we're not using a standard web-font. We need to link to Google to make this available within our code, back over to Google fonts. We then need to copy the line of CSS, which is for the font-family which we've seen before. So copy this and then if we go into the style section, I'm going to replace the font-family, which we used before and paste in this quicksand one. Now this non-standard font should work since we have the link above. Let's give that save and then refresh the browser, to go back out to the project and then refresh. Now we can see the style of text has changed. This means that the font is now working. Next, we can then change the font color. We simply add a color property to do this. Still within the HTML selector, going to add a new line, which is going to be for the color. Again, as you type this out, you'll see some suggestions by the browser. You can pick any of these colors which you prefer, or you can use a color picker for a larger range of colors. If we go back over to the browser and then head out to Google, I'm going to search for HTML color picker. A popular one is the W3Schools one, so I'm going to select that. Here we can select the color we like and also see lots of different shades and variants of this color. Just select one from the left-hand side, and then we can narrow it down to a lighter or darker shade. On the right, we're given the shades in what is called a hex format. This is what you can see on the right-hand side, and this is six digits with the hash prefix. We can then use this hex color within our CSS. I'm going to use a color value for my text of 1a1a1a. So let's go back over to the CSS and then with the hash prefix, I'm going to add 1a1a1a with the semicolon at the end. We need to make sure that each line ends with a semicolon and this is the case for all CSS properties. Give that a save and then if we refresh our project inside the browser, this should not change the color within the browser. The change is very subtle, so it may be difficult to tell. If you want to double-check this is working, we can change it to a different color, such as red and then refresh, and now we can see clearly that the text is changed. I'm just going to undo that change and then put it back to how it was. Well done if you've managed to get all this working. If not, check off your code carefully for any typing errors. Next up, I'll also want to show you how to use classes and IDs to select our elements. 12. Classes and ID's: We've looked at selecting elements by their tag name, such as HTML, header or url. There are also other ways to do this by using classes and IDs. Classes and IDs are attributes, which we can add to elements. Let's start by looking at how we can use an ID. If we go down to the opening tag for the header, we can add an ID attribute and give this a name of our choice. I'm going to call this the backgrounds and save. We can now use this name of background with the hash prefix. Just below the HTML calibrators. Because it's an ID, we can use the harsh and then select it with the name of backgrounds. One of the reasons why we would do this is because if we take the header as a selector, then the styles would apply to all the headers on the page and domain awareness. If we go over to the finished site, I want this background to add the gray background color, which you can see here. We're provided with a background property to do this. Back over in the CSS, we can add the background. I'm going to give my knee hex color of d8. We also have access to the same range of colors as we did earlier with text. Save that, then go over to the browser and refresh the project. Now we can see the gray background has appeared behind the whole header. If you look at the finished sites, we can also see that the same gray background is also behind the text. However, this will not be a good use case for an ID. An ID is supposed to be only used once for one unique section. If we wanted to use the same styles more than once, we could change this ID to be a class. Down in the header we can change ID to be equal to class. Then we can add the same class to the p text to other backgrounds to these two. So p-class is also equal to background. Then when it's change the CSS selector from a harsh to be a dot. This is how we select classes. Now if we save that and go back over to the browser, hit refresh. Now we've got the gray backgrounds in the header and also the text. So this is the difference between using classes and IDs with CSS. 13. Introduction to Flexbox & responsive design: The CSS flexbox is a relatively new way of laying out and aligning items on a website. It aims to make the process much simpler than it has been in the past. In the past, we've used hacks and methods such as; tables, floats, or complicated CSS to achieve the layer which you want. The flexbox has sold this by providing us with some simple, yet effective ways to layout and position items. We begin by defining a flex container, like you can see here. This allows us to set how we want the flex items inside to appear. We can set the direction, the alignment, and how much space is in between, to name a few. Also, we have the control of the individual flex items too. For example, we can set the order in which you want them to appear, the alignment, and also set how they should grow, or shrink depending on the available space. What does this all mean for our blog? Well, basically, it will be used to layout our website to be best suited to different site vices. Changing layout for different screen sizes is known as responsive web design. We're going to make our blog respond different site devices for a better user experience. Over on the left, we have a small screen device, such as a mobile or small tablets. The content here is typically stacked on top of each-other vertically. However, as we can see on the right, as we have more available screen space, we can add more content side-by-side. To achieve this, we simply set our flex containers, such as the header at the top, and another container for the rest of our content we want to control. Here, I'm using a div. To achieve this, we can set a CSS property of direction. Amongst those, flex direction allows us to set the child elements to be either column, which is stacked on top of each other, a row, which is left to right. To change a CSS property from column to row will use a media query, but more on that later. This is just a basic overview of the CSS flexbox. It does have a lot more properties and options than what we can see here. We will also look at a few more of these during the projects, but for now let's put this into practice by adding it to the heavy section. 14. Header CSS, margin & padding: We now have a better idea of how we'll use the flexbox to layout our website. Let's now get to work on the header section. So let's open up the text editor. So we're going to be designing the site with a mobile first approach. This means, we'll start to layout the sites for a mobile device first, then build on this for larger devices as more space becomes available. To do this, I'm going to shrink the browser to simulate a smaller device. So that looks about right. I'm going close this sidebar, just to give us a little bit more space. So within the style section. Let's begin by adding the header selector, to the CSS. So just below the backgrounds, going to add the header inside here, with the curly braces. So with smaller devices I want to align all the text into the center. We can do this by adding a text-align property. I'm going to set this to center. So save that and refresh. We can now see the text is within the center of the header. We also have the option of left and right too. Next, like we've seen in the flexbox slides, we want set header to be a flex container. We can do this by setting the display type, to be equal to a flex. Sludge refresh the browser. You'll see the content is now displayed next, whichever. This is, because by default the flex direction is set to row. This is how we wanted to look for large devices. But with smaller devices, we can set this flex direction back to column. So within the header section, let's add the flex direction property. Then change this back to column. Give that a save. Let's see how this is looking. Great. So can now see the content is stacked on top of each other. So do bear in mind as you go through the sites. These are the CSS properties, which I'm adding for my blog. Do feel free to make any changes you want to best suit your website. So next up I'm going to add some CSS to this h1 header title, contained within the header. So we've already looked at how we can style this by adding a class or an id, to this h1. Or [inaudible] h1 is like this. So let's add the header h1. This makes sure we are specific and only target the h1 within the header. This also works for over elements too. I'm going to add some margin and padding to this for spacing. Before we do this, let's take a quick look at what margin and padding is? Let's say we are placing in a article element into our site. I would want it to nice equals space around, like we see here. If we just add in this article, by default, it may look more like this. Bunched up against the outer container. To keep some space on the outside of the element. We can add some margin, just like you can see here. Also, we can add space to inside the elements. This is called padding. For example, if we added a image inside here, padding would apply inside of the article, creating space around the image like we can see here. So basically, the margin is outside the elements and padding is inside. So now we know the difference between margin and padding. We can see this in action with the header h1. If we look at the header inside the browser, we can see there is some space already above this h1 elements. This is being applied by the browser as a default. We can remove this by suddenly margin back to zero. So add this inside the header h1, give that a save and then refresh. Now you can see it's moved up, so the default margin has been removed. So this removes the default space above, but leaves everything tied together. We can add some extra space inside here, by adding a padding volume. So just below the margin, I'm going to add some padding. [inaudible] mine to 15 pixels. But of course, do whatever suits your blog. Then refresh. Now you can see we've got some nice padded space in-between the elements. The last thing I want to do in this video is to remove the default bullets, to the left of the list items and also center the text. We can now target the list items by using the LI selector. To remove these bullets, all we need to do, is set the list-style property to be none. There are also options to changes to other styles too. Such as a square or even an image. So give that a save and then refresh. Now we can see that the bullets have been removed. Let's now space this out. I'm going to apply some padding. Just below the list-style. I'm going to set this to be a value of 10 pixels. So now we'll have some nice spacing around each one of the links. So things are starting to look a little bit better now. But we can see that the nerve items still not in the center. So why is up? To better understand, we need to go over to the browser developer tools. So I'm just going to expand the browser a little bit bigger. Then I'm going to control or right-click and then go down to inspect. Then if we click on this little arrow in the corner. Then hover over until we see the UL up here. We can see we have this green section on the left-hand side, which seems to be pushing everything over, this green section. If we scroll down to the bottom, we can see the green part is the padding. So this means that the padding is being added by default, within the browser. So all we need to do is to override this inside the CSS. We can do this by selecting the unordered list. Then setting the padding back to zero. Then give that refresh. Now you can see that the links are now nicely in the center. So our header is now starting to look better. Now let's make this look even better by moving on to adding our background image. 15. Where to find great stock images: During building this project and also future projects. You'll always come across a need to find some high-quality images to use in your website. This blog is no different, and here I want to show you a few resources to find some good quality images. The first one is pixabay.com, and this is a website where you can find free stock images, and these are listed under the Creative Commons license. This means that it's free for commercial use, and we don't need to add any attribution to the offer or to the website. Finding images is simple. We can use the search facility or even click on the Explore. So for example, if we wanted a picture of a tiger, we could do a search, and then if we select one, all we need to do is click on the free download. Here you can see some information about the license. You can see that the image is free for commercial use and we don't need to write any attribution. So this is a good website to use for high-quality images. Another one is a website called Unsplash , and you can find this art Unsplash.com. The images which you can find on here are also free to use and again, you can have easy search facility or click on the images and then hit the download button. You'll also notice that there is a popup saying crediting isn't required but is appreciated to give the photographers some more exposure, and there is some text below to embed into the website if you didn't want at this. Another great resource is the Wiki media Commons website. Everyday there's a new picture of the day which you can use and all you need to do is click on the images tab at the top, and then we can select images by a category. The images on here are free to use, and you can also find out more information about the license on the left-hand side and the Welcome section. This just basically has some information, telling you how the images are free to use. Finally, we have a website called Shutterstock.com. You may have already heard this as its probably the biggest, and does have the widest range of images available. You can also download things such as music tracks and video clips to. However, there is a cost to this. Shutterstock is one of the ones on here which isn't free. You can check out the pricing plans to by clicking on the link here. Another way of finding images is a Google search. So that's also searched for our tiger. But one of the things to bear in mind is the licensing agreement. If we click on the images, one of the ways to filter this down to ones which are free to use it by going on to the tools menu link and therefore go to usage rights and the labeled for reuse with modification. If we select this unissued now fills down the images to ones which we're freely available to use. But finally, always check the license and agreement before downloading any images to check you are okay to use them for your use case. So all you need to now do is to select an image which you are going to use for the background of your blog, and then have this available to use in the next video. Or if you just want to follow along with me, the image is used in this course provided inside the resources section. 16. Background images and flexbox positioning: You should now have evenly images provided with the course, or your own images which you want to use. To add these images to your project, all we need to do is add them to the project folder. These can be placed anywhere, but I'm going to add these inside of a images folder just to keep things organized. Back over in the desktop I'm going to open up the projects. Here you can see I've got the images which are available as part of this course. Don't worry if you've only got the background image for now. All the rest of these images are going to be used later in the course for the blog. Within this trouble blog folder, I'm going to right-click and create a new folder called images, and then I'm going to drag all these inside of the images folder. For now we'll only be using this background image for the London page. Of course yours might be named something completely different, so just bear that in mind when we type this out inside the project. Now if we go to the index.html page, if we scroll down to the bottom, blow all the CSS. We will have this text of "Hi, I'm Chris, follow me on my journey around the world." I'm going to add two classes. The first one is going to be for the surrounding div container. This class is going to be called journey image, so this is the class name for the container. Then a second class for these texts of Journey texts. As you can see here we have two separate classes just separated by space and this is perfectly fine to use. Now we have these classes added, we can add the image to the journey image container using the CSS. Back up to the Style section. Remember this is a class so we need to use the dots. We want to target the journey image. We can add a background image in CSS with the background property, then we use a URL to provide a link to the file location. This is stored within the images folder and the image is called backgrounds dot JPEG. Of course if yours is named something different you'll need to change that. Then we're going to add some properties first of all, of no repeats. By default, images will be repeated horizontally and vertically. We add no repeat because we want just one full-size image. Then center sensor. This will sensor the image on both the X and the Y axis by default to replace in the top-left. This moves the image back into the center. Then finally we're going to add fixed onto the end, this keeps the image position fixed when we scroll and we'll take a look at these in just a moment. Give that a save, then if we go over to the browser and then refresh, we still see that no image has been displayed on the screen. This is because the background image will only be the height of the content inside of this div, which is the text, and this text however hides the image because of the gray background. If we temporarily go over to the style and remove the background, cut out and save and then refresh. We can see that the background has just about appeared on the screen. Let's add this back in. To get around this, we can set the height of the journey image in the CSS using the minimum high property, and we can add this just below the background property. To scroll back down to the journey image, and then we can add the minimum height of 100 vh. Minimum height can be a pixel value, a percentage, or by 70 to 100 vh. This set says to be 100 percent of the viewport height. The viewport is a visible screen of the device. Save that, and now if we refresh, we now see that the image is on the screen. One thing to notice when scrolling down in the browser, that the image is in a fixed position. This is because we set this to be fixed. If we were to remove this, we can see by refreshing the browser that the image scrolls with the rest of the page, but I want to keep mine fixed as I like to look at this. Let's continue with silent this image section. Below the minimum heights, I'm going to add the background size property. We'll set this to cover. The background size can be set to covert to make the image cover the full background area, and then we're going to set the display type to be flex, just like we've looked at in the header. This is also going to be the flex container for our texts, so save that and if we refresh, we can now see that the text is now placed on top of the image rather than sitting above it, like it was before. We can now use the flexbox to align this text in the center, both horizontally and vertically. To set the text line as vertically, we can set the line items property. Let's add this just below the display type. Align items into the center, and let's take a look at this. Refresh. Now we can see that this is aligned vertically to the image. Now, to send the text horizontally, we can use another flexbox property of justify content and also set this to be sensor, so save and give that refresh. Now we can see the text has now moved into the middle of the image. Now you can see how easy it is to align text using the flexbox. Next up we'll finish off by adding the final styles for the mobile view. 17. Final styling for small screens: So now we can add some styling to the text too. We get this text, a class of journey text. Let's add this to the CSS just below. So let's begin by adding the text line of sensor. Makes a little bit smaller. Then want to increase the font size to be 2ems. Here we use an m as the font size. We can use fixed sizes too, such as pixels but em is scalable unit, one em is equal to the current font size. So sinister 2em makes it twice the size it would normally be. So let's take a look by refreshing and now you can see the text is a lot bigger. Then let's add some padding to the text and this time I want to add 1.5em, and this works just like the font size is to be 1.5 times the padding, which would normally be. So now you can see we've got some space around the text. Finally the border-radius, and once that mind to be ten pixels. So if I refresh, this gives us a nice rounded edge on the outside of the container. So things start to look a little bit nicer. We also want to do something about these links to the color does not fit in with the rest of the site and I want to remove the underlying too. If you remember these links, a set with the a tag. So we target the selector in a CSS. So below the journey texts we can add the a. To remove the underline, we can set the text decoration to be known and this will remove the line from underneath each one of the links, and then we can also set the color as we looked at before and what a much the rest of the site by sending this to the hex value of 1a1a1a, and then refresh and now this looks a lot more consistent with the rest of the sites. The last thing we want to do now in this video is to make this gray background a little transparent, so the background can be seen through it. First, I'm going to go over to the CSS and up to the background property. I'm going to add a comment, which can be used with a forward slash, then star before, and then the opposite of a star and a forward slash, and then comment out this line. A Common is a way to tell a browser to ignore this code. We can also use comments to type in notes, both for ourselves and also for other developers. To add this see-through opacity, we can use an RGBA color in place of the hex type, which we just used. To convert this hex type colored to RGBA. We can use an online tool for this. So I'm going to go over to Google and make the browser a little bit bigger and want to search for hex to RGBA and its various tools you can use. I'm going to use the hex color tool.com. I don't need to enter a color. So the hex value which we used before was d8d8d8, and this will then convert it to an RGBA value. So copy this and go over to the backgrounds can paste this in to set the background to the new RGBA value, followed by the semicolon. RGBA colors have four values. We set the values of red, green, and blue to begin. Then the last value is for the transparency and this is a value between zero and one. Zero Being fully transparent. So I want to set mine to be no 0.7, gives us save and then refresh the browser. So now we can see behind the text we have the semitransparent backgrounds and the image starts to confirm. So we've now finished the styling for the small screen mobile view. Next, we're going to take a look at media queries to allow us to add styles to only apply on larger devices. 18. Introduction to media queries: Now how things looking like we want them on smaller devices. We can now begin to widen the browser to simulate how things will look on larger devices. We can then use a media query to only apply CSS when the browser is wider than which we set. Basically smaller screens will look one way and the larger screens can have different layouts and styles. If we go back over to Inspect and open up the developer tools, we can click on this divide here and make the website smaller or larger and we can also see at the top there that we can see the width of the browser. This allows us to see a screen width where our content starts to look out of place for larger devices. We can see for smaller devices this full width approach works fine. However, if we stretch the browser to around 1000 pixels, it looks like it's a little bit wider, things begin to look a little stretched and in need of a change. This is where media queries come into play. Media queries allow us to only apply certain CSS properties if a condition is true. For example, we can change styles or layouts for devices in landscape or portrait or we can set a minimum or maximum width to apply the media query. There are also many more conditions which we can set and there will be more links in the resources download to see some of these too. Let's head over to the stylesheets and begins add these to our site. Let's open up Visual Studio code and add our media query. To set a media query, we can use the CSS free media type using @media. Down at the bottom bellow are all of our styles, going to add @media and then just like the style in above, this had its own set of curly braces. Then after @media we can add some brackets to add the condition where this media query will apply. I want these styles to apply once the browser hits a minimum width of 1,000 pixels. Remember from before I was starting to look little overstretched of this size. This is why I've set it to 1,000 pixels. Feel free to change your size depending on your site. Then we can add our CSS styles within these curly braces, just like we always have done. I'm going to begin by setting the maximum weight for the body to around 1,600 pixels. This will stop the content being too stretched when we get to really big monitors. We can do this within the body. I'm going set the maximum width of 1,600 pixels. This will restrict the size of the website so things don't get really stretched on big monitors. Next we can set the margin values. I'm going to do this with margin zero auto. Zero adds no margin to the top and bottom. Also will automatically make the margin on the left and right to be equal meaning that the website will be in the center of the page when it's over 1,600 pixels. Save that and you won't notice any difference on my version because the screen is quite small. But margin zero auto will cause this to be in the center on large monitors. Now remember from the slides earlier we talked about how media queries can be used to change layouts using flexbox. Well, now is the time to see these in action. Over 1,000 pixels, we can change the flex direction in the header to row, just below the body and also make sure this is still within the curly braces of the media query. Let's target the header and then set the flex direction to be row. Then go over and refresh. This means on large screens, our header content is no longer stacked on top of each other. We now see that the content is side-by-side. If we go back below 1,000 pixels, we can see that the original styles still apply so these are stocked as a column. Back to the larger devices. This is better but the list items are still stacked. It would look better if the list items were in line. We can change the display type to be inline-block to achieve this. Let's target the header, list items and then all we need to do is to set the display type to be inline-block. We'll save that and then refresh. Now I can see we have the list items in line. By default, list items display type is set to block, meaning elements will start on the online. Inline-block will allow this particular element to be arraigned alongside each other. Let's keep working within this header section. Below the header li, I'm going to target two elements, first the header h1, which is the main site title and then separated by a comma, we can also target the header nav. This is just a convenient way of targeting two separate elements and applying the same styles to both. I'm going to set the flex value to be one. Set the flex to one for both the h1 and also the nav will ensure that both take-up an equal amount of space. Save that and then refresh and now we can see the header, title, and also the navigation it takes up the same space. The flex value describes how an item will grow or shrink to fit the available space. If for example, we set the nav to have a flex value of two, it would try to take up twice the available space of the h1. Now each element is taking up the equal amount of space, we can flow the header into the left and also flow the nav links to the right. Let's start with the level 1 heading. Header, h1, we've used text-align before for the center. But this time we're going to set the alignment to be the left and then refresh and now we can see the heading is pushed over to the left. The same can also be done with the header nav. But of course this time we need to set the text line to be the right. Give that a save and now we should see the links on the right hand side. This now gives us a nice looking header, each side taking up an equal amount of space and flow into the edge of the page. If we resize the browser down below 1,000 pixels, we can see that the original styles still apply. We still have the header stacked on top of each other. Now that's our landing page all complete. Congratulations on getting this far, and I'll see you in the next video. 19. External stylesheets: So far in our website we have added styles inside this head section, between the style tags. This is known as an internal style sheet and is a way of styling one particular page. There is also another type we can use called external style sheets. The CSS will write it exactly the same, but will place it in its own separate file. This has a few benefits; first, it reduces the size of the HTML file. It also allows us to separate the HTML from the CSS for easy maintenance. Plus, we can also reuse the same styles across multiple pages. To add an external style sheets all we need to do is create a new file inside of our project. Let's open up the project folder. This can be placed anywhere, but I'm going to add a CSS folder. This is handy if you want to add more style sheets later, so let's create a new folder called CSS. Then we can add our new CSS file inside a Visual Studio. We'll also open up the side bar and then we click on the CSS folder and then click on new file. We're going to call this the style.CSS. The file name is up to us but it must have the dot CSS extension. Now include all the styles from the head section of our index page. From HTML, select all the styles, including the media query all the way down. So cut the styles out and then save that and paste it inside the new style. CSS file. Give that a Save and now if we go backwards to the index page, we don't need the style tags anymore, so we can remove them. One thing we do need is a new link. This link is going to link to our style sheet and it's similar to the one we have above, the link to our Google fonts. Add this link in, it's just an opening tag, there's no closing tag, then at the rel attributes. This specifies the relationship between the current documents and the linked documents. In this case, it's a style sheet. Then we add a second attribute, which is the href. The href is the location of our file, and it's the same attribute which we used in these links below. Because this is in the CSS folder, we're going to add the css/style.css. Now if we save that and go over to the browser, we'll open up the project and then refresh. We can now see that the styles have still taken effect, but the background image is missing. If we go over to the style.css file, and then if we locate the background image, we can take a look why. It's all down to the image URL. The file path was fine before because the style was in the index page. This file path is relative to the file we're in, this means from the index page, we just needed to go into the images folder and the image was there for us. Now this style is inside of the css folder. We need to use the dot-dot slash in front of the file path. This dot-dot slash tells the browser to look up one level, meaning it will jump out of the CSS folder and into the root level where the index page is. Once we're back at the index page level, we can then go back into the images folder as before. Save that and refresh, we should now see that the background image is back in place and our external style sheet is now working. 20. Adding the blog page: With the London page now completed, now let's move on to creating the blog page. A lot of the basic structure, such as the head section, is similar across all the website. We will also be reusing the same habitue. This means we can duplicate or copy and paste the existing index page to get us started. Let's do that over in our text editor. I'm going to Command or Control C, and then Command V to copy and paste this index page, and then we want to rename this file, the blog dot HTML. Remember too, as we build this blog page although I've shown you techniques to use while applying them to my site, feel free to customize them if you wish to save your project. Now we have two HTML pages, we have our index page for the London page, and then the blog page, which we're going to link to. In fact, all the HTML code we have for the London page will also apply to the blog. If we take a look at the finished version and then select the blog, the page is just the same as the London page with a blog just added below at the bottom. The image is not the full size of the screen either, but this is something we can fix in the CSS. Let's go back over to the blog dot HTML. If you remember from before, we also have the link to this blog dot HTML page already in place, this means we should now be able to click on the link in the browser to see the blog. Select a blog at the top, and although this is the same page, we can see that this is now selected the blog dot HTML. Here we can also see the benefits of switching to an external style sheets. We now have two HTML pages sharing the same styles. Next up we will start to create some articles to display the blog posts. 21. Creating blog posts: In this video, I'm going to concentrate on creating the blog posts. As you can see here on the final site, if we resize the browser, we see the layout switch for small screens to full width. We already know we can achieve this using flex-box. To do this, I'm going to create div elements with the class of rubber to surround both the blog and also the sidebar. We can then set the state to be the flex parents and switch the content from column to row on different size devices. Let's set this up now. Let's go over to the blog dot HTML and then go just below this div with the class of journey image. I'm going to create a new div. The opening and closing tags and then give us a class of wrappers. Then we're going to have two sections within this, it's going to be a main section which is going to surround the blog posts. Then it's going to be a side section, which is going to be for the sidebar. Let's create these two sections now. First up we have the main section. Then just below this we have the side section. Add these both in and make sure they are nested inside the div with the class of wrapper main on the side along with article, which we'll use next for all semantic HTML elements which we looked at earlier. Now we can add the article to be the container for the blog posts. All the blog posts which we create will be within this main section. Let's add our article. Also, I'm going to reuse the class of background to give the blog post the same consistent gray background as we've already used. Let's add this class of backgrounds. Now it's just a case of building up this blog post with elements which we've already used. Let's start with the header. The header section is going to include information such as the name of the blog post, also some information about the author and tags. Let's add the header at the top. Next, within here I'm going to add a h 2. This is going to be slightly smaller than the main title of the top of the page. This is going to be the name of the blog post, as you can see here. As an example, I'm just going to call this the blog post 1, and then I'm going to create an unordered list to then create the information about the blog post such as the database created, the tags, and also the offer. Just below the level 2 heading, let's add the unordered list. Along with some list items, we're going to begin to offer. Then I'm going to use the em tags to add some extra emphasis to the author's name. Between em, I'm going to add my name. Let's give it a save and see how it is looking. If we go back to the project, select the blog, and then scroll down. Now we have the author shown at the bottom as well as the title of the blog post. All I want to do now is just simply copy, this list item and paste it in two more times. The second one is going to be for the tags. I'm going to add just a few tags inside here. That's fine and then the third and final one is going to be created date. Let's just add five days ago as an example and give that a save and see how this is looking. I'm going to set all the header information, outside this header section, but still within the article. I'm now going to create a new section. This is going to be for all the rest of the blog information, such as the image and also the text. Before we've looked at adding an image via the CSS background property. We can also add images using the HTML image tag. This is a self-closing tag, meaning there is no closing tag to it. So all we need to do is add the image elements and then add a source. The source is going to be the location of the image. Remember from before that we added all the images inside an images folder, select the images folder, and then I want to start with the Venice.JPG image. If you're not using the images provided with this course, now would be a good time to go and grab 4-5 different images and place them inside your images folder. I'm also going to add an ALT attribute of Venice image. This is basically a fallback for if the image can be displayed. It's also read by screen readers too. It's usually recommended to put this alternative text in in case the image can't be displayed. Below this you want to add the text for the block within the p-type. Of course, feel free to write out a blog post if you want. But I'm just going to add some sample text, and we can do this by visiting a site called Lorem Ipsum. I just do a search for Lorem Ipsum and then select lipsum.com. This will give us some sample or dummy text which we can use on the website. All we need to do is go down and select as many paragraphs as we want. I'm just going to change this to two paragraphs and then click generate. Then this gives us some sample text which we can copy and use within our project. Paste this in right between the p tags and give a save. Let's see how this is looking now. If we go back over to the blog and refresh. Great. As well as the header we'll also have the image and also the sample text below. The last thing we want to do is add a link to the Read More section. As you can see on the finished site here. Just below the sample text and create a little bit of space here. I want to use A tags because this is going to be a link with the href and I'm just going to keep this empty for now. This will be useful to link to the full blog posts on its own separate page and then the closing a tag. The text of Read more. Let's take a look at this now in the browser, refresh. Never goes now will have the link at the bottom. This article now in place, I'm just going to simply copy and paste this in a few more times. Copy the full article, then paste it in one more time. I'm just going to change to blog posts 2 and also change the image from Venice to hike.JPEG. Then browse article make some space and paste in again, so blog post free. This time the image is going to be lake. Let's say that I'm going to do this one more time. It's great for articles paste it in and change this to be blog post 4 and the final image I'm going to use is the elephant. Save that and add your images in and then go to the browser once that's done, and check this for blog posts. So the first one, second one, the third, and also the fourth, each with their own unique image. Now we can see the four blog posts in place. The styling needs a little work and the layout will not yet be responsive. But this is fine, for now we'll fix this in a later video. 22. Sidebar social media icons: We now have the main section completed with the blog post in place. Now, we want to move on to the sidebar and add some social media buttons. Social media buttons are not too difficult to apply. The are certain websites which allows us to use social media icons in our site free of charge, such as Font Awesome which I'm going to use on this site. Let's start by creating a new section for the sidebar. Let's go over to the blog.html. We'll close this sidebar to give us some more space. Remember from before, we've already created the side section for the sidebar. All we need to do is add a new section. Then within the opening tag of the section, I'm going to add some classes. First of all, I'm going to add one called sidebar widgets. This will allow us to style it with the CSS soon, and also the background class to keep the background color consistent across the site. Then I'm going to add a heading using the h2 tags. Then a text of follow me on. Then we can add our social media icons below. I'm going to add a new element called the hr. This is for a horizontal line, which we can see if we go to the browser and then refresh. Let's go up to the sidebar. In fact, it was down at the bottom because we haven't added any layout yet. We'll see the text of follow me on and also the line across the bottom. This will separate the text from the icons once you put them in place. As I mentioned before, I'll be using a site called Font Awesome to provide the social media icons. We can find these by visiting fontawesome.io then to get started. We click on the Get Started icon at the top and then scroll down. If you go down to Download & Customize, click on the Download button. There is a paid version too but all we need to do is click on no thanks. Just download Font Awesome 4, that should only take a moment to download. Once this is done, we can go to the downloads and then unzip the Font Awesome package. This one place on the desktop for now then rename this simply Font Awesome. Remove the version number. Then if we go into our travel blog projects, we can place this inside of the CSS folder just like that. This is because this is just a style sheet like we've already added for our own custom styles. Let's add this just like before inside the head section. Let's open up the project again. Go back up to the head section and add these just above the custom stylesheets. Let's add the link, rel attribute of stylesheets. Then the href to link to the file the file is inside the CSS folder. Then within the CSS folder, we have the folder of Font Awesome so forward slash. This also has its own CSS folder within it. We can see that by selecting the CSS, Font Awesome, and then as a secondary CSS folder inside there. Then the name of the file that we want to link to is fontawesome.min.css. The order of linking these stylesheets is also important too. We always want our own custom stylesheets at the very bottom. This makes sure our own styles we add are added last. Therefore, it will override any of the other styles from the stylesheets above. Now we have the icons added to our project. Let's go back to Font Awesome and see how to use them. Back over to fontawesome.io. We should get rid of that. Then if we go up to the icons, we can do a search for any of the available icons. For example, let's search for Facebook. We can see the search results appear at the bottom. I'm going to use the Facebook official, click on that. Then if you scroll down, we can see a HTML element which we can use. Copy this i element and then back over to the blog.html. If we go down to the aside section. Then just below the horizontal rule, I'm going to add a div this time with a class of social. We can use this in the CSS. Close of the div. Then all we need to do is paste in the new elements. Save that. Let's check this is working okay by refreshing. You can just about see the Facebook icon down at the bottom. I want to paste this in three more times. The second one is going to be fa-instagram. You can do a search on the Font Awesome website for any of these links. The next one I'm going to use twitter-square. Then finally the pinterest-square. Check we've spelled all these right by refreshing the browser. Great, so now we can see the four icons at the bottom. They are quite small at the minute, but we can make these a little bit bigger with a Font Awesome class of fa-2x which I'm going to paste this in all four of the links. This makes icons twice the size they would normally be. It looks a lot better now. I've placed these icons in the sidebar. I'm not going to link to any of my social media sites. You can go ahead and do this by surrounding the i element with the a element and provide a link just like we're doing in the links in the header section above. You can then add a href attribute like we did in the header. The href attribute is just the same as we've used in any of the above nav links. However, it's a link externally. We do need to link to the full URL. Once you're done, make sure to give that a save. Now our blog page is coming along well. Next we'll finish off the HTML by adding the last sidebar widgets. 23. Introduction to tables and HTML entities: Taking a look at this finished version of my site, I'm now going to add the sidebar widgets with the countries to visit. This is a widget would suit my blog. You can of course choose soon finance if you prefer. However, the techniques which we'll cover in this video are useful fundamentals to know of. The layout of the widget will be created with a HTML table. Tables used to be used a long time ago for laying our websites. This was before CSS took over for layout positioning. Also long before the flexbox, which we're now using. Using tables for layout is now considered bad practice. However, it is still useful for laying out data such as our list of countries or even something such as a table of scores or results. To begin, let's add our sidebar section, just below the social media section. Add a new section inside here and then inside the opening tag we can add some classes. Just like before I'm going to use is consistent sidebar widgets on background. We'll go on to use knees later on in the course. Inside the section, we can then add a table with the table elements. This also has an opening and closing tag. Within here we can start to create our table. Inside here we could add some table headings. For example, in a table of users, this will be the top row in bold, which are the first name, a last name, and an email for example, at the top of each column. Let's create this header with the thead. Within here we use the tr elements. Tr is used to create a new row, we can use more than one row by only need the title of countries to visit. I'm just going to keep this as one row. Then next to it inside here, you see th elements. This is used for the header data. Opening and closing tag and that within here we can ask the text that we want to add as the heading. I'm also going to places within a h2 psych inside, just to keep the name consistent with the over social media widget. Let's add to the h2 in here with the text of countries to visit. Then just after this table head section below here, we can also add the table body with tbody. If you're struggling to remember all these tags, don't worry. There's a head section and also a body section, just like we've already used in his website, where we have the head section at the top and then the body section just below. Scroll them back down to the table. We can then start to add some data to this table body, such as the countries which want to visit. Just like this table header, the body data is placed inside rows two. We use the same tr for each row. Each cell inside of the row uses td, for the table data. Here we can start at our countries or whichever data you want to put in your table. I'm going to start with the country of Mexico. Then within the same row, I'm going to add a new td for some more table data. Then inside here, got to use the ampersand symbol, the harsh then one, zero, zero, zero, three, followed by the semicolon at the end. The first cell is for the country name. The second may look a little strange. This is what we call a HTML entity. HTML entities are used to display characters or symbols, just like the tick we see on the finished sites, just over here on the right. Also entities are used to replace certain symbols, such as the less than or the greater than symbol. Just like this. If we were to just uses less than or greater than symbol, the browser may think that this is the start of a HTML tag. This could cause problems. As an example, less than is replaced by ampersand lt, followed by a semicolon. Let's give that a save and then see this in the browser. If we refresh, go back down to the table, we can see that there's our tick, which is this code here. Then our less than symbol, we can see above just here. We can use a greater than symbol by replacing lt would gt then refresh. Now you can see that the symbol is now the greater than. Let's remove this. Also have access to many more Unicode symbols, by visiting a website called unicode-table.com. Here we can see a list of some of the popular characters which we can use. Or we can do a search to, and we need to do to add these in, is to select it and then copy the HTML code and add this to our project. Now we can see the info on this first row. All I'm going to do now is copy and paste in some more rows. Copy the tr section. How many times you paste this in depends on the info you need for your theme, paste it in below and then change the country. The next one we're going to add is Egypt. Then we're going to keep going with the country's, next I'm going to add Spain, then China. I'm also going to remove the tick because I'm not been to China, paste it more, changes to Portugal, Dominical Republic, and then Thailand. Of course add as many rows as you want for your blog. I should add one or two more in, after Thailand I'm going to France, and just a couple more, we'll add Canada. I want to remove the tick from Canada. Then finally the last row I'm going to add Australia. Give that a save, and then let's check this out in a browser. That's looking good. Now we can see our list of countries all on their own separate rows. We've also got the HTML entity as a tick. With this table now finished is now completes the A-side section for my blog. Also, this is the final HTML content now added. We can now move on to the next video. We will add some CSS styling along we'll look in at pseudo-classes. 24. Blog styling and psuedo classes: In the finished version for smaller devices, you can see some differences to what I have so far without CSS. The final version, as you can see here, has the centered text, it has a full width image, and generally better spacing. Stretching the browser wider, we can also see that the immediate query is used to switch the view from the post being stacked on top of each other, to having the blog posts and side bar side-by-side. To do this layout change in a blog.html page, we already have a surrounding div with the class of wrapper, which is just above the main section here. This will be our flex container. Then all we need to do is to change the flex direction from column to row, for larger screens. This is nothing new, we've already seen this for the header. Let's begin in the style dot CSS to make this work. Outside the media query, we can target the class of wrapper. Add these just above the media query, so dot wrapper, because it's a class. Then as we just mentioned when it's set the display type to be of flex, with a flex direction of column. Because this is outside of the media query, this means that the flex direction of column will apply on the smaller screens. In just a bit, we can change this flex direction back to row inside the media query. Let's save and see how this is looking. Scale the browser down so you can get a better idea. Now I'm going to add some padding and margin, just to give the article a little bit of spacing. Let's select the article and also the sidebar widget class. This is the class which you give to all the sidebar components. I'm going to add some padding inside, of 15 pixels, and then also some margin, of 15 pixels on the top and bottom, and then zero on the left and right. This will add some padding inside of the div and then some margin above and below to separate the blog posts and also the widgets. Let's give that refresh. Now you can see this margin has been applied in between each one of the posts. Remember, each one of these blog posts also has its own header section. We're going to add a background color for this blog header, but we don't want to use the header selector because this would also target the header at the top of the page. To do this, just below this article section, we're going to target the article header, just like that. Using this greater than symbol, select only direct children. In this case, this will only target the header elements, which is a direct child of a article. Then we'll set the background color to be the hex value of d8d8d8, save and refresh. Now you can see this header section has a slightly darker background. Then the image, if we stretch the browser a little bit wider, we can see the image doesn't quite fit the full width of the page. To fix this, we can select all images and set the width to be 100 percent. Then refresh and take a look at this, and now we can see the image flows to be 100 percent of the container. I'm also going to add a little bit of margin to the Font Awesome icons. If we make the browser just a little bit smaller and scroll down to the bottom, I'm just going to add some margin to the left and right, just to space out these icons a little bit more. Remember Font Awesome had the i elements, so we can select it with i, so margin zero on the top and bottom, and five pixels on the left and right, and then refresh. Now we can see we've got better spacing between the icons. Our mobile-first styling is almost complete, but before we move on, I want to introduce you to CSS pseudo classes. Pseudo classes are used to apply styling to a certain state. A common example is changing the color of a link when a user hovers over it. We can select the links with the a elements, and then we use a colon and then add to the name of the pseudo selector, which in this case is hover. Every time the user hovers over a link, we're going to change the color of the link. Then let's set this to a blue color and give us a go. Let's go back up to the top section, and now we can see when you hover over any of these links it now turn blue. Then finally, I'm going to look at the nth child pseudo-selector. If we scroll down to the table of the visiting countries, I want to add a little bit more padding to the left of these ticks. If we only target the td elements in the CSS, this will also apply to the td element for the country too. To add this padding to only the second one on each row, we use the nth child pseudo-class. This takes in a number as a parameter in the brackets. This number in our case will be number 2 to select the second td elements. Let's take a look at how we can do this. Let's target the td, and again separated by a colon, we can add nth child. As I mentioned before, we want to select the second child and then we want to add some padding only to the left of 30 pixels. Let's save and see how this is looking. Now we can see that the ticks will be moved slightly over to the right. This is only applied to the second td, we've got no additional padding on the first one; the countries, that are also hover which has first child and last child. You can find out more about these in the resources download. This now finishes the styles I want to add to the mobile-first view for my blog. Hopefully now I've a great looking blog too for small screens. Now it's time to move on and add the final styles for larger devices. 25. Blog styling for larger devices: Your blog should now be shaping up really well. We have CSS styling now completed for mobile devices, and it's now time to complete the CSS for larger screens including a layout change inside of the media query. If you remember from the last video, we set the container or the wrapper to have the display type of flex and the flex direction of column, which stacks all elements on top of each other. For larger screens, you want the blog posts and also the sidebar to have a flex direction of row. Let's do this inside of the media query. Just under the header nav, I'm going to add a comment. Remember from before that we mentioned that comments can be added to add notes to ourselves. This is ignored by the web browser. So this is the blog section now. We're going to select the wrapper and change the flex direction to be row and then refresh. Now we can see instantly that the blog posts and the sidebar is now in a row. Now we're going to set the flex property. We're going to set the main section, which is this blog part, to have a flex value of three, and then the sidebar to a flex value of one. This means that the blog section will take up three times the available space of the sidebar. Let's do that now with the main selector. Remember this is the blog posts, the flex value of three, and then the side section can have the flex value of one. We'll save that, give it a refresh, and now you can see the size has changed. I'm going to add some margin to the left of the sidebar too just to create a bit of space between a sidebar and the blog posts, so margin-left of 15 pixels. Okay. Good. That looks a lot better now. Now I'm going to add some CSS for the blog post header. We can target this with article header. So therefore, this only applies to the header within the article. I'm going to use the flex box property of justifying content. This defines how we want the elements to be spaced out. One of the examples is space between. Save that and give it a refresh. Now we can see this adds space between the title and also the unordered list. We can also change this to space around. Let's take a look at this. Now we'll get equal space all around the elements. If there was more elements inside this header, they would also be equally spaced too. Justify content does have some more options too and there are some links available inside the resources. Now that's my blog now finished, and I'm happy with how things are starting to look for smaller screens and also larger screens. Let's just shrink down the browser and see the media query in action. Once we hit 1000 pixels, we do get a layout change, so that's great. I encourage you to keep working on your own CSS too and change things to suit you. Even play around with the size of the media queries and the layouts if it works better for your content. Even with this blog now complete, I still want to cover a few things which are useful for you to know. I will cover these in the upcoming videos. 26. Browser support: We've all blogged now finished. I'm now going to take a little step back and coding, and cover some things which you may find useful during building the blog, we used a lot of HTML and CSS. One of the challenges of developing websites is the fact that different browsers can display our websites a little differently. It's always best to test your website on various browsers, such as Chrome, Safari, Firefox, and Internet explorer, along with smaller device browsers to check it looks good on the Mall. Also, another consideration is some users will be using different versions of the same browser. May have the latest version, while some will have an older version. There is a useful website available called caniuse.com. Let's head o to that. This website gives us information about browsers pause for different versions. For example, if we start by searching for flexbox, and scroll down, we can see under the browser sport that it's mostly green. For example, it's available in all versions of Chrome, and it's fully supported. The same for Firefox and the majority of browsers. Now let's take a look at grid. Search for grids. If we scroll down to the browser support, this CSS grid property is new within flexbox. Can see some red, which means on supported and some partial spots in different browsers. This means we should take a little bit more care when using it as somebody uses may not have full support for this. Inside of the browser. There are some tools, and workarounds available to help with browser spot. If this is something which interested in, there are some useful links in the resources to check out. It's worth checking out sites like this, along with testing on different browsers to improve the user experience. 27. Browser developer tools intro: Along with the testing on different browsers we mentioned in the last video, it's also useful to test how a site looks on various devices. Most of us do not have lots of types of tablets and phones round to test on, so Google Chrome helps us out with this. If we go over to a website, anyone's phone, and then if we click on "Inspect" option to open up the Developer Tools. Bear in mind other browsers will also have their own version of the developer tools too, but they may work slightly different to this. If we click on the icon with the mobile phone and tablet, which is just at the top here, we can simulate how a site looks on different devices. Rather than having it Responsive or various devices to select. For example, if you click on the iPhone 6, we can see exactly how this would render in an iPhone 6. You can see with the media queries, this means everything still looks fine. This is particularly because we've designed this site to be mobile first and built on top of it for larger devices. We can also select a large iPad and see how this looks. That looks all fine there. If you don't have many devices around to test on, this is a good tool to see how websites look on different sized devices. I'm just going to click on this icon again to return back to the desktop view. Another useful tool which we've already looked at in this course, is the ability to select an element by clicking on this arrow. This is useful for finding any problems and debugging. For example, if you're wondering why some CSS is not taking effect, we can then hover over any elements on the site and take a look at all the CSS properties which have taken effect. For example, if we click on the level 1 heading, over on the right-hand side, we can see the header h1. We can also see the margin, the padding, and also see which style sheets these are coming from. This is useful on larger sites which may have more than one style sheets. We can also temporarily remove these and see how the site looks with or without them. We can also add different styles in. Let's change the color to be red, and you can see the changes are instantly reflected in the sites. However, don't worry too much about breaking the site. A simple refresh will return everything back to normal. The developer tools are really useful and they can do a lot more. But a lot of this is for more advanced cases. We won't cover it here, but I'm sure as you progress through your web design or development journey, you'll spend a lot more time inside here. Next, I want to show you a great text editor plugin called Emmet, which will really speed up your coding and make things a lot easier. 28. Speeding up your coding with Emmet: During greatness course projects, we've hand-coded all of the elements in HTML. This is a perfect way to gain practice and memorize how things work. However, once you've had more practice and you know how things work, sometimes you may feel we need to speed up our coding and the more productive. This is where Emmet comes into play. Emmet is a plug-in for most popular text editors, which really helped speed up our coding and make work in more efficient. If we go to the download section, we can see the Emmet is available for most of the popular text editors. I would encourage you to go ahead and download for your particular text editor. Also often most text editors, have a plugin Section in the preferences, which allow you to install plugins more easily. However, if you are using Visual Studio code like I am, it's already included by default. I'm going to go to one of the HTML pages. I'm going to scroll down to the body. Emmet provides us with some keyboard shortcuts, which really allow us to speed up our coding. For example, when we first started this project, we typed out all of the html section, including the head section, the metadata, the body, and also the surrounding html tags. Emmet provides us with an easy way of doing this. All we need to do is type html:5. Then we can see, we get the auto complete, saying this is an Emmet abbreviation. All we need to do now is hit Enter or tab, and then we have a basic HTML structure in place. I'm just going to remove this and try to look at a few more examples. The one which will save us a lot of time. Instead of type no elements. Just like we doing during this course with the opening and closing tag. All we need to do is type the name of the elements and again press Enter or Tab and this fills out the opening and closing tag for us saving us a lot of work. We can go even further. For example, if we wanted to create an unordered list with a list item already inside, you could do ul, the greater than symbol and then li. Press Enter, and we can see this automatically adds the li inside of the list. If you wanted more than one list item, we could do ul, the greater than symbol and an li, just like we've done before. Then after the star symbol, we can add as many list items as you want. So for example, if we want five, we could do this. Of course is so much more you can do. I really encourage you to have a play around this and use once you get more comfortable with HTML. So I'm going to remove this. If you do want to look into this even further and find out more of the shortcuts. There's a good documentation on websites which you can look through and find out more about the abbreviations. This is how we can use Emmet to speed of coding. Next up, we'll take a look at block versus inline elements. 29. Block vs inline elements: We've used a lot of elements during this course without thinking too much about how they display on the screen. Usually, HTML elements belong to two groups, either block or inline. A block level element begins on a new line in the webpage and takes up the full available width. An example of this is the P element to display text. As you can see here, it stretches out to the full width of the available space. A div element is also a block level element too, along with many more which we'll take a look at soon. Next up is inline. An example of an inline element is the image element. Inline elements do not start on a new line therefore, can be placed alongside each other, like you can see here. They can also be placed inside a block-level element too. This is how we often do things when using a surrounding div. The div element is block level, and this can contain both block and inline elements inside of it. If we go over to the Mozilla website, we can see a list of block and inline elements at the bottom. Scrolling down to the list of block level elements we can see the footer, the form, aside, article, paragraph tags and tables to name a few, are all block level elements. Therefore, starting on a new line by defaults. Then we have the inline elements. Again, we can scroll down to the bottom and see the inline elements as a list. This is things such as buttons, inputs, em, and also image, as we just looked at before. These links are available in the resources if you want to take a closer look. Block and inline is a traditional way of categorizing an element. In HTML5, there are a few more categories available such as flow and phrasing. These, however, have a lot more complex rules and definitions, so maybe only way of diving into once you become really comfortable with HTML. Of course, there are also links to this in the resources if you want to check this out. But understanding the difference between block and inline is really important when working with HTML. It will help you better lay out your content and also help understand why things are being placed in a page in a certain way. 30. Final challenge: Congratulations for getting to the end of this course. Before we go, I want to leave you with one final challenge. I would like you to return back to your project and add to it. Remember we created 'about me' link at the top of the page. Well, I would like you to go back and create your very own 'About Me' page and then link to it from the main navigation menu. This is all things we've already covered. If you do get stuck, just look over the rest of the project and I'm sure you will find the answers. Doing this challenge alone, without my help will really get you thinking about things and also reinforce what you've learned so far. Also, if you're feeling particularly creative, go ahead and add a footer section too on each page. Good luck and I can't wait to see what you guys create. 31. Final step: Congratulations, you've reached the end of this course. Hopefully by now, you should be more comfortable building great looking websites using both HTML and CSS. You now should know enough to go ahead and complete more challenging projects too, to build on what you've already learned so far in this course. Together, we have built a blog website with your topic of choice. Hope you've also managed to complete the challenge of adding the About Me page too, or maybe even adding the photo section. I would love it if you would also share your project too, for both me and fellow students to see. This is a great way to both showcase your skills along with inspiring other students too. This is not the end of your journey though. Building websites is a continuous learning process, but it can also be very rewarding too. The best way to keep learning is by building more websites and keep challenging yourself along the way. If you do not have any projects to practice with, try making one up, or even copying one of your favorite websites. Once you get comfortable with HTML and CSS, I would then encourage you to learn a new language, such as JavaScript to really bring your websites to life. For now though, a huge thank you from me for taking this course, and I hope you've enjoyed it, along with learning some new skills along the way. 32. Skillshare follow me video: A huge congratulations from me for reaching the end of this class. I hope you really enjoyed it and gained some knowledge from it. If you've enjoyed this class, make sure you check out the rest of my classes here on Skillshare. Also, follow me for any updates and also to be informed of any new classes as they become available. Thank you once again. Good luck. Hopefully, I'll see you again in a future class.