HTML & CSS For Beginners: Create your first website | Tuomo Kankaanpää | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

HTML & CSS For Beginners: Create your first website

teacher avatar Tuomo Kankaanpää, Software Developer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

24 Lessons (2h 28m)
    • 1. Introduction

    • 2. Class project

    • 3. Tools

    • 4. File structure

    • 5. HTML Basics

    • 6. Create HTML file

    • 7. CSS Basics

    • 8. Add CSS to HTML page

    • 9. Intro - HTML

    • 10. Intro - CSS part 1

    • 11. Intro - CSS part 2

    • 12. About us - HTML

    • 13. About us - CSS

    • 14. Services - HTML

    • 15. Services - CSS

    • 16. Mission - HTML

    • 17. Mission - CSS

    • 18. Instagram - HTML

    • 19. Instagram - CSS

    • 20. Testimonials - HTML

    • 21. Testimonials - CSS

    • 22. Contact us - HTML

    • 23. Contact us - CSS

    • 24. Summary

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

On this course Tuomo Kankaanpää from CodePulse teaches how to create modern and professional looking website for your business. This course is totally beginner friendly and requires no previous knowledge about creating websites. At the end of this course, you will have the skills to create a modern professional looking website from scratch using HTML and CSS.

Websites are everywhere and creating websites, especially great looking websites is a needed skill in this day and age. Often it is thought to be a difficult and complicated task. This is not the case however!

So whether you are a photographer looking to create a business or portfolio website, a business owner looking to create a modern website for your business or if you are just interested in learning how to create a modern professional looking website, this course is for you!

Meet Your Teacher

Teacher Profile Image

Tuomo Kankaanpää

Software Developer


Hello there! My name is Tuomo Kankaanpää and I am a software developer and teacher living in Finland.

With over seven years of experience developing web and mobile applications professionally I am excited to share my knowledge with you! My goal is to help you learn new topics with ease and hopefully to help you avoid some of the mistakes I have made in the past.

If you have any questions please don't hesitate to contact me! Also be sure to follow my social media, especially here on Skillshare and also sign up for my newsletter so you never miss an update!

See you in class!


