Code your own portfolio – HTML & CSS basics

1. Intro: Hi, my name is Aga and I'm a designer, but I can code as well. In this classes we're going to code designers' portfolio, which means that we're going to learn HTML and CSS basics by implementing the layout step-by-step. Should designers code? Well, everyone has his own answer. I'm going to go further into this debate. My goal is not to make you a developer, my goal is to show you that code is a great tool for UI and UX designers to express their ideas in the real environment for the projects, which is a web browser. After the course, you'll be able to better hand of your projects to developers and better speak their language. In summary, you're going to learn HTML tags, CSS basics and properties, implement Google fonts on the website, and using devtools in a web browser. The course is dedicated for UI and UX designers who'd like to start learning HTML and CSS by practical examples. Prior coding knowledge is not required. We will cover basics step by step, so you'll be able to follow along easily. I hope you'll have fun, and finally explore that coding is very useful. See you in the first lesson. 2. HTML basics: Welcome to the first lesson, we're going to cover some crucial things to start our coding journey. Firstly, we'll learn some coding basics in HTML CSS, and once we're familiar with them, we'll start our project which is a portfolio. What we are going to need is a code editor, I recommend to download Atom. Atom is a free software which is very simple to use. It's a code editor and you can download it for a mac, PC or if you're a Linux user. The next thing is your favorite web browser. I use Chrome but feel free to use Firefox. The last thing we need are a DevTools. DevTools help us to navigate through our code and experiment the CSS directly into a web browser. But don't worry, for now, we're going to cover all the details during the lessons and exercises. We're also going to use a package with the materials that I prepared for you. We have files and two folders. We've got exercise one in portfolio. In portfolio, you will find some assets, images, and index HTML template which you are going to use the future exercises. You can download the package with the materials from source section on the course site. Let's dive into the structure of HTML document, to see how a very simple website is built. Every website start with the Doctype. What is Doctype? It's document tab declaration, and it defines that this is the actual HTML document. It also gives information to the browser that this is the website that should be rendered. It also provides the info about the version of the HTML document. For now, just take it for granted. We are not going to get into details of it. Next thing is the father of all the HTML tags, which is HTML. As you can see, it's open tag, in that second line, and at the very last line of the document, we have the closing tag of HTML. It gives information that we're actually writing HTML code, and this is the HTML document. HTML tag is followed by head and body. What is between half text? Everything that it's put there, it's actually not displayed anywhere, but it's very crucial in terms of the Google search and the browser. We have the title, tag and the title shows the title and the web browser. We also have some links and imports to external and internal file. But don't worry for now, we have the head section covered. What's left? This is the body and between body tags, we put everything that is generated on the website, such as headings like h1, paragraphs like p, text, lists, images, whatever you want. We can also use the analogy to remember, what are the ingredients of the website because we have just like human, head and a body sections. The question you might have is, how do you actually learn all these HTML tags? Do you learn them by heart? Actually the best practice is just to code and learn by looking on some examples. Practice makes the master, so there's no point in learning all of the tags at the far beginning. I selected some HTML tags and they're the most popular, so we're going to use them in exercises. Are you ready for our first coding exercise? Let's head to the next lesson. 3. First exercise in HTML: Best way of learning how to code is to put the theory into practice. Let's start with the very first exercise. Let's open Atom editor, where you can see is the welcome screen. Besides Atom, we also need Atom plugin that will help us to easily see the changes that we're providing in code. It's called live preview, and we need to install it by googling it. Let's type Atom live preview in the web browser. Open the first link and click "Install". It will ask us to open our software, which is fine, and we're clicking "Install". Now we can see that the plugin is installed so we're happy to continue. I can close now to settings window and welcome guide as well. We want to create HTML file, how we can do it? Well, we just click Command N, or Control N. I clicked Command S to save the file and I'm looking for my package folder. In exercise 1, I want to create index.html file. It means that this is going to be a HTML document, and clicking "Save". Our HTML document is empty now, we need to fill it with some HTML tags. We need to start with DOCTYPE declaration, so I'm writing, DOCTYPE html and HTML tag, opening and closing. Between these tags, we've got the two sections. Do you remember about them? The first one head and the second one body. In head we can put now the title of our page, which is Exercise 1. Save it. We installed live preview plugin so let's switch it on. We navigate to the Atom and click "Packages". Look for Preview HTML. We click "Enable Preview". Now the window is open and on the right side you can see our website. It's empty now because there's nothing written in body. But if we write for instance, Hi there. Save it. It will automatically generate all the changes we made. It's much more easier for us to see what's happening on the web. But, we want to use some HTML tags. Let's wrap this Hi there text with h1. H1 stands for heading of the first level. We can have a couple of headings. Next one is the h2, so heading of level 2 and we can write as that, welcome to the course. Of course we need to close the tag and you will see on the right side that we have a bigger heading and a smaller one. What about putting a paragraph here? The block of text is wrapped by opening p and a closing p. Of course we can copy it and duplicate. We have two paragraphs now. If you would like to write a link, for instance to the external website, we're going to use a tag. We're writing a. Between a tags, we're going to write the tag that it's displayed on the website. For instance, this is the link to my site. You can see that it's not happening yet. We need to define an attribute for a tag. Attribute is something that appears just after the name of the tag, and for a we have href, and in href we put the address of the web site. For instance, I'm adding my Instagram. I'm seeing that the link is underlined in a blue color. This is the default style added by the web browser. If I click it, I'll be on my Instagram. To get back to your website just click Command S in the index HTML window. We're now back on the website. To easily navigate through code and easily read it, we can wrap all the elements of the line codes displayed here so we click "View". It would be much more easy for us to write and read the code. We have the headings, paragraphs, we've got the link. What about displaying list on our website with bullet points? Every list there begins with the opening tag. Ul stands for unordered list. We are opening and closing it. Of course we have the elements of the lists, for instance, HTML, CSS, div tools. Where you can see is that every element of the list begins with the bullet point. If you would like to change it to numbers, we need to apply a different tag which is ol , that stands for ordered list. Suddenly we have the numbers. What about attaching an image to our website? We can apply img tag, and it's good to know that img it's actually an empty tag. It means that it closes within the tag, so we don't write it in such a way. It doesn't have a content inside. We close this tag like this. An img has a several attributes we need to define for the image to appear. The first one is src which stands for source, and here we write the path to our image. Another attribute is alt, which is the alternative text that is going to display if your image cannot be loaded. It's also good to know that it's better for our accessibility to provide a text, because alt is read by screen readers for people who cannot read your page just like us. Let's put the path through our image. We want to display coding.jpg. It's the file that it's just here in the structure of all our files. We just write the name of it, it's coding.jpg. The extension is very important. Now we can see that the image is displayed. Of course we can copy it and have the images. We also need to provide the alternative text. This is the image promoting my classes. We can't see the alt text anywhere. But if we change the name, for instance add one, we see that the image can not be loaded because such a file doesn't exist. But at least it gives us the information what the author wanted to present here. We can read that, this is the image promoting my classes. Now I'm getting back to the proper filename. In this website, you exercise of writing very simple lines of code. There are tons of other HTML tags. But we're going to learn them step-by-step. The very last tag I want to practice in this lessons is div. Div is somehow a very generic tag so we can use it for many different purposes. We can use it to create some columns, some elements of the website. In the next lessons it would much more easier for you to understand why we actually need div. In div we can place some order tags, so we'll doing the next thing. We can see that div is actually the parent of the ordered list. I can change it to unordered to have two separate lists. I also mentioned about div tools. How we can actually launch them and what are they for? We need to get back to our folder. I'm in the package folder and I'm opening exercise 1. We have our index.html, and I'm going to open this file in the web browser. I'm using Chrome. What I'm going to do right now is I'm opening the div tools. I can do it by right-click Inspect. Or I can use the shortcut which is Command Option I or Control Option I on Windows. Inspect and I see my HTML code here. Div tools displace all the code, and I can easily navigate through it. I can also select some particular elements of the website and see where is the actual code responsible for generating this element. It's very useful and pretty neat. I hope that you will use it a lot. Another thing that I like about div tools is that we can easily experiment with our code. For instance I can remove some elements, I can change the text, and I can also add some new things, like two paragraphs. But very important thing you need to remember is that all the changes we do are kept in the local file, actually in the local storage of the web browser. If we refresh the website by clicking Command R or Control R on a PC, you will see that the website gets back to the previous state. This is why we didn't take all the changes made in div tools and we didn't introduce them in our HTML file. If you would like to do something different with this line of code and replace it for instance, hello. To keep it for longer, you also need to get back to Atom editor and change it as well here. I'm saving, getting back to the web browser and refreshing and I have this hello text replaced. Div tools are also very useful when talking about style, s but we're going to get into it in the next lesson. 4. First steps with CSS : In this lesson, we're going to focus on CSS, so we're sending our website to the stylist, thanks to wood, our website will get some colors, finally. How we write CSS? Well, we need to actually write, create a new file. We're going back to the atom, and we need to create a new file and save it, Command S as styles.css. Dot CSS extension is very important because it gives the information that this is the actual cascading style sheet file and we can use it to import the styles on the website. I am writing styles.css but you can write this also as mystyles, you can call it as ever you want, I prefer to call it styles.css. Now, we're having our document ready. What is CSS? CSS is another language that helps us to style some elements of the website and a very important object in CSS is called a Selector. Selector selects some elements of the website you create and apply some certain properties such as background, colors, or font families. In HTML, we were talking about tags, so in styles we're going to have selectors. Let's create our first one. For instance, we would like to color all the paragraphs, so we need to write the tag that is responsible for paragraphs which is p, so I'm selecting all the p's or paragraphs and writing curly brackets and inside them, I write some CSS properties. For instance, color, pink. A very important thing in CSS is to finish each of the line with semicolon, don't forget about it. You can also write more CSS selectors, for instance, h1, so heading, that is of the first level will have another color, let's say salmon. I'm saving it using Command S or Control S on PCs and well, nothing has happened. The thing is that we need to import those styles and connect it with HTML. How we can do this? Well, we do this using one tag called link. For link, we have a specific app for buttes like rel which stands for relation and it's stylesheet. We also write href, so the path to our styles which is styles.css, and you can see that the website has new colors which is salmon heading and pink paragraphs, so our styles started to work finally. Let's briefly sum up what we did. We created another file, styles.css, we created two selectors, selector for paragraph and selector for heading, and we also linked our file styles.css in HTML document. Of course, we can add to much more properties to make our website even more colorful. We can add background for each of the paragraph, for instance, yellow. We save it and see that our paragraphs have yellow background. We can also remove underline on each of the A, so each of the link, we can write text-decoration, none, and we can also change its color from blue to pink. The question you might have right now is, how can you know that color property actually exists? Well, you need to learn it by practice simply, but I hope that during my exercises you will be much more familiar with the certain CSS props. We added some styles, maybe let's remove it because it looks like it's a paragraph. It's blue, and we've got two paragraphs. What about making a difference and highlighting one of the paragraphs? For instance, by applying a different background. Well, if we write p selector, it means that it selects all of the paragraphs that the browser comes across, so we cannot apply here another background because it simply won't know which of the paragraph should be blue and which should be yellow. To differentiate some elements, we use CSS classes. CSS class is a pretty important notion, it means that we can apply some CSS properties to elements with the specific class only. Let's create a first-class, let's call this highlight. The rule is very simple, we also create a name but before the name, we have to add the dot. Dot means that it's going to be a class, so we've got.highlight, we read this as class highlight and within curly brackets, we add CSS properties, for instance, background blue, I'm saving it and my paragraphs are still the same, same because we also need to apply CSS class in HTML. Let's say that the first p should be highlighted, so should have the blue background. We're adding to p tag the attribute which is called class, and the name of the class, so it's highlight. I'm saving it and see that this paragraph has a class highlight and house that crown blue, so everything is correct and the other paragraph is yellow. If I copy this one and paste it below, it would have the same styles just as the selector p. If we add this class with the last one, you're going to see that the class is applied. CSS class can be used multiple times and it can also be used for various elements, for instance, for the heading. Not only these paragraphs have the background but also the heading Hello. You can play with CSS classes and apply different properties such as the font-size. Let's say we want the font to be 20 pixels and suddenly the paragraphs are bigger. We can change the color to white and you will see that it instantly changed. The very interesting thing here is that this selector initially has color pink, but we overwrote it, with the class highlight and added white to its color. Let's switch now to the web browser, refresh the page, and let's take a look into Dev tools. This is the same website that you were seeing just a minute ago and if we open the Dev tools, just to remind you that we're opening by Right-click Inspect, or you can use the shortcuts Command Option I or Control Alt I. Here we need to switch to elements. We see here, the HTML code. If I highlight some elements, for instance, the paragraph, you can see that the highlight class is displayed here, and it gives us the information that this piece of code, this text displayed on the website here has background blue, font-size 20 pixels, and color white. I can comment it out, means that I just don't want these changes and it goes back to the previous CSS settings. If I come back again, you will see that color and background from selector p are crossed out. It means that with the class highlight, we overwrote them, so it's good to use Dev tools to see what's happening and what changes are actually applied. If we create another class, for instance, bigger and defined font-size to 40 pixels, let's see what happens if we apply it to this paragraph. How to connect two classes? Well, it's easy because we just need to add a space between them and try to name of the second class. We have highlight and bigger applied, and we can see that the last paragraph has a bigger font-size. If we switch to Dev tools and refers the website, we're going to see that the bigger class overwrote the font-size. Initially, it was 20 pixels, but with the next class, bigger, the new value was applied, so the rules are simple. If we are going to use more classes with the same CSS properties, just remember that the one that is defined as the last in the styles.css document would have the bigger power. 5. Playing with more CSS properties: In these classes, we're going to apply some CSS properties again. I will show you one setup in Atom editor. Sometimes you need to edit HTML and CSS at the same time. So it's easier to have display of two columns in Atom editor. Now I'm closing Preview. What I do, I click on "View", "Panes", "Split Right". Thanks to it I have the two columns, two windows close to each other. In one I want to have styles, that CSS, and on the second index HTML. Now I can preview HTML code and CSS at the same time. What if I would like to apply the background for my website? What if I would like to have my background in a certain color? We can easily do it by applying body selector. We usually try to write styles from the top of the bottom of the website. If the body is somehow the mother of all of the HTML tags, we try to write it on the very top so it's easier for us later on to scan styles and to scan HTML. It makes sense for us that this is the whole structure. However, what I would like to highlight is that, the order of the specific selectors, it doesn't matter. The only thing that you need to remember is that, if we have two, the same selectors but written in different places, and they have the same property, for instance, color. Here I have blue and on the top I have salmon, the one that is going to be picked is the one that is actually written at the very last position. So h1 will be in blue instead of salmon because this line would be overwritten. I am deleting this one, saving, and we have the body selector. I would like to apply the background color. This is the property that is responsible for changing the color of the website. We can come up with some color, for instance, light blue. I'm saving it, getting back to my website, refreshing, and certainly, my website is in blue. You might ask how I pick the colors because you're a designer and you'd like to apply some less sophisticated colors here. You can paste here, hexadecimal code, hex code. If you don't know the value now, you can use the color palette in Dev tools. This is another very useful feature which I use in these tools. I can just pick up the one that I'm satisfied with, and paste it back to my coat. Save, refresh, and see that my changes are applied. Unfortunately, our website is not very pretty right now, but take it easy, we're heading to the portfolio part pretty soon. Another thing we can apply in CSS are margins and paddings. We can have an influence on how the element are separated from each other. Let's say that I would like to have a bigger space between the image and the list I have here. Let's experiment a little bit with the Dev tools. I'm selecting "Image", and I would like to create a selector in here. I'm clicking this "Plus" on the right side, and I want to apply margin. I'm writing margin, for instance, 50 pixels from each of the sides, so the top, left, right, and bottom. I can see, while inspecting this element, hovering over it, that there is a orange frame. It shows me the margin that is applied. If I had to tap "Computed", this is the so-called box model, you will see that here we've got the margin and each of the edge has 50 pixels. We can also add padding, which is the inner margin. For instance, 20 pixels so the space between the image and lists is increased. We also can add border. One pixel of the width of the border line, we want to have it solid and in black color. This means black in hexadecimal code, but we can also write black. You will see that padding is the inner space between the image itself and the border. You can also check it out in the box model saying that, this is our image, these are the paddings, we have the border, and we've got the margins as well. To keep those changes, we need to copy the whole selector, get back to Atom, and paste it into our CSS. Refreshing the page and the changes are applied. Of course, we can play a lot with CSS here. But I think it will be better to focus on our portfolio projects and to put into practice our knowledge. In the next lesson, we're starting the portfolio projects, which means that we're going to deconstruct the layout step-by-step. 6. Starting our portfolio project: Let's switch to the folder which is called the portfolio. It's included in our package. We're in Atom opening the whole folder. We're clicking ''Package'', ''Portfolio'', and ''Open''. Our portfolio is currently in Atom so we can see the whole structure, the whole tree of the folder. I'm clicking on index.html, and as you can see, it's already written. I mean, the skeleton of the very basic website. What we're going to do is we're going to fill it with more tags in body, and for sure we need to work on styles. In CSS folder we've got style.css, which is empathy and waits for our properties. We've got bootstrap-grid.css. This is the grid we're going to use, and it's taken from bootstrap framework. Don't worry about it for now. I'm going to explain everything in the next lessons. We also have some assets which has all the text that it's included in the portfolio, so you can easily copy and paste it to the project. We've got two images, two files. The one that presents the portfolio, the actual layout for the portfolio, the graphic design, and the other one which shows the font sizes for the given elements. Later on, you don't need to guess it, you can easily apply those numbers for the headings or paragraphs. Let's check out how the portfolio looks like. I'm currently in the portfolio folder. I'm opening assets and portfolio layout. We can see here, that this is the website that we're going to code, and there are some sections, for instance sections describing the projects, like the section with the contact. We also have the navigation, intro text, and some buttons. During the course feel free to use your own projects, to use your own pictures, to use your own content. But you can also use the content that I created for this course. The very first exercise that we need to do with the portfolio is to think about this skeleton of the website, about the markup. What sections we can see here, and what types of elements are included. We need to somehow deconstruct the layout and put it into the HTML mindset. What I see here on very top is the navigation. Below I have the whole header. Like the intro section of the website. We've got the heading, some text, we've got the button, and image. These are the two columns. I have something on the left, and something on the right. Below I have another section which is a list of some skills of Jane. Below it, I've got three the same elements of the layout, three the same sections which present projects. My projects from portfolio. I've got one, with the blue background, I've got the second one, with the white background, and the third one just the same as with the first. What is different between them? It's our foreshore that colors, the background colors, and also the composition. Here the picture is on the left, and in the other example that picture is on the right. We're going to also to take it into consideration while creating the website. On the very bottom we've got the footer with the copyright. Let's start to write HTML for a that. I'm getting back to Atom, and I'm opening index.html. I'm having index.html open and I would also like to have portfolio layout. I'm clicking "View", '''Panes'', ''Right''. In here, let me open index.html. I will have the overview of the layout, I'm clicking here as well, ''View'', ''Toggles Soft Wrap''. My lines of code are wrapped, so it's easier for me to write the code. I'm seeing the portfolio, and I mentioned at the very beginning that what I can see is the navigation of the top. I have to tell you that there is a specific HTML tag dedicated for our navigation, which is called nav. I'm opening nav and closing nav. In the navigation I have all this links to the website. I can use copy from content.txt, I'm going to put it into this column, and I'm going to copy it and paste into navigation. We have our navigation, but each of this links of each of this navigation element can be actually an element of the list. List doesn't have to be vertical, it can be also horizontal. We're going to change in style sheet. But for now, just write the list using HTML. It's going to be unordered list because we don't need numbers, and each of the text here is going to be a separate element of the navigation. We've got contact, of course closing tag. We've got works, we need to open and close. We have experience, and then next one. We have all of the elements in the list. As you can see we've got the long line here. Don't worry about it for now. Let's focus on on the text only. I'm saving it. This is the whole nav, and let's open index.html. I'm into portfolio folder, I'm clicking "Open in Chrome". I'm opening the portfolio, HTML, it's called index.html and a web browser, and I see that my navigation is here, my list is there as well, and we've got all the list elements. See what's next. We've got the navigation covered. The load and navigation we've got the whole header section, it's called header. We use header tag. Between header we're going to put the content of it. We've got the intro text the heading h1. We can copy, hi, I'm Jane Doe from here. If you wonder how we can actually break the text and put the Jane Doe into next line. I'm showing that we can actually use br which stands for break, and this going to be displayed in two lines. Just please remember that break tag, br we use it only to break the blocks of text and not for elements, not for making bigger margins or spaces. For margins, hide and sizes, we use CSS properties. We have the heading, and below to heading, there is a list of some successes or career points by Jane. We can again, copy the text and put it into unordered list. I'm opening tag, closing, and we wrap each of the text with li, to make it faster I'm just copy it. I'm saving and checking what's on my website. Now I can see the navigation. I have heather which has some children, h1, unordered list, and some elements of the list. What's next? Take look on the portfolio, and we see that under the list, we have the button. The button is going to link it somewhere, so let's use a tag. For now we don't know where it will point, so we can use href attribute empathy. Between the a tags the opening and closing one, we can write the text that it's on a project. It's called add me on linkedin. I can see that the link is being generated on a website. We have the left side ready. What about the right column? There is an image here. Let's put it an image. For now let's just skip the source. For alt we can write that Jane Doe. This will present Jane Doe, and closing with an image. This is the empty tag. Let's see the structure of our files. We're currently editing index.html, and we see that Jane jpg is hidden in the folder img. The path to Jane's image is the folder name, slash and the name of the file. It's jane.jpg. I'm refreshing the page and see that the image, this looks bright. Don't worry for now about the position of the elements and how they're being aligned. We're going to get this covered in the next modules of the course. If we get back to the layout, we'll see that we have the header part almost ready. We just need to add the caption to the image. For this, we use a special tag in HTML which is called figure, and it wraps the image, and also figcaption tag in which we put photo by Sam Manns on unsplash.com. I'm closing figcaption as well. I want to keep my code clean, so this is why I put tap here, and intersect the code. We can easily see that figure is the parent tag of img and figcaption. I'm saving it, refreshing, and see that we've got to caption under the image. Let's continue with the next part of the layout in the next lesson. 7. Building remaining sections and elements in HTML: Let's cover the next element, the next sections of the layout. We've finished on the header, and now we're creating the next one. So, header closes here, and we have here the sections with the skills list. Let's create a new section, it's called section tag in HTML. We have the header, which is very specific to the layout. It's the header, at the top section of the page, and we go to next section, the general thing. The section will include the list which is in content. I'm copying it, and putting into an order list. Again, each of the elements of the list has to be wrapped by Li tag. I'm closing. Everything looks correct, saving, and let's refresh the website we have. Now we have the list ready, and here's our section. Getting back to atom. Under the list, we've got three projects. By the way, I will show you how to create comments in your code. Comments are very useful, because you can add some personal note there. You can structure the code. For instance here, this is the project section, and I wrote comment using these characters. But it's also easy just to write the text, you want to comment out. You mark it, and click "Comment" or "Ctrl", and slash on your keyboard. The code editor automatically flops around it, this specific characters. I've got projects, and it's grayed out, so you see instantly that this is the comment. It's not going to be seen on the website, but it's going to be in the code. I write section, and I'll write here, project 1 and comment it out. We've got the project 1 here, and what's insight? We've got the left column and the right one. In left column, we've got the heading, it's h 2, because we already have h 1, at the very top. This is the heading that has the smaller font size. So we apply h 2. Let's code this one, the first project. We've got first image. So we're writing, img. What is the source and alt? Well, the source of the image, let's check here. I'm clicking on the tree of the whole folder, the structure of the folder, and see that it's img and it's called cosmetics jpg. I need to write the specific path to it. It's an img folder, cosmetics jpg, so I'm writing img/, so we're entering img folder, cosmetics.jpg. Here, we can write cosmetics. We have the image, but again, we need to add a caption. If you look at the top, we used figure tag, and we have fig caption. So let's reuse it. I'm writing figure as the parent, of the image, closing as well. This is the child of the section. So inserting as well, figure and what's missing is fig caption. Here I'm adding, the caption from the context, which is missing here. The Honest Company on Unsplash. Let's save it, refresh the website, and I have the image, and I have my caption ready. These are the separate section tag, I mentioned about comments. You can see that they are marked green in here, and they are displayed in the coat, but you cannot see any word text, projects or project 1, on that website. So it's not generated. No worries for that. We're heading to the right side, which includes h 2. Let's copy branding strategy for female cosmetics. We can use break here. Put into the next line, and then we've got the simple paragraph with the text that it's here. I'm just copying it and pasting. This is just a modern version of Lorem ipsum. Let's save it, and see what else is missing. We have the button. It's called read more. So I'm adding h tag, opening, closing, and then read more, saving, and I have read more at the bottom. Paragraph, heading. You can see that, there is a break between branding strategy, and for female cosmetics. So everything works. Let's now continue. We've got the second section of the project. We can write project 2, comment it out again, and create section. Here we start with h 2, take user experience, app design, h 2, closing. We can use break as well, and then paragraph. For a paragraph, we use Lorem ipsum. Again, unfortunately, I copied too much. So it's like this. We've got read more. To make it faster, we can copy and paste because it's the same element. The thing that is missing is the image. Again, we can copy the whole figure, responsible for generating the image and the caption. I'm pasting it. I haven't mentioned about the space. They are the lines in HTML code, but you can do them as many as you wish. It won't affect how the website is generated. If you need to do some personal notes, for instance, here we add an image with the caption. You can, of course, copy it and use it for your own purposes. Here we just need to change the image name. Let see, in the folder, it's called dashboard app, so I'm changing dashboard app. Here we have to change all this as well, dashboard app, and the caption, which is taken from here. Saving, refreshing, and we have the next section ready. We've got project 2 opening here. Then next one, project 3, the third project on our list. Again, let's see. We start with an image. Again, we can copy and paste figure. Here, we've got an iPad app, in different caption. Let's check the name of the file, we need to get. It's iPad app. I'm calling it iPad app. From content, I'm taking the caption. Again, we need to apply h 2, which is called iPad app for the artists, break and paragraph. Copy the whole text. I'm saving it, and I need to close the section. I forgot to open the section tag. So each of the projects gains with the section tag, and of course, it needs to be closed. Because our code might get messy. I'm refreshing the current website and the web browser, and see that we've got the image with the caption, the heading, the paragraph, and it's the third project. We're almost done with the skeleton of our website. What else is missing? Let's see on the portfolio. We can see that this is the footer. I'll clean the code. I'm creating footer, I'm opening and closing. I have the tax that's pretty big. I think that it should be the heading, so let's use h 2. Don't worry about the sizes for now. So I copy, any questions, find me here, Jane. I'm putting break. I'm also putting the very last line of the text, which is at the bottom of the page. I copy, and put it, then paragraph. Saving it. My website currently has the footer. As you can see, it's not very stunning, and there are tons of work to do, but don't worry. We're going to get into every element of the website, every HTML tag, and style it, to make it look just like and delay up, we have. Just like the projects that I've prepared for you. 8. Web Typography: In these classes, we're going to take a break from HTML code and we're going to focus on web typography. Sounds exciting? I really like to apply Google Fonts on my website, so let's see how we can do it. What I need to do is I'm opening fonts.google.com website, and I'm looking for the fonts that are used in my project. There are two fonts, the first one is Inknut that I used for the headings, it's Inknut Antiqua. So what I can do is I click plus, so it will select this font, and I have the panel that shows me that the font is selected. I also have another font which is called IBM Plex Mono, so this is the text I used for the body. I click plus icon as well, and I see that two families are selected. Google Fonts gives us the instruction on how we can embed the font that we used on the website. The good news is that we have plenty of them, so we can select various options and various typefaces, and they are for free and are hosted on Google servers. The standard option of embedding the font is to use the code here. It's a piece of HTML tag called link, which you already applied in your website while linking styles. You can also embed fonts using CSS import, but I would prefer to stick to the first one, so let's copy it and paste the code into the head section of your HTML document. It means that we're going back to Atom. We're in our HTML document, and I'm going to the very top, to the head section of my file. So I have head section, and under the link tag that I already have with styles.css, I'm doing the new line and pasting the whole code I copied from Google Fonts. I'm saving it and we're almost ready. So the thing that we need to do right now is to actually create CSS. We need to create CSS that will apply the fonts that we picked to the given elements of the website. So let's open CSS, style.css. It's going to be this plate in the new column. Actually we haven't written any lines of CSS code, so it's going to be our first one. The thing is, if we look under our project, there we have Inknut Antiqua. So this is this one, the decorative Serif Font that is applied to the headings, the list here, and that's it. IBM Plex Mono typeface appears everywhere except for the places where Antiqua comes. So we can do this in such a way. I'm going back to Atom and writing that the whole body, means the whole website will have IBM Plex Mono. So let's get back for a while to Google Fonts and see how we can specify our fonts in CSS. These are the CSS rules that we can apply to our CSS document. This is font-family property with Inknut Antiqua, and this is where IBM Plex Mono, so I copy the last one because I want to use IBM Plex Mono for the whole body of my website. So I'm pasting it, and it means that the whole text that appears in the body will have IBM Plex Mono. Let's refresh the page and see if the changes are applied. I have a new font ready, and this is totally different from Times New Roman, and this is for sure IBM Plex Mono. If we navigate on any of the element, we can see that font-family IBM Plex Mono is applied. If I comment it out, you will see that it gets back to the default font, which is Times New Roman. All right, but I also mentioned that in the project, we have Antiqua used for all the headings and the list, so let's apply it in CSS. So H1, H2, and the list that appears here under the navigation, which is this one, have Antiqua. So for now I'll write "ul li". So we can write the same style for multiple HTML elements, and we can divide them using colons. So we've got the same style applied for H1, H2, and all the elements of the list "ul". So I'm on Google fonts and I see that this piece of code would apply Inknut Antiqua in my web typography. So I'm pasting it for these selectors. I'm saving, refreshing the page, and see that the heading, the list underneath have Inknut Antiqua applied. Unfortunately, I also have this font applied to navigation. If I compare this with my project, I will see that here, I used IBM Plex Mono. So how we can differentiate this tool list, do you remember CSS classes? I hope you do, so let's apply them. Let's create css class, for instance, we can create the class for this list and called it the "Skills List". So I have the class called Skills List. It's the attribute in HTML, but I also need to add here in my CSS style sheet. So I'm creating the dot, which means class, and then the name, it's Skills List. I want it to apply Inknut Antiqua for this one, so I'm copying the whole line, saving it, and from here I'll remove "ul li". It means that this font, Inknut, will be no longer applied to "ul li", so all the elements of the list. So we can copy and save. I refresh, and now I can see that finally my whole navigation is in IBM Plex Mono, and the list under the navigation is in Inknut Antiqua. So just like in my project, to make my code more clean and not repeatable, I will just copy this class, add a colon, paste the list, and remove the last selector. So this rule means that Inknut Antiqua font will be applied to all H1, to all H2, and all the HTML elements that have a class called Skills List. So this is how we add Google fonts on our website. This is how we import them into HTML document. So the first thing we need to add is the link tag which has the URLs to specific fonts, and it's generated on the Google Fonts website. The second thing is to apply CSS with the given rules mentioned on the website of Google fonts. So please remember about these two steps. Of course, for your future projects, you can select fonts, whatever you want. There are plenty of fonts on Google fonts, so feel free to use whatever you want and whenever you like. 9. Placing elements on the defined grid: In this lesson, we're going to focus on grid. We're going to place our elements of the website accordingly to the layout. Finally, we have some columns and some sections, so it would be much easier for our eyes to look at it. This is how our website looks like currently,. What we need to do is we need to put those elements into columns. If you compare it with our layout, we will see that some elements are close to each other and some are separated. For doing it, we're going to use grit from Bootstrap. What is Bootstrap? Bootstrap is an open source toolkit, it's the front end competent library. It's a very big and powerful tool. However, we're going to only use a piece of it which is grid. We're not going to code the grid bar ourselves. We're going to use a library and we can adjust it to our own needs. Billing the layouts would be much more easier. If you're curious about grit system, you can open the documentation which is available at getbootstrap.com. You can read about the old theory that stands behind grid and Bootstrap. But I will tell you the most important things you need to know to make it work. Let's get back to our HTML document and let's focus on HTML for a while. If I open the whole folder, I will see that I have Bootstrap grid CSS. You can see some code out there. All that it's written here in CSS. But I don't want you to analyze it, memorize it, or learned. We're just going to use the grid that is defined here. If we want to use this style sheet, we also need to link it in our HTML document. We have our styles.css, we've got external fonts, but we also need bootstrap. I would like to link it before my styles. The question is why I'm doing it before or not as the last link tag? The answer is that Bootstrap grid might have some styles that can cause a conflict that can actually overwrite ours styles. To make our styles more important, we put it on the last place in terms of the stylesheet we have. I'm changing the name here. The file is called bootstrap grid. Sorry, I'm getting back to my HTML. I'm saving it. My bootstrap grid is applied. Let's see if I can't see any changes. Well, actually, nothing has happened yet. But if I dig deeper into my HTML code and hats section, I will see that Bootstrap grid CSS is applied. The question you might have is how we can use Bootstrap grid. In the documentation that they show us how three columns are created, we can see HTML code here with some attributes, which are classes, CSS classes, and we're going to use them as well. The very first tag is div. Did you remember div? This is the container. This is the tag that is very generic and we can use it for various purposes, mainly for layout thing, for placing the elements, nesting, etc. We've got div with a class container, and below there is a row. Row class means that all the elements, all the columns that are included will be displayed in one row, so one by one, just like here. Let's copy container and draw. Let's put them into our HTML document, but before where we're going to check out our layout. I'm opening portfolio layout just here. if I enlarge it, you will see that here there is the container and I have two columns. Container, row, classes would be applied for the header section. I have the header. In the header, I'm pasting these two lines that I copied from the documentation. I'm having the container open, but I also need to close this div. It closes just before the header is closed. So I'm adding div, I'm doing tap here. Everything that it's included as the children of this container. I have row I need row to display two columns near a charter. I also need to close the row just before one div. Also nesting the elements within a chatter. I can see that all this elements mentioned here, all children of row. What's next mentioned in the documentation? We've got another class which is called col-sm. It means that this is one column and the width of the columns would be generated automatically, depending on how many columns do we have. We will take as much space as they need to. Let me copy it as well. If we compare it with the layout, we see that this is one column and this is the second one. Everything here like heading, list and the pattern would be in one div called col-sm. Everything here, filled this place will be children out this div, so I need to close it. Though the next content will be another columns. Again, we're pasting div and figure would be the children of this div. Let's recap what actually happened. I'll make it more suitable for the display. We have the container, it starts here and closes here. The whole header is on a container. What does class actually does? Well, you'll see in a minute in the web browser. Under container, We've got a row and row helps us to display those elements near each other. We have one column and the second one. We can use comments. Left column. This is the left column and underneath we've got right column. Now it's much more easier to follow that this is the right column and this is the left column. Always pay attention to the clothing tax because sometimes it's very easy to get messy into your code. So if you click on the tag, you will see that the blue underline, you can easily see whether that the given tag is actually closed. Here, when I'm clicking on div, I see that this is the opening tag and in 37th line, it's being closed. The same with the right column. I have opening div tag and closing the 45th line. Let's save it. Let's see what's generated on the website. I will close the div tools and see that actually I have two columns. If I run inspect, you will see that they are getting stretched to the full side. So full-width, so there are no longer two separate columns. But if I change the position of the div tools to make the resolution, the width of the window browser bigger, I'll see that they fit. That they are displayed one-by-one close to each other. I can see that this is my left column and here my right column. One think we can adjust at this level of the layout is to change the width, the size actually of the image we put to make it smaller to actually fill the full width of the columns. Let's get back to style CSS. We can write that. Every image we have displayed on the website would take maximum width of the container. Maximum of the image will be 100 percent of its parent. It means that if col-sm class has a specific width applied, for instance, 600 pixels, the image, although it's natural size, it's original size is 700 pixels, it won't exceed 600 pixels because we're limiting its width by this line of code. Let's write it here. Here, I'm showing you how we can make comments in CSS. I can just write a text, so this is limiting the width of the image, so it takes 100 width of the parent maximum. I'm highlighting all the text, and again, comment slash, so everything written here is a comment. It's a bit different because in HTML we've got these characters, and in CSS, we've got slash and asterisk. Let's save it and let's refresh our website. Suddenly, you can see that the image is getting smaller and it takes the whole width of the column, so we have the two columns near each other. The header, let's say, it's ready in terms of the grid. We've got to column 1, the left one and right one, and everything is in one row with the container. What the container does is it limits our width and it depends on screen resolutions. For bigger screens, that container would be bigger, for smaller, would be smaller. This is the responsive web design, and we're not going to get into details in this course, but I'll be mentioning some things that you can use while using Bootstrap. The header is ready. Let's switch to different parts of the layout. If you see on the layout here, we have the full row of the list, so we can skip it for now because it's just the full width and we don't have any columns and we don't share this section between two elements, so it's okay for me now. We're in the projects now so we see that we have two columns again. We need to do the same, we need to apply the container row and class called column col-sm. The project 1, we have the whole section, we applied a container, we have the row, so I have the left column here. I'll have the right column, so I'm writing right column. I'll make more space for easier to read. I have the right column and apply col-sm class. I have the div. Let's do the intersection. I did the indentation, my col looks cleaner. Let's see. This is the beginning of the right column, it's closes here. This is the beginning of the left column. It closes here. We need to close row. You can see that it's not underlined by the blue line, so atom gives us the information that this tag, this div is not closed. Let's close it under the right column. Now, it's correct. You also need to close the container div. Right here, I'll do the indentation. Once more and our code looks good now. We've got left, right column, let's save it and see. I'm back in the browser, refreshing the page, and see that the image is in the left column and all the texts are in the right. It slowly reminds us of the layout that we're aiming at. Let's put more content of the products into columns. We do it exactly the same. I'll reuse these lines of code and paste it here. I'm closing the div for the left column. I need to add the next column, the image with the caption, if you can see, this is going to be our right column. Closing the div, indentation, and of course, we need to double close div for row one container. If we see container is closed, row is closed, and we've got two columns. What do you need to remember about this classes from grid Bootstrap is that row is only to use to keep columns, so we don't use it anywhere else. If we just want to display columns near each other, we'll use row, and this is the only situation. Container helps us to keep some certain width of the page. Saving, I switch to the browser and I see that the second project is within two columns. We have the last one, the last project. Again, we can reuse the code we have. This is project 3, so on the left side column, we've got the image. Of course we need the right column, comment, pasting it. Of course we need to close the right column. The left is already closed, we did indentation, and of course closing row. Now, we have to close the row because it's the child of a container. We're closing row, and here, we're closing the container. Let me quickly check if we're fine. We can only add that this is the right column, saving, refreshing. I see that I have sections with columns. It reminds us slowly of the layout. If you want to check how free columns would look like, you can do the test. In the very last project, I can copy the right column and simply duplicate it. What I expect from Bootstrap is to display three columns near each other. I have three columns, so it's very easy later on to multiply. These three columns are the same size, the same width, they're divided. If you would like to change it, change the proportions, for instance, have the photo bigger, let's see in the documentation of bootstrap. We're scrolling to the part where we have different width. For instance here, one column is wider and the other are narrow. Here we apply a certain proportions. Imagine that we have 12 small columns and we just merge them in order to make the column bigger. If I would like to have my column to actually take the half of the available space, I'm writing six because six to 12 is the half. If I would like to apply this on my image here in the third project, so for the photo, I write here col-6, and the other would automatically take available space, what's left. They will divide the half of the whole container to those two columns. I'm refreshing the website and see that my image is two times bigger than its fellows columns. For footer, we're okay for now with that because footer doesn't use two columns. It's just like a one column piece of layout, one column element of layout. We're almost ready with aligning to LMS, there are some tweaks that needs to be needed. But for now, let's stop with Bootstrap grid. If you're eager to find out more about Bootstrap grid, I strongly recommend you to check out the documentation. There are many examples how you can create different twists of the column, how you can stack them to horizontal mode, and finally, how to work on their responsive side of the grids. 10. 1/2 Placing elements on the defined grid: In this lesson, we're going to focus on grid. We're going to place our elements of the website accordingly to the layout. Finally, we have some columns and some sections, so it would be much more easier for our eyes to look at it. This is how our website looks like currently. What we need to do is, we need to put those elements into columns. If you compare it with our layout, we will see that some elements are close to each other, some are separated. For doing it, we're going to use grid from Bootstrap. What is Bootstrap? Bootstrap is an open source toolkit, it's a front-end component library. It's a very big and powerful tool. However, we're going to only use a piece of it which is grid. We're not going to code the grid by ourselves. We're going to use the library and we can adjust it to our needs, so billing the layouts would be much more easier. If you're curious about grid system, you can open the documentation which is available at getbootstrap.com and you can read about the older theory that's stands behind grid and Bootstrap. But I will tell you the most important things you need to know to make it work. So let's get back to our HTML document, and let's focus on HTML for a while. If I open the whole folder, I will see that I have bootstrap-grid.css. You can see some codes out there. All that it's written here it's CSS, but I don't want you to analyze it, memorize it, or learned. We're just going to use the grid that is defined here. If we want to use this style sheet, we also need to link it in our HTML document. We have our styles.css, we've got external fonts but we also need Bootstrap. I would like to link it before my styles. The question is why I'm doing it before not as the last link tag, the answer is that Bootstrap grid might have some styles that can cause a conflict that can actually overwrite our styles. To make ours styles more important, we put it on the last place in terms of the style sheet we have. I'm changing the name here, the file is called bootstrap-grid. I'm getting back to my HTML, I'm saving it and my bootstrap grid is applied. Let's see if I can't see any changes. Well, actually, nothing has happened yet but if I dig deeper into my HTML code in head section, I will see that bootstrap-grid.css is applied. The question you might have is, how we can use bootstrap grid? In the documentation that they show us how three columns are created, we can see HTML code here with some attributes, which are CSS classes and we're going to use them as well. The very first tag is div, did you remember div? This is the container, this is the tag that it's very generic and we can use it for various purposes, mainly for layout thing, for placing the elements, nesting, etc. We've got div with a class container and below there is a row. Row class means that all the elements, all the columns that are included will be displayed in one row, so one by one just like here. Let's copy container and row and let's put them into our HTML document, but before we're going to check out our layout. I'm opening portfolio layout just here. If I enlarge it, you will see that here there is the container and I have two columns. Container, row, classes would be applied for the header section. I have the header, and in the header I'm pasting these two lines that I copied from the documentation. I'm having the container opened, but I also need to close this div. It closes just before the header is closed. I'm adding div, tap here. Everything that it's included are children of this container. I have row, I need row to display two columns near a chatter. I also need to close the row just before one div, but I will also nest in the elements within a chatter. All right. I can see that all these elements mentioned here are children of row. What's next mentioned in the documentation? We've got another class which would just called col-sm. It means that this is one column and the width of the columns would be generated automatically depending on how many columns do we have, so they will take as much space as they need to. Let me copy it as well. If we compare it with the layout, we'll see that this is one column and this is the second one. Everything here like heading, list, and the button would be in one div called col-sm. Everything here till this place will be children of this div, so I need to close it. The next content will be another column. Again, we're pasting div and figure would be the children of this div. Let's recap what actually happened, I'll make it more suitable for the display. We have the container, it starts here and closes here. The whole header is a container. What this class actually does? Well, you'll see in a minute in the web browser. Under container we've got a row, and row helps us to display those elements near each other. We have one column and the second one. We can use comments, left column, this is the left column and underneath we've got the right column. Now it's much more easier to follow, that this is the right column and this is the left column. Always pay attention to the closing tags because sometimes it's very easy to get messy into your code. If you click on the tag you will see the blue underline, you can easily see whether the given tag is actually closed. Here when I'm clicking on "div", I see that this is the opening tag and in 37 line it's being closed. The same with the right column, I have opening the tag and closing the 45th line. Let's save it. Let's see what's generated on the website. I will close the DevTools and see that actually I have two columns. If I run Inspect, you will see that they're getting stretched to the full side, so full width. There are no longer two separate columns but if I change the position of the DevTools to make the width of the window browser bigger, I'll see that they fit and that they are displayed one by one close to each other. I can see that this is my left column and here my right column. One thing we can adjust at this level of the layout is to change the size of the image we put, to make it smaller to actually fill the full width of the columns. Let's get back to style CSS. We can write that every image we have displayed on the website would take maximum width of the container, so maximum of their image will be 100 percent of its parent. It means that if col-sm class has a specific with applied, for instance 600 pixels, the image although its original size is 700 pixels, it won't exceed 600 pixels because we're limiting its width by this line of code. Let's write it here. Here I'm showing you how we can make comments in CSS. I can just write a text, so this is limiting the width of the image. It takes 100 width of the parent maximum. I'm highlighting all the text and again comments slash, so everything written here is a comment. It's a bit different because in HTML we've got these characters and in CSS we've got slash and asterisks. Alright. Let's save it and let's refresh our website. Suddenly you can see that the image is getting smaller and it takes the whole width of the column. We have the two columns near each other. The header, let's say it's ready in terms of the grid. We've got the column one, left one, and right one, and everything is in one row with the container. What the container does, is it limits our width and it depends on the screen resolutions. For bigger screens the container would be bigger, for smaller would be smaller. This is the responsive web design and we're not going to get into details in this course, but I'll be mentioning some things that you can use while using Bootstrap. 11. 2/2 Placing elements on the defined grid – part 1.: The header is ready, let's switch to different parts of the layout. If you'd see on the layout here, we have the full row of the list. We can skip it for now because it's just a full width and we don't have any columns and we don't share this section between two elements, so it's okay for now. We're in the projects now, so we see that we have two columns again, we need to do to saying we need to apply the container row and class called col-sm. In the project one, we have the whole section. We applied a container, we have the row. I have the left column here, I'll have the right columns, so I'm writing right column. I'll make more space for easier to read. I have the right column and apply col-sm class. I have the div, let's do the intersection. I did the indentation, my code looks cleaner, and let's see. This is the beginning of the right column, it closes here. This is the beginning of the left column, it closer here, almost there. We need to close row. You can see that it's not underlined by the blue line, so it gives us the information, Atom gives us the information. There is this tag, this div is not closed. Let's close it on the right column. Now it's correct and you also need to close the container div. Right here, I'll do the indentation, once more and our code looks good now. We've got left, right column. Let's save it and see. I'm back in the browser refreshing the page and see that the image is in the left column and all the texts are in the right. It slowly reminds us of the layout that we're aiming at. Let's put more content of the projects into columns. We do it exactly the same. I'll reuse this lines of code and paste it here. I'm closing the div for the left column. I need to add the next column. That image with the caption, if you can see, this is going to be our right column. Closing the div, indentation, and of course we need to double close div, so for row and container. If we see, container is closed, row is closed, and we've got two columns. What you need to remember about these classes from grid bootstrap is that row is only to use to keep columns, so we don't use it anywhere else. If we just want to display columns near each other, we'll use row and this is the only situation. Container helps us to keep some certain width of the page. Saving. I switch to the browser, and I see that the second project is within two columns. We have the last one, last project. Again we can reuse the code we have. This is the project 3. On the left side column we've got the image, and we need the right side column, right column, comment, pacing it, and of course we need to close the right column. The left is already closed, we can did indentation and closing container. We have to close the row because it's the child of a container, so we're closing row, and here we're closing the container. Let me quickly check if we're fine. Here we can only add that this is right column, saving, refreshing, and I see that I have sections with columns and it reminds us slowly of the layout. If you want to check how three columns would look like, you can do the test. The very last project, I can copy the right column and simply duplicate it, and what I expect from bootstrap is to display three columns near each other. I now have three columns. It's very easy later on to multiply. These three columns are the same size, the same width, they're divided. If you'd like to change it, change the proportions, for instance, have the photo bigger. Let's see in the documentation of bootstrap, we're scrolling to the part where we have different width. For instance here, one column is wider and the other is narrow. Here we apply a certain proportions. Imagine that we have 12 small columns and we just merge them in order to make the column bigger. If I would like to have my column to actually take the half of the available space, I'm writing six because six to 12 is the half. If I would like to apply this on my image here in the third project, so for the photo, I write here col-6, and the other would automatically take available space, what's left. They will divide the half of the whole container to those two columns. I'm refreshing the website and see that my image is two times bigger than its fellow columns. For footer, we're okay for now with that because footer doesn't use two columns, it's just like one column, a piece of layout, one column element of layout. We're almost ready with aligning the elements. There are some tweaks that needs to be needed, but for now let's stop with bootstrap grid. If you're eager to find out more about bootstrap grid, I strongly recommend you to check out the documentation. There are many examples how you can create different widths of the column, how you can stack them to horizontal mode, and finally, how to work on their responsive side of the grid. 12. Building the navigation: In this lesson, we're going to apply some CSS magic to make our website look much more familiar to the project we have. We're going to take care of the navigation on the very top of the document. If we compare it with the project, we'll see that the navigation is on the top, that each element of the list is displayed horizontally, so they are close to each other, not under each other. Also what it's not seen here under static image, I would like to have my navigation fixed on the very top. It's going to be a sticky navigation, and we're going to learn in CSS how to do it. We're getting back to atom, and I'll just quickly redo my columns in atom to see styles here. I have styles ready. My navigation has a blue color, let me copy it from the content txt, which has all the values listed there. If I switch to content txt, I'll see on the very bottom that I've got the color for navigation. It's the hex code, I can copy it, and I'm going to use in CSS. We've got the navigation, if I switch to my website, I will see that this is the whole nav. What about applying a background color. I create a selector for nav, just in the DevTools, and apply background color, sorry colors, I'm missing typo here, background color. I'm pasting the value of the color. I can see that it's blue, fantastic. I can copy to whole selector and apply it in my CSS, and saving it, and it's ready. If I refresh the change is saved. What we can do with the list to make it similar to the navigation we have in the project. I need to mention about something, that it's called display property in CSS. By default, every list element, every li, is displayed as a block element by default. Block element means that it takes the full width of the container. If you see the blue highlight in the DevTools, you will find out that it actually takes the whole space it has, or then does certain container. We need to change this display property from block to inline-block, which means that list element will take only the space that it needs for the contents to be displayed. If I create a selector ul li, and write here display inline-block, you will see that all my elements are close to each other. They are displayed vertically, and if I navigate in the DevTools, you will see that it takes only the width that actually the content defines. If I add here a longer text, the width would be bigger, because the content, it's longer. In block display, it doesn't matter how our content looks like, because it always takes 100 percent width of the container. We would like to apply display in-line block property, but we don't want to display on every list element that we have on our website, because we have different sections. For instance, here, we also have a list that in the project, that the given elements are displayed vertically. We can do this by creating a complex selector, which means that we'll only apply certain CSS to the li elements, from the unordered list that exists in the nav tag. It will make our CSS scope more narrow, so display inline-block would be applied to the list that only is included in the nav tag, only to this one. I'm saving it, refreshing, and see that this list is intact, nothing has changed. But if we inspect the code and look what's happening here, we'll see in the computer tab, that there's some margins apply and some paddings, and we'd like to totally reset it to zero. What we can do, we can actually write margin: 0; padding: 0; for this given list. Refresh, let me just save it, refresh and see that the list element, they don't have any margins. But the margins that we see, actually, they come from ul. Let's write ul, let's copy CSS, and finally, our margins are gone. But we do have some margins from the body, it's actually eight pixels from each of the site, you can see the orange border. We apply the same technique, we can actually add that body and ul, they have margin: 0; padding: 0; We can also change the place of it on their body, so it will be much more consistent in terms of the code. I'm saving it, refreshing, and see that my navigation starts at the very beginning of the edges of the window browser, which is the behavior I want it to achieve. Let's see how the navigation looks in our project. We have some space and the whole navigation is centered. Let's try to apply this. We can do centering identification in various manners. Actually, you can center some elements in CSS in various ways, there are some different methods. What I'm going to do is, I'm going to add just nav ul, and up here margin: 0 auto; which means that this, the first-place, refers to top and bottom, so margins on the top and the bottom of the list, and this on the right and the left. Auto means that it will automatically be adjusted, so it will naturally center our element. I'm saving it, and let's see. The last thing we need to do is to center the whole element. So we apply text-align center and thanks to it, our list is in the center of the navigation section. Let me just copy the last line, apply it, and we have our navigation centered. We can actually apply padding to make more space around the whole list. We can apply padding 30 pixels and we have the navigation bigger. I'm copying it, pasting, saving and we're getting closer. What is also important is that we need some space between the elements of the list, so align. For this, we can also use margin. If we have two positions, the first refers to top and bottom, and the second to left and right. So if I apply 10 pixels, you will see some spaces around them. Let's test if we can edit bigger. Yeah, it looks better. So I'm copying it. Now if you all align. I can do to comments here, that zero refers to top and bottom and 15 pixels to the left and right. I can make my window bigger and toggle soft warp, so it'll be easier to read. We have our comments ready, we've got margin applied and what's next? I mentioned that we would like to have this sticky navigation. So we need to fix the position and for this, we're going to use CSS property that it's called position. For the whole navigation, I need to apply position fixed. Strange things happened to my layout, but no worries for now. I can see that although I scroll, my navigation is still on the same position. Unfortunately, it's behind all other elements. It looks like the layers but we would like to keep navigation at the very top. For this, we use z-index. Tells the browser which layer this element should take. The bigger and the number is, the front the element will be. So if I at one, it will be bigger from zero because zero is the default value. If at five, it's still the same because it's bigger than zero and it will be on the top of the other elements. So I have z-index 1 and what I would like to do is to stretch the navigation to the full width. So I write width 100 percent, and my navigation is fixed. I can copy this and paste to the nav selector. The thing that you might observe is that content under navigation, so everything from the header is cutted out because it's hidden by the navigation. What I need to do is to apply some margin from the header, but we're going to use some new CSS properties. First, create selector from header and we're going to write, top 70 pixels. It means that our content will actually begin 70 pixels below its natural position. So we would get a white space on the top. We also need to position relative because property such as top, bottom, right and left work only when the position relative or absolute is applied. Please remember about it. We've got position relative which helps us to relatively placed the element. I mean, it uses its natural position and takes it as the zero point. So if you would like to change the position by 70 pixels from left or right, you can use it just like this. It would treat this point as point zero because it's the natural place of the element, but we want it to keep it top 70 percent. Now I can see that I have some space for the navigation and it's fixed. So it works like a turn. But I would also maybe increase it to 110 to have more white space available. Our header is a new element, so I can paste it under nav. I'm saving it and see that my changes are applied. The last thing for the navigation for now, is to change the letters to uppercase and we can do it with CSS as well. So I apply a specific CSS property for the list element which is called text-transform, and we want to transform it to uppercase. Now every element, every letter is written in uppercase. Also we can increase the letter spacing using letter-spacing property for instance, by one pixel. It will look more nicely in terms of typography. I'm copying these two new lines and applying in style CSS 27th line, saving it, refreshing and see that my changes are kept. If you compare it with the project, we see that we've got this one line. For now, let's skip it and let's save it for the final tweaks at the very end of the course. Now we will focus on the next element which is the header of the website. 13. Tweaking the header: It's time to focus now on the header element of our website. What we're going to do is to change the size of the heading and take care of the list and of the button, and something weird is happening here, so no worries, we'll cover everything and we're also going to apply the background to the header. This is something what we're aiming at. If you take a look into the assets folder of the portfolio, you will see the font sizes, so you will know that I used 100 pixels for the h1 in 15 pixels for the body tags, so we can easily apply it into our CSS. I switched to atom, I'm closing unnecessary windows so for now, we're going to focus only on CSS. Let me increase the window. I mentioned that for h1 that it's in hour document we're using font size 100 pixels. For a body, we use 15 pixels so we can define that the whole body will have 15 pixels, and if a navigation for each of the element, we use 14 pixels. Lets refer to a website and we have very big heading and very big line height, so let's change it to optimal value which is 150, I copy paste h1 150. What else I want to do? Actually this line height is bigger than I planned, so maybe we can change it to 130. Yeah, it's closer to the project. For the final tweaks, we can experiment later on. But now I would like to focus on the least here and this strange things happening. Let's inspect and see what's happening with the header. I changed the position of the header using top. What it does, it changes the actual position of the header, but it leaves the other elements in the same place. As you can see on the left side, list stays in the same place no matter if I comment out top value or not. So we need to report some how, this is an easy fix for doing it, I will just add margin bottom with the same value as I applied for the top. So it's 110 pixels and I will see that it's actually getting better. I can also increase the margin to make it look more smooth and at some white space. So let's say 160 or maybe 220, looks much more better, so I'm copying it and pasting it to the header selector. Let's take care of this list. We would like to remove those bullet points in the first place and also make the font appropriate. So actually I made a mistake because I applied skills list not to the this section, if we check here, I've got IBM Plex and in my website I've got inknut antiqua, so I need to change it. Quickly we're going to redo this in HTML, bear with me. This class skills-list actually should be apply to this one. Sorry for the confusion. I think that everything should be correct right now. So I'm refreshing to website and it looks fine. What I would like to do with this tax is to for show up more and line height, and also remove those bullet points. How I can do this, well, I will create a generic selector for older elements list into an ordered lists, so it's list-style, none, and it will remove those bullets. Like this. I can paste it under h1, and another thing is I would like to increase the margin. I can have margin on the top and the bottom to make it look more closer to our layout. I'm copying and pasting. Button, we want to style the button and also add some margins to it. For a tag, so for our link which is here, I would create a class. It would be much far easier for us to have it under control, so let's get back to CSS and I have button, and here I can apply some styles. If I check on the project, it looks like button, so it has rounded corners, it has border-radius, and it has the border in general. Let's apply border. One pixel, solid, it's black. Let's save it and see, nothing has happened. I think I know why because I haven't saved HTML file. Please remember whenever you due to changes in HTML CSS, you should save both files. Now, I have the border, I don't like that my text has to underline, so I can apply text-decoration tag underline. No, I'm sorry, I want to reset this, it's none, color to be black, and I would like to add some padding. For instance, 10 pixels, 20 pixels, it's better and also margin from the top. I'm writing margin top like 30 pixels. The margin is not apply and the answer to this question why it's not applied is actually A is inline element. What does it mean? It means that we can only affect everything that's happened in the horizontal line and not into vertical, so we can't apply any values on top or on the bottom. To make it work, we need to change display from inline which is under the default for A to inline-block. Now, we will be able to change the margins on the top and bottom said to height of the element. I'm copying all the styles I applied, pasting it, saving, refreshing, and seat that are still here. Perfect. But we also need to set border radius. We can do this using border-radius, let's say 20 pixels, I think it's sufficient. I'll also increase a little bit that padding from the right and the top to third of pixels, and it looks pretty cool. Refresh and our website is getting much more better. I remember that we also need to change the big caption to smaller size. We can see in the font size file that it has 10 pixels, so let's create fig caption selector and send to font size to 10 pixels. I'm refreshing the page and see that my changes is supplied. I'm checking now the project, the portfolio, what else is missing is for sure the box, the shadow on the image and the background. We're going to cover this in the next lesson. 14. Adding background image and box shadow: Now let's work on the background. We can apply background color and we can apply background image. If you check our image folder in the portfolio, you will see that we have background PNG file. We're going to use this file to apply the background for the heather. Let's switch to Atom in [inaudible]. I'm focusing on header now. I'm looking for header. If you look for some selector or CSS classes, you can use Control or Command F to find it. I have the header and I would like apply here a background. We are going to apply background image. Here's the rule. You have to write its URL. It's going to include the path of the element. Let's quickly have a look on the folder we have. Our background is an IMG folder, but we're editing the file that it's in style CSS, so it's in folders, CSS. The thing we need to do, we are currently in CSS folder, we're editing style CSS. To get to the image, the background file, we need to get off this folder. We need to step back, go back. We're on this level and then we need to enter IMG and we can see background PNG. How we actually write it into code. Well, getting back to the higher level of the structure, we use two dots and slash. It means that we're getting off the folder CSS, and suddenly we're here. We need to enter IMG. I just write IMG and then name of the image. It's called background.jpg. I saved it. Get back to the website, refresh it, and see that my background is not generated. Let me double-check. The thing is that background has PNG extension, so I need to change it, save it, refresh and I can see that actually two blue stripes are applied. The thing is that the background is repeated. If you'd like to remove this functionality, remove this property, we have to define background repeat, no repeat. So our background won't be repeated any longer. Would also like to add the position of our background. We can see that the header is not meeting the navigation we have like the space available, so we can change the position of the header from 110 to, for instance, 70 pixels. Nav and header would make it shutter, so it would look much more nicer. I'm copying the whole code for header, basing it. I see that my background it's getting closer. Now I'm having my Developer tools on the bottom. I will have much more either control to see how the background behaves. To change it, we actually need to adjust background size. This is the original size of the background. We need to stretch it and we can do it by applying background size. If I apply cover, it will going to stretch the whole diagram to cover the area. In our project, the background finishes somewhere here. We also need to add background position Y. For instance, I will experiment with it. It's too much. Something like this or this. Yes. we are getting closer. Let's keep it in such a way that our background size will be covered. It will fill out the whole container. Also we will change the position of the Y axis that is vertical. I need to copy these two new CSS properties. Getting back to Atom, pasting them, saving, refreshing, I can close Dev tools to have a better view. Now my header looks much more better. The next thing that I would like to apply is the box shadow on the image. Box shadow is another cool CSS property. Let's open div tools. Now we can change it to this position. We can edit for this image, for this current one and only this because the other images, they don't have box shadow in the project. We need to add a CSS class to somehow differentiate it. I'm in my HTML document and looking for an image that it's the right column. Let's add class intro image. In CSS, I'm adding class intro image and adding box shadow. Box shadow has free values, first, how it's placed on the X, the second Y axis, how blurred it should be and what should be the color. We're going to use some transparency, so we're going to use RGBA. RGB, you already notice is from red, green and blue and A is the alpha channel responsible for transparency. I remember that black color within RGB, it's zero, zero, zero. The last is alpha channels of how transparent our color is, we can write here, 20 percent. I'm saving it. Let's see. My shadow is applied. What I can see here is that it's cut it out, so I can apply some margin top to make more space from the top and also margin bottom to make the text to caption looks a bit better. I'm copying it. I'm copying and adding to the class called intro, IMG, refreshing, I have my box header already. What else is missing? I think that we're very close to the project. We can skip other tweaks to work on the next section, which is the list. We're going to do this in the next lesson. 15. Styling the list & project sections: Let's focus now on the section with the list that it's mentioning all the skills that Jane has. As we can see, it's centered and it has a bigger font size, which is 50 pixels. Let's get back to our code. For this, we have skills list applied. I'm having new class ready as it's somewhere else, yeah, it's here, but it's fine here we combine some selectors and classes. But these properties will be applied only the first skills lists, so it's fine to create a new CSS object under every classes we have before. We want to center the text for sure and we do this by text-align center, correct and we want to increase the font size to 50 pixels, and let's refresh our website. It looks much more better, I would decrease the margin and the line-height because it's pretty big for the skills list. We haves skills lists and let's supply line hide like 150 percent, which looks much more better and we can also apply margin-bottom from the list, like 60 pixels or maybe bigger, 100 pixels or maybe 130, so we'll have much more space between the elements. I'm copying it and pasting it to the class I already have. Let's refresh, and this is how our list look like. You must admit that it was pretty easy fix to do. The header section is almost done, the list is done. Now it's time to take care of the projects. We can for sure remove front column because it was just for demonstration purposes. I'm going to the very bottom of the project, it's project 3, third project, I'm removing the additional column I don't need. It's fine. What I need to work on now is to definitely change the size of the headings or is it actually done? No, it's not done yet. It should be 50 pixels. I would also work on the line height for the heading, for the paragraph and for the bottom as well. The good news is that we can reuse the class we used for this button and applied it everywhere we need. For all read more, eight tax. Let's get back to CSS, I mentioned that for h2, we want font size 50 pixels. Here I have h1. To make the code easy to read, under h1 we create h2 selector, so I'm writing font size 50 pixels and line height, let's say 130 percent. I'm saving it and see that my font is increased. I see that there's a difference in font-weight that this one is thinner. I would like to remove this boldness from the heading. We can do it by applying font for h1&h2 because by default every heading has font-weight bold. We want to have it font-weight normal. Now there is a difference. Let me just quickly check the font sizes. I opened the font-size document and I saw that actually our headings h2 should have 30 pixels, not 50, so we need to correct it, so h2 will have 30 pixels and now it looks much more better. Let's apply to every paragraph bigger line-height, like 160 percent so we have p, line- height, 150 percent and now it's much more better. The next thing is to apply class button to a text. In HTML for the first project, which is here, I have href so we apply the next attribute, which is class, and we apply bottom. I'm saving it, refreshing and see that the button works here. I would also like to apply this tiles for this button or for that one, which actually is not here so we need to place it as well. I'm copying it, looking for the next, it's here. On there p I'm having button as well. The thing I don't like is that everything is very squeezed, so I would like to give more spaces between projects. We can do this by applying CSS class for dissections. If we launch def tools, you will see that we have this section for the project 1, the project 2, the project 3. For all of them we can apply class, it will increase the margins on the top and on the bottom. What I do right now, I'm getting back to the very first project and add class project. I'm copying the attribute, section and the next one. Now every section of the project has project class, I can create this class, let's say it will be just project class and I can apply margin from top and bottom, let's say 50 pixels or even 70 to give more space, it looks nicer. If we compare it with our project, you can see that the first project and the third one have the background and the margin between bottom and the paragraph is smaller than we have it currently. Let's work on it. First and third project will have a background, so we can apply CSS class. Another one we have project and we can apply it to blue. Again, blue we're going to use the same color as we used for the navigation, so the background color and we apply this color. Sorry, it's the project 2, so I need to find the project 1. For the third project, project 3, which is here, I'm saving HTML, saving CSS. Getting back to my browser and I see that the background is applied. What I don't like is that the whole container doesn't have a padding, so for each of the project, I would also add planet pixels or even more of the padding and maybe decrease a little bit the margin, like this. It looks much more better. I'll take the whole class and replace it, save it, and check. The thing that I was mentioning was that the bottom has the margin-top defined, so we can act various way to solve it. For instance, we can remove the margin if the bottom appears into project class. We've got project class and we give the information to the browser, that hey if we have the class called the baton, that it's included in the class project lets remove this margin, let's set it to zero, let's write such a way. If we have project class and bottom insight, let's set margin-top to zero or maybe not zero, but 10 pixels so we'll have a little bit of space and now it looks much more better. We're almost ready, I was applying the margin to image margin-bottom, so the thing that I can do to make it more universal, I can remove this margin from here and applied it to every figcaption, so every figcaption would have the same margin from the top. The change that I do was to take from intro ING, I was removing the margin and I added margin-top 10 pixels to figcaption, saving, refreshing. I have the margin here and the same values for the captions in this elements as well. What else is missing here? For sure, we need to work on the footer. Let's see in the full width of the browser. We're going to apply CSS magic for that footer. What needs to be done for sure, centering the text and setting the font size to 50 pixels. Let's do it in the next lesson. 16. Styling the footer: We're getting closer to the final steps, so let's take care of the footer of our website. What we need to do here is we need to center the text, we need to increase the font size. Let's get back to this text CSS. We have our footer and H2, and we already defined file font size for H2, which is 30 pixels, but in our project it has 50. Instead of creating another class, we can just provide the selector which consists of footer and H2. Our browser will try to find H2 within the footer tag and only here it will apply 50 pixel font size. We also need to center the text. Actually we are going to center the text on the whole filter because the paragraph is centered as well, so it's text-align center. Let's refresh the page. I'm almost pleased with it. The thing that I would like to apply are some margins on the top and on the bottom. I'm applying margin top and bottom 50 pixels. Actually a bit more, let's add 100. Now it's much more better. Also I would like to add some space between heading and the paragraph. Let's add a margin top for the H2 that it's in footer, 50 pixels. It's not margin top but margin-bottom. Sorry for this. It's pretty small, so what about 100. Yeah, now it looks much more better. Our footer is ready. The thing that I would like to work in a little bit is the alignment of the thick caption and a text in the second project. If we open the PNG file, you will see that the text is aligned here to the right side, and this one, thick caption, has the same alignment. This has line alignment as well. We need to apply additional class, let's call that, right-alignment, and we will use text alignment, CSS property, text-align, and then we need to apply it to the project number 2. For the whole project, we're going to apply here right alignment. I can see that my whole text was then the column in the second project is aligned to right. What else is missing is we need to align to the right the thick caption for that project one and the project three. I'm looking for project one and the thick caption is here, so I'm adding class. The same right alignment, I am copying it, and looking for to project three, and the thick caption here as well. I'm adding class, saving it, and refreshing the website, and I can see that the text is aligned. All right. Let's take care of the navigation in the final weeks. 17. Styling navigation: In this lesson, we're going to take care of the navigation. If you open the project, you will see that we have the black line. How it can be done? It's not that complicated. Let's get back to the code. What we need to do in our navigation, which is on the very top, we need to create an empty tag that it's between Behance, Twitter, LinkedIn, etc. Here we have li, then we'll have empty, class. We're going save it. Let's see. We have this space between. If we use Dev Tools, you'll see that nothing is here, but actually we need a little bit more space so we can define the width. For instance, 50 pixels, and we can add border-top, so only the top edge will have the border, one pixel and black color. I think it should be a bit longer, so like 70 or even 90 pixels. What I don't like is that it's actually not in the center. We can easily position it using some tricks. You already know top. For instance, we can apply top, 10 pixels, and to make it work, we need to have position, relative, but it actually goes down, and this is counter [inaudible] CSS, but if we want to change the top position and make it actually closer to the top edge, you need to add minus so it will have the smaller distance between the top edge. I think that five pixels is enough so we can copy the whole class. This actually means that these styles are going to work only if li has empty class applied. So we can easily copy it and paste it somewhere near our navigation so it will be consistent. We have our line, and we can also add some links to our media. For instance, if I'm going to use external link Twitter, I can add my Twitter account, just actually my personal one, not Jane's Doe, but who cares? So I have aganaplocha, this my real name, and I'm also adding another attribute which is target, blank, and it tells our browser to open the link in a new Window. I'm saving it, and see that unfortunately my link is violet and has the text decoration. This is this why some default styles are applied by the browser, so we need to reset them. We can easily do this by nav li a, so all the a which are in the list elements will have text decoration set to none, color black, and I'm happy with that. If I click it, my Twitter will open. What if we would like to link those elements to the specific areas of the website? We're going to use anchor links, and we're going to use IDs. How can we do it? We need to create "a" and in crop attribute, we need to add a specific ID if we would like to add a link to contact, let's call it contact, but you can put it wherever you want. You can put it Jane contact, name it however you would like to. We've got contact, and we've got ID. ID starts with hash. Now we need to create this ID as an attribute for the specific section. Let's imagine that footer would be our contact section. So we need to create ID, so ID attribute and the name has to be the same just as we define it here. In the Nav, it's called contact. So let's get back to the ID, and we'll call this contact. Let's save it, refresh, click, and we are on the bottom of the page. The same we can do with Works. So Works will scroll us to projects. The first project will start the ID. So we have the class project, but we also need to have ID projects, and this needs to be reflected in the link. If we have Works, I create "a" ID projects, and of course I need to close a tag. For the experience we can, for instance, link to the very first section to the header. So header would have ID experience, and we need to link it as well. I'm saving, refreshing, so if I click Works, I'm on the very top of the Work section. If I click Experience, I am on the very top, and if I click Contact, I'm on the bottom. For other sections, you can use your own links, and you can try and treat it as another exercise. So we're done with the navigation. What else needs to be added? I would love to add some small transition of functions. So hover effects on the buttons. We're going to do this in the next lesson. 18. CSS transition function: All right, this is one of the finals lesson. In this lesson we're going to focus on CSS transition functions so we're going to change the colors of the button on to hover. We have our button, but if we hover over our cursor, nothing happens. We'd like to change the background to black and have the color of the text to white. How we can do this, we need to use pseudo-class, which is called hover. I'm looking for my button class. All right, let's switch to CSS only. Hover class is a pseudo-class so we write it as this. We write the name of the class so after colon we write hover and it means that this pseudo-class would be dedicated for button class only. Whenever we hover over element that has button class, something will change. Let's write 'background', it will change to black, and let's add color to white and save it. Refreshing our page and when we hover over, we can see the change. But what I don't like about it, is that the change is very aggressive so it's like zero or one. I would like to have the transition function so we can also do this with CSS and getting back to Atom and for my element, my original element button, I need to write transition. What will be changed so for instance, background. How long it will take for the change so for instance, half of a second and what would be the function so it would ease in and out so the change will be very soft and very smooth from the beginning and at the end. You can see that the background changes very smoothly, but the color still acts aggressively. We also need this transition function for the color, and we can copy all the other properties. Now the change is very smooth and I really like it and it was only done with a couple of lines of code. You can easily modify these things. You can modify colors, backgrounds, borders, etc. What else we can do? Well, we can also apply some, for instance, text transform or text decoration to underline the text when we hover over navigation. We're getting back to the navigation which is here so we have 'nav li a' so we copy the whole selector, paste it here, we add pseudo-class which is hover and add text decoration underline. Let's see. If I hover over, I have the text. This is not the link yet, so this why we don't have the underline of the text. Of course, feel free to experiment to do much more. The sky is the limit. You can totally have fun with transition functions and with pseudo-class so I hope that you will achieve some interesting effects. This is how the final website looks like. It's almost one-to-one to my project so I'm very pleased with it and I hope that you manage to achieve something similar with your code, with your CSS and HTML. I hope you manage to put some theory into practice and see how CSS and HTML work together. In any doubt, don't hesitate to use Dev Tools to find some new features or to experiment, to change the background color, to change the typography, to do whatever you want with the website. You can easily redo the template to adjust it to your needs, to your taste, your aesthetics. I'm keeping fingers crossed for all your experiments. 19. Summary of the course: Let's take the final look on our website. First of all, we took care of the navigation and we have the list items and we applied anchor liking, so we can easily navigate through our site. We have also external links, for instance, a Twitter account. We created the header section with a photo. We applied box shadow. We have the captions, we have the bottom with the animation, with the transition function, with the pseudo-class apply, which is hover. We have the list, we have the bigger heading. We applied various font styles. We have different type faces. We've got the text centered. We've got two columns in our grid. We have the pictures attached. We've got various text alignment to the left, to the right, and we also have the footer. I hope that you will reuse some sections of the website. I hope that you will apply CSS and practical examples in your daily work. Thank you so much in participating in my course. I hope that you have great fun. I hope that you believed that coding is a great tool to do some experiments with UI in the real life, which is a Web browser.