Transcripts
1. Intro: Hello, I'm Aga and I'm a coding designer. If you ever wanted to have your own website but you were tired of constantly learning coding and you thought that actually this is not for you, it's high time to join my classes. I'm going to show you that coding is fun, and you can actually code your own website within a short period of time. The outcome of the classes would be the created website. I prepared a special layout for you. I really wanted to keep it funky, fresh, and colorful. We're going to code in HTML and CSS, but don't worry, I'll show you everything that's needed. I hope you like the design, and I hope you will have a lot of fun while learning how to code. I can't wait to see you on the students list. See you in the classes. Bye.
2. Tools: So let's talk about tools we are going to use in these classes. First of all, we're going to use our favorite web browser. I usually use Chrome. We you can also use Firefox. We are going to use dev tools a lot. What are dev tools? These are web developer tools and they are built directly into every browser. I really like to use dev tools in Chrome but maybe you've got different preferences. Let's see how we can launch them and what actually is inside. So, we have the Chrome open. We right-click, inspect, and bang, we've got the dev tools open on our right side of the window. What you can see here is the whole code HTML of our website. It's here. We have the Skillshare's website open. You can just check which part of the code is responsible for the the layout. For instance, if you'd like to find out and decode where the navigation is, you just click on this arrow and just navigate to it. Now, you know that this piece of code is responsible for rendering the navigation. Here, we've got styles. We can get to CSS file. We can get back to elements, so our HTML code and see what styles are applied here. For now, it might seem complicated but don't worry, I'll explain everything step by step. If you would like to have this window in another position, you can decide whether it should be dock to left, or maybe it should be in a separate window. We can also open dev tools in Firefox. The rule is the same. Right-click, inspect element, and you can see the window of the dev tools which are part of the Firefox web browser. Again, we've got the HTML code. We've got the CSS. We can also change the position of the dev tools. For instance, dock them to right. Another thing we need to have is a code editor. I recommend you to use Atom. You can download it for free from the website, atom.io. It's available for macOS and Windows. If you like other code editors like Sublime Text, feel free to use whatever suits your needs. So summing up, we're going to use web browser, the dev tools, and code editor.
3. Materials: I'm going to show you where you can find the materials we're going to use during our classes. Under your project tab, you can find attached files on the right. There is package.zip and hello-colors-psd.zip. In a package.zip, you can find exercise one folder and hello-colors, where you will find tons of useful materials like style guide, and there are colors and font sizes. You can find HTML skeleton, CSS, and all the text for the layout are kept in hello-colors text file. There's also image folder, where all the assets are already prepared. If you would like to play with PSD file of the layout that I prepared for you, you can download hello-colors-.zip package.
4. Websites’ Ingredients : Let's start with finding out how the websites are built. I always like to use metaphors while learning something because it's easier to understand some abstract notions. Let's imagine that our website is just like human. It has skeleton. There are many mechanisms that control our body and we do have different skin color, hair, and our own style in terms of what clothes we like to wear. Website is just like the same. This skeletal plan here is HTML language. It builds the structure of the page and has the content. For all the interactions like showing, hiding elements, filtering, search, and complex animations, we have JavaScript. Of course, we can't forget about aesthetics. For all the styles, let's call them clothes for our website, we use CSS. Voila! During these classes, we'll learn HTML and CSS languages, the very basics and the most practical thing you have to know. So, we'll be able to construct the skeleton of the website, fill it with the data, and ultimately style it however we want. We'll decide in typography, colors, assets like background and images. Sounds like fun?
5. HTML Basics - Part I: It's high time to start coding. Let's meet HTML first. HTML stands for a hypertext markup language. This language, as already mentioned, builds the structure of our website. It's the skeleton. Every website is built with HTML elements, and each element has something in it like text or image. We've got different HTML tags and they represent different types of content. We've got headings, we've got paragraphs, we've got tables, we've got images, so we should write our codes semantically. What does it mean? It means that every HTML element has its own meaning. If you would like to use paragraph, we have to use p element. It's time for coding. Let's open the exercise one. This is in your package folder. What I usually do is I drop the folder on the Atom icon. So, the whole folder is already open. Let's click an index.html and we've got this skeleton of our website. Let me explain you what's inside. First, we started our HTML document with DOCTYPE declaration. I won't get into details, but it's something that is required. Thanks to this. Our web browser we'll understand which version of HTML we were using and what is possible to render in the web browser. Every website should start with HTML element. Just look at it, it has opening tag and the closing tag. You can see that the closing tag had slash. Whatever is inside the website will be rendered. What's next? Next, we've got the head section. Do you remember when I was telling you that the website is just like human? Well, it looks pretty similar because it has head and body. This is why I my analogy is pretty close. What is head for? These are the elements that are not seen on the website but are very crucial. For instance, we've got the title here, we've got the charset, which types of encoding we're going to use. Well, I don't have enough time to explain what is that in coding and how it effects on our website but you just have to believe me that it's important. Later, we're going to use the head section to link the stylesheets and external fonts, but for now let's just keep this head section just like that. Everything that body has is rendered on the website. It means that it's visible even if we type anything here, save it, and open our index file, you're going to see that anything is rendered. But for every text, we're going to use html tag so our content will be semantic. Let's start with the heading. We've got different types of heading. Every heading starts with h and a number. One means that this is the most important heading, the top heading. If you have urgent call you would probably use it for the title. "Hello Skillshare students." Okay. What's missing here? We have to close the tag. Now, our code is correct. You can save it. Open web browser, refresh it, and see that "Hello Skillshare students" is displayed. Do you know how to open DevTools? Let me remind you. Right click, inspect, and we see our website. We've got head section. As I told you, it's not rendered anywhere. So, you can't see what this code stands for. But for body, we can see the heading and we can see styles here applied. These are the default styles of our web browser. If you would like to change it, just please be patient because we are starting the CSS last and preview soon. You can edit the text here and it will be displayed. Just please remember that anything that is changed here won't be saved in your local file. It's only temporary change, only in the web browser, and only on your computer. After your refresh the page, the change is gone. You have to go back to your file, have this changed, save it, and then refresh it.
6. HTML Exercise - Part II: We know how to launch DevTools, what HTML is, and where we should write our HTML text. It's time for exercise. Let's create a very basic website that will contain heading, paragraph, link to an external website, image, and list of items. As we don't know CSS yet, don't worry about aesthetics for now. We're starting with exercise one folder, where we have an index HTML. Let's open the files in Atom. We have our files open in Atom. First thing is creating a heading. We use h1 tag as it's the main, the most important heading on the website. For the block of text, we use p tag which stands for paragraph. Let's paste here a block of text. I'm pasting the description of my classes from Skillshare. The text is pretty long, so we can use here a really nice Atom feature. We click on view, toggle soft wrap, so the text is wrapped. What's missing here? Well, the closing tag. When you click on the tag, you can see to underline. If we delete the closing tag, we can't see underline. So, this is a hint for us that something is missing. Remember about saving the file, and later we can open the HMTL file, and see that we've got the heading, and the paragraph. Our website is quite set, so let's add an image. We add an image by writing img tag. However, we need to add some attributes. So, attributes are other properties that are connected with the tag. So, for img, it will be src which stands for source, and as you can see the hint from Atom, it's the local attribute to img tab. So, now we want to add the source of our image. We need to add the path to our image. Paths will point your file which you want to display. We'd like to display the file that's an image. We'd like to display file that it's in img folder, and has the name Skillshare.png. If you open the exercise one folder, you can see that we've got indexed HTML, and img tag with this file, and we want to display this file. A tricky thing here is adding appropriate path. So, we need to entered img folder, and select the file. In our case it's Skillshare.png. It's very important not to do the mistake here, the typos, or the wrong path is always the cause of not loaded image. I also owe you a definition of an empty tag. As you can see, img it's not closed by closing tag. Usually, we would write something like that, but it's not happening. This is because img is void, or empty tag. So, it doesn't have the content. Instead, we write the slash inside this tag. Another important thing is alt attribute. Alt is the description of the image, and it's very useful for people who use screen readers and like to know what's presented in the picture. If the picture has its meaning, has its purpose, we just write it into alt, because it's thumbnail folders Skillshare classes, we can write the thumbnail of the Skillshare classes. If the image is more for decorative purposes and it doesn't have very important information, we can just leave the alt empty. But from accessibility point of view, it's very important to have this alt written. We save. So, let's rewrite the alt, the thumbnail of the Skillshare classes, let's save it. We can see that the image is loaded, we've got heading, the paragraph. Another thing with alt attribute is that if we have the wrong path to the image, or is it just not loaded because of some performance issues of your own low bandwidth. So, let just spoil the path, you can see that the alt here is displayed. So, if people can't see your picture, at least they know what is presented here. Now, we would like to add a link on our website.Let's have it before the image. We use a tag, and the same with img we need another attribute which we write inside a tag. Here it's href attribute, which points to the address of the website we're going to link. Let's have the Skillshare website. Close the tag. Let's save and see what's happening on our website. Well, we can't see any link, although the code is generated, and we can see it in DevoTools. There is nothing you can click on. The reason for that is that we didn't add any text between opening a, and closing a tag. So, here we can write anything we want, and it will be the hyperlink. We're writing what's going to be displayed. So, click here to visit Skillshare website. Let's save it, and refresh the page. As you can see, we have the link here. If I click it, this Skillshare's website is opening. We can also have the website open in a new window. To do this, we need to define another attribute which is target blank. Thanks to it, Skillshare's website will be open in a new window. There are two types of list in HTML. There is unordered list started with u for unordered, and ordered list. So, for our purpose let's pick the unordered list. Let's list all the skills you can acquire by taking part in these classes. For instance, HTML this is one item in this list. Another item will be CSS, and another one Web Design. We need to close our list, save it, and let's see what's generated on our website. You can see that every item starts with the bullet point. So, we have our list ready. If we like to change it to ordered list, we just need to change u to o, the same for closing tag, saving, reloading, and the list starts with the numbers.
7. Send your website to the stylist - CSS Basics - Part I: So, this is how our website looks like after adding heading, paragraph, link, image and a list. Well, you have to admit that it's rather set so it's the high time to send our website to the stylist's. Thanks to CSS, our websites are so beautiful and colorful, so don't waste time and let's write some CSS code. There are couple of ways how we can add styling to the website. There is in line CSS, we can write it in an external file or embed the CSS code into html file. It will focus on a separate stylesheet file style.css. First we have to create the file. We're in our exercise one directory. We create a new folder let's call that styles and now let's create the file. We can do this directly in Adam. So, we're opening Adam, we click styles following you. File, Save As, you should open styles folder and write styles.css. As you can see the file is created however it's empty. Let's add very first CSS selector. Before we started writing CSS code, let's divide our window in Adam to two columns so we will be able to see html and CSS code at the same time. We need to click view panes and split right. Thanks to it we'll have index.html on the left and our style ship file on the right. So let's create our very first selector. What does it mean? Well selector selects the content we would like to style. So, our selector is P as you can see this is the name of the tag so this is the paragraph and inside we write all the declarations. Every declaration consists of the property and its value. Let's say that we would like to have our text and paragraph bigger we use the property font size and we have to give it a value, for instance 20 pixels. We need to save it, and now we can refresh our website. Nothing happens, right? When we select an element with DevTools, we can't see any styles applied, except for the default styles from the web browser. Why is that? Well, first we have to link our CSS file into HTML document. So, we have to link our styles.css file in HTML document. I'll enlarge the window and we do this in the hat section. I'm pasting the tag link. We've got stylesheet attribute at href and type. So in href we write the path to our CSS file, which is styles because styles are in our styles folder and the name of the file, style- styles.css. Let's save it and we love the website. Now you can see that the paragraph is bigger. Let's check in the DevTools. Yes, we can see that our styles are loaded and the font size is 20 pixels. Now it will be great to centre our own heading. I'll show you this in the DevTools. So, we're creating the selector new style rule. It's H1 element, so this is correct. We just click on the line and write the attribute. So for aligning to text we've got text-align CSS property. Now we want to have its volume. DevTools give us some hints. I'm choosing centre and tada, our heading is centered. However, if we refresh the page the change is gone, because it's not safe anywhere, it's just a temporary change in the DevTools. We can do this again, text align center. We can copy the whole rule set. We can paste it to our CSS, save it and refresh the page and the changes already saved. Whatever the other CSS properties, you're asking like how we can enlarge the margins between the elements, how we can set different colors. The best way to learn all of that is just to practice but there's a great page cssdreference.io where you got all properties categorized. Let's practice more. We know how to enlarge the font size. We know how to align the text but now we would like to have a bigger space between the link and our image.
8. CSS Basics - Part 2: Now, I would like to use more CSS properties and see them in action. So, let's have bigger space between the link and an image. We have to use margin property. Let's create selector first, and let's add margin top and margin bottom. Say, 30 pixels and margin bottom, 30 pixels as well. We can write it in a different manner. We can use the shortcut margin 30 and zero. This means that, the same amount of pixels, so 30, will be from top and bottom. The second place is the margin for a right and left. If we write 50 pixels, we'll see that 50 pixels is from left and from right side. We can also use computer and we can see the element here, margin as highlighted by orange color. So you can see instantly that from top and bottom we've got 30 pixels and from left and right 50. So again, we need to copy the reconstructor paste it to our CSS file, we can remove unused CSS code, save it. We can diminish to zero, refresh, and we can see that the map is bigger. What else? It will be great to see how the colors are changing but let's find out how we can use colors in CSS. We can apply colors to text, but also for elements where we can define the background color. Let's add background to the bottom. So on our whole site, we're grading the selector, adding background properties. You can see that depth tools have already predefined list of colors in CSS. You can pick one, but you don't have a very big flexibility in here. So, we can pick back routes in a different manner. You can write here that hex code. What is the hex code? So, the hex code consist of six hexadecimal digits. Every two of them are for red, green and blue channel. So, our color is consisted of the mixture of red, green, and blue. Of course you don't need to there and hex codes by heart. It's great because in depth tools, we've got depth color pull out and we can choose the colors that we like. Color picker and pick the one from the image. Let's say we want to have a pink. Now again, we can copy the code and put it in our style sheets. Because body is kind of the most important tag. It's on the very top and it's like the parent of all the other components, we're just basing it on the very top. Save, refreshing the page, and we can see that the colors have changed. What about the text? Of course, we can change the color of the text. We already h1 selector prepared. We already have h1 selector created. So, we can just add another property which is color and here we can write the hex code. Six Fs, mean that this is white. But again, you can pick whatever we like from the color palette. I'm okay with white, so let's keep it like that. For the link, we can also create the selector and change the color. I'm just choosing the first one color, weaker, and using through the orange. To make the link more visible, we can also add the font weights. So, how heavy would be the font, we can add both. As you can see, this is the bolder version of the text. Now of course, we have to copy it and paste to our styles. We were also adding the color to our heading, let's save it, and we finally have some colors on the website.
9. Typography in CSS: We'd like to make our website prettier. The very important thing is typography. Fortunately, we can select a lot of beautiful fonts which are available for free. Very often, I use Google fonts. You can browse through all the amazing typefaces. So, let's pick one of them and apply it to our website. Let's pick Lora. We click select this font, we click on the window on the bottom, and see how we should embed the font. There are two ways. We can paste this link into the head section or paste this line to our CSS. Let's paste it to our head section in HTML file. Just after styles, we're pasting the code copied from Google fonts. To make the font work, we need to add it as a property to the given selectors. For instance, you'd like to have h1 written in Lora typeface. You can copy this through CSS rule and paste it to the selector. Let's save it and refresh the page. We're using depth tools, and you can see that Lora typeface is applied. If we uncommand it, it goes back to Times New Roman. Let's pick different typeface for different text, like paragraph, or link, or list. We called this the body text. So, we can choose Roboto, maybe. Let's pick Roboto Mono. Again, we select this font. We have two fonts combined. We'll copy paste to our HTML document. We can see that there is Lora and Roboto here. We want to apply Roboto to the whole website. So, we copy this code, font-family, and we paste font-family property to the body. Thanks to that, the whole body will have Roboto. Now, we can refresh the page and see that the font has changed. Paragraph inherits the font-family from body. If we uncheck it, Roboto will be gone. We can also only add this to paragraph, and command it from body, and see that it works only for paragraph because the font-family is applied only to the paragraph. Of course, you can choose a lot of different fonts. Everything depends what style you would like to achieve at the end. Just please remember that if you would like to have more typefaces, usually, it takes longer for the page to load. Google fonts has a type of metrics. So, if you open the window, you'll see what is the load time, whether it's reasonably fast or slow. We can also attach different fonts not only from Google fonts, but they have to be web fonts, and they have to be hosted somewhere. So, for this classes, to keep it more simple, we'll be using Google fonts only.
10. CSS Selectors - classes: This is the current state of our website. I need to mention about other CSS Selectors because we haven't already talked about them. So, we learned that there are element selectors like p, h1, img. So, this is the name of that tag in HTML. If you would like to style a paragraph, we just add p, but this p styles every paragraph that is included on the website. So, for all paragraphs, the font size will be 20 pixels. What if you would like to have two paragraphs and only one will have font size 20 pixels? For this, we can use CSS classes. This is another selector. How we should create it? We always create it with dot and then the name of the class. For instance, intro-paragraph. The rule is the same, we just add here the CSS properties, but we also need to add class to HTML element. We can add to this by class attribute. Let's copy the paragraph, so we will have two of them. Let's save it. Let's refresh our page. We have two paragraphs. So now, let's style that the one on the top will have 20 pixels, and the one on the bottom will be 14 pixels. We have the class intro-paragraph already created. So now, we are adding the class to the first paragraph, which is going to be the intro. So, we just type the name of the class, as you can see, we have got that class attribute and now, we need to add the property. So, we can set that all paragraphs we've got will have 14 pixels, but the intro will have 16. Let's refresh the page, and as you can see, using the DAC tools, intro-paragraph has 16 pixels, 14 pixels are overridden. This is the hint here that the property for p is applied to all paragraphs, but we have the class that has bigger priority, so that paragraph will be written in 16 pixels font size. The paragraph below has 14 pixels because it doesn't have class. If you would like to add this class to the second paragraph, we can do it, no problem. You can just copy, paste, save, reload, and class works. I hope that you are more familiar now with creating the classes.
11. Deconstructing the layout: I only focus in building our lay out. So, I'm having layout open. Let's call it Hello Colors. So, what I would like to do right now, is to show you how I think in terms of the HTML structure. I'm watching that layout right now and I'm going to quickly draw the components of the page. What sections do we have? I'm going to show you here how I deconstruct the layout. So, later, it is easier for me to code it because I know what are the components and what HTML elements I should use. So, let's start with the beginning. I can see on the top that we've got the navigation. So, this piece of paper is my current cloud editor. So, I've written on the very top that we have nav element and later we have the header. Here, we've got the header of the web site. So, I'm having the header, and the header is divided into two columns. Left, right and all together it's a header. When we scroll, we've got a paragraph here, and everything that's below the header is in the main section, because it's like the main content of the web site. So, I can create here main. Main will consists of several subsections. So, first will be the work section. So, we have section for works. There are three free rows. Below works we've got my team section, so another one. Then, on my team we've got contact section and the last one is the footer. So, the old information like social media and email. So, below we have footer. So, here we've got works, my team, and contacts sections, and we'll be using those types of HTML text.
12. Building HTML skeleton - Part 1: We are ready to code in HTML and CSS step by step. Let's open HTML template that is included in the package. We've got in this HTML, all the assets required for the layout, the whole layout which we're going to code, and see CSS, style.css, and bootstrap grid. So, we're going to use bootstrap. Bootstrap is a type of framework, and I don't want to get into details, but we'll be only using this bootstrap strip. So, thanks to it, we don't need to get into flex box, or how to build the columns, we'll just use a type of grid we already created. So, we can save some time. If you remember how we divide that layout, we have some sections like navigation, header, section for works, section for my team, and section for contact. On the very bottom, the footer. So, let's create it in HTML. I'm opening index html. For now I can close these styles. So, let's start with nav. Nav is the navigation tag. Inside, we're going to create a list. It's going to be our menu. So, we've got the offer, portfolio, about us, contact. I can just read it. The offer, another item into the list, portfolio, about us, and contact. Okay. So, we've got the navigation created. We can save the page and open it in the web browser. As you can see it's not very attractive yet, but don't worry. Another thing we want to finish, is the header section. Something that is on the top. So, header, and inside we've get two columns. Section one on the left, we can use commenting, and HTML you do is just like that and that. You write this piece of text right, left column and you close it like that. Another thing is that we've got the right column. So, we can add it, 'hello' and below, we've got the paragraph of text. Let's make it the code more clean. Okay. So, this is our left column. On the right, we've got the image and a caption. So, we're adding image. The image is in img folder. This is cactus. We're closing image stack with slash inside element tag, and we also add alt attribute. Save in the caption below. I'm pasting and closing. Let's refresh the page. Well, it's only one column, but don't worry. When we'll add columns from bootstrap script, you'll see that the layout will be the same as on a picture. So, let's add more sections. We need to add simple paragraphs. You can add this to the main section. So, everything that's below header, and below main, we've got the footer. So, in the main, we're creating the paragraph of the text. Below the paragraph, we've got the section for works, section, I'm closing it. Now we can add comments, 'works'. Below section, we've got my team, and below my team, we've got contact. Inside works, we've got three rows of different projects. We can create this row by using div. Div is a kind of a container, so it can consist of various elements. It doesn't need to be taxed, it can be an image. So, it's like a generic component. So, we've got first if, so we've got first, second, and third project in work section. Let's add some text. We can use h2 heading for works, you can use the same heading for section, 'my team', and the last one, contact. Let's refresh the page. We've got works, my team, contacts. Let's add more elements to work section. We've got image, heading, another heading, part of a text, and a link. We can see here that, this is a smaller heading than this one and this one. So, if this is h2, this would be h3, and this is h4. So, first element h4, let me check the text it's branding and web and the image. The image there is a pineapple. Pineapp, JPEG, alt, pineapple. Let's save it. We've got heading and the image, and we're missing the text here with the heading and a link. H3 pineapp, paragraph. We use break, br, to separate the content. This is our new line, and we are going to close paragraphs. Let's refresh and see. As you can see, every new item is in the new line. Thanks to break. The last one is the link. We don't know where the site will be linked, so you can just add an empty href, or a closing and inside the link, insert name of the action. So, visit the website. Our section is coded. The second one is just the same but the order is changed. So, we'll have first h3, paragraph link, h4, and an image. So, h3, I'm closing paragraph and last one, the link. We can copy the same item, and the first section is your homework because as you look, it's just the same as the first section. So, you just can't copy. Oh, and I forgot about the image of course. So, it's here, it's healthy dining, and of course h4 branding and mobile. We're saving and reloading the page.
13. Building HTML skeleton - Part 2: Let's code my team section. So, we've got one column that consists of two images and one column with heading and paragraph of text. So, let's start with the images. My team, so image, team sorry, team one, alt, team picture, another image, team picture. We've got the heading and a block of text, so a paragraph. As you can see, it's a bit messy. So, let's make it more clean, and let's put break or let's put two break. Here, we can close the paragraph and create a list. So, this would be our list item. Another one, closing, and another one and the last one. Of course, when you do close the list, click save and refresh. We've got two pictures, heading, paragraph, text, and the list. Another section, contact, so we've got paragraph, two images. So, we have email, another paragraph. Let's do clean-up as well and paragraph for the address. Break, break, click save and two images. Contact1.jpg, we can leave it empty. Contact2, that's it. Just refresh it and we're missing the footer. So we've got four icons, so four images. The background, as you can see the social media. We can do this as a background not as a text and the paragraph on the very bottom. Let's put paragraph because it's easier for now and icons. We've got Twitter svg alt Twitter icon. Another one would be Facebook, Facebook icon, Facebook. We've got Pinterest. By the way, I'm taking the names of the files from this directory. I don't know them by heart, although naming is quite simple. Do we have an Instagram? Instagram icon. All will be linking to the social media. So, we can add name to every image. Of course, don't forget to close the tag. Let's refresh it. Well, you can see now that the space is white. Why is that? This is because we're using SVG icons and they are pretty big. So, we'll take care of it in CSS. If we add background to body, for instance, pink, you can see that the icon is very big and it's wide, so this is why it's not seen on the white background. SVG takes the whole amount of space that it can take, so it usually just stretch to 100 percent width, but we'll change it in CSS. So, don't worry for that. So, refreshing the page and we're ready to add our styling and bootstrap grid.
14. Bootstrap grid - Part 1: In this lesson we're going to learn how to use bootstrap grid. There's grid website which gathers all the most important information. I'll focus only on some parts because we want to finish our website as fast as possible. But if you feel like exploring this topic, you're more than invited to check out the bootstrap documentation. So the first we need to do, so the first thing we need to do is to add bootstrap grid to our HTML. If we open our HTML template folder, and get into CSS folder we can see that there are two files; style CSS and bootstrap grid CSS. So we need to add this entire sheet to our HTML document just the same as adding style CSS. So, we copy the link tag and we add the proper name. It's bootstrap grid, and we save it. So now we can finally start using grid. Let's create disk 2 columns right now. In the documentation, if you scroll down a little bit you'll see that we can create two columns. This is the code, so we've got a container that limits the width. We've got the row. So everything that's inside the row will try to stack near each other. We've got div with class coal and another one, and they are near about each other because here we've got width 100% so it's like a break. It's like this element will go to the new line. Which is reflected here. So let's try. We're going to use row class and we're going to add this to our header. Header section is here. So let's go to code editor, we're adding row. The next thing is to add class coal to our left column and the right column. So thanks to that, they will be close to each other. Let's refresh and see. And we've got two columns. We can inspect. Maybe it would be easier to have on the bottom. We've got whole of row, coal 1 and coal 2 there just close to each other. We can also add some background just like a drop background to see that the columns are created. Say yellow. Here we've got two columns and everything, what's inside section tag. So each one heading, the paragraph, they will be within this column. Okay let's refresh and let's take the colors from the project. I'm using Photoshop, I'm using Photoshop and color picker but you can also use my document which is in a folder. Hello colors, text document where you'll find all the colors and the text. So it would be easier for you to quickly code the Website. So for the first left column, that we need to add the navy blue background. We need to add another class to differentiate it. So here we should add, left coal. Space is just like combining the classes. So it means that there is class coal and there is another one, left coal. So let's create it in styles CSS. Left coal. Maybe in the hello text, background color and I'm pasting text code from Photoshop. Let's saves it. I'm savings index HTML, refreshing and dada. My site has navy blue background. Let's do the same for the second column. I'm creating right coal class. Background color. This is the turquoise color and adding this class to this section. So this is my Hello section, navy blue section and turquoise section. And it's done. We're getting closer. Now we can work on the, another on the work section. See on the lay out, this content is centered. So this width is not 100% of the web browser. It's for instance 1000 pixels and it's centered whatever is your resolution. So we're going to use container class. This is what's written and the documentation. So containers provide a means to center and horizontally package your sites content. Use container class for responsive pixel width or container fluid for width 100 percent. We're going to use a responsive pixel width. So let's add container to the whole main. Let's refresh the page and you can see that container works. You can also check this out and inspect. Main. Here you've got more information about the width and bootstrap grid. If you're curious you can check this out. So the current width of the container for me it's 1140 pixels. I'm talking that, this is my case because I don't know what's your screen resolution is. If you change the width of your browser, you will immediately see that the width of the container is changing. Okay so we have the container, now we would like to create two columns within the work section. Let me show this on the layout. So we've got one column for the image and the second one for the text. Here is the width section. We need to divide this to two containers. So one container would be one column and we close it after. I am GTAC because it's within the first column. We can copy it. And the second column with the text and closing. Why do we need another div? So another denari container for creating the row. So in one row, we have two columns near each other. Let me save this and refresh the page. And bang, we've got two columns. So let's do the next row. We've got healthy dining. This is one row, one column for the text and the second for the image. So we can copy row and paste it here. And again this would be one column and this would be the second one. So let's code div class coal. Of course we need to close it. Please remember about it, it's super important. And the second coal. So within one row which is, which starts here and closes here, we've got left column and right column. And bang, it works. So the fruit would be your homework. You need to create one row, one column for the image and the second one for the text. I can give you a hint. This is the same as this one but the only thing that is different is the image and the text. It just works like copying and pasting. If we refresh, you can see we've got almost the same layout. So let's get back to my team. We've got the heading and here we've got one column with the pictures and the second column with the text. Again, the situation is the same. We can copy row. So I'm pasting row. I'll do the tab here just to see which is which tab is the parent. So here we create, coal and we close it after pictures because this coal includes pictures only and the second coal. Okay, so we've got one coal with the pictures and the second one which closes here with a very long text. And everything should be within the row, but as you can see I didn't close it because it's not underlined. So this is my fault. Let me fix it. Yep. Now it's underlined. Great. Save it. refresh. When we refresh it, we see that there are no two columns. There's like only one. And the reason is that the pictures are pretty large. So if we type coal it will just take as much as amount of the biggest image. So another thing can bootstrap here is to type how many coals it should take. Imagine that we've got a grid of 12 columns. And we want to have this part, and this part should be half. So six of them. So we write. Medium is for the medium screen sizes. And now suddenly if we have the text within, on the image. We can also add CSS property, max width 100%. Our image will be capped within the container. Even if it has bigger size, it will be adjusted to the maximum width it can take. Here, this is our container. Let's do the modifications. We need to add coal, medium six, save it and we need to add and size that image should take maximum width of 100 percent of its parent, of the parent container. Let's refresh and we've got two columns finally. Okay, so contact we've got-
15. Bootstrap grid - Part 2: In this lesson, we're going to cover the contact and footer sections. So, we're going to add the grid there. Let's code it. Again, we can copy row. We go to contact section, so row, we close the row. Let's create one column, class col. So for every image, we create another column. Let's refresh and bang! We've got three columns. Perfect. So now is the time for the footer, the one that it's filled with white icons. So, footer has four social media icons and a text on the very bottom. It has also background, so we can add it. We can also define the size of the social media. Let's create CSS selector footer, background color, and I'm pasting the background color I took from the document. I'm saving and refreshing. As you can see, the background has this salmon-like color, but the icons are pretty big, so let's make them smaller. Every image will have social icon class, and saving. I need to create social icon class. Let's say that height will be 60 pixels. That's better. We still can see some white spaces here. Let's use Inspect to check out what's the reason for it. If we select Body, you can see this orange outline. We can get to the computer tab and see that body has margin eight pixels. So, for margin, this is the default style from the browser. So for a body, we will need to reset the margins and the paddings, and it's almost there. We can still see some white space in here. I guess, it's from HTML. These are some tricks, but don't worry. When we will add height 100 percent, it will be okay now. So let's apply the styles. So for body, we'll have margin zero, so we'll reset the default settings by the browser and HTML selector on the very top because of the padding of the whole page. We add height 100 percent. So it takes whole height of the web browser of the viewport. Let's refresh and almost there. So, now we would like to center these icons, and this text should be in the same container as the rest of the content. So, first let's add container. It's in another div. That's better. Centering. Unfortunately, we don't have enough time to focus on all the issues with CSS, how to center horizontally or render it vertically, but I will show you some tricks. So, we would like to center this container with the icons. We can do this by creating div class, social icons container. We create the same class in CSS. So the other thing we'll do here is writing text-align center because it will center the content that is within the content container. Works. Of course, we need some spaces between the icons. We can do it here by adding margin, the top, bottom and the right/left. Let's check. Yeah, that's better. Almost there, getting very close there. Now, it's high time to take care of typography, colors, and sizes. So see you in the next classes.
16. Styling navigation: Before we get into typography and colors, let's solve the issue of the navigation. As you can see, it's vertical, not horizontal. So I will show you one thing here. So we have our navigation created on the top of the HTML document. The list here is, by default, vertical, so we need to make it horizontal. I may create a selector. By displaying every li, so every item on the list as inline-block. It changes from display block to display inline-block. Display blocks of the block value means that it takes the whole amount of space. As you can see, it takes 100 percent width. To show you that it's blocked by default, I can type it and nothing has changed. But if we apply inline-block, it changes its properties and every element that has display inline-block placed close to each other. So we're almost there. Let's create a class navigation, and let's write CSS selector navigation. So navigation, this is our class. This is the whole list, but we want to target li, which is the item of that navigation. The web browser will work like that. Let's find class navigation, and let's find every li item, so every item on the list. Display inline-block. Almost there. We'd also like to have ul centered. So we can add text-align center. You can copy it, and we can create navigation, text-align center. So navigation, it's our list and it's going to be centered, and almost there. Another thing is that the navigation is placed as a new layer on this two columns. Here, we've got the white space. So to change it, we need to change the position. We don't have time for learning whole theory about positions, but let me just show you one trick. If we add to the whole nav position, fixed. It's gone. It's somewhere there. But we need to also put it on the front. We did this with z-index. So zero, it's hidden by the next elements, so by the whole header. So we need to add higher, for instance one. Now, you can see it. If we scroll, the menu is fixed. So it's like a sticky header, but it's not centered. So now, we'd like to center the navigation. There is another trick. So we have to write left zero and right zero, and the content will be centered. You can see the navigation is overlaying all of the other elements, so let's copy it and that's to the navigation, nav, and it works. We can add more spaces between the items, so we can add margin zero from top and bottom, but 15 pixels from left and right, and it's there. So I'm also setting the color. It looks like this. So now, it's time for colors, typography, spaces.
17. Typography & Colors - Part 1: Now to take care of typography and colors, and I'm very excited for this part because it can totally change the character of the website. So, let's start with looking for the fonts we've done, we're going to need. So in the layout, I used Prata and Inconsolata. So, I'm opening Google fonts and looking for Prata exactly. I'm adding it and Inconsolata, yup. I'm selecting this font as well. I'm customizing. I need both for Inconsolata as well, and here for embedding, I copy the link. I've got two fonts and I'm pasting it within the hat section. So, the font link is incorporated but we still haven't at the font family anywhere. So, let's check the names. We've got Prata and Prata is used for all the headings. So I can write a group selector like h1, h2, h3, h4, h5, all the headings, and I'm applying Prata font. Now, we can refresh the page and that font has changed. Great. So now we can add Inconsolata because Inconsolata is used everywhere in the body text. We can apply it to body. So, the whole HTML will be written in Inconsolata font except for the headings, which are going to be in Prata. Let me refresh and we've got the fonts loaded. So now is the time to add proper colors and font sizes to our text. As we know, this should be white. So, we're going to the left code section and we can find in CSS and add color white. We also want to have this text centered. Okay. Hello should be definitely bigger, 150 pixels, so we can add information that current one is 150 pixels. It's also bold here. Let me check this in the doc tools. So by default the font weight is bold but in the project, it's regular. So, you write normal. Can you see the difference? So, we're copying it as well, actually all headers. So, it's normal here. I just realized that for navigation we're using Prata as well, so we have to do the change, so we're taking Prata. So, we're having Prata for that and it should has 22 pixels. We're getting closer. This text should be centered and white. So actually, we can add the same CSS properties to both classes, so left-col and right-col, and we do this by adding column. I'm taking the CSS properties, pasting it, saving, and refreshing. You can see it's a lot better. We'll take care about this part later. So now we should focus on the typography and the sections below. Scroll down to find out more about myself. It's in the blue and it's centered, so we can create class here, intro. Actually, it's scroll and we're adding these classes. Color, this is the color I copied, and text-align: center. Voila. Okay, so now we can focus on the headings like works, my team, and contact, and they have all the same sizes and the same lettering spaces, but they have different colors. So, let's see. We use h2. So, for h2, we need to define font-size. It should be 100 pixels, but we should also create classes that will help us to differentiate the headings and we'll be able to add colors. So, my proposal is to add class to the whole section. So, the next section team, class="my team". Remember, that you can make spaces while adding the class name and we're getting to the last section, contact. So we can write combine selector like works h1, h2, should have this color. My team h2 should have different color and the last section contact h2 color. Let's refresh. Contact, so adding, saving. We have works. We have my team and contact. So now, we can take care of these headings. They all have the same color here. This one is different. Again, we'll need to create combined selectors.
18. Typography & Colors - Part 2: So, let's now create styling for h3. So, h3 has font size 50 pixels. For works, it has color of this one. For myteam, it has a different color. As you can see, it's blue, not green. Let's save it, and yes, this is the one. The other changes that are needed is the h4. So, h4 has its background and color. So, we are writing h4, font size 32 pixels. Color, we have got background color. Let me save it and refresh. We are very close, but we don't need that, but if we see in the draft tools, the heading is a block element, so it takes a whole width. We have to set it to display inline-block. Yes, and we need to reset all the margins. We would also like to add padding, so we will have more space around the text and within the turquoise container. So, let's add 10 pixels. Let me see, there are only a couple of them, it is like three pixels. Let me copy it and paste to the code that is there. Saving. We're almost there. What about the links? There is letter spacing and it has different color. So, all the links will have spacing, two pixels, color, and size, 18 pixels. It doesn't have the underline in the project, and it's bold. So, underline its text decoration. So, we need to reset it, and of course, font-weight bold. I think we can increase the letter spacing. I did the wrong one, so, changing. These are the links. We can also see the change in the body text because for works, it is green. So, let's create that for works. The color is this one. It has changed. The text here is quite squeezed, so I would like to add a bigger line-height to add more air. So, let's set that for every paragraph, the line-height will be 134 percent. So, now it is easier to view it. I am going to copy it, and paste. Refreshing. In the next lessons, we're going to work on the final layout tweaks.
19. Layout tweaks - Part 1: Now, let's focus on the top part of the layout, to have it very similar to the one we have in the project. So, I would like to have two boxes. As you can see, we've got more space around. Here, we can see it. So, we will need to add the container for heading and paragraph, and we'll need to have a container for the image and the caption. So, we'll look up to index, we'll look for left col and right col. Now, we're going to create div for the hello section and the image section. So, let's call the top-container, we're closing the div, taking care to have our column clean, you can copy this div, and add it to the right column. Now, we need to create it in styles. The order in CSS actually doesn't matter, but it's good to keep it in a logic way so we can start with the very basic elements on the top and later have header and we'll go to the very bottom to the footer. So, let's get back to our new class, which is top container, Okay. So, now let's add CSS properties to our top container class. I measured that it should have width about 500 pixels. I'm saving, then refreshing the page. Almost done, now we need to center it using margin zero auto, saving and we're very close. We need to add more space between image and the top edge and we also need to diminish the space between the heading and the text. So, I'm checking the spaces, and then I can see the heading has margin. So, if I edit to zero, you can see that there's [inaudible]. We can also add height for left col and right col. We can set the minimum height should be 90vh, which is a viewport height. It means that it will take 90 percent of our browser window. So, we can have this effect that we can see this on there as a cover and if we scroll down, the projects are below. So, let's add this, left and right col, height 90vh, viewport height unit. I forget about adding margin zero to which one? And now need to center this elements. We're going to use flexbox. Unfortunately, I won't get into details but just follow my steps. So, we'll need to add to our left col and right col, this display flex property. So, let's get back to left col and right col, select those and type display flex. It means that flexbox will be a flight. Flex box help us to align items to center them horizontally or vertically. It's a very useful things so if you like to explore it more, you are totally encouraged. We also want to center it in the main axis, which is the horizontal axis and also in the vertical axis. Let's save and refresh. The items are centered. Okay. So, now, let's focus on my work's section.
20. Layout tweaks - Part 2: So, now let's focus on overlaying these headings on the image. Just look on the project and you'll instantly know what is our aim. So, for doing good, I need to tell you about positions very quickly. So, we'll going to use position relative and position absolute in CSS. So, for the image, we're going to apply a position relative and for the headings, position absolute. As you can see, it's gone but no worries we'll add top zero, left zero and z-index one and back. Suddenly, we have our heading overlaying the image. So, thanks to that that we applied the parent container as our position relative and this element that has to overlay the parent of position absolute, we can achieve this type of effect. So, let's apply it into our code. Let's look for the pineapple. Yeah, we are here. So, we need to add class for the image. So, it would be works image and we need to add this to every image we have in the work section, and we need to create class under works. So, works image. So, works-img, position relative and for every h4 in the works section, we apply position absolute, z-index one. Let's refresh the page. In the project, the heading is overlaying the image but it's also beyond it, so we can do by adding top, let's say, minus five pixels. So, lets see. Yeah, it's a bit better but I guess it would be 25. That's a lot better. So, let's copy it, paste it and save. Another thing is that we have spaces between the images, and if we compare it to our project, you can see that the images here are adjacent to each other. We can do it by adding no-gutter class. No-gutter class is already defined in the CSS grid from Bootstrap. So, the thing that we need to add is no-gutters class and we add it, for instance, to our row and thanks to it, the gutter between the columns and rows, which is usually 15 pixels in terms of horizontal padding, it will be reset. So, let's try. So, we're having our work section. We're adding the first row. So, we're adding no-gutters. Sorry. I'll copy it and pasting it to the second item and the third one. I'm saving and refreshing the page. Well, you can see that something has changed but the images are still distant from each other. I'm going to use DevTools. Now, it's better but maybe I'll put on the bottom so you can see that we want to diminish this space. The reason for this it's probably the image width because this is the image and this is the whole column. So, the column is bigger. So, we need to stretch that image fully to the container. So, we add with 100 percent and the image is adjusted. That's great, but now we need to do another thing which is adding paddings to all the text because as you can see, it sticks to the left side of the image. So, let me copy this and add it to works-img. So, now for every roll of the works, we need to create div that will wrap the text here and this one and this one. So, opening the code. This is our first work and here we've got the text, so create div class extra gutters. We'd have to close the div, of course. We copy it and paste for the other sections and closing as well. Now, we of course, have to create this class and define CSS properties. So, it's extra gutters and we want to have padding zero from top and bottom and 60 pixels from the left to right. Let's refresh the page and finally our text has paddings. We can also check in the DevTools, extra gutters and you can see that there are 60 pixels paddings. Comparing it to the project, we can see that this text is to the left and this text is to the right, and also this text is on the right side not on the left. So, for this, we'll be using text align with the whole gutters. Let's text to align. So, we need to apply it to our styles. We can create class, right aligned, text align. Add this to our work that is in the middle so the second one. We're adding right aligned, save it, refresh and it's done. So, here the last things in the work section is having the headings on the left and on the right side. So, here's on the left and here's on the right. So, we're taking branding and mobile. If we add, right zero, because it's position absolute, so text aligned won't work like in the previous example, I can show you, but this doesn't work. So, we need to add right zero, so it will position our element to the maximum right side of the far end, so we creating selector now, works h4, right-aligned class will be right zero. So, it means that find me section with works class and find me h4, in this section that has works class and that h4 should have this class. We also need to add to this H4. So, this is H4 in the second row of the works, we also need to add this class, right-aligned. Everything is okay. I'm refreshing the page and it's done. So, works section is done, hello section is done and now is the time for my team.
21. Layout tweaks in the bottom sections: Now's the time for my team, and contact, and the last one, footer. So, comparing to our website, the thing that we have to work on is the space between the images and the space that heading has from the top. So we need to add margin to images in the team section. So we can add class="img-margin" and we can add img-margin class, and we'll have margin-bottom, say 20 pixels, and we'll need to just refresh, and also, we'll need to reset the margin that is in h3, margin zero. So we're adding it to our my team section, and we've got a bigger space between heading and the text. So actually, we can add margin zero, which is top, zero which is margin from right, 50 pixels or even more, 90 pixels from the bottom or maybe let's have it less, 70 pixels, and zero pixels. This is the shortcut. So myteam h3, it's here. Saving. We started this in our new line, so we also should add a break like this. Refreshing and we have it, but the line-height is too big, so let's change it to 130 or maybe 100 in font. Yes, 100 line-height, 100 will be enough. Almost there. We can also enlarge the space between images so the text will be in line with the images. So img-margin, let's add 40. Still not there. Let's add 60. It's a bit better. And we can also add with 100 percent. Okay. So now let's focus on contact. For sure, we need to add bold font to the address, so we can use new tag, which is strong. So we add strong. It means that the text would be on a bolder version. It's here and footer. So footer should have differing heights. It should have background and let's check what else. Yup. So it should have at least 200. Yes, so our footer has background, is higher, and there is a space between contact and the footer. So we don't have it in our page, so let's add it. So on footer, let's say that height will be 220 pixels at least. We'll have backround and I will show you how to add background in CSS. We'll capped to add url function and the path to our image, which is img and socialmedia.svg, but we're here in CSS, so we need to get back to the main folder and then, enter img. We got back using two dots and slash. And now, we're here in the current folder, so we are entering img and taking the proper image, so socialmedia.svg. It works, great, but we don't want our background to repeat, so no-repeat. We would like to stretch our background, so background-size contain or maybe background-size 60 pixels, 60 percent, but the background position would be centered. So this is background image, and thanks to it, we'll be able to have background image and background color because if you delete image, it will overwrite the background color, so please remember about it. We're very close. We also need to add color whites. We can center the text because it looks better. We also can add flex box to center the elements, so we've got this fill flex, justify-content center, align-items center. Perfect, and margin from the top to increase the space between the pictures from contact section, let's say 60 pixels, pixels, and we're ready. I'm copying that whole code and pasting it to footer. Save. This is our website coded. The last thing we're going to do is to add links to our navigation.
22. Adding links to the navigation: So, now let's link the navigation to the section of our page. But first, let's go to nav, and let's change to hello, and works, and my team, okay. So, to do this, of course, we need to add a, so the hyperlink tag. Whoops, it's my mistake. Okay. We need to create IDs. So, the section where we're going to link will have ID. So, we have this sect the header, which is our hello. So, we write id hello, and id is step for a hash. So, we have class, it's the dot, and for id we've got hash. So, it will be hash hello for it works we have id works. ID is a unique thing. So, it's only one ID, want a specific ID on the page. So, we've got one hello ID, one works ID, and we can have many occurrences of the same CSS class, but for ID it's not possible. Of course, we have myteam id, myteam, and contact id contact. So, let's link it. Works myteam, contact. Let's refresh the page. As you can see, the stars has changed. This happened because we created a selector. So, all these rules are applied to all eight. So, we'll need to reset it. Can limit this eight only to the work section. So, let me find this A. So, we can write that it works only for the works section. So, for all A's that are in the works section. So, almost there, we didn't lose this style for the links here in the works section. But, now our links are blue, and we don't want to happen. This is why because every browser by default has a blue. We need to apply our color from LE. So, we can add navigation LEA, apply this color. You can remove this color from here, refresh, and almost there. The thing is that we want to get rid of the underline. So, text-decoration none. I guess this is it. So, let me close the dev tools, and let me try if it works. It works? So, you can navigate through the website. So, it's like a one landing page. Do you like it? I hope you do, and I hope you had a lot of fun while putting this website with me. I'm going to show you different versions of colors and typography in the next lesson, and it will be one of the last lessons hearing these classes. I'm so happy that you stay with me for so long. I would love to see your pages, so please post them in the community section.
23. Final word & other website versions: Congratulations on finishing my classes. I'm super proud of you, and I hope you'll like it, if you're happy with the final result, your website. So, I prepared two other versions for you. I only changed CSS colors and type faces to illustrate that you can very easily reusethis hello colors, this template, this HTML template for your own purposes. So, that you can pick your own style. So, this is how our Hello Colors website looks like. Right now, according to my project. But you could also change the color at gradients, change the type faces and it instantly changes its style and its vipe, and another version, the blue one. So you can do a lot of experiments with it and I hope you had fun. My goal was not to teach you HTML and CSS but to create a website for you. I also prepared a shorter classes. So, if you'd like to have fun with CSS animations and SVG, don't hesitate to join them. I would love to see your websites coming. So, let me know by writing to me or posting it in the community section. Thank you again and I hope to see you on the next classes.
Aga Naplocha, Creative coder & designer