See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: Hello everybody. My name is normal and I will be a teacher of discourse. In this course, we will create a website from scripts with HTML and CSS. This is what the finished website we look like and I will be to ever step on how to create this kind of mortar and professional website yourself, whether you are for the craft, for looking to create a business or hurtful your website. A business owner looking to create the motor website for your business or if you're just interested in learning how to create motive. Professional website. This course is for you. At the end of the course, you have the skills to create the motor professional looking website Hammers, corrects using HTML and CSS so Tony in Discourse on Let's get started. 2. Class project: before we get started, I just want to give a few words about the class project. I strongly recommend that you start your protect right away and coded as we go through the license and please say your progress by postings for Screenshots quit the community assignment for the class protect is to create a website. The website can focus, for example, your own business or business idea your favorite machines in your hometown or maybe a destination. You meet that over would like Toa. Who is it? The topic off the website. It's really up to you, but those are some popular examples. The final version off the website I'm creating in the video lessons looks like he's Andi. I just want to say that I feel free to mimic style off this, but you can also take the styles as you see fit. It's really up to you and I added all the images I'm using in the medial essence to a zip file that you can download from the Resources section. So the Glass Project website It should have five sections introduction about section services and products section testimonial section on a forger, sex so five sections and the introduction section. It should have a background photo and the title off the Web. Bates. Then the objection. It should have some text information off your business or whichever topic you chose to do your website for, and it should have been image and text. Really, it doesn't matter that much. If you you're making imaginary website or from imaginary topic, you can use some. Some place are real text. Also, then the services and products. Six. And yeah, you can truth one of the following that fits best year topic. You should least three services or products off their business if you are making to the upside off your business, or you can at least the three facts off your favorite initiation. If you are making it from your favorite precision. And if you are making it from hometown, our city would like to wish it least three attractions off that city. And if none of the above its year topic least just three facts or points about your topic. Andi, all of the items should look about this so they should have, uh, image hitter and fixed the next next up. Used at a testimonial section for the website, and there should be three or more testimonials for the topic off your website. For example, how awesome your business or imprecision or, say the east and and create This moon has to look look like they look here so it's one should have an image that is a circle on the left and then have some text, uh, next to it. And they should also have a different background color than the side background color. He's then, lastly, the footer section. It should have contact information off your business or musician or town, and also it should have the the background different color than the rest of the website, and you can also add more sections. But at least have thes thes ones that I'd estimate it in your website or in your class project. And remember to share your progress as you get more sex is done for your website, but without for to do, let's dive in to the first lesson 3. Tools: before we get the coding. When you take a look at the tools we are going to use in this course, the first goal is something we are going to use to write. Our coat, it's called is worse today. A coat we can don't want it for free. We I push us to their code. Google on the first option There is the Web site, and there on the front Bates. We have the download button for us to be a quote, and I am I am on a Mac. But if you are using Windows or Linux, you can also use a goat and downloaded for your operating system right here. Any other text editor or coated their editor would were also. But I recommend because the goat, because I have used many other editors and at the moment I think which was to the goat is the best for the job at hand. So go ahead, download it, install it so it's ready to go. When we are starting the goat and the next door, it's Google chrome. You can find it by that Google chrome Google Andi. From there, we can find the chrome Web site and they have on the front. Bates download chrome, but, um, and this would be Donald for Windows or Lennox, depending on your operating system. So you condone No, Don't noted from here. Any other Perot jher would also suffice. But I think Google Chrome has the best developer experience and developer tools, which is something we will cover in the next lessons. But it's the best for a D bucking and previewing your website. So Google chrome is the pressure we're going to use in this course. So go ahead, down, up, Download that also Onda we are ready to start goading. 4. File structure: next up, we will need to create a folder for our website. And that folder will have all the files related to our website in it. So to create that folder. I'm on my desktop right now, and I will create that folder on the desktop to do so. I'm going to right click that a stop on choosing a folder and I will renamed the folder as Why Website? I think so. And next up, I will open it on. We are going to create two more folders inside my website folder. So I would right click inside the folder and Justin folder and named this images and another folder called CSS. We will place our Caesar's Court inside CSS folder and emits is inside of our images folder . But you don't have to care about toast right now. All that mother is mothers is that you have created them. And if we opened them, they should be empty. Thanks. So and next. Let's open. This was to be a coat on and see how to open this website inside it. So open up here. We show us to deal Coat. It should show Welcome page. It's okay. It doesn't. And your wish list of your code can be looking a little bit different from colors and such thesis testicular theme that I have chosen for my resource to decode. And it's OK that it's not the same as mine. But let's close this welcome pates and on the top left choose file and from there, open on a deal. Look, opens here and now approach to you to the location You created your website folder. I created it on desktop, so I'm going to go left up. And the folder was my website. So I opened that and Jews open and no, my mistrust area coat is opened in that folder and we can see on the left hand side. If this expert isn't open, you can open and close it from the from this so we can see that. See the folder structure he hurt on the left and see that there is the CSS folder and images folder that we just created. Okay, so let's take a little pause here and continue in the next video 5. HTML Basics: before we start to write any HTML code, let's take a look a little closer. Look what HTML actually is and how it works. So it's email is a standard markup. Languages, procreating with bases and its tent for hypertext markup language. It describes the structure off a weapon. It's as the name suggests, HTML consists off a serious off elements, and these elements tell the prouder how to display the conduct and elements are represented by tags on its dim attacks. Label pieces of content, census hitting, paragraph table and so on. And protesters that says Google Chrome do not display the extent Mel tax itself, but they use them to render the content off debates. So here is a simple HTML document. This is this here is aged in the coat and we can see the third's doc type Extreme El, which defies the document document type. Sorry. And when we talked about elements, these are all elements. There is. It's the, um, element hit element title element. Body element. It's one element P element. Uh, Andi, Let's take a little closer. Look what he's actually are. So the HTML element is through the root element off html page, so all content for debates is placed inside the HTML element. Then there's the head element, and it contains meta information about the document. In this case, it contains the title off the page there. We also often defined the starter set for debates inside that element, or we can import some styles or scripts inside the head element also. Then there is the title element, which specifies it's the title for the document. So the title is displayed in the approach. Are that here? So these pages title is introduction debates Tamil. Then we have Body Element, which contains the whiz apple page content. So all the content that Swiss Herbal for before the Bates is placed inside the body element on their We have thes two elements. At first we have a It's one element, which defines the large heading. It's it, it's It comes from the word hitter one and it goes all the way to head our seeks. So at our six is that is a small heading, and one is the biggest. And then we have the P element, which defines a bear craft here, and we talked a little bit about tax. We said that tax, labour, business contents, us heading and so on and the element itself are represented by decks. So what tech actually ease, he's They look like this and you can create tax by inserting or surrounding the element name with angle brackets. So we have the element name or tag, name and angle preg. It's like these. Then after that, we have the content off the element, and then we are closing the element on. Normally they come in pairs like, for example, for the paragraph element. We have the opening tack on closing tech, and the first time in dip air is the startek or the opening tech on the chicken tax is intact or the closing deck on the intact is Britain like the Startek, but with for much less inserted before the attack Name like this. Okay, now that we I know a little bit about HTML and how to create the same boat, it's demon document. Let's take a quick post and create our first extent. A document in the next video 6. Create HTML file: last video we learned the basics off HTML and in this video we will create Oh, where first It's Dimel document. So I'm in my wish just to be a goat editor. I have my website folder open, and I'm gonna create a new file by clicking the new file button here on the left. And I'm gonna name it as index dot html on opening like this on next up, I will look at the web. It's with just beauty. You can find it from this address. We three schools don't come unless it's Demel slash html in throat A SP and what I'm gonna do is copy paste everything inside this a sample document. So come and see for coping or controversy. And so it's back to my resources goat and paste it in here with comment we or control week . You can also type this. That's fine also, but know that we have our simple whip base here. I will take the title, have changed toe mats, my websites title like this and then I'm going to invent this title attack by pressing the tabulator bottom. And this is something that used to also, by inventing your coat, you make it more readable. It doesn't affect the rendering off the page. So the user that opens their Web Bates sees it the same way as it if it's work like this or like this. But when you are quoting the Web Bates, it makes reading the goat a lot easier when you have indented the coat so that tags inside other tax are indented. So now that we have total tax inside the head attack, we indented Okay, now that we have our title change, I'm also going to act something called a meta tag for this Bates on. I do it like this and this myth attack will set the charter type off this page to utf eight . That is something that you should do so that all the letters and everything is displayed. Quirk. So we are set equals utf eight and T. Smith Attack doesn't have a closing tax. You can just close it with the with the angle pregnant like these. And then I will erase the content from the body and at and you hit her. That's this studios and close data like these and let's save this file now by I will save it with Comet s. If you're on windows normally looks You can do it with control s, or you can take it. Save it from the file and the same on there. You can see the shortcut for that saving. Now that the document saved. Let's take a look that if it works and we can see the big hitter it off of the studios So I will open the folder that my website is in and I can see See the index dot html file there on. I will just double click it and it will open up in my pressure in chrome like peace. And you should have chrome as your default pro. Sure, she showed that defy opens inside crow. Okay, Cool. Now that we have our header there, let's let's actually take a quick pulse and continue in the next video. 7. CSS Basics: In the last video, we created our index, that eight statement file which has the structure off our Web mates defined in order to style or what bits we need to use CSS. And in this video we will earn through the basics off CSS and after that we will start toe right, our own CSS. So there may bear with me in this video. And let's hope in the first of all ceases stands for cascading star seats, and CSS describes how it's done. The elements are to be displayed on the screen and CSS has rule sets, which consist off a selector and a declaration block. The selector points to the HTM element You want style. The declaration block contents one or more decorative races separated by semi colons. Then it's declared Declaration includes a CSS property and value for that property. Separated by a semi corns and and to see a cystic declaration always ends with the semi colon and declare recent blocks are surrounded by curly praises. This So, for example, with the CSS coat, all P elements will be center aligned with great text color. So we have the we have the selector limits, Elector selected to be elements. Then we have the current prices that trip around the declarations so color he's right on takes the line center. The CS selectors are used to find or select its Deimel elements based on their element name I D class Attribute that more and in this course we will use name I d at class selectors in our CSS. So let's take a look. What Those are the elements selector Select elements based on the element name. So we can select all P elements on the page like this. We type in the element name. We want to select Andi styles. So this is the element selector. Then there is also the idea selector and the idea selector uses the idea tribute off UNAIDS Demon element to select a specific element on the I. D. Often element should be unique. We think a page. So the idea selector. It's used to select one unique element to select an element with specific I d. We've right hashtag followed by the I d off the element. So the style of rule below will be applied to the HTML element with I d parent one. So here we see the hashtag on, followed by the value off the idea attribute. Then we have class electors class selector, select element with a specific class attributes on the select elements with specific class . Uh, we write that period followed by the name off the class. So in this example, all its similar elements with class center will be writ and center aligned, so we have the dot and then the class name. And we can also specify that only specific HTML elements should be affected by a class. So in this example, on Lee P elements with class center will be center aligned. So the selector you just elements elector float by the class selector, and it's noteworthy that there is no spaces between here, So it's p dot center on it will, uh, center align and color it all the elements that have the class center and its name element . HTM html elements can also refer to more than one class. So here is how we defined it. Glass attributes with two classes for HTML element. So there is the p that, uh, in space and attribute name class equals and there is center and large, and this one in this example, TP element would be styled according to class, center and class large, and it's noteworthy that glass names Andi I D names cannot start with a number. Then let's take a look at CSS. Comments on comments are used to explain the coat and may help when when we edit source goat at a later date and comments are ignored by Pro Shire's so they are not executed. So it can be just some some comment, as the name suggests. So comments starts with Slash and Star or Asterix on ends with districts and Celeste and commits can also spend on multiple lines. So here is an example off a comment, and here is an example off a multi line comment. Okay, now that we know the basics off CSS, let's take a quick post and continue in the next video. 8. Add CSS to HTML page: last video we took a look. Ho CSS works in this video. We will start to write our own CSS. So first of all, how can we at CSS to our HTML document there are a couple of ways and one of them that we're going to use in discourse is by adding a separate CSS file on including it into the HTML page. So let's get started. First of all, I'm gonna open up this CSS folder and create a new file inside of it and name it style dot CSS like this. Then I will switch back to my index dot html And in the hit tag, I will act a link element with triple trail equals style seat and a trip equals yes, this slash style CSS like this. Okay, so what happens here is in the hit Six and weekend include CSS files for this webpage, and we do it with the link element and then we at a real attribute. That weak willed style sheet and the eight riff attribute is the oh case in off that fire. So neither our index that HTML is in our my website folder and the style CSS file is inside my website CSS folder. We can include it include the style CSS file by typing the folder name. That's that it's in So CSS and slash on the file name style that CSS and Link Elements doesn't require a closing back. So it's gonna be It's just like these. Now let's save the index dot html file and open up our style CSS file. And just to test that everything works that we have included are fire file correctly? Let's I think that we had the H one element on our page, So let's try to target this h one element and changed color threat. So we used elements. Elector. It's one curly prices on we can type cooler should be read and cynical, this visual studio code justice. It previews the color we are using in here, so it's quite tempting. Then we saved style that CSS file on indexed Agent Mel file were saved and tweets a pro sure and open up the page or Whippets indexed, rotates Dimel and reference the Bates, and we can see that it's one. It's one chord changes to write. So now we know that our CSS file is set up correctly. Andi. Next up, we can start the style. Our Web, Bates. So let's take a quick portion. Andi, continue in the next video. 9. Intro - HTML: Okay, Now that we know the basics off HTML and CSS, we can start to work on our project website. So let's take a look at the design off the with Paige here is an image of it, and we can see that there is a kind of different sections. There is Theis top section with a header and background image. Then there is thesis about our section services offer mission instagram testimonials on contact US section so we can tackle each one of these on their own. So let's start by creating this, uh, top section and I'm going to call it as an intra affection. So let's hope back toe mistrusted gold, and what I'm gonna do here is, first of all, at a deep element. So this development is or it defines a division or section in an HTML document, and it is often used as a container for other HTML elements to style them with CSS. And that is exactly what we what will use it for this? What pigs. So we have the development and I'm gonna move this header inside the development and note that I added an intention for this header element so it's easier to read that it's inside this development. Okay, next up, let's give an I d for this diva Andi. The idea tribute is added by typing I d equals Andi the wet value off the I. D. And I will give this value off in throat like so and that this is basically all extra Mel. We need to type 40 center Objection. So let's take a quick push on and continue with the CSS Fortis intersection in the next video. 10. Intro - CSS part 1: in the last video, we added HTML for our intersection on in this video. We will style it with CSS. Ah, I think I didn't mention earlier. But this design we are looking for are looking at can be found from the course resources so you can take a look at it yourself also. But let's continue with the CSS. Let's switch to our style that CSS file on. I'm gonna erase everything inside of it on Let's save it on. Make sure our indexed updates there. Mel is saved also. And let's just take a look at the index, the aged and money in prose. So I'm going to refresh the page and we just see only the header header in here. So that's okay. No, uh, when we look at the design, we see that the, uh, the Inter fiction should have this camera image and what I'm gonna do right now is at all the emits is that we're gonna use in this weapons tothis images folder inside my website website folder. So one way to do it is open up the emits folder that has all of the images in it. So Tisa separate folder I have and I have all my images inside of it that way will use in this website and I'll select all of them and just track interrupt them to the images folder like this and we can see come inside there so we don't need to worry about those emergencies anymore. I'm gonna use these images. You can use your own if you want, but you can also follow along with the energies we can close to him. It's folder and inside style CSS. We will select the intra active and we add it an idea tribute for it. So we will target it with the idea selector. So has tech and the idea value, which was intro and curly braces. And next up we want the image to be a background image for that deep so we can use background emits, seizes property to do that And how we can add and emits as a background is we need to add the bath for that image, ask the value and it can be done with this special syntax. So we typing u r l Andi, then the bath to the fire. So the file is in images folder and its name is intro B G. So British slash intro B J J. P. G. Like self and semicolon at the end, then we also want to have some hate as fourth intrasection. So let's at hey off 800 pixels. It saved the started at CSS, and so it's back to the brochure, her first page, and we can see that nothing happens. Ah, this is why this is because this path is not correct because it's relative to the file that we are calling this in from. So our style that CSS file is inside CSS folder on immune system. Image is inside the images folder. So we need to actually go back up one folder and then to the images. Porter. So how do we go up in folders with seizes? We typing dot dot and its last like So now we save. So expect the browser and a reference. We can see that we get the emits. Ah, and it's 800 pictures. Hi. Give it a take. I'm gonna zoom out a little bit like so, but next up, we can still see that there is some white space on top of this and on the sides. So what we're gonna do next is see what courses it, and we will do that in the next video. So let's take a quick post and continue in the next video. 11. Intro - CSS part 2: in the last video, we added, the background emits for our intersection, but as we can see there still some white space around the image. So let's find out Wife, I'm gonna right click this weapons on June Inspect, And what happens is it opens chrome deva tools. So that door is a handy tool toe taking the weapons code and viewing the coat under under the hoot. So what we can do here is if we call the elements tab Andi and look at here, we can see that there is the age demo that we have breathed it. And as we hover over these elements on the right way Z that it highlights different parts off this page on with different colors and no weekends either there some whites base like space on top of their on some or in space. And if we clicked this body element, excuse me down here, we can If we are in the style step, we can see it. This is called the box model off the element so we can see that there is marching. There's border patty and the actual content. So intestine case, we have a marching off eight pixels on all sides off the off the body element, and that causes the white background to be displayed under there. So let's removed his marching from the body element and see how it looks after that. So she expected that CSS file hand, select body and said, Mark scene his zero like So let's save. That's we expect approach shirt and refresh. Okay, better the site. Marchionne's disappeared, but there's still some space in the book there on. It's not coming from body. But if you hover over the the diva, then the H one on you can open up these elements with these by clicking the arrows. So if we open up the diva intro, we can see that the H one element has marching off 21.44 picks. So stop on the top and the bottom. So let's rim remove that also, and we want to remove that Martin from all all its ones so we can select all its ones and said marching zero like So now, when away, so expected the brochure. We can see that the images placed correctly. There is no white spaces around it, so that's good Now, next up. We want to style the H one element Toby in the middle off the Bates and have a little bit off space about it. So again, let's switch back to the style that success and we actually want all of our headers or its once, as we can see from the design, all the hitters are white, so weaken at all. Or we can select all H once and at a color off white. For them, we can define cooler, different ways we can type in white. Or we can use hex colors, which are defined with hashtag and then hex number color goat for them and for white, that is three EFS like this. So let's use that, uh, now we save and sweets back. Okay, it's no, it's no white. Then we need one toe. Have it also. Let's change the front for it on change the font. We want to change the front for for all text on this weapon. It's so let's add that to the body tag. That phone is defined with seizes property formed family that let's use very dark like so. And let's define that the font color is white everywhere, like So I shave. Let's switch back reference and we can see that the phone changed a little bit. But if we look at the design, we still wanted to be all uppercase. Andi have the space above on the center. So let's change to study to upper case. We could just go to the HTML and type this in upper case, but we can do that also with CSS. So it's do it with CSS in order to target just that, because if we look at the design tedious upper case but these others are lower case. So we want the target just t's h one and how to do that. It's by combining CSS electors so we can we want to select inside the intro leave. We want to select the H one element and it is amusing ducks for us and tastes just me instead, select h one element directly inside Thean throw deep. So this H one is a direct child for this intro and in order to make upper case, we can use property fixed trench form on Let's give it the value upper case like Okay on, then we want to have some space about it. So let's give it a margin above it. And we can define margin like this. So what this means is the first value. Give us the top Martin. The second value defines the right march in third value defined spot on Martin, and the fourth value defies the left march. So no, just we know that we just want to set the top margin. We can do it like this and then also let's at some at the font size a little bit bigger, Let's say 34 weeks and save Andi beauty page. Refresh it on. We can see that something happened. The it is uppercase, but no, there's white space above it. And if we click the hitter, right click the header and church inspect, we can see that there is no a margin of 100 for this header. And that's exactly exactly what we did. But we don't want it to, uh, and it about this picture. So what we need to do here is, uh, change his header. Once display attribute on, there are a few different ways that elements can be can be displayed and by default hitter once are displayed as something called US block level elements on block level elements are the full rich off the off the Web page, and we want this to be an in line blocker element, which means that it it's it's with is only the bit off how much it needs. So as we can see here, witness the whole week off debates, but we don't need it to be that white. And when we said this hitter as England look, it also removes the top marching like this so the marching shoot should appear inside the image. It's a little bit different to explain, but let's make it do it and we can understand it better then. So what we want to do is said display. He's in line block and let's save it and no refresh and we can see that the in it is in direct place on the hater house. The march in about it, no lasting. We want to do is at at the center alignment, so this header is the center of the page and we can do this by adding for the intro, give the parent element off the H one on a tribute called text Line and said it center, let's say and respected the rotor and refreshed, and we can see that it is no centered on looks like in the looks like, just like in the decide. One more thing we want to do is at two properties. 40 background image, first of them, his background. Repeat, we will send it to no, repeat the background repeat property. They sits, if and how the background emits will be repeated on by default. Background emits is repeated both vertically and horizontally, so we want to set it that it's not repeated at all. And we can do that by specifying value. No, repeat on the second property is spec correct size, and we will send it to cover. And what what background size property does? It specifies his eyes off the backgrounding it's And when we said it to cover, it resides. The background emits to cover entire container, even if it has to stretch the limits for cut a little bit off one off the edges. And this is how we want wanted to be displayed. So it saved his country, expected the browser, and now when we refer to page, we can see that the background he meets looks much better because it's it's visible, Uh, with quite a range and no over intersection Looks pretty good. So let's take a quick push and continue in the next we deal. 12. About us - HTML: the last video we finished our intersection and it looks good right now. So let's jumping to the next section, which is the about US section. So I have to design here and what we want to do is at other section here which has left inside some text and on the right hand side than emits. So let's go to our HTML excuse me and add a new TV with I d about Russia like this. And inside it, we will define the header and give you the text about us like so. And then we will create another deep which will be the rep er four thief at the image and text elements. So even Andi Inside it we will have another diva and pieces 40 text and then another deep, which is four deep meats. And we can add some text here. I'm just going to use some placeholder text you can at the actual about us fixed for your rip set or project. But what I'm gonna do is at some Lauren ipsum place or a placeholder text and which hosted the code has a need feature for this view. Start typing Lauren and press enter it will automatically at at one chapter off the alarm Ipsum placeholder text for you. And one thing we see that this line is so big A line is so long that we have to scroll it. So let's talking. Ah were trapping on visual studio code and we can do that by present Common safety and peace on Mac or control safety on Windows or Linux and it open STIs dialogue. And we type in here toggle world Bert wrap and press enter and we can see that now the text is visible on the screen and we don't have to scrawl it Distrust the setting for visual studio code and it doesn't affect the output off your website. So let's at another a little bit more like so. So now we have detects part on We can actually save the file now and let's see how it looks . Uh, okay, there is nothing yet. Well, actually, there is. If we highlight the white area here, way can see that there is the text. It's just white because we need to find all the text to be white in the previous video. But we will fix that intestine bait Let's test at the image Onda. We can add an image It, too. Her toe. It's the amount with an image tag, and we can define emits. We want to show by or with this air sea a trip it. So SRC equals coach and then the location off our emits. No, because over index dot html file is in the same folder as our images folder Weaken type in images. It's less Onda. We can see the image we want to show. Is this about us emits and type it there. But don't forget the duct tape B J P G extension and then we can close this image back. And there's something new we haven't seen yet is self closing tag, which means that we don't close it like this rather than we can just duties slash and the angler pregnant. So that's how you at an emits on the base. Now, if you if we saved this and to its back to the browser and refresh, we can see that there is the white space and every highlight. There is the text, and then there is our image on that so we can see it. It doesn't look nearly us nearly finished even. But we will fix that with our CSS diminishes. But before we hoping to CSS definitions, let's add a couple of classes for thes Steve's so we can target them in CSS and style them correctly. So forties reparative that perhaps deep ah, fixed aircraft on the emits inside it we will at a class called rope. And for both of peace, that leaves. We will add a class called column like so So no ar html is good to go for the about a section. If we save and refresh, it doesn't look good yet, but the HTML is ready and let's take a quick pulse on. Continue with the CSS definitions in the next video. 13. About us - CSS: in the last video, we added the HTML fourth about US six in this video, we will at the CSS for it. So let's jump toe our stein that CSS fine. And I'm actually going to do one thing before we start starting about a section. And that is to add some comments here that defined the different sections again. Comments don't affect how the page look looks because the browser ignores the comments, but it's just makes makes it easier to read diseases file. So I'm gonna add comment and intro, but here and after the intro, a new comment intro like this. So no, I know that the inter different definitions start here and end here. Then I'm gonna at once for about us also like these. Okay, so if we look at the design, the first thing I want to do it at a background color 40 section so so that the text is visible because it's right, and now the at the moment the background is white. So let's at the background color, and we can do that by targeting the about us David with ideas. Elector Again, we added an idea tribute for the HTML uh, element like this so we can target it in CSS by typing hashtag and the I d. Value, which is about us in this case on. Then I'm gonna add a background color on give it the value 26 26 26. Again, he sees hex color four de ah black grey craze Here and in thesis, we can define colores in a few different ways on if I just quickly show you one way is toe use the actual keyword, raped or purple um, Harroun. Or we can use the hex value for the color and each color has own hex value, so we can use for it weekend instead. A few test check If 0000 or for blue, for example, we can use Hess text 0000 f and so are Andi. The third option is to you something gold RTB color values and they are expressed in this way. So the first value is the M o of the fret. The objective value is amount off green. On the last value is amount of blue. We won't go any deeper on how to define these colors. It's just could know that you can do it in multiple ways. And if you want to, for example, no, the hex color off yellow. You can just google it typing hex yellow and you will get results that tell you with what? Steam correct hex value port. But for no, we we're going to define the background color 26 2026 saved the style CSS file and no one leash. Respect the pressure. We refresh the Bates. We can see that the background is now the right color. Next up, Uh, let's let's put the hitter in the centre off the A six and at some space above it. Okay, so we can do this bite. If anything start for the, uh, about the Stephen on two century, we say fix the line and said it center. And then we want to have some space about the hitter so we can at something called Petty and Petting and Martin are a bit different. Uh, we added, marching earlier and marching is something that at space outside the element on petting on the other hand, at space, inside the element. So in this case, because we want the we have the background color off this black grey. If we add it, Martin, it would push the whole diva down and there would be white background. So we just want some petting. So it that's the space inside the deep. So the background is or the background stays and looks correct on we. Can we define Martin like this before? So this was the top value talk, Martin. This was the right march in bottom Martin and left Margin. And we can do do it the same way for batting. So I like this. Depending on the first wall, you would be the top march in the second value would be the right marching on third value. But the march in and the last value the left. Oh, sorry. All these are So I said Martin. But I'm in patting. So 30 big shortstop batting the ticket value is for right petting. The bottom third value is for bottom bedding, and last value is for left batting. And since, uh, but these are zero. We don't have to that pixels after them, so this would work. But let's do do it a little bit different way, because there is. If we know, just we are going to just that. Stop betting for this. We can use a property called Petting Top, and we can do this for all sides. Also, if we know knew that we had it only left putting. We would we could type putting left like this. Now that at some but top bedding we can use petting top on, say, 30 big souls. Okay, Like these. Okay, let's switch back to the approach her and great. First the page, and we can see that the, uh, hitter is now centered and there is a little bit space above it. I see. But the text on emits needs. They need to still to be styled. So let's Daniel that next, Uh, first, a little. I'm gonna, uh if you remember, we added this a row class fourth, e reparative that perhaps these two, two lives inside of it. And let's style this road class first. And we wanted to be ah, with off 100%. So it feels the whole wheat off the be port. And then we wanted to have some padding top and bottom. So there is a little bit space between the roles, So let's act, some staying for the road. And since I think we really used this room crow class for other components also or other elements also let's added up here. So it's sort of general class so we can target it with class selector on. We did that by typing dot and class name, which is in this case, Roe. And we wanted to be a week off 100% so weekend. I mean, we and 100% like so and then let's at some space on top and bottom of it, uh, with bedding. And no, I'm gonna introduce 1/3 way throughout betting or Martin. This one adds, if we dive Bean 50 pick source and she wrote pixels like so or zero. This means that the first value specifies the top and bottom padding on the second value left and right. So now we're setting the top, putting 50 pixels, the bottom patty Fix it. 50 pictures and right and left batting. Toshiro, like so on. Then we can excuse me. Let's save this aunt. Take a look. So were first pates and we can see that there is no some space above this row element and also, uh, under it. So next up, let's style deep, uh, text tive on image diva. So we want them to be if you were. If we look at the design, we want them to be, uh, about 40% white, both of them on be center it in on the page vertically and horizontally. So it's at some starts party school class. So in here, I will type in about us on target, every element with with the glass column. It is the selector for that. So now we're selecting all Coleman elements that are inside about us, the element with idee about us. So what we want to do is at a week off 40%. So with will be 40% off the with off the view port, and then we also want to display them asleep in line blocks. So this means that, uh, keep that, that is, leaves are by default block level elements, which means that there is always a line break after the off the team element. But if we define inland blocks, then there is no line line breaks after the element, and they can be, uh, set on the same Moreau so to speak. So we want to set this these comments to be in my books Now. If we save and sweets back to the pressure, we can see that the text is now on the left side on emits on the right side. But the image is way too big for this, so let's try that next. So we will target and emits tax humid stack inside the a man twit idea about us. We do it like this on Let's set the width off 100%. And what one thing to know about weed. It's always, I think I said, Ah, a little bit incorrectly earlier because I said we 40% off the witch off the view port. But actually, it's deep. The wheat is always if we said it as presented, it's always the week off the parent element. So in this case, when we are talking about these columns, the parent element is about us with is or sorry. The parent element is to roll, and the role Bush waited off 100%. And that is because the road is uh oh is inside this Stephen. These two are the 100% or taste to are the weight off the report. So when we say 40% it's for the present off the parent element, and in that case it's also 40% off the view port. But when away, say, say this off 100% For this image element, it means that it's 100% off the a parent element. And since the parent element is Theis column type, as we can see, we have this image and its parent element is deceived With column, Then the image sweet will be actually 40% off the view park. So let's save this, uh, her first debates. No, we can see that we have the minutes. That's right. Sized. So one last thing we want to do is have thes this text on the middle. And we can do that by using appropriately called flex books, and we are gonna apply it for the road inside about us. We started like this, Andi, to implement that we are going t se display flex on thin through other properties. I will type them first, and then we will go through what they mean. So second, justify content on said it center on a lying eat thems City Centre like these. Okay, so let's take a look at what? The flex boxes. Uh, you can read more about it from thesis address CSS tricks dot com snippets CSS A guide to Flex Box We will just take a quick look at it so the Flex Books layout. Uh, it aims priding a more efficient way to lay out a line on Houston space among items in a container, even when they're size, is unknown and or dynamic. So So it is recon Aditi's Flex books property for an Element bite setting, the display value, the flex. And then, uh, the other two properties we had was justify content here. So justify content defines the alignment alone along the my main access. It helps this pre distribute extra free space left over when either all the flex items on the line are inflexible or are flexible but operates their maximum size. It also accept some control over alignment off items when they were from the line. So in short, we said justify content center, so this limits tells exactly what it does, so it just device the content in the centre off the diva horizontally, and then we had also align items. Andi, we said, said it to be centre also. So we can see here that they all the items will be center it along the curse access like these just just a quick overview of flex books. You can read more about it, but for now we will. We can, uh, get forward with taste knowledge. So the road is now styled, so we are centering all items in it. So now the tech text should be should be on the center. Andi, a center of the limits because the images also has entered in debates. So let's we expected the page and a refresh. And now we can see that text is on the center on. Now that I think it just one, test it. If we take to justify content away, same on a refresh. We can see that now The content is a line on the left, so it's no longer centered. And if we take the alliance items away on the refresh, we can see that the text is now on the top off the on top here. So it's not center, so we need the boat that saved on refreshing Now it's good. And if we look at the design, there are still two things that I say we need to add. So as we can see here, the text itself is aligned on the left. So it's, uh now we have the text light center, so we need to align the text on the left side. And then also we should at some spacing between the lines. So it's more. There's more air era between the lines, as we can see that in this design there is. So let's a toast, Uh, first let's at the text alignment and we can do it for the column had fixed a line and say left. And then the other one wants the toe at some space between the lines, and we can actually add it to the body element because we want every or all text on the page to have that same spacing on to accept had that spacing. We we do it by adding an attribute or property called line hate and let's say it's 200%. So we had Let's double the current, uh, line hate. Now we've saved Andi sweet speck to the brochure refresh and we can see that there is, uh, nicely. Some space between the lines on the text is reliant on the left side, and I think, Let's and I got one quick addition still. So let's at some batting on the left and right side off the column. So there are some space their toe betting on. I'm gonna use the certainty definition. So now the top and bottom betting are zero on left and right. Betting are 10 pixels, Let's say on her first debates. And now there's a little bit more space between them. Okay? No, our about a six and is looking good. So let's take a pause and continue in the next video. 14. Services - HTML: in the last video, we finished our about a section, and in this video we will write HTML for our services. Six. And I just want to remind you that all thes six and names and contents are example content and example names. They can be whatever you want and whatever fits best for your own website project. So I want to encourage you toe, uh, write your own coat alongside as we go. So you get to go to your website at the same time. But let's hope into our code editor and start working on that services section HTML. So the services six. And I'm gonna add a new TV with ideas services under the about the Stephen on inside it. We were at a header saying services like so and then, uh, I'm gonna What's the, uh, design? Sorry, we can say that thes three boxes are all on the same row, so we're gonna use that same row class that we used in the about us section. So all these books, this part inside of the grow and all these the boxes are cold. Columna deeps. So this is a column. This is a column on thesis a column? Okay, lets see how we can do that. First of all, we we add the road is need class pro again. This will make the diva we're off when I present off the screen and inside that we will add a column and inside the column. Ah, if we want to have a hitter for eats, it's books so we will add its to. And here we have used H one until this point, but it's too. Is a little bit smaller headed, header, then each one. So this is top level header and thesis second level Heather. So let's use it's to support these columns. It's too, and the 1st 1 would be for the shoot and then we would have per craft off text. And here again, I'm gonna at some dummy text placeholder text. You can write in your own content if you know what What do you want? That there. So I'm gonna add some lowering the Epsom by diaper durum and person enter. This was the need feature off the coast of gold. And then I closed the Peter and I think Oh, yeah, we still need emits about this. So let's we had the hitter on. Then we have the emits above it. We had an image stack with a ser c up reboot and here again, back to the limits files. And we want to add the services emergencies in this column images, image stacks. So, uh, we got the emits folders, and inside there we used services one dot che peaking J p g. I don't forget this extension and then close the image stuck like this. Okay, let's save this on. Flip back to the pros er and refreshed, and we can see that we have this image and then there's some white space and there is our text, so there is still some styling to do, but the HTML looks correct. So let's at the rest off the services boxes. So we do a production and mentoring, and we can. What we can do is test copy, paste this column two times so control or comment and see, depending if your windows you Prescott control C And if your Mac you press comment, see, then in order to paste it, just press comment. We on mark on, come and see. Oh, our control. We on windows at Lenox like so and let's change images. This to be image to on died. It'll be video production. On the last books you have emits three on title off mentoring like these. Now save it on Flick back to approach her or first the page again. I'm reversing it with command. Are if you're on Windows or Linux, Express control are or you can refresh it from here and we get it emits on the content for the shoot. Then there is the second image Widow production on the third image on the next for mentoring. Like So Okay, I think the HD metaphor for the services six and should look pretty good. No. So let's take a quick break and continue with the CSS definitions in the next video. 15. Services - CSS: in the last video, we added the payment for the services section. In this video, we will add to see assists for it. So let's up in the style that sees this file and let's start adding the services CSS. I'm gonna at comments again. And no, uh, first thing we want to do at the background color for the services. So let's target the services. David again with the i d selector Andi at a back road color and the Color WAAS 26 26 26 it's the same one as the last one. And then we also want toe again center at the It's one, the services hitter on the center and at some space above this section. So let's at fixed line center on some padding on the top, like the Let's save it on. Flip back to the pressure that reversed the page and we can see there's the hitter is center it on there, some space above it, and the background color is now correct. Okay, next, let's next clips at the styles for the row diva. So we get the column Devis, which for these three to be on the same road and centered here, so we will target the row class inside services. Steve like this. So again. Glad with class elector with select element with class row that is inside off the element that has I d off services. And we are going to use the same definition as we had in the about us. So display flex. Justify content center on a line items center. Save it on. Let's see what that bench Uh, okay, nothing happened she had or actually it did happen. As we can see, we have services. Then we have this image over here on this one over here. Andi, they are now on the same row. But because we haven't defined with wits off the columns yet, they are displaying incorrectly. So let's at that next. So let's at styles for the column columns inside of the services. Steve, uh, let's say that the boxes are we'd off 300 big source and let's add a little bit marching for them as we can see if there is a little bit space between them. So we should get some right Martin for the all right then left marching for the columns. So that's typing margin on justice expression. So now that's zero marching on the top off the bottom. Andi. 10 pixels marching for left and right, and then let's save it and see what it looks like. Okay, a little bit better now the boxes are right with, but the images are still incorrect. And if Lee if we look closely this design, the boxes have a little bit different background cooler than the, uh, a background color off the side. So let's at that color and let's do it a little bit differently because we want to know at that the great color, but at some transparency for it. So it makes it that this'll effect that it's look, it looks a little bit lighter. So how we can do this in CSS is as follows where you said that car color, but and now we use the RGB color definition, and we used RTP A And as we can see, that resource studio, uh, suggests the RGB A. The first perimeter is red color amount of for it. The second is amount of green and thirties a month blue and forth is the alpha, which is between zero and one and it means the transparency off the background color. So that's that like this. This is the same great that we have here. It's just displayed as an RGB variation off the color, and then the last property makes it so that the color is a little bit lighter and that's a 0.5. So now it's it's transparency is half of the, uh, original or it's its value can be between 10 and it's half of it now, so it should be a little bit lighter. Let's save it reference debates, and we can see that the background he's looking not nice. Nice nicely, a little bit different, color enough. So lastly, we need to go make the images her the correct size. And as we can see, there is a little bit space on left and right here. So let's add that also, but first images. We can do it by targeting the emit stack inside the services and if we went up, be more clear, define it more strictly weakened at the services call on image. So now if there would be immense next directly under services, this won't affect them because T's elects all emit stacked that are inside Dave with Class column, which is inside or which is inside an element with I D services. And we can use the same trick we used earlier in the about a section because the parent element is this column and it's with is 300 pixels. We can't we could set this. It means to be 300 pixels, but it's better to set it to be 100% so it's then 300 pictures. But if we say, for example, would change the width off this column, then this would change also automatically, and we'd put it need to change it in two places. So let's set with 100% save it on, Let's see reference the page. And now the images are looking good on. Let's still at the betting inside the boxes. So let's target the services. Dave on Inside Services column intact. The column. All P elements because he defined in the HTML that we have this column on inside their STP withhold text in it. So it's at a petting off. Let's say five pixels on top and on the bottom on 10. Big source on left and right, save so expected the proud sort Refresh on. We can see that the texts look better now on actually our services. Sexton is looking quite a bit, but it should look like so let's take up a quick break and continue in the next video. 16. Mission - HTML: in the last video, we finished up writing the CSS for our services section. And in this video we will great edged him out for this our mission section. So let's hop toe armor coat Editor on switched the index dot html file and let's at you deep off that the services so do on, we will give it an I D off mission like so. And then I'm going to add a hitter inside of it. Let's put our mission and and you diva this created on If we look at did the sign, Uh, there is the hitter and then fixed for this section on. It was just the one I'm gonna add a lot of ipsum text inside of it on, but they should do it. Let's still at a glass forties leave that has the text in it so we can target it would see assists. So class on, let's give the class mission statement like so So know we have the hitter that's here on a TV with the text text forties. Uh, Mr Statement, if we save it, save the file and respect to the pro shirt. At refresh. We can see that how when we highlight Highlight detects art this white area here at the bottom, we can see that there is. There is the text and the hitter. Okay, I think that's all for the HTML. Let's take a quick port and continue with the CSS in next video. 17. Mission - CSS: the last video we wrote the HD amount 40 mission section on in this video. We will style it with CSS. So let's hope to the style that ceases for and I'm gonna go to the bottom of it at comments as we did for other or previous six years old film. Again, the's comments are not necessary. They don't affect the styling. It just makes the CSS file more readable, in my opinion. But yeah, first, what we want to do, his, uh, is styled the container itself. So we want toe at background image for it and then make it a little bit tire. Or is it that the hate off this mission container? So let's do that. And we can target the mission section with the Idea Selector Mission, as we have done with other six sold soap. Andi. First we want to set the the background image we do with this we have done earlier in the intersection with your l on then, because this thesis file is in this thesis territory on this year's historic three, he's in the same folder as images. Different directory. We need to go back or up one folder like this and then that the Images folder and then the image name that we want to show their on it should be the mission. Billie Jean and again, don't forget this extension like so on. And then let's at the Beck Earth would beat and back around size properties. Also, we will use the same same ones as we did for the intersection. So background No, I beat on sighs on and it should be cover and let's at some hate forties six. And I think 500 pictures should be enough. And if we saved this on, so expect that the browser that refreshed the page, we can see that to fix. It appears you test the correct hate on emits as background image. Uh, next. Let's place this hitter in the middle at some space above it. As we can see, there is quite a bit space on the header itself is on the middle, So let's do that. And we can do it by adding, uh, takes the line for pretty for this mission container and we align center and then some a space above the header. We can do that with bedding so we can at padding. I hope on, let's say, 200 pixels Now. When we say on sweet spectacle brochure and refreshed, it looks better. It's, uh there is a space above it on its center it Andi, we can see that it's with capital letters. This Harmison header. We could write it with capital letters, but if we want to do it, CSS, we can do it by targeting the it's one. So with this, I'm targeting H one, which is directly a child for on Element that tiresome I devalue off mission so I can do next Transform upper case. Save on. Let's see, Makes the hitter. I can't be done. Okay, Cool. Uh then finally, let style this text. So as we can see from the design, there is a little bit space between the text and the hitter on the text is, doesn't you go toothy itches. So it stop stops about here and here. So we need to add some weed for this text diva and some margin for it. Some top margin for it. So let's e so it's back to the style. It is this on target theme the recent statement. So as we can see we have the mission deep in their stem. L is out of it. There is a mission state or a deep with Mr Statement class. So we can turbulent like this. And in this case, we closer to do this. So we want to at some weed for it. And let's say that it should be a week off 60%. So it's 60% off the parent container with which in this case is that whole view per week. And, uh, let's actually at some bedding for it. That's 50 pixels. So there's some space between the fixed and the hater. Let's save this and see what happens. Okay? No, we have the text is looked like correct. We'd be inspected. We can see that it has some Martin on the right on some padding on top. So in order to get it on the middle off on the middle here it's changed the display value for this diva. So now that ive is a block level displayed as block level element and that means that there is marching on the right and because every time there is a line break after book level elements, so we need to change the Inland Book, which makes it so. There is no line break after it, and thus no Martin on the right. So let's do that. So it's back to the Zissis on at this blade in line. Look and let's save and see if it helps. Yes, now it's It's in third. Andi looks just like you. Don't the mission section in already signed. Okay, cool. Let's take a quick break and continue in the next video. 18. Instagram - HTML: in the last video We finished them are our mission section, and in this video way will hope into creating the is the From section here and we will write the extent Metaphor it. So let's go to our We used to be a goat on index dot html. Let's at a new diva under the mission with I d. Use the cream on use a little bit. Let's better hitter That says it's the creme like so And then if we look at the design, we basically have one grow here that tests five emits is on. All of the images are off same weed. So let's at, uh, reparative for all off the images and give you the class growth. We can reduce the previously defined role class here and in that row, we can just at the committees. But let's make it so that, uh, if we click any of these committees, it will take us to the instagram instagram wet bakes, and you could set it up to be your own profile or your businesses profile or whatever thes pictures are about. But let's just set it up so that it goes to the Instagram front Bates. So what we need to do for that is at a link around that emits and we can add a link with, uh, a element like this. Andi on, uh, we can said the link where we wanted toe go when the images clicked or dealing is clicked with an attribute called a Trip. And here we just type in the Web address that we wanted to go. In this case, it will be that used to Graham Front Bates. Then we will close the stag and it's at it closing. Thank for T's link element like this. And now everything inside this a element will be a link on. It could be a text, a text link like this. So when we click the instant, let's actually save this on. Look at how it looks in the pro shop so we can see that now there is. This is the context, Andi, If we click it, it will take us to the instagram, uh, from Bates. But let's go back to our Web Bates, and we want the link to actually be and emit. So we at emits inside this a element. Andi, we do it with image on it. So she the source off the image. Andi, this will be images slash instagram instagram one don t big like this. We closed, Emit, Stacked like So I know if we saved this, try first debates we can see that we have one emits there and the cursor actually is Looks like a pointer. So when we click this, it opens up these two campaigns. Let's that one more thing for this link There is another attributes that will, because when we clicked this, let's say we wanted to open in a new tap So the user doesn't go away from our Web based because now when we click this, it opens it up in the same tap. But we wanted to be opened in another tab. So let's at that. And that can be done with an attribute for the Link Way had a attributes for Link called Target and in order to opening in the new tap, the value should be underscore Blank like these. Now, when we saved this look at it in the brochure refers debates, and if I click this image now, we can see that it opens up in a new tab on the user's little stays on our Web Bates. That is exactly what we want on. No, we have one emits and we can see that there is five committees, so we can just could be paste this link goat and changed. The emits a source, and we should get the result we want. Want it. So let's copy paste this five times. So what I did there was I just highlighted the link pressed comments. See, because I'm a Mac and if you're on Windows or Linux, you can press control, See? And then I moved, of course, are under the existing a decade on pressed comment. Weep to paste it. And if you are on my car, Lennox arts are fair on Windows or Linux, you can use Quantrill. We and I did that five times. So now we have five links and five images. And let's change this. He meets so surfaced so we can see we have Theme insists, named Instant 12345 So weekends just changed a number in here. That's tree four on five. No, when we saved this, let's go with Bates and we can see that we have five images here. Okay, Cool. Uh, in order to get them on one row and a little bit smaller, we need to do it with with CSS. So it's take a quick break and continue in the next video with the CSS. 19. Instagram - CSS: in the last video, we added the extreme out for our instagram section, and in this video we will have to see Asus for it. So let's hope our style, it ceases. I'm gonna at the Instagram definition, it's at the bottom of the final. Just that these comments again. And no, when we look at the design, we want first the style tous huh section itself. When we look at the weapons now it has a white background on the header is not we support. So let's at a record color changed the header to be uppercase and at some space. So let's hope they assess and target the Instagram element. And we want to get the background color. That's the same us earlier 26 2026. Then let's and fixed a line center. This will center the hitter inside that ive and then also at some padding to the top. So there's some some space and both the hitter like this save it. Go to t. Quit Bates and hurt fresh Andi. There is the background color on centered hitter at the space above it, and let's make the hitter to be uppercase so we can target it with Instagram and it's one Andi fixed. Transform upper case like these. Save on three. Fresh and not the header is a per case. Okay, cool. Next up, let's, uh we can see that these images are based on one row, so we need to style road component. And because we wanted toe I want the all off this elements to be on same row and same weed align nicely. We can use flex books for this role and as we did, for example, his services role also So let's make throw in southeast come section of flex books. And we did that by by targeting zero and adding a display property off flicks like this. So know when we save and refresh, we can see that old emits is are on the same road, uh, spread out nicely, but still they're too big on. We need to set the wheat for them. So actually, we look at the html we can see that the items that are inside that role are linked items so 88 elements. So in orderto get the wheat right, we need to said the week before the's A elements and because there is five links five seventies and this row is 100% off the screen with We want everything to be same. We'd So when there's 55 elements that makes that every element should be 20% off the parent elements with in order to be same same wheat, each other. So if we said 20% for all of these elements, they would take 100% total with. So let's do that so we can target the A elements like this. I said the wheat to 20%. You know what we say that refreshed? We can see that. Okay, they are 20% off the screen, but the emits is still a go out of the what page? The right there are over late also. And it is because we still need to set the wheat for the images I had. No, we can use the same trick ass we did earlier because a element is 20% off the whole screen weekends just say that emits is 100% and this 100% is 100% off. This a elements wheat. So now they should be the court tweet. When we save and sent back to the webpage and refresh. We can see that now. The images are ally nicely on the quick tweet and one thing I want to point out. We have been using this Angela Prickett operator here and then Sometimes we duties that just idea sector space had some other selector, and this is the difference we need to do if he's is that in this case, the H one needs to be a direct child for this instagram element. So as we can see, it's a direct child. So it's inside directly inside this instagram deep, and it doesn't mean that it has to be the 1st 1 It could be, for example, here at the bottom also, so it would still work. It just needs to be directly inside. This is the company. So, for example, if we if we targeted the image that here with that operator, let's that save Andre first, the page. We can see that the styles do not aptly anymore. That is because the A element is dire child forties or the image element is the direct style, for it is a element, and this element is starts all four for this deal with Roe class, and this role is starts all forties instrument element. So that's why we castile it like this. And this means that any in it emits element that is inside instagram element. Uh, if it's directly, or if it's inside some other elements that are inside these two impediments, so it doesn't have to be the diary side for that. So that's the difference between thought operators. And now, if we're saying this on profess the Bates Books good, good again. Okay, cool. Let's take a quick break at continue in the next video. 20. Testimonials - HTML: in the last video, we finished up our instagram section on in this video, we really create the HD amount 40 testimonials section. And if you look at the design, we can, uh, plan how we can do this. So we have the hitter here on, then I would say that we need to rope element here so deep with the class role because we wanted to. I spent the whole wheat and inside the row we will have all these three testimonials which will every testimonial be? It's phone deal. And in order to get them centered here easily, we can at reparative for all these three, three testimonials that will be then centered. So let's up into the HTML and start typing some code. So first of all, I did you leave with idea testimonials and inside that I will create the hitter like so and next create a diva with glass Arrgh! And inside this road, even I'm going to create an other leave that will act as a rapper for all those three testimonials on. Let's do that Killed a class name off testimonials. Rapper like so and inside here will create all three testimonials so one day for its testimony. L we add a class testimonial, and we're adding these classes again on I D. Uh so weekend started them from the CSS. And if we look at the design, we want tohave an image inside of it and a text. So inside a testimonial we haven't image because it emits with the assoc Attribute on. We will use images from the image folders images on I have named. My testimony minces as testimony all one on the one tree that close David Stack Andi. Next, let's at a diva for two text on Actually give you the class off text and then weaken or I will add a placeholder text here with resisted a coat is it's easy. I consist type valorem and percenter, and it insurance one one pair craft off alarm Epsom placeholder text. But since you're working with your own website or on or own project, you can at the actual texts here if you want. But if you are following long project these Dima website, you can do this alarm. Epsom also. But let's continue in close that Steve, and to save peace and sweet Specter the browser, enter a fresh. I can't see what we get. So here again, I have the testimony knows text white and the image. And then there is the actual testimonial. Uh, pirate craft here. Text here on it looks like this because we haven't added any CSS yet. So I'm just gonna copy paste this because it's the same code for all three testimonials. Only differences detects and emits. And in our case, that takes this same because it's just a place holder. So all I do is I know had had three identical testimony leaves, and all I need to do is change the picture here. So my pictures or images on testimonial 12 and three like this when I saved this. So expect a brochure. We can see that we get old images on. There are two texts that that just doesn't are not eligible because they are white and background. It's white, but I think that's about it. 40. It's Damon part off this testimonial, secretary. So let's take a quick break and continue with Jesus in the next video 21. Testimonials - CSS: In the last video, we added the HTML for testimonial section, and in this video we will at the CSS. So let's hope that the style it's here, says Andi at the testimony. Now CSS in the bottom that comment as usual. So it's easier to read on. The first thing we want to do if we look at the design is the background color. Uh, said the hitter on the middle and at some space and Bobby. So we target the testimonial Stephen with sister, uh, route de before testimony. Andi, we set the record color. Then the fix the line and some petting to the top. That's a big source like this and save it and called it the brochure and refresh and no weakens. We have their space above it. Uh, the editor is centered on on. Did the background color is correct? Okay, cool. Uh, next up, uh, let's start styling testimonials itself. So go back to the editor. Andi. Let's Pat, let's style the rapper first, because this row element is already styled here in our CSS up here. We have used it before, So, as we can see, the row has which of 100% understand betting on the top and on the bottom. So let's style this reparative next and what we want to do for the reparative if we want that. What? Steve, this models or the design? And we want to want to be in the center and have a specific wheat. So it's not 100% off the off the screen. So let's target that, Andi. Actually, it waas a class. So we need at class selector. This movie is Ripper and we wanted to have a wheat and let's use 60%. And then we wanted it to be centered. And we remember from the earlier sections that in order to, uh, center thes, for example, when when we were when we were centering Ah, I think it was the our mission text. We wanted to be an in line block because the block elements always has to have a mind break after them, and that causes them not to align in the center. If the parent has two sticks, the line center center property sit so by default that gives our block level elements on. We want to display this even as an inland block, so we at thes knowing suit center nicely. So you saved the file that reference debates, and we can already see that. Now there is it centered and it doesn't. Texts don't go the full which off the base. And if we right click here on inspect, we can check in the developer tools that we have this testimonials Reppert, and it's highlighted under right now. So now we can see that there. It's weak, ace. It's the 60% off the screen. Andi, Uh, it's ah, aligned center. Okay, cool. So next, let's style an individual testimonial so that we can see the see from the design. They should be books with the image on left on the text on the right. So let's target a testimonial with the class selector, and we will use flex books Fortis So this plane flex And because we want them to be, uh, aligned center horizontal center line or her son of the late center or I'm sorry, vertically centered. So they look like this. So this text isn't on the top or the bottom, but on the center we will set the align items property to center like this. Uh, then we want to have some space between its off the testimonial. So let's at some, uh, bottom margin for for the testimonial. So Omar, Martine Bottom extent picks and lastly, let's it the background color on. We can see that it's the same kind of color that we had earlier with these boxes, but it's a little bit darker, so we can set it the same way. If we look at how way said said it earlier, it was with this syntax. So we can actually copy this with common sea or control C and paste it in here with command or control. We've and because it's a little bit darker, we can take a little bit off from the Alfa Value. The last one wants the alpha value, which means that it's it's the transparency. I'm using a semi colon from there. It's just fixing it up. Okay, cool. Uh, no, it should have a background color and some space between the this the moment. So let's save the style CSS and reverse the page. And as we get, see there. So space here Andi at the text is centered centred here. Andi, the background color is good. So one last thing is to resize the photo and make it sear cope as it is in here. But one thing before we do that, I want to point out, is that here we put a marching bottom 10 pick source and it because it it cost testimony relatives to have some space between them. The reason we are using Martine instead of Patty is because we want space to be outside off the element. And that is why that's because we know have a background color for had them testimonial diva. And if we added padding, it wouldn't it would look or it wouldn't look as we wanted to look. So if we just test and since the marching patty, we can see what happens. So here there is no, no ah, no space. Because toe, if we inspect this, we can see that the uh huh space between them is padding on. Because petting is inside of an element and this element has the background color. It looks like they are just one huge element because the the background color yeah, it's the same same because because of the body. So that is why we want to use marching for these expected the margin on her first page, and now we get the nice, darker space between them. But its style, The images. Ah, so weekend. We can target them with testimonial. The image. Andi, Let's say that let's at appropriate height for them and then the circle styling. So let's say, hey, iss 200 pixels, save it and take it out What it looks like. Okay, it looks good. And now at the circle circle styling and how we can do that. It's with a property called Border eighties. So these property with this property, you can, uh, moneyed steep radius off the borders which effectively creates the corners around if you if you want to make them around. And if we said this border it is the 50% it makes it so that the emits looks hysterical. So 50% saving sweet spect brochure refresh. And now we have nice circle immunities. I liked it. And if we look at the design, we can actually see that there is a little bit space between here on the sides way Don't have it. So let's still at that. So I'm gonna target the testimonial and on inside of every testimony relative toe text element, like so, Andi, I'm gonna add some padding. So I at five pixels on top and on the bottom, and then 15 pixels on left and right. Let's save it. And for fresh on, we can see that it That's the budding here and here. Yes. Uh, that looks good. Uh, I think I think this moaner six and looks looks about right now. So let's take a quick break and continue in the next section. 22. Contact us - HTML: In the last video, we finished our testimonial section, and in this video we will create edged ml for the conduct US section or the food or off the pitch. So let's hope into the edge of the mouth. And I'm goingto I didn't need even after the testimonials live or excuse me, actually, let's at something called food Element. Since this is the bait floater html five has a fruit or element that actually that these specifically used for page porters. So let's use death, and I'm going to act hitter inside of it with conduct US text and inside the floater. I will also act another divan on if we look at the design. Yeah, there's just hitter and text on this can be able to a placeholder text, but I'm gonna write text that is there for now so that by sending e mail to like these, uh, and again, this is a test for thes demo site. This is not an actual email email, but for the demo purposes Onley. So when you're working with your project, you can at the appropriate text for your beside here on Let's save it. So it's the deep Rocher for a fresh on. We can see again that if we highlight the text that it's there, the conductors and our paragraph off fixed. OK, uh, let's take a quick break and continue with adding to CSS for the food there in the next video. 23. Contact us - CSS: In the last video, we added the cinema for our contact a section, or he paid for her section on in this video. We were at that. He assessed the style. So let's go to the CSS file. I'm going to add the comments, as usual, to make the file easier to read. And then let's look at the design. So the contact US section has the, uh, hitter align center some space above it. Andi Hey, a different shade of crate that crowd. So let's at torch first and notions. We used this food or element. We can actually used that to select or target our styles so we can use an element selector and at a background color for it on Let's use, they should look pretty good. Onda. Let's at the text alignment and some space above the header. So some padding a bulb, that four there like this. And let's also at some hate for the 40 footer section. So hit property and let's say, 400 big source like this. Now let's save, and so it's back to the browser. Refresh on. We can see we have a different background color, some space above the header on the hitter is centered. Center aligned. So if you look at that, he signed next. We want to style this text and we want toe wanted to have, ah, a little bit. Not so that it's not that white, because now it's the whole page with, So we need to modify the weed and at some space above it. So it's not so close to the hitter. So let's go to the CSS file and we can target it with 4 30 deep. So here we have two elements. Electors. So with Target, uh, all the leaves that are inside the folder element because we had the if you will get edged . Immelt. There is the food or element on the deep inside of it, like soap. So first we want tohave some wheat. So let's use the same 60% that we used earlier for other six inch and then also at some space but above the text. So it's a betting on a petting top. In this case, off 50 big sauce saved Andi, go to the browser and refresh, and we can see that the hate or theme we did that looks correct now and there is some space above it, but it's not centered. And he's again on issue with this because it's a diva. It's a block level, block level element, and we need to make it in, like, an inland block so it will be aligned correctly. So let's do that by setting the display property on sitting into in line block, like so save it and refresh the page and no takes thes center. It also Andi, When we look at the design, it looks the same as our with Bates. Okay, cool. Uh, let's take a quick break on to continue in the next video. 24. Summary: we have no successfully at it. All sections we had in the design on our website is looking great. I hope this cars has been helpful for you. And I would love to hear what you thought about it. So please don't forget to leave a review for this course. I would appreciate that a lot, but that's it for now. Thank you again for taking this course and until next time. Bye.