Create your first website from scratch using HTML and CSS (suitable for mobile and desktop devices ) | Raymundo CH | Skillshare

Playback Speed


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

Create your first website from scratch using HTML and CSS (suitable for mobile and desktop devices )

teacher avatar Raymundo CH

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

38 Lessons (4h 16m)
    • 1. Welcome

      4:37
    • 2. Prerequisites

      1:55
    • 3. Scaffold your website's files and directories

      6:35
    • 4. Creating the Homepage

      9:19
    • 5. Add Icons to your website with Google

      6:46
    • 6. Create a beautiful Navigation

      8:54
    • 7. Create an attractive header for your website

      8:50
    • 8. Continue improving the header of your website

      9:51
    • 9. Improve your header with Media Queries

      7:03
    • 10. Create a Respoonsive Menu with CSS

      6:25
    • 11. Continue creating the menu of your website

      8:23
    • 12. Use Media Queries to improve the navigation menu

      5:04
    • 13. Add some behaviour to the navigation menu

      2:38
    • 14. Searching for pictures for our website

      2:25
    • 15. Placing pictures inside the homepage

      6:33
    • 16. Adjusting layout for mobile devices

      9:53
    • 17. Adjusting layout for larger screens

      3:36
    • 18. Creating a footer for the homepage

      9:31
    • 19. Improving the footer

      5:03
    • 20. Fixing the Navigation Menu Links

      3:18
    • 21. Creating the About Page

      9:17
    • 22. Adding Lorem Ipsum text to the About Page

      9:42
    • 23. About Page

      6:10
    • 24. Improving About Page

      2:05
    • 25. Creating FAQ page

      8:52
    • 26. Improving FAQ page

      9:57
    • 27. Last improvements to FAQ page

      4:00
    • 28. Terms and Conditions Page

      9:27
    • 29. Contact Page

      8:30
    • 30. Testimonials 28

      8:30
    • 31. Testimonials Page

      8:41
    • 32. Improving Testimonials Page

      3:52
    • 33. Responsive Testimonials Page

      9:45
    • 34. Last Improvements to Testimonials Page

      5:43
    • 35. Creating a Services Page

      7:10
    • 36. Services Page for larger screens

      7:50
    • 37. Services Page for smaller screens

      4:18
    • 38. Fixing Home Icon

      5:50
  • --
  • 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.

10

Students

--

Projects

About This Class

This insteresting videotutorial guides you through the process of creating your first website. It's very easy to understand and within few hours you will understand how a website works. Only two technologies are used : HTML  and CSS. 

You will get the basis necessary to continue learning about web design. 

At the end of this videotutorial you wll have a beautiful website that features the most common webpages:

  • Homepage 
  • FAQ's webpage
  • Contact webpage
  • About Page
  • Services Page
  • Testimonials webpage
  • Terms and Conditions Page

It's important to point out that the website is responsive which means it's suitable for mobile and desktop devices. Take this tutorial and dive into web design!!!!

Meet Your Teacher

Teacher Profile Image

Raymundo CH

Teacher

Hello, I'm Raymundo. I like web development because it represents a challenge all the time. Learning programming languages is fun and is a challenge for the mind. 

Since I heard about NodeJs some years ago I felt curious because they said it was possible to create a complete web app using javascript solely. It was very interesting. 

At first it was hard to understand NodeJs because the way it works differs a lot from the traditional approach, even the way to deploy and app changes  and the companies that store your app offer a set of different and weird  products!! so it was an adventure for me.

Nowadays I've understood NodeJs and I'm here to share with you my knowledge in a simple way. I hope you enjoy my videotutorials and send me feedback plea... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
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.

Transcripts

1. Welcome: Hey, guys, Welcome to the spirit, Victoria. In this video tutorial, you are going to be in this big editorial. You are going to learn how to create a beautiful, responsive website. The resulting website will be a website like the one you see in the screen. Right now, the's website contains a top navigation then the research either that East responsive when I say responsible, whether I mean that the hitter is suitable for a while devices as well as larger screens. Vend Aries on navigation bar The's navigation bar is responsive as well, which means that it thinks navigation bar displaced in mobile devices as well as larger screens. And then you can see than the Reese content. As you can see, there are pictures on descriptions for those pictures and finally you have food there. Now, in the footer, you can see that the resa two links one link takes you toe there. Fact page on the other link takes you to the contact page. Now these website is composed off seven with spacious. The first page, of course, is the home page. The other patient, he's the be about beige. Uh, that states some information about the pastor shop. Uh, because this website is about a pastor shop. This is the about page. As you can see, the Reza The picture of the cake followed by random are paragraph off random next. And, um, one of the other patients is a testimonial space, which is a responsive page as well. The testimony a space age shows information about the customers, shows the opinion of the customers about our pastor shop. As you can see, the testimony a space contains contains three pictures along with the testimonial off each off the customers. Onda. As I said earlier, thes pace is also responsive. Now I'm going to show you how these website looks in mobile devices because the web sized right now are suitable for mobile devices as well as well as larger screens. Okay, guys. Well, this is the appearance off the website. Four mile devices. As you can see, thes shape off the navigation menu has improved. Now the navigation menu appears vertically on. If I scroll down the beige, you can see that three order of the pictures has, uh, changes has changed. Um, now you can see that the picture this place above theme testimonial of the customer on you can see that there is a picture followed by the testimonial of the customer, and finally one more picture, followed by the testimonial off the customer. As you can see through the appearance off the Web page, he's, uh, East, is you. The appearance of the Web page changes according toe the size off the screen. Well, guys, if you want to learn how to create these very beautiful website that is a responsive website, you can take these video tutorials on the's. We'll be dictatorial is very interesting, so I hope you like it. See you later race. 2. Prerequisites: Okay, guys, Before you start creating your first wet your first website, it's important that you have a tool installed in your computer such to ease a growth rider . In this video tutorial, I will be using a coat. A writer known as super line text. So please go to school on a search for the soup line. Text on it tighter after you go to Google and search for supplying. Takes it right. Or please don't both the program and install it on your computer. As you can see, right now, I am in the soup line, takes a light or with Paige on. As you can see, this is the right door that helps you to create a website. So, uh, hill over to this website. So blind text ah dot com. Andi, I started downloading this program. This program is free of charge. So, uh, you won't have to pay anything. Um, there is a free version of level. So I go to this website, download this program and his tallied on your computer. This is the program that I will be using to create the goat for our website. So go toe supplying text dot com Andi, download and install the's growth. It I don't 3. Scaffold your website's files and directories: Hello, guys. Well, in this video I'm going to start creating eyes that the ecstatic website using html on CSS styles three first step is to create it through the root folder for the study website. In this case, I'm going to create the root folder in the risk top off my computer on I'm going toe Name the folder. Bust three, Pastor shop. That's the name off the folder. Now the second step is to open thistle blind. Take text writer, which is the right or where we are going toe beat the code for our application. OK, guys. Now, as you can see, Theseus plane takes right or is opened and I have toe navigate to the file menu on I have I have to open the folder that I use Creative. Ah, As I said before, there was saved in the big stop off my computer. So I'm going to go to the big stop off my computer, and as you can see, uh but you can see the aesthetic. What? The pastor shop directory. He selective. Now, um, I'm gonna open the pastor shop the directory Now, as you can see, the bus to shop directory is opened in the soup line takes tighter on. I'm going to start creating the west, spacious the HTML files for my website. In this case, this website is going to have only, uh, for a seven day seven patients. So I'm going to start creating the defiance the HTML files in this case, the 1st 5 will be, um edicts dote html I hit the enter. Now I'm going to create another fire. Uh, in order to create a new file, I'm going to select the option. I'm going to select the option fire new fire, and I'm going to save thes thes file the name off. This part off this file will be about dont html the heat safe. As you can see, I have a two fires. I'm going to create another Fine. So I heat, if I may know Divide the file menu. I heat new fire. I'm going to save these files as services services. Don't html hit safe as well. Now I'm going to create another file, so I'm going toe hit the option on five the menu file, you file and then I'm going to save these this file us back fact, which stands for frequently asked questions. Fact both html and I'm going to streak Enter now. This is The next step is to create another file. In this case, the name off the file will be, um, testimonials. This theme ammonium though this theme mony How's don't html? I think safe. And as you can see, I am creating the Web, the Web patients for my my small website. I'm going to create another file. Eso I heat fire in your file on this file, the finding will be will be contact contact dot html Uh, dont html the heat safe or enter. And as you can see, the find has been created. Finally, I'm going to create another Web page. So I hit file the menu file. I eat safe on in order to save, uh, these five. I'm going to click click file, save us on. I'm going to say this file as terms dot html, I heat anger or safe. And as you can see, I've just created all the Web patients for my website, and I'm going to create two more directories inside on the bus three shop directory. So I eat a heat. I click over both blustery Shop directory and I select the option you folder and I'm going to create CSS. This is the fact the directory that is going to a store my style's I'm going to create another folder he escaped. The name of the father will be much is much is okay English is hit. Enter and as you can see obvious creative the s trip via structure off my off my project toe directories on Jamil files 4. Creating the Homepage: Okay, guys will Now the next step is to goto our with browser on In this case, I navigate toe world on I made a search in Google on gonna use Thies This picture right here off cake eso In this case, I'm going to save these These picture off this cake now you can see I'm going toe save the picture of this cake on I click over the they picture and I read the click re option Safe us safe Picture us or image us Andi, I'm going to navigate toe the these stop off my computer on I'm going to open my fast They the folder back Buster shop I'm goingto open before their images that I just created. And I'm going to say this image as, um cake, Joeckel e cake and, uh Joeckel eight gate and I heat safe. Now if I go to sublime takes right or you can see that the chocolate chocolate cake image is already here in my project and I'm going to close all the html files on I'm going toe open only the index dot html file. I'm going toe create my markup for the market for my web page. The title will be, uh, past three shop bodies. Dash. Uh, welcome on. I'm going to add some tax. In this case, I'm gonna add that metta or make attack. That says, charset beauty, if Dash eight I'm going to add another middle that these mid attack has two attributes. The first attribute is name on the Its value is you poor the's made of that enables our website to be displayed in mobile devices. So these with with the's mitt attack is very important on the content. Attribute will be, uh, you poor uh, you port, uh, device wheat coma. Can you show scale equals 1.0? As I said, Thies mid attack is very important because the Met attack enables our website to be displayed in mobile devices. Finally Well, I'm going to add a that these deep tax are used toe toe I've used are usedto at new sections toe our webpages in this for section I'm going toe at a class. The glass will be top navigation on These thief will contain a feather. Want that the scare there won Tak is a very important I'm I'm sorry. I'm going to use ahead of time this together to attack. Is there important because hitters are used to to set titles, for example? So Heather's are very, very important in fiscal attack, I'm going toe typing past three short thought Gone and I'm going toe inside These heather that I'm going to add uninjured and your tax are used to create links, so these link or answer attack is going toe point toe the route page off these website on these link or answer attack will complain the text home I click saved now the next step is to go toe the Web browser on inside the Web browser. We have toe Navigate toe the HTML file that we we've just created in order to navigate through the HD meals html file. I'm going toe to start looking for these files in the hard drive, as you can see through Web browser displays, the least off directories in my heart rife. So I think the option users or the director reducers. Now I'm going to navigate toe the mixed rat user, which is my user account here. I'm going to navigate through the desktop as well where my root directory was saved. Now you can see the least off files and folders in the stop in the disk top this place and I'm going to click over past the shop, which is the fire. The directory where my fires are stored. Now, as you can see the least off html files, I've us created this place and I'm going to select index dot html. Now you can see the d mark up or the text. I've just created this place inside the web browser Now in order in order for our website toe candle styles, we must we must configure styles inside our website. In order to do it, we must cree create a CSS file inside this year says folder. So I'm gonna heat in the CSS folder and I'm gonna create a the option new file. I'm gonna safe thesis styles us. Uh, it's style. My customers times my coast own styles dot CS is these file will contain these tiles for my for my website. Now, in order for my HTML files took a back Sisto these styles file I have to go toe the index dot html file on. I'm going to add another attack. Three stuck will be link on inside the stuff. We have a new tribute that says H r E f on dhere. I'm going toe point toe the CSS file. So I have to take being the bat toe the CSS file. Um, and the but will be dot slash CIA says slash the name off. The CSS file I've just created in this case is my stone is valuables gold CSS I I heat control safe or control s I say the changes on in order for you to see that thes file is already working. I'm going to die pain. Um, I tell you, this is style says that the color off any texts will be bloom for Easter, for instance. So I say the changes I go to the browser, I refreshed the base. And as you can see, the text is now color blue, which means our styles are are already working 5. Add Icons to your website with Google: Well, guys, before I continue with this video tutorial, let's let's fix Theo HD me html Marco a little bit. Let's get over to them toe the mid attack that says you poor and wear going to replace the world View Port Week. The world wheat fix that we have to make to the goat on after that three next step is to go to the to the Google on Make a search on. We're going toe go toe to go on. We're going to look for the material material design I We are going to look for the material design with base or material icons with base. These with page contains I guns for the websites. You can look for these websites. You can look for this website by typing in Google icons. So goto Google on make a search. Look for the word Google icons on If you perform a research, one of the results says icons, dash material design. You have to click on that option and as you can see these website appears this website and these websites Google website Google offers I phones that you can use for your websites. In this case, I'm going toe make a search in order to find on I gone for a home base So I click on the on the future by name takes field a night being home in order to find icons for home base If I scroll is screwed the base down I can see that Uh, there is a whole fish icon. I'm going to click on the home page icon and that you can see in the in the in the upper left corner off the website there is a new option that says Select it icon Click on that option and, uh, you have to scroll down after you after you scroll down. You see that in the left side Off the off the page The reason section that says Who's Ustashe for modern browsers? Now I'm going to select the HTML markup that appears on I'm going to heat Copy. I'm going to select the option copy in order to copy the markup that appears here. I have to go to the sublime takes right or and I'm going toe to remove the homework and then go I'm going toe based the growth that West copy was copied from the website As you can see, the ghost appears here. He's a code that says material icons. In order to continue, I have to scroll, scroll up the I have to scroll the Web, the Web fish, the Web page a little bit. And, uh, I have to select Thea Passion that that says developer guy After clicking the option, another page appears that says Material Icons Guide, I'm going to scroll down these Web page. After you scroll down the page, you get to the section that says Set up Metal Number one. You seem to be a Google weapons. In this section, Another piece off markup appears the's markup, says Link. So you have to select all these markup and you have to copy this markup on based it inside the HTML code that we are working on now we are back in the industry. Blank takes a writer. We go to the section that says Kit or they hit fictional Beautiful Whip your Web based on we're going toe. We're going to copy where we're going. Toe based the growth, and as you can see a link back appears this link back, says Google appease dot com slash icon family equals material icons, pieces a link toe. The Google servers on this link enables this Web page to use icons from you both. So we're going to save the changes by clicking control Control? Yes. And we're going toe Prefer to the Yeah, we're going to head over to the Web browser. We are going toe referred to refresh the page. Now, as you can see on a small house, I gonna piers, um that it's more house icon is juiced to reverence on the home page. So, as you can see now, you know how to insert icons in your Web page. 6. Create a beautiful Navigation: Well, guys. Three. Next step east to configure our top navigation. In order to configure the top navigation we have toe pay attention to the to the top navigation Goethe as we can see the top navigation code, which is a growth that I am selecting right now, he's has that a swell as a hitter to that inside on inside, inside the hitherto that we have a nature attack or attack that this place a link s o I have to style, um all these tax in order to stop the stacks. The first step that I'm going I'm going to perform is to create a style that says Mardian, um, marquees equals marking equals zero on a budding equals zero us as you. As you can see, thes styles make any element inside our with beige do toe was what thesis ties do is to remove the margin on budding off any any website element. So the next step is toe reverence. Our dif that say's top navigation dot dash variation. In order to reverence that thief I'm going to type in dif dot Ah, top navigation and I'm going toe open up braces a player off braces now the next step. Well, as you can see, this is a way to reference the top navigation element. Um, the first step is to set a background color equals toe black. So the extra decimal value off the color Black East 000 So I'm going to I'm going to say the changes. I'm going to refer. I'm going to head over to the browser and I'm going to refresh the base now. As you can see, the beef top navigation element appears in color black. Ah, Now I have to go to the so they to the sublime Texas writer. And I have to change the color off the front. In order to do it, I have to type in color white. The exceptional value for white is three efs. Save the changes. Go to the browser, refresh the page. Now you can see theme pastor shop that come text appears in color white. Uh, but the the icon appears in blue collar. So, in order to change the color off the off the link, I have toe reference sailing aside, mentioned before the answer attack is attack for the links. So I have to reference stealing so it that bean leaf stop navigation top navigation this page space on shortcut. And it's a way to referenced the answer to I'm going to change the color toe white. So I say the changes I go to the browser on I have to refresh to refresh the Web page. Now, as you can see, the text appears in white color as well as the icon, but I want to add some space around the world. But pastor shop that come on around the icon in orderto at some space, uh, I have to go to the to the growth it tighter, and I have to refer to go to the reference toe top navigation on. And, uh, I'm gonna add somebody. So I think bean budding 10 pixels in orderto a 10 pixels a space around the next on. And now I hit over to the browser and I refreshed the base. Now, as you can see the text as well as the icon, a beer with some space around them on now, the next Step East toe. Increase the size off the house icon in order to increase the size of the house icon, I have to go to the court, the writer and I have to go to the reference to the to the link that is the house icon on. I have tightening phone size in order toe increase the size off the off the icon I take the uh 46 is I say the changes. I go to the browser and I've refreshed the Web page. Now you can see the size off the home icon appears to be the same. So in orderto toe, make sure that the changes are applied to the home icon. I have to do another technique here. I hit over to the so the text to the growth writer. I I'm going to remove these. This is style and I'm going to go to the market on inside the markup. I'm going toe. So select the idea. And inside that I'm going to take being style equals Andi. Then I'm going toe based Theis Styles in here. I'm going to save the changes and I'm going to go to the to the Web browser and I'm going to refresh the base Now you can see the size of the house is very large, so I have to go back to the so the ghost writer, and I'm going to reduce the size off the off the house icon. I changed the value toe 30 pixels. I save the changes. Now I am in the browser again. I'm going to refresh the page. Honest. You can see the size off the house icon is a little this mortar. Now, the next step is to to move the house. The next step is to ready to move the house toe the right, right side off the base. Now, you mean the growth. A writer and I have to go to the actual attack preference. And I'm gonna take being a fluid floor. Right? I say the changes on this is going to move the link or the answer attack or the home I got to the right. Well, I am in the browser again. I have to refresh the web page. Now, as you can see, the house icon appears to the right on. As you can see, we have just finished our top navigation 7. Create an attractive header for your website: Well, guys, three. Next step in this tutorial is to create a heather for the web page for the landing for the home page in order to create a header for the home page. The first step is toe at the attack. So we wait. I mean, uh, that on, um indeed that Ah, I'm going to place another attack. These this stuff is a lift on inside these thief. I'm going to place two more tax. One is a heater. Went that that says plus three shop worries on below these heather one that I'm going toe to create a paragraph attack this paragraph attack we contain. Subtitle In this case, this title will be cooking. Ah, really. Daily shoes. Geeks scenes. 18 since 18. 50. Now I say the changes and I have to go to the browser and refresh the base. Now, as you can see, three pastor shop carries text appears on below the text appears the subtitle that says cooking delicious cake seems 18 50 now, Uh, the next step is to have a background image. So I have to get over to my style's Andi in my styles, I'm going to create a reverence to the heather a Z, you can see the hit attack contains all the heather that all the other information. So, in order to create a reference to the hill attack, I have to like being here and then embraces inside thes braces. I'm going to place, uh, the next the next property, that east background back ground, uh, background image. These property will set a background image for my for my header on. Now I have to take being a reference toe. The chocolate cake picture, which is the one that this place in the screen right now on that reference will be doubled a global dot It slash How much is this lush choke? A late take, though, on the extension of the file. I saved the changes and I have to go to the browser to see what happens. Now you have in the browser and I'm going to refresh the beige. Now you can see it appears like the picture of the cake appears, but, um, in orderto make the picture of the cake appear completely. I have toe go back to my style's. I have two other another, uh, property to the header in this case, the property will be mean. Height on the property will be set. Toe 500 speaks us. I save the changes. Go to the browser on. I'm going to refresh the base. Now you can see several pictures off the chocolate cake appear in the screen. If I reduced the size off the Web browser, I can see the layout. I can see the appearance off the layout for mobile devices. As I just said, This is the appearance off the Web page for mobile devices. So more devices like cell phones, for example, or tablets? Well, my devices like cellphones, for instance. So this is the appearance of the layout for mobile devices now where I want ease that the picture of the cake appears only once. So in orderto do it, I have to type in the following property in the heather reference on the property will be background background. Repeat, this property will be set toe No repeat. This makes the background toe appear only ones. I refreshed the with base after a refreshing their Web page. You can see that the picture of the cake appears only once for mobile devices as well, for as Well, as for larger screens, this is the appearance off the Web page in larger screens. And if I reduced the size off the Web browser, I can see the appearance off the Web page for mobile devices. Uh, what I want right now, east to but I want to do right now is to make the picture off the cake toe a span, Uh, all this green to span the whole screen. In order to do it, I have to typing the following property background sighs 100. This property will make the picture of the cake span the whole scream. I refreshed the with beige. Now, as you can see, the picture of the gate is spans the whole screen on. If I reviews the size off the Web browser, you can see the appearance off the you can see the appearance of the layout for mobile devices as well. Now, what I want is to be able to see the text that I, uh, that I typing in the beginning off these video. So, in order to see the text, we can see that the fix he is enclosed in the heater one hitter, one attack as well as a character. So I have to reverence those two elements in order to reference those elements have to be in here. Hey, that one. These are live pictures, a reference to the other one time on the color of the other one that will be set toe white . The Excellency, my value off the color White East three f's. Now I have to refresh the base. As you can see, the pastor shop Paris text appears in color white right now, but they take the text below appears in color black. So I wanna shift the value off the color off the text below, so I have to type in a reference toe. Such text on such text is enclosed in the paragraph tax or the big tax. So I have to I have to type in a reference heather be braces and then I'm going toe sheep. The color toe white I remember that they go toe white is can be typing. Asked three F's. Now I have to go to the browser and refresh the base. After refreshing the base, you can see that week The color of the text has has been shifted toe white on. Now what I want to do East toe, change the position of the text 8. Continue improving the header of your website: as I said in there in the previous video, what I want to do is to shift to change the post, to change the position of the text. In order to do it, I have toe goto the HTML code, and I want you to note that the reset if tack on such a thief attack in closest, they either want that on the bottle. After I'm going toe other class, toe the left back. In this case, the class will be way. Will be said toe, um titles. No, the value of these, the value of the class. For these, the attack will be caters. Oh, well, titles. This is the value off the class for these deep attack. Now I'm going to reference these. Leave that. So I think being care, Steve, don't darts, which is the value off the glass now, Uh, I have to to to say that thes tiff tack encloses the hither and the but after So, in order to to change the position, have typing position. Absolute Andi. Then I'm going typing, uh, doc to set the value off the top position in this case that the position will be, uh, 20 pixels on the value off the left position will be, uh, the value off the left position will be zero on the wit off these elements will be 100%. So now I save the changes. I go to the browser and I have to refresh the Web page. After refreshing the Web page. You can see that the text overlaps Thea other takes that waas above. So I have to make some adjustments to these properties. I have to improve these properties because the text overlaps. So, uh, the value will be said toe probably. Let's say, uh, I don't know, 80 beak cells. Maybe. I say the changes and I have to refresh the base now, as you can see, after refreshing the page, you can see that that the text is not overlapping the other text so but I want it takes to be a little down. So I have to make more. I have to make some improvements to these styles. I'm gonna change bit of property to 100 pixels, I said. The changes goto the browser and I refresh the base. After refreshing the page, you can see that the text appears down. I like how it looks. But now what I have to do is to center the text. So in order to center the text, I have toe say that we helped the Hitler one attack on the paragraph that I have to create references to those tax in order to modify the text. So I have to be here live. Okay. They want that. And, uh, coma. Hey there. Beat that. Nobody left. Once I have created references to those tax I have to take the following property takes a lying on. The value of this property will be set to send their I saved the changes. I go to the the browser, and I refreshed the base. After refreshing the page. You can see that the next is already center, but because of the fact that the next is in color white, we cannot see it very well. So I have to make some improvements to this layout so that we can see the next. You know that to do it, I have to shift the whole of the text. I'm going to set the color of this text toe. Uh, the black three exceptional value for Black. He's three times zero And, uh, I'm going toe to modify on the that that has the titles class. I want the beefed up with the title titles Glass toe, have a background color equals to white the excellent value for White East three efs. I saved the changes. I go to the to the browser and I refresh the base after a refreshing the page. You can see that the reserve white stripe that contains black text But what I want to do right now east toe to to create some transparency. So I have to modify the the white stripe. Uh, you know that the modified the white stripe I have to take the property capacity and I'm going, I'm going to set its value toe 0.6. I'm also gonna create a victor property with the value Alfa on the value on the value of this property is going to be opacity equals 60. I saved the changes. Go to the browser, refresh the browser. Now, as you can see, the white stripe has some transparency. But if we see these things layout, we can see that it's hard to read. The small text is very hard to read the small text. So I have to modify the size off such text in order to do it, I have toe. I have to make a reference. Do the toe the paragraph back the that that says cooking delicious cake scenes. 18. 50 in orderto modify the stakes, I have to make a reference. So I be here. They're part of that braces. Andi, I'm going toe create a reference to the to the other one time. So I like being, uh hey there either. Want that? And, uh, I'm going to modify the size of the killer. One death. I'm going. I'm going to modify the size of the text off the other one. So I be informed. Size 2.5 EMS on. I'm going to modify the size of the text off the bottle after by setting the property on size to, uh, I don't know, really one point a EMS. I go back to the browser and I have to refresh the base to see what happens now. As you can see, the size off the heather attack as well as the text below, is larger on. It is quite easy to see. It is very easy to read the text. So, um, another improvement that I'm going toe toe, toe the text below. So the smaller text is toe modify it its weight. So I being phoned. Uh, fund weight will be sent to both. I say the changes. I go to the the browser and I refresh the with Paige after a refreshing there. They with page. You can see that is very simple to read the text below. But I want this text to be a little smaller, so I have to go back to the reference to this text on I'm going to qualify the size of the text. I'm gonna set the size off the text to 1.5 EMS. I said the changes go to the browser. Refresh the base. After refreshing the page. You can see that is quite simple. Toe read the text. So I think this heather looks fine. It looks very with 9. Improve your header with Media Queries: Well, now a. So you can see we have just finished the hitter for our Web page. But this is the appearance off the heat off the header. For for what? This is the appearance off the heather if the header is displayed in a mobile device. But if we increase the size off the Web browser, we can see the appearance off the Web page in a larger screen. On this is the appearance off the Web page in a larger screen, atyou can see. Well, it looks fine. But I went toe, create some improvements. So these care there point they I wanted to improve these together so that when the heather is displayed in larger screens, it looks a little different. So in order to eat, I have to I have to create what is known Assad. Maybe a query. So I think bean media only screen and mugs, uh, I mean, wheat mean wheats equals six country equal 6 600 peaks. Is this media query, uh, is going toe? Let is gonna Is it enabled? This media query enables you toe create a styles that will be applied only for larger screens. So I'm going to create a comment. Ah, visa styles apply only toe larger. It screens. No, Um, as you can see in the browser, the white stripe appears, um, above the cake. So I went on the white stripe toe appear over the gate. So in order to do it, I have to modify some properties. In this case, I'm going toe modify the property. I'm going to modify the property top from the hither the class titles. So I'm going to modify the property stuff off the off belief element, So I'm gonna type a reference. So the leaf element inside the inside the media query sort of being together, Deve Ah, titles embraces, as you can see, the seaside reverence. So the thief element that has the titles class this element right here. So once I have created the reference, I'm gonna have a property top at that. You can see by the first on the property top because a value of 100 pictures, but now I'm going to modify its its value to, uh, 200 speaks us. I have to repeat. I have to say that these modifications only applies for larger screens. So I said the changes. Go back to the browser and I'm going to refresh the page. Now, As you can see, the white stripe appears above the cake, which is what I want to do. And, uh, if I, uh Okay, you guys Sorry. Sorry. I was thinking what? How to do it. Well, as I said before, where I want to do is to create a white stripe that is larger when the base is displayed in larger screens. So I'm going toe typing by the dock. Um, buddy, stop Will be 50 50 pixels. These property is going toe as ah on a space above above the decks. So we have to go to the browser and refresh the patient. Now, as you can see, some space has bean a thief a both the text Now I want tohave a more space below the text. So I have to go to my to my media query. I'm going toe typing Badini Budding bottom on its value will be 50 pixels as well. So I go to the web page and I refresh the with base. Now, as you can see, guys, there is more space below the text. I have to say that these changes only will be applied if the patient is displayed in larger screens. Okay, so, uh, if the patient is displayed in a smaller screens, this will be the appearance off the off the header. But if the base is this play a larger screens, then the heather will be modified a little bit. Okay. So thes changes were made possible by adding maybe a queries. Media queries are the means are the means we have or the average tools we have toe apply styles only for served dine SISE is off screens. If we want toe, apply certain styles for giving a screen for agreement for even a screen size, we can use media queries. 10. Create a Respoonsive Menu with CSS: Okay, guys. Well, now I want to create a navigation many menu for my for my compeition. In order to create a navigation may new, I have to type in another set off tax. Those tax will be enough tax or navigation that's now inside these navigation tax, I will add on one or their own order least that because at least that this tax is creatives creative issues to describe. At least on inside these least I'm going to add, um, barrios elements or least elements. And inside these each element, I'm going to create a link. Remember that links are created with French. Your tax. Now, the first, uh, the first link. Well, the first link is going toe is going to league my, uh to my about to my about about the html file on the the text Lean will be about Andi. I'm going to create another element like this that contains a link, and the other league well is going to link toe the services page. So it's going to link to the services survey says thought html Fire on the text of the league will be services. That's where we should be. Services as Well, I'm going to create another least element. Ah, the next least elements is going to lead to my, uh who might this pneumonias this morning yells. I thought html file on the textile building will be testimonials. Tous the more Yes. Okay, I'm going to create on no other elements. The value this the's elements eyes going to link to my turns to my terms HTM and fire terms on detects off these leak will be terms as well. Day dams. Okay. Okay, guys. Well, I just finished creating, creating my my least off elements. Now I have toe get over to the web browser, and I have to to refresh the base. Now, as you can see on the bottom left corner, there is a least off four elements. Um, well, these elements will become my my menu in orderto create a menu from these from these least off elements, I have to use styles as well. This is the appearance off the menu in larger screens. On this is appearance off the menu in a smaller screens. Now, as you can see, there is an empty space or a white space or empty space between the header image or the or the chocolate cake image on the least on, I have to figure out a way to remove such empty space or white space between the chocolate picture on the least that I've just created in orderto remove such white space between the least on the picture. I'm gonna get over to the styles, and I'm going to make some modification toe the Do the header to the Hitler Reference or the killer styles on. Uh, I'm gonna improve the background size property. I'm going to add another value. This will be 100% on de so that the picture the picture of the cake is spans. Uh, response. It's pan spit extends particularly. So let's get over to the to the browser and let's refresh the base. Now, if I go to the browser and I refresh the page, you can see that the picture off the cake extends or increases its dimensions, particularly so that the white space was removed. So this is the appearance off the picture in mobile devices on this is the appearance off the picture in larger screens. So as you can see, this is the appearance off the picture in a larger screen. And personally, I have to say that that I prefer the appearance off the previews, Heather, but well, it looks fine. It looks fine. So I'm gonna let the hitter like this, Aunt, I'm gonna move. I'm gonna move ahead. I'm gonna go up. I'm gonna go ahead on, and I'm going to start creating the menu. 11. Continue creating the menu of your website: well, guys in this beauty, well, let's continue creating the menu. So the first step to create a menu from from scratch east toe toe a style the the least that we just created. I have to create a reference. So these least I remember that the least, um, is inside on navigation that so I have to create a reference I take being enough Northern least on the first step will be toe to remove to remove any style from the least, So we take the option least style type known. The's option removes any bullets if if they were well, if the bullets are found in the least, if the least has bullets. Deception removes such such bullets on I'm going toe. Have another option. This option. These things. Property is putting. I'm going on. The body will be said to see Roe. Now I'm going to reference the links or the answer attacks inside the least. As we can see, we have several answer tax or links inside the least. So in order to reference such elements, I have to take being on af one or the least. I'm sure that then braces on. We're where we are going toe active. The property text decoration. We're going to set this property toe none. These property is going to remove the underline off the off, the off the links. So let's get over to live to the browser on Let's to fresh the base Now if if we look closely, if we look on the if we look on the bottom left corner off the with page, we can see that the the least off elements appears, but the links don't have on underline on underline So this underline waas are removed by using the property text decoration known. Now I have toe to a style. I have to stay the the elements. I want the elements to appear to appear with a background color I said to black so the background color will be black with a bean background color And then the reference to the the exceptional code for the black color is, uh, three times zero. I saved the changes Goto the browser and I refresh the base Now as we can see on the least off elements. It's cooler black right now. So what I want to do ease what? I went to the right now is to change the color off the off the links toe white. So in order to do it, I have to go to the to the links reference by typing color on the value of this property will be said to white Remember that the extra decimal value for white Easter? Yes. I go to the browser and I refresh the page. Now, as you can see, the elements appear Ah, in white collar. Now what I want to do is that I want toe. I want to send their the elements. So I have to go. I have to create Well, no, no. I have to go to the to the enter tack reference. And I have to add a very important property. This property is this play. Look, this property is going to make our our and your tax or our lings to expand the whole screen , OK, to expand the whole screen horizontally. So, uh, probably we won't see any changes if I refresh the base. But these properties were important. Okay, this play block, keep in mind this property, this playbook Okay, I'm going to refresh the beach after refreshing the page. You can see that nothing happens. But this property, despite not any Rudy, happens. Um, the truth is that something very important is happening. But I don't wanna die too much into these, but I have to say that these properties were important. Okay, Now, the next step is to other property. Takes a line on the takes. A line will be set toe send their So, uh, I have toe say the changes go to the breath to the browser, refresh the page. After a refreshing the web page, you can see that the elements off the least appear centered. Now, the next step is toe increase the size of the off off the text. So I'm gonna hit over toe the after tax reference, and I'm gonna tie teen phone size, and I'm gonna set the phone size to 1.2 m's. I'm gonna say the changes. I'm gonna go to the browser. I'm going to refresh the fish. Now you can see the size off the elements off the least has increased, but I want to add some space around each worth. In order to do it, I have toe go toe there. Hunter, Tax reverence on going toe typing the following property body buddy on this property is going to set a space around the text. Andi, the space will be 10 picks is space. Okay? I said the changes go to the browser. Refresh the browser now, as you can see, uh, there is more is based around around the text. The options appear on the res. More space around each option. If I, uh, increase the size of the browser, let's see how it looks. Well, guys, after increasing the size off the browser, you can see that the recent menu, uh, in the bottom, in the bottom, off the base on, um, we have four options. 12. Use Media Queries to improve the navigation menu: Okay, guys. Okay, guys. Well, let's improve the navigation menu. In order to improve these navigation menu, I have to make some modifications. So the media query that we have created let's get over to the media query. And inside this media query, we have toe toe make our reverence. So the toe, the own order least element, this element that I am selecting right now I'm going to reference such elements. So I think bean enough. Nor there least I used the braces. And now I'm going to say that property, that east position and it's got the will be absolute. I don't want to die Wien too much into the into the meaning off this property. But let's say that this property is very important. You don't use this property like this. Your your your men you want display. Okay, Your many won't work. So you're going to take being another property. This property will be wheat. We're going to set the wheat toe 100%. Um, now I have to make another improvement. I'm going to reference each off the least elements in order to reverence each off the least elements. Those elements are the elements that that that I am selecting right now in order to reference each off those least elements I have that I pain knife in order. Least it I This is a way to referenced each off the least elements. Now the next step is to take being flawed left. This property is going toe move all the the least elements horizontally is going toe this this property floor left. He's going to shift the position of the elements from vertical position two horizontal position. Okay, let's get over to the browser. Let's is a fresh the base to see what happens Now you can see guys the menu this place horizontally. Okay, if we reviews the size off the off the Web browser like these, we can see that the menu, this place particularly. But if I increase the size off the browser, or if I increase the size of the screen, then the menu this place horizontally like these. So as you can see, guys, our menu behaves in a different way, depending on the size off the screen. Now I wanna makes other improvements, so I have to add somebody, which and I won't have somebody somebody toe the answer tax that are inside the elements. Remember that the enter attacks are the links. I want to add some space around the links or inside buildings. So I'm I have to reference the league's like they mean navigation, in order, least least element. I'm sure that or link that and I'm going toe more padding or more space. The space will be. Will be set to 26 is I save the changes? I go back to the browser. I refreshed the base, the base after a refreshing the page. You you can see guys that there is more space, more space around each eye, them off the navigation menu. So again we have, uh, our menu displaced vertically in a smaller screens about the menu is placed horizontally in , uh in larger screens. 13. Add some behaviour to the navigation menu: Well, guys, Now I have to improve my navigation menu A little eat in order to add some special effects toe my night navigation menu. I have to take being, uh, the following referenced naff. Who? Northern least. I'm sure that Kober the's reference, uh, will be applied Onley. Ah, this reference will be used on Lee When the mouse course or hovers over Andi I them off the navigation menu. So if the course or hopers over the menu, we want the background color to be shifted toe blue on on. That's it. I'm gonna save the changes. I'm gonna hit over to the browser and I'm going to refresh the base after refreshing the page. I'm gonna help. I'm gonna over over the the menu. I see what happens. I took a C guys, the items off the off the menu. Ah, change the color off the background. So this effect is very basic, but it looks very, very, very, very good on. Let's see how our application looks in smaller screens. Okay, guys will. Now I have reduced the size off my off my browser, my browser window. And if I Khobar over the elements off the off the navigation menu. You can see that three background color changes. So this is a very basic effect, but it looks very, very nice. It looks very, very good. So I think we're done with our navigation menu on, um, let's a little rocket on Blitzen proof. Um, I were home fish. 14. Searching for pictures for our website: Well, guys, in these video, I'm going to show you how you can. Well, I'm going to show you how toe have to improve our our home page. Well, in order to improve our home page, uh, I'm going toe use two pictures. So in this cake, in this case, I have this picture off a piece off breath on. I also have this picture off a cake. So I'm going to save these these pictures inside the they the root folder or they folder for my project. Now, I'm going to save these this cake, These pictures. Sorry. As, uh, the issues cake. Delicious cake. Because the name of the file on I'm going to save these other file right here on, uh, this file will be will be saved. So the images folder inside the root folder off our project. Now I'm going to save this file us. Let's say, uh, let's see. Breath, breath. I'm going to say if these speak sure as bread on as you can see, both Both pictures have bean saved. So the images folder. If I opened the marshes folder, you can see that the breath picture. If I open the marshes full there. Okay, I'm going to prove these. Well, here you can. You can see that I have the breath picture inside my images folder. My chocolate cake picture on my delicious cakes picture as well. All the pictures are inside the images folder already. 15. Placing pictures inside the homepage: now three. Next step is toe some mark up. So the the index dot html page the's Newmark up will be the inside main staff. Now we have our main tax. The's tax are used to describe the main, the main content inside our webpage. So the first step will be toe have a new leaf, and I'm going to add another D. Okay, the first, the first leaf will help the glass section on. Uh, well, both deeps will have the same the same classes. So what I'm gonna do is I'm going to create a single deep with the glass section, and then I'm gonna be based. These these def. So, um, these difficult class section inside it has two more dips on, uh, the first deep will have the glass. Uh, peak. Sure. On the second day, he will have the glass. Ah, this creature. Now I'm going to copy based, uh I'm going to copy these things, def, and I go, I'm going to paste it again. Now, inside the pictures, the pictures live. I'm going toe insert a picture. So I think being the image duck on in the source. Attribute, attribute. I have toe create a reverence to the picture that I want to display here. In this case, I want to display the picture that says the issues. No, I want to display here the picture that says breath. So I think being breth, um, the description will be, uh, okay. In order to create a description for this picture. I just wanna be a failure to that. I wanted to I think being a killer to death on this killer to attack will say, Ah the most. The issues, uh, breath the most delicious bread, but the most delicious. Yes, The most delicious bread and below the header toe. I'm going to other para breath on this program is going to say any text that you that you like in this case, I'm going to take being something, um, whatever I want. So I have to skip this part of the process. Okay, guys. Well, as you can see, I've just typing a description for the picture. Now I have to repeat the process in the in. The other thief that that has a glass section I'm going toe a picture. So I have any much that and I'm going to create a reference to the picture that says the real issue escape. Really? She the least use cake and I'm going to other description for that picture. In order. In order to other description, I'm going to use a header to attack. And, uh, the hit attack will say, uh, the most for regional or regional cakes off the market. The most agree or arena cakes off the market. And now I'm I'm going toe us a paragraph, uh, to extent to extend the description on this paragraph, we say, uh, we with being baking, baking the best cakes over over more than 100 years. I don't know what 100 years. Well, now I have to save the changes on. I'm gonna head over to the browser toe, refresh the base after year after after refreshing the page, you can see that the pictures don't display. So I have to go back to my coat. A writer and I have to make improvements. So the pictures So the image tax I have to fix my my butts toe the the pictures in this case, I have to ask the marshes it slash on. I have to have here as well, images. It slash So I have toe save the changes. I get over to the roaster and I'm going to refresh the base. Now. After refreshing the page, you can see that the pictures off the off the breath appears Andi as well as the picture off the gate. But what I want to do now he's toe do toe at just toe, add just or rece ice the pictures so that they look very, very well. Ah, In order to do it, we have to to use styles. 16. Adjusting layout for mobile devices: Well, in this video, I'm going toe toe at just my leg out for mobile for royal devices. So in orderto just my my leg out for mobile devices, I have to use styles. As you can see, If I reduce the size off the web browser, I can see how the base this place enamel body device. And as you can see, uh, the picture off, the off the breath off the piece of bread A is very lash, and I have to fix that before you scroll down. I can see that the picture of the cake. He's as well, very large, very large. So I have to reviews the size off the pictures in order to be displayed in mobile devices. In order to do it, I have to hit over to the so the styles. So the styles document or file, Andi, I have type being our preference. So the to the pictures. So, Aziz, you know, the the pictures are placed inside a live with the glass section, so I have to take being the the following, uh, thief glass section. Andi, Then I have bean image. This is a reverence to the pictures that are inside on the leaves with the glass section. Now I have type bean wheat 100% and die. I would go, I say the changes and I get over to the browser to see what happens. I have to refresh the base after a refreshing the page. You can see that the size off the off the big short has been reduced. And now it feeds very well inside the the browser window. In other words, this is how the pictures will be displayed in mobile devices. As you can see, both pictures are already produced in size. Now I have toe adjust the title. Andi, they and the next. So I hit over to my I hit over to my style space patient. Why? Stylists fired. Sorry on. Now, if you recall these, um, you can you can see that the description off each picture is was placed inside a beef with the description class. So I have to create a reference to those elements, and I like being deep a glass description. This is a referent, a referenced. So those elements and, um, I have to I have to create a reference toe the hitherto time now what I want is that the the others are aligned to the center. So I used the text align property on, say the changes goto the browser and I have to refresh the page. After refreshing the page, you can see that the titles or the Heather's son. I'm sorry that the headers appeared centers So, uh, this looks better now what I want East toe increase the size of the hitters on. I also went toe sent there the text below the headers. So in order to do it, I have to. It started by creating reverence. So the tow the text below the hitters such takes Such pieces of text are found inside the battery of tax. So I have to create a reference to the panic attacks as follows. And I have to say that the decks align Must be the thing the text align. Property must be set to center. Now I want to increase the size off the hitherto tax. In this case, the size will be, uh, the phone size will be. I don't know, probably 2.5 aims on the takes on the size of the paragraph off the butter, Gramps will be a fun size equals toe wind 1.5 EMS. Now I have I have to save the changes. I head over to the browser and I have to refresh the base to see what happens. After a refreshing the base, you can see that the takes appears larger on it looks it looks better. Yes, it looks It looks better. I like the way, the way how it looks. Um, now I just have toe find to figure out a way to make all of these appear more more professional. Now, in order to make through the Web page toe appear more professional. I want to add more space at the bottom, onto the top off the off the text. So I'm going toe Hello. I'm going to head over to the hair to attack reference and I'm going toe to add some padding to the top. The budding will be 50 pixels. I'm going to add some padding toe the bottom. So I used butting, butting bottom and I'm going toe set thesis property toe 30 pixels as well, on on going to repeat these properties for the for the paragraphs as well. So I say the changes go to the browser and I have to refresh the base to see what happens now. After refreshing the page, you can see that there is more space, more, more space between the text and the Heathers. So these I think this thesis makes the layout toe appear a little more organized. But I want toe some styles, some new markup so that the appearance improves a little bit. No, uh, the next, the next them with them that I'm gonna do. He's toe do at some result horizontal lines. So horizontal lines are usedto to make the leg out more professional. Anyway, that's what I'm going to use in orderto horizontal lines. I have to take pain. H r, which stands for Hori Hori Santa uh, I'm going to have another another horizontal line by my typing name Uh, H r. Which stands for horizontal line. Now I say the changes goto the browser on refresh the page to see how it looks. Now, as you can see, a horizontal on a horizontal line appears between the text and the header. And, um, just I have to modify these horizontal lines so that so that they look more more professional. So I have toe a reference to the horizontal line on I'm going toe have the property wheat. And I'm going to say that this property to 70% and then go I'm gonna ask a lift live margin Margie lived on. I'm going to say that this margin to 50% I save the changes and I get over to the browser. After a refreshing the beige. You can see that the horizontal lines are are a little smaller, Andi, they give our layout more professional. Look. 17. Adjusting layout for larger screens: Hello, guys. Will, uh, in the in the previous video, I told you that I am going to move the picture of the cake to the left on its description to the right. In order to do it, I have to go to the HTML code. I need to find the HTM the the HTML code that corresponds to the picture to the picture of the gate. As you can see, such growth is the one that I am selecting right now, and I'm going toe on a style. Attribute such a style attitude, will have a property float, said toe left on. I'm going toe us another style attribute. So the description off the big off the off the picture on this a style attribute will have a property float, said toe. Right now, I have to save the changes, and I have to get over today with browser on, refresh the base and see what happens. After a refreshing the page, you can see that the picture of the cake was moved to the left and it's on. Its description was moved to the right on defy Scroll up this girl there. If I scroll the patient, you can see that the first picture appears toe the so the right on its description toe the left? No. If if we refuse the size off the off the off the browser off the browser window, you can see that the layout changes according to the to the size off the screen or the size off the Web browser. If they with browser, he's, uh if the Web browser window is small smaller, then the layout fast these disappearance. But if I increase the size off the off the broad browser window, we can see that the layout changes. So, in other words, our layout ah, response in a different way according to the size off the screen. If if then, if the layout is displayed in mobile devices, the layout has time. Certain properties on. If the layout is displayed in larger screens, the lady out changes. So, um, I think we are. We are almost finished with this layout, but we just need to ask the food there for these Web page in the next video. I'm going to add the footer for these with Paige 18. Creating a footer for the homepage: Hello, guys. Well, in this video, I'm going to show you how you can ask a foot there to you. To the webpage. Well, in order to add a food, their toe, the web page you have tow asked another, uh, another tax in this case, attacks will be food There on inside these tax I'm going toe Add two paragraphs. So I mean, but after that Aunt below this paragraph attack, I'm goingto have another battle after Now, As you can see, I have two paragraphs tax and what I want In this case, it's toe tohave to Ling's. So the first paragraph is going to contain two links in order to create a link I have to use and your tax s o I have to use have to create to actual tax. In this case, the first answer tax is going to reverence the beige Ah fuck fact thought html on the text off this link or under attack will be ah fac on the other, an attack or the other lean is going toe have a reverence toe the html file contact going that contact the HTML Now the text for this link will be contact now in the in the paragraph below, I'm going to ask the group a copyright statement. So, in orderto create the copyright symbol, I have toe typing on percent copy, then semi Colon. Then I'm going toe place the the name off the off the website in this case past three shop . Uh, Barry's trusteeship. Barry's don't come, uh, go man on one coma followed by the year in this case, a year is 2000 and 19. Now the next step is to say to changes and now I have toe hit over to the so the Web browser and see and see what happens. As you can see, guys in the bottom bottom left corner off the off the screen, we can see that the links that we just created a peer on We can also see that the copyright a statement appears as well. But I want to add some styles to these food there. So in order to add some styles, I have to get over to the styles file. Andi, I have to create a reference to the food in this case, I don't have to create a reference to the future. I have to take to the green put there, which is the name of the attack. And now I have toe use races. Now I want the background color of the footer to be set to black. So the excessive Marco for black is three zeros. Now I want, uh, the color off the next Toby said Toe white. Remember that? The Excellency, my code for White East, three deaths. I say the changes on now I go to the browser to see what happens. I have to refresh the base. Well, guys, after refreshing the page, you can see that the background color off the whole page waas shifted to black. This is, of course, a mistake. Now I have to figure out I wait to fix thes book because, of course, the background off the off the beach The background of the base is black. I don't want this to happen, so I have to figure out a solution for this problem. And as as soon as I have the solution, I be back with their solution to this problem. Okay? Yes. Well, now I just found the solution to these police problem on now. In order to fix this problem we have to get over to the coat on. We have to go to the referenced toe, the food there. Now, in order to fix this problem, I have we have toe set the float property toe left on. We we need to add a wheat property and said this property to 100. No, I said the changes. I go back to the browser, I refreshed the base and see what happens. Well, guys, asses, you can see I've just refreshed the base on now. In the in, the in the bottom, off the base we have a black food, er which is exactly what we want, what I want for this page. But I want to add more Espace around the text in the footer. And I also want to center the text in the footer. So in order to do it, I have to head over to the the foot. Their reference on, uh, if we check the html code, we can see that inside the foot there we have two paragraphs. So the first step is to create a reference to such para Perhaps in this case, the reference will be created by by writing by typing in there, followed by, Uh, but I'm gonna reference them braces, and then I'm going to send their text by using the text align property. And I'm going to set this property to center. No, um, I have to say the changes. I go back to the so the web browser on I refresh the page. Well, guys, after refreshing the base, you can see that the the text is already centered. But now I just want to add some space around the text. So I need to go back to the styles and enough some properties toe have more space around the text. Okay, Now I am in the in the battle grabs reference. So I'm going to hurt somebody. Budding don't. This is going to have a space above the text. So I'm going to set this property to 50 pixels on. I also want to add some space below the text, so I might have to use the property patting bar bottom on. I'm going to say this property to 15 peaks us now, he said, The changes and I go back to the to the browser and I have to refresh the page and see what happens after refreshing the page, you can see that there is more space around the text now. What I want to do is to increase the size of they off the phone. So I have to go back to the toe the styles and I have to ask to increase the size off the front. In order to do it. I have to use the property formed size, and I'm going to set this property to one point toe EMS. Now I say they're changes and I go back to the browser on Refresh the base to see what happens. After refreshing the page, you can see that the phone sizes larger. Now I want to change the font family. Andi, I want billings toe be toe have more these times between them, so I have to fix those links as well. Now where I want to do is to change the phone family property. So I think being formed family and I'm going to skews before the phone Family. Verdana on a secondary from family will be sound city in the cased. In the case, the browser don't have the verdana phone family, then the sensory from family will be used instead. Now I have to refresh the base and see what happens now. As you can see, the fund family has bean changes on now I in the next video. In the next video, I'm going to fix the the links as well. 19. Improving the footer: Okay, guys will. Now what I want to do in these in this section is toe improve feelings that are found inside the food there. Now, the first thing that I want toe do is east. Get over. Claim to the coast lighter on. If we analyzed the footer footer HTML code, you can see that we have toe answer tax. Remember that the enter tax are attacks that are used to create links. So I have to create a reference to such and your attacks on in order to create a reference , I have toe typing food there. Uh, A and this is a reference to the answer tax now or links. Now, the first step is to change the color of the off the front. So, I mean, the property color. And I said this property toe, uh, white, remember that they exercising? My code for white is three efs, three times f on. Um, now what? I want to do east toe, remove the underline off the links. So, in order to remove the underline off the links, I have bean text decoration, and I kind of have to set this property to known in order to resolve the underline. Now I have to go back to the browser and I have to refresh the page and see what happens. Now. As you can see, the links appear in color. White on the underline was removed as well. But now what I want is to add some space around the links so that the links are separated. And in order to add more space around the links, I have toe get over to the styles and I'm going to add the property party in orderto more more space around the the during the links on. I'm going to say this property toe, probably probably 10 picks is okay. I'm gonna save thes these changes and I have to get over to the browser and a fresh that page to see what happens. After refreshing the page, you can see that the leagues are more separated. But now what I want to do is to create a vertical line in between links so that the links are are so that the reason the distinction between the links I want toe separate the links by a vertical line in order to create a vertical line between the links in between the links. I have to hit over to my year styles. And, um, I'm going to hit over to the So the first link billing that says back in this link, I have to ask on a tribute. It's tell you, and I'm going to add a property in this case will be board there Boarder there, right? Yes. Border right is the property. And I'm going to say this property to one pixel s oly on the color will be white or three efs Thies this coat that I just I've just believe he's going toe create a vertical line in between feelings. So I head over to the browser and I have to refresh the page to see what happens. After refreshing the page, you can see that the Reese vertical line between between the the in between the links on I think this is it for these for these section Ah, so far we have ah, with fish that Cossack hither, that has a top navigation. Uh hey, their menu, uh, I'm horizontal menu and we also have two pictures with its corresponding description. Andi in the at the bottom off the base will have the food. Well, guys, now it's time toe. Start creating thea other with patients 20. Fixing the Navigation Menu Links: Okay, guys, before I continue creating these this website, I just have to say that if wiki we if we click on on the links in the navigation menu, we can see that billings are actually ah, not working very well. After clicking any off feelings in the navigation menu, you can see that billings are not working. So in orderto fix that a problem. I have toe head over to the html code and I have to improve the league's Koth in order for the wings to work properly. So I head over to the HTML code and we have to to find the age to me the HTML code that that corresponds to the to the links in the navigation menu. Uh, in that cold, you can see that we are using is lashes. So what we have to do right now east to remove the slashes every move when one is large, I know that it slash another is slash and and over this lunch, I've just removed for his lashes. Off the off the links that correspond that are placed inside my navigation menu. So I saved the changes. I go back to the toe the rows there and refresh the base to see what happens. Okay, guys, After refreshing the beige, I have to click on on my on the links in the navigation menu. Andi, I have to see what happens now. You can see that on empty with page appears, which means billings are already working. Now, if I go back to their to the Bache to the home page on, if I click on any any other link, for instance in this case, I'm going to click on the testimonials leaning. Now I have to. I have to see what happens. After clicking in the testimonials link, you can see that a white with beige appears. These means the links are working properly. So now I have to go back to the base to the home page and, um, ambitiously, the guys now the now the links off my navigation menu are working properly. 21. Creating the About Page: Okay, guys. Well, now, in this video, I'm going to create another with Peixe. Such was soft. Such Web page will be the about the HTML days in other to create theeighties html page. Let's open the file about the HTML on we have to create some some basic markup. This is a the basic markup for any for any with Paige. So as you can see, this is like the template like this is like a template that you can get that you have to use when you create a new with patient. So in this case, the title of the base will be, uh, about us about us. That is the title of the page. And, uh, well, im going toe correct this title the title of the base will be, Ah, blustery show Barry's dash. Uh, about about us. Now I have to I helped tow typing. I think that that so I think being made that on the middle, most have an attribute. Charset said toe beauty if Dash eight not accept to create another myth attack. This meant that, uh, we have, um the property. The name I said to you port you port and think on the attribute content will be said toe wheat equals device. Wheat coma. Misha is scale, uh, equals Weinbaum zero aside, mentioned in the breaking the previews section off these Victoria, these meditator He's very Borten because these met attack enables with developers to create patients that will be displayed, displayed in mobile devices or smaller screens. So these with this metal met attack is very important. And now we have to to copy paste some growth from our our home page. Uh, the coat that I'm going toe based that I'm going to copy based. He's the code that says a link the tax that say link. We have to copy those those those tax onda we are going toe based those taxed in the same place that that we needed that we needed before. Now the next step is toe to copy another piece of coat. Um, in this case, the other piece of growth that I want to copy ease because that corresponds to the top navigation menu. I select all the code and I'm going to copy such growth. And now I have to I have to place the code after they believe that like peace. Now I say the changes now I have toe could be another piece of coat. Uh, I want to go pee the navigation menu. Koth. So I have to select the the the the navigation, the navigation ducks along with all the contents. I have to copy thean allegation that the navigation that content on I have to based such growth after the dope navigation goes. Now I say the changes and I have to go back to the browser to see what happens. So, uh, I have toe removed the text that says index topped html I have to removed and it fixed That says index dot html And I have to I have to take being about about don't html though h t m l Now I click enter and I see what happens now. As you can see, after loading the beige thesis, the appearance off the about page it's just a menu on. It has have top navigation as well, But what I want to do now East toe have the contents for these page. So I head over to the the ghost writer, and, uh, I have toe have the main tax, so I being made. Remember that these tax are used toe Describe the main content off our web page. Okay, guys. Well, now the next step is toe goto the world and search for for a picture off a cake. Eso take go to Google and search for a picture off a cake that you like on. You have to save on such a picture in the project folder. Now, in this case, I'm going to save this picture as, uh, random Grandal gate on a Z. You can see I'm saving this picture. Do the images folder inside my pastor shop folder now young in the Koth writer. And as you can see, the random cake Kate, picture is already inside the folder for for my project. So what? I went to the now east to insert is toe insert the picture insight. Uh, the HTML code. So I have to create a thief on this thief is going to have a class that says, uh, random Kate. Random cake is a glass for these. If any safe such thief, I have toe add on any much death on this stuff. Most have our reverence to the random take picture. So I have. I have to take being the bat toe. The picture in this case, the but is much is slash random cake and now I have to have the extension. I say the changes on Goto the browser to see what happens after refreshing the page. You can see that the about page contains displays the picture of the cake. What I want to do now. East toe, add some styles, please to this picture. So I have toe get over to the styles file. Now the next step is to create a reference to the picture of the cake on. In order to create a reference, I have to, uh, toe add some styles toe my style's file. But I'm going to ask all of these in the next video. 22. Adding Lorem Ipsum text to the About Page: Okay, guys will in this video. I'm what I'm going to do is I'm going toe to create the leg out for the for the for the about page. So the first step is to the first. The first step that I'm gonna take east toe is toe. Make the picture of the cake toe a span, the holy screen. So in order to do it, I have to go to the HTML html code on that, you can see the picture. The picture of the cake is a rep is is placed within a leaf with the glass Random gayg. So the first step is to go to the styles file, and I have to create a reference to such a picture. So, uh, in this case, I'm I'm going. I'm going to create uh, the reference on I'm going to take bean the class. Random cake class. Random cake. E must. This is a reference for the picture off the cake. Now I want a picture of the big toe. Have ah, with property. Set toe 100. Andi, I right sent to Aldo. Now I'm going to save the changes on I get over to the browser on. Refresh the base to see what happens now. As you can see the picture of the cake, it spans the whole vehicle with beige on. This is This is what I wanted to do on de so far, everything is working Fine. Now what I have to do is tow Ask more content to my base. So I have to go toe the about page and I'm going to us another leave these. Dave will have a glass that, um the glass will be equals toe. Um, content content. Now, this class these Steve is going to have a Hitler one time on this together. Won Tak will have a text that such takes will be about us about close on there. They didn't want that. I'm going to place a part of that now. One alternative east toe typing on all the text by hand. But I don't want to take being all the text by hand. I prefer toe toe copy random takes from from another from another source. So, uh, in a moment I'm going to show you with a website that generates paragraphs off random next , and you can copy such paragraphs on based the paragraphs inside your content. OK, guys. Now the next step is toe goto wool on. Make a search and search for a Lauren assume website. I assume website is a website that generates random text on you can copy the random random text on based the random text inside your HTML growth so that you don't have to toe typing the content by hand. So in this case, I'm going I'm going to be seat uh, the leap soon dot com website and see what happens. Okay, guys will now am inside. They lured him. Ipsum website The's website generates random text on random paragraphs off text so that you can use such for a reps and and GOP on based those paragraphs inside your your HTML content . So I'm going to scroll that I scrolled down there. They were based. OK, guys. Now I am in the interim assume website that generates random text here I am toe being the number off paragraphs off random checks that I want. In this case, I just want three paragraphs off random text and I'm going to click on the button that says Generate Lauren Zoom on the random takes will be generated. Now, as you can see, three paragraphs off random text have been created. But by these website now I have so simply copy these things. Paragraphs. In this case, I'm going to use only two paragraphs. So I have to select the paragraphs on. I have to copy these paragraphs based the paragraphs inside my html. Goethe. Well, guys. And now a young back in my html coat on and what I'm going to do east to base the paragraphs. So as you can see, uh, the paragraphs are already here on now. The next step is to say the changes. I I'm gonna head over to the browser to see how it looks. Well, guys, now, as you can see, the bottle grabs off. Random Next are under the picture. Now the next step east to a style, the paragraphs off random text. So I'm going to go back to the will it take to the ghost writer, and I'm going to apply some styles to these rent off the random text. Okay, guys, in order to a style of the paragraph, I have to create a reference to such paragraphs off takes on. Remember that the paragraphs of text are inside a live with the glass content. So I get over to the HTM toe the files to the styles file, and I type bean and beef Dent, uh, battery up. And now I have toe set the width property. So 70%. And I'm going to say the changes go and go to the browser to see what happens after refreshing the page. You can see that that the next responds only 70% off the off the web page. So now what I want to do east to send their the next s. So I have to go to the so the styles file. Well, guys, Now, um, in the paragraph reference, and I'm gonna place the margin a margin left, and I'm gonna set the managing left property to 50%. I want to save the changes, and I'm gonna get go back to the browser to see what happens. Well, guys, now, as you can see, the text appears center. But now what I want to do is to increase the size on the front family off the off the next . So I have to go back to the styles on modify Theis styles a little bit. Well, guys, now I am in this dial section, and I'm going to clean phone family, and I'm going to write belladonna, and I'm going to ask the property formed size, and I'm going to set this property toe 1.2 EMS. I'm going to say the changes on go to the rouser to see what happens. Well, guys, now you can see that the decks appears in larger in a larger size. So, uh, in the next video, in the next video, I will continue improving this text. 23. About Page: OK, guys, Now in these in these video in this video I will continue for making the text So the first step will be to send their the about off together. So in order to eat I have to go to my my style's and I'm going toe create a reference to such heather one as you can see the other one attack is placed inside a leave with the glass content. So I had to create a reference to such a hater. Want that? And I'm going to take aim deep class content and then I'm going to take be toe. I mean Hillary, either one on I'm going to use the property fixed. Allying on this property will be said to center. Now I say the changes and go to the browser to see how it looks. Well, guys, after refreshing the base, you can see that the title the heather appear centers and now what I want to do is to justify the paragraphs off text. So I have to go back to the the writer and I have toe go to the reference for the bar up and in thes reference for the paragraph, I'm going to use the property text align on its thes property will be said to use. Defy, I say the chance to say the changes and now you have to go back to the browser on refresh the page to see what happens. Well, guys, after refreshing the page, you can see that the paragraphs off takes appear justify I used to fight. So now the next step is toe after a foot there to these these page. So in order to eat, I have to go back to the They go to the right or I have to open the index html beige, which is the page that we created. First on I'm going to look for the food, their attacks, and I'm going to copy such food attacks on after copy. After coping the foot their tax. I'm going toe open the I'm going to open the about base on. I'm going to scroll down a little bit on on their the main that I'm going toe based the food they're both After basting the bitter cold, I save the changes on. Now I go back to the to the browser on refresh the page to see what happens now I stay now after refreshing the page, you can see that the footer appears at at the bottom of the page on. Now, if you pay attention, if you see these pictures this with page, you can see that the paragraphs off text Pierre very close to the food there. So I want toe add some space between the paragraphs off decks on the food there, as well as between the paragraphs off text on they Heather. So, in order to have more air space above the paragraph off, text on below the paragraph off. Next, I have to go to my style's on. And I have to go to the reference I have to find the reference to the bar up. In this case, the reference is these and I'm going toe, uh, bobbing top problem putting top property. And I'm going to set this property toe 36 cents. And now I'm going to ask a budding bottom property and I'm going to set this property until the picks us as well. Now I have to save the changes on Go to the browser, refresh the page to see what happens. Well, guys, now, as you can see the Reese more space under the paragraph on above the paragraph. Um, Now, let's let's take a look to the base four. Let's take a look to the base to see how it looks in a smaller screens. Well, guys, now, as you can see, I have produced the size off the browser to see toe. Understand how the patient looks in a smaller screens or in mobile mobile screens or in mobile devices. And this is the appearance off the about page in mobile devices. If you see that the thesis page in a cell phone, for example, these will be the appearance off the Web page. As you can see, um, it looks it looks fine. So I'm going toe. I'm going to leave the base like this. If you guys want the base toe look different, you can't just make some improvements to the styles. Um, well, in orderto well, I'm going to do some improvements to the base for mobile devices. So in the next video, I'm goingto do some little improvements to these Web based so that it looks better in mobile devices 24. Improving About Page: Okay, guys, in order to improve these with pace with page photo by devices, I have toe hit over toe. The reference for the paragraph on I'm going to reduce the batting. Um, I'm going to reviews. I'm sorry. I'm going to reduce the wheat property from 70% to 90%. And I'm going toe to reduce the margin left property from 50% to 5%. I saved the changes, and I go back to the browser and refresh the page to see what happens. Well, now, as you can see, this is the appearance off the beige. After refreshing the page on as you can see, the Reese Laissus back less an empty space between the borders off the browser on the barrel wrapped. So, in my, in my opinion, this looks better because there is less empty space around. So, uh, I have toe increase the size of the off the web browser to see the appearance off the base in larger screens. Okay, guys. Well, after after enlarging the size of the browser after increasing the dimensions off the browser or rece icing the rouser, you can see that the appearance off the off the paragraph. He's like this. Andi, In my opinion, it looks fine. So I think we're done with this page. So in the next video, I will start creating another page. 25. Creating FAQ page: Okay, guys. Well, in this video, I'm going to create the fact dot html beige. Remember that the fact html page is our webpage that contains common questions, uh, that sometimes are asked by the users. So in order to create the webpage that contains the frequently asked questions, I'm going to start by creating the basic HTML code, Onda. As you can see, I'm going toe us a title. The title will be blustery Bust three, Show up. Bust three, show tyreese as I'm going toe. That being a fuck that it stands for frequently asked questions. Now I save the changes. Now, if I goto the about page, I'm going toe copy theme. It attacks. So I have to copy these Met attacks on going toe based the Met attacks above the title. Now I go to the about page on going. I'm going toe. Copy the link tax. Andi, I'm going. I'm going toe based billing tax below the title. And, uh, I have to, uh, copy the dope navigation as well. So I select the code for the top navigation on. I'm going to pace the the top navigation inside the body off inside the body tax. Now I'm going toe. Copy the navigation Coath as well. I'm going to select the growth for the navigation. Ongoing. Copy the growth. I don't going toe based such cold below the belief for the below the top navigation. So as you can see, this is this is a copy off the about page. And now I have toe to create the main tax. Remember that the main tax contained the main, the main content for our webpage. Ah, in these main tax, I'm going toe create the content off the page. Now I'm going to have a footer for the space in order to us a food there. I have to go to the about page on going toe copy. They called for the food there. I could be the growth for the food there on. I'm going toe based Such growth below the main tax 100 below the main tax on now, in the main attacks, I'm going toe, uh, going to create five. He'll have to tax five players off hitherto tax that, um okay, As you can see, I just created three payers located two decks, so I went toe to create five players off tax Now inside each player inside each, each player off. Heather Tax I'm going to place a question. So in this case, I'm going toe type in a random questions. I random question. In this case, the question will be, uh, push theon. But question about ah, Whip say number one. Okay, this is my first question. Now I'm going toe create four more questions like this on. I'm gonna skip this part off the process. Well, guys, now, as you can see, I've just created five questions on and each of the questions is enclosed by Heather toe tax. Now I'm going toe have a paragraph after each question, So I I at paragraph tax after each question. Now I have to skip this part off the process. Well, guys, now, as you can see, I've just created five paragraphs on each paragraph is placed after the hitherto tax. Now, inside each each paragraph, I'm going toe I random text. So I'm going to select random text from the text in the about page. So I'm going to select some random checks from the about page. I'm going to copy the text and I'm going to pace the text inside the paragraph tax like these. Now I'm going to repeat this process five times for each off the paragraphs. I will escape this part of the process. OK, guys, Now, as you can see, I have five paragraphs on five questions. Now I'm going toe scroll up the base and I'm going to ask a feather one time. Obviously there one time will be placed after the main attack and discover what one time we contained in the world. FAC. So I'm gonna save the changes. And now I'm gonna get over to the browser and I'm gonna refresh these page to see how it looks. OK, guys, now I am in the about in the fact the HTML based on as you can see, the questions appear along with their corresponding answers. But if you see carefully, you can You can see that the question number one doesn't show up. So, in orderto make the question number one toe appear in their webpage, I have toe try to figure out a way to make the question number one appear in the base. So I have to try to fix these things problem. And as soon as they cut the solution. I'll be back. OK, guys, Now am again in the back html on after the main that I'm going to create um, a container. So I'm going to create a thief. I'm going to other class, toe these thief, The class will be gone. Feigner And now pay attention to these Theresa Step. I'm going to select all the cold that I had created. That is, I'm going to select all the questions alone with all the answers on After selecting all the questions and all the answers, I'm going toe copy. I'm going to cut these growth. And after cutting the growth, I'm going toe pasty code inside the container. In other words, I'm going to place all the produce growth inside the container inside the beef with the container glass. So I based based Icos. Now, as you can see, all the growth is inside. They live with the glass container 26. Improving FAQ page: OK, guys. Now I am here in the fact html file on that. You can see, um, there is a problem in the page because at the first question, the first question doesn't. Doesn't doesn't doesn't show it is not shown in the base. We cannot see the first question. It is a problem. I have to figure out a way to make the first question appear in the webpage. So in order to fix that, I have to go to my style's on. Um, I have to recall that the questions along with the with along with the answers, are placed inside the container beef. So I have to create a reference for the container leaf. I have to get over to my style's on. I have to scroll down a little bit on. I'm going to create a preference for the container. These Stainer gone, they in their defense, and I'm going to use the races now. What I want to do is to float to float these things containers to the left, and I want this container toe have ah wheat property said toe 100 on, um, mean fight property said toe, uh, to 600 speaks is now you save the changes and I have to go back to the so the fact dot html base to see what happens. Well, guys, after refreshing the page, you can see that the problem Purse East. I am unable to see the question number one. So I have to figure out a way to make the question number one appear on the screen. As soon as I figure out the way to make the question number one appear on the screen, I will come back with the solution for you. Okay, guys will. Now I am in the in the styles again on I mean, I am in the container reference, so I'm going toe somebody. So imparting to the stop on this property will be said toe, um, this property will be said toe 60 beaks oath. I'm going to save the changes, and I'm gonna go back to the browser to see what happens. Remember that these property putting top adds his base in the container. So what I'm gonna do right right now is that what I'm doing right now is that I'm having empty space in the container. Well, guys, after refreshing the page. You can see that right now. I am able to see the question number one as well as the back header. So now the only thing that I need East toe figure out a way. So center the questions as well as the answers. So I have to go back to the year styles. Okay, you guys now, um, in these tires again on if we analyze the coat, we can see that the each question is surrounded by a hitherto so I'm going to create a reference to such feathers. So in order to create a reference have being leave container can do, And I'm going to send their the text. So I had to take the property text align sent there. Now I'm going to say the changes and I have to go back to the browser and refresh the page to see what happens. Well, guys, after refreshing the page, you can see that the questions are already centered. Now, what I want to do is that I went toe reviews the Torretta to reduce the wheat off the barrel, Gramps. So I have to go back to the styles on try to reduce the wheat off the off the butter wraps . OK, guys, Now young back in the styles. Andi, if we analyze our coat, we can see that the Baron reps are surrounded by barren rep tax. So I have to create a reference to such paragraph. So I think being thief container rep braces. And now what I want to do is that I want toe reduce the wheat off, the off the battery up. So I like being with property. And I said this property to 80%. Now I'm going to place a margin left property to add space to the left off each bottle Rep on this property will be said toe 10 percent on. I'm goingto take this opportunity, and I'm gonna increase the size off the off the text. So I think being fun size and I'm going to tow increase the size of the text toe, I'm gonna set the size of the text to 1.3 by 1.2 m's on. I'm gonna change the phone. Family off the off the bottle, Gramps, the phone family will be birth Anna on San Siri's. If the liver than a phone family is not, is if they were then a phone family is not activated or is not unable in There is not. If they were gonna phone family is not enable in the browser. Then the Sand Saref will be used as a secondary option. Well, now I have to go to the browser and refresh the base. Well, guys, after refreshing the page, you can see that the paragraphs look better. And, um, if we scroll down, if we scroll down the base, you can see that the beige Castle radio footer. But I want to increase the size off the off the questions, so I have to go back to the styles. Okay, guys, I am right now in the styles on in order to increase the size off the off the questions, I have to go to the reference to the federal tax on. I'm going toe typing phone size, the phone size property, and I'm going to set this property toe 1.8 EMS. Now I want toe change the phone family of the of the questions. So I take being for family and I said this property to better than that on sans serif. Now I say the changes on, go back to the browser to see what happens. Well, guys, after refreshing the page, you can see that the size of the questions has increased. Now I have toe, I have to modify the size off the fact, Heather. So, in order to modify the size off the fact, Heather, I have to go back to the so the styles. Okay, guys, here, um, in the stylus. Now, if we analyze our HTML code, we can see that the fact hither, he's surrounded by a layer off either one tax. So I have to create a reference to such tax. Hello, guys. I am here in the styles, and I'm going to create a reference to the so the other one on after creating a reference to the other one that is going toe. I've seen the front phone size. Okay, you guys, the phone size property will be said to EMS on a different family. Uh, will be said toe Havana on sense, Seri. Now I have to go back to the rouser on refresh the base. After refreshing the page, you can see that this is the appearance off the fact Heather. Now in the next video, I will continue improving this page 27. Last improvements to FAQ page: Okay, guys, here I am again in the fact html file on. I'm going to improve the fact, Heather. So what I want to do is to increase the size off the vacatur on to send their the fact Hitler as well. So in order to do it, I have to go back to his styles. And I'm gonna goto the reference to the fact failure to the fact later, and I'm going to increase the size of the header to tree EMS on. I'm going toe sent there. The the heather. So I take being the excellent property, and I'm going to say this property to send their. Now I have to go back to the browser and see what happens. Okay, guys, after refreshing the base, you can see that the fact heather is centered on it appears in in larger in a larger size. So, uh, so the next the next improvement to this page will be toe have more space. Um, in between the navigation menu on the fact hitter as well as in between the footer on the last question. In other words, I'm going to add a space below the text on above the text another to add more space. I'm goingto get over. I'm going to I'm going to get So I'm going to get over to the container. They contain your beef, and I'm going toe. Um I'm going to modify the budding top property, and I'm going to ask to change this property toe the 120 fixers. Now I'm going to add another property in this case will be batting budding bottom on this property will be said toe 120 big sales as well. I say the changes and I go back to the browser and refresh the page to see what happens. Okay, guys, after refreshing the page, you can see that the reset empty space around the around the fixed on. I think we're done with this. Yes, I think we're done with this with with fish. Uh, now, before I finish, I have toe best. Whether the base looks looks fine in smaller screens or in mobile devices. So the next step is to test if the base appears correctly in mobile devices. OK, guys, now, as you can see, I've just reduced the size off the web browser on, but this is the appearance off the space. This is the appearance off these page in a mobile device. So a so you can see this page, uh, looks fine in the mobile devices as well. So, in my opinion, I think I think this, uh, this is it. This is all that we need for the space. This space thes place in the mobile devices as well as in larger screens on it. Looks fine in both in both types over screens. So we're done with this with this page. 28. Terms and Conditions Page: Hello, guys. Well, in this video, I'm going to show you how to create another with page. For our with our website on this page will be the terms on Conditions page. In order to create the terms and conditions base, I have to go to the terms dot html page on. I have to start creating the markup for my web page. As you can see, I'm going to start by having a title. So I have to take keen past, read show up and Barry's I'm here. I'm going to us. Uh, terms and conditions. Conditions. So, um and not the next step is toe at some mark up to the head off the page. In this case, I'm going toe, have to meet attacks. So I'm gonna head over to the about page, and I'm going toe to copy the theme. It attacks and I'm going toe based The mid attacks in tow. The header. Both the title. Now I have to go to the about page Andi, I have toe copy the league's tax dealing tax. Ondas. I said I have to copy link tax and I'm going to paste billing tax, uh, below the title thanks. Like this. Now I have to go to the about page and, uh I have toe look for the top navigation Goethe. Now, as you can see, I am selecting right now The growth for the top navigation I got beat this code. I'm going toe based the gold after they will be. Now I have to go to the about beige or any other previous page. I have to look for the navigation growth in this moment. I am selecting the navigation Goethe. I copy this growth and I'm going back to the terms and conditions space. And I'm going to paste theme navigation coat. Um, after the top navigation like this. Now, three next step is to toe have to as a pair off main tax. So I mean, a main on. I have to have a food there to this page as well. So I head over to any off the previous patients. Andi, I'm going to select. They go for the food there. I'm going to copy the cove. Andi, I'm going toe pace the coat after the main tax inside the terms and conditions beige like these. So, uh, now I'm gonna get over to the toe the browser. And I'm going toe to see this page, uh, to see what happens. Well, guys, right now I am in the terms and conditions space as you can see, a rabbit off navigation followed by the navigation on. Then I have, uh, food. Now the next step is toe add some content. So these web page So I have to go back to the growth. A writer and I have to start adding Ah, some some content to this page. Okay, guys, in order to what? Content to the space, I'm going toe place the course or in between the main ducks. And I'm going toe, um, a thief with the class. Ah, container container. Now inside. Thes thes deep attack. I'm going to place the course. Or, uh in between the leave tax. I'm going to hit, enter. And as you can see on now, I am inside the leave and I'm going to create a heather one attack this year that one attack is going to say is going to contain decks, terms Andi conditions. Now I have to create I have to create five reps. Yes, I have. So I want to create only, uh, four. But reps okay, for I think four paragraphs is is enough for this base. So, uh, they create four paragraphs. Andi, where I'm going to do next is that, um is that I'm going to head over toe any of their previews basis. That contains random. Next. Andi. As you can see, I have a piece of random checks here, so I have toe peak some random. Next. So I have to select some random text. I'm gonna copy this random text, and I'm gonna paste it inside a paragraph. A player off Arab attacks like this. But you can see I have the random takes inside the paragraph attacks. Now, I have to repeat this process three more times for the for the other paragraph tax. So I have to skip these things part off the process. OK, guys. Now, as you can see, I have several barrel wraps inside the terms and conditions based page. Now I have to hit over to the rouser on refresh the beige to see what happens. Okay, guys, After refreshing the base, you can see that the terms and conditions text appears on a Z. You can see the Reese space, the space above the next on the recent space below the text. So you know, you can see that the text is already for mated. I'm probably You're wondering how we see it, that this text is already for meitiv if we have not. If we haven't applied any styles to this text, how is it that these takes is format for mated magically or suddenly this text is for mated on. Probably. You're wondering How is it that these text gets for mated automatically? How does it happens? Well, um, the the answer to those questions is that if we analyze the markup or the cold, the HTML code, we can see that they leave, has a glass container and inside the glass container the reason together one attack as well as several part of tax. If we go to our style space, we can see that we already have a styles for those tax. We cover styles for attack that is a thief and has a glass container. And we also cover styles for Heather Heather toe that that east inside. Ah, uh, with the glass container, we cover styles for either one time inside the with a glass container. We also cover styles for Baron wraps inside a thief with a glass container. In other words, the styles were creative. Previously on now this is styles are being used by by this page automatically. So that's the reason why these text appears for mated. Um, hell, automatically. So, um so this is it for the space for this webpage on? I think we just I think we have just finished this page. This webpage, we are done with the space. 29. Contact Page: Well, guys. And now in this video, I'm going to create the contact page in order to create the contact page. I'm going toe open the contact the HTML files. Now I have to start by creating some basic mark up like this eso After creating thes basic markup or these basic code, you have to start by adding a title. So the title of this page will be blustery shop Barry's dash uh, contact. Now, the next step is toe again. I have to copy some go for from the brave You spacious on. In this case, I'm going to copy theme it attacks as well as I did in previous in previous videos. I have to copy these these Middlesex, I'm going to, uh, toe based thes mid attacks inside the health tax off these patients. Now I have to go to the do any of the previous patients and I have to copy the link tax. After copying the link tax, I have toe go back to this page to the contact html beige and have based the growth below the title that the title attacks. Now I have toe go again to any of the previous patients and I have to copy the code for the top navigation. I select the growth. I got the ACOs. I go back to the web with patience and I copy recalled, I based Sorry, I based the cold after the body. They believe that like like this on now I have to go back to any of the other with patients . I have to select the growth for the navigation. Could be the growth on after the top navigation I I'm going to place the Koth for the interrogation like this. Andi again, I have toe go back toe to any of the other previews. Spacious I have toe select the call for the footer I select Go for the food there. And now I based the gold for the footer after the after the or below below the the navigation go like this. Now I have to place the course. Or, um, just before the opening that Ah, for the I have to play the course. Or just before the or just above the foot attack between the navigation gold on the food there. Coat on. I'm going to place Maine that now inside these main duck I have to place a thief which contains the glass container. Go on dinner and inside. Um, inside these thief tax, I have to place the rest off the off the gulf. OK, guys, Now the next step East toe have a heaven one back on inside these cattle. He between the other one tax. I'm going to type in gone contact information. No, Uh, I have to type being hey there to talk a player off hitherto attacks. And I'm gonna being a Bharara. I'm going to create a photograph tax a player off para tex on inside the inside they hitherto tax I'm going to die, Tina and address at the race on in there in the Arab attacks that follow I'm going to based on going toe I'm goingto based or insert random next. So I go toe I go back to any of my previous patients and I'm going to copy. Um, any random text. So I'm going to paste the random text inside the paragraph like this. And now I have to create hitherto attack again and is in between regular tax. I'm going to place a text and soon phone numbers, phone numbers, Andi, After the skeletal attacks. I'm going to place to borrow trips like this. And you safe, uh, inside these these photographs. And I'm going to place the next information and phoned one. Go number one, phone number one. Andi, I'm going to place any any random numbers and be, uh, on goto at another phone number. Like this phone number to and again, I'm going to path I random a random number like this. Now I say the changes and I have to go to the browser to see what happens. Okay, guys, after refreshing the the with patients, uh, you can see that this is the contact information base. He's have every basic page as you can see, Andi. Well, what I want to do now, he's toe sent there, the text, all the text. So I have to go back toe my html coath on, make some some improvements to the styles. So that so that, uh, the next appears centers. OK, guys, Now I am here in my html in the html coat. I'm going to ask the following be next. I'm going to other property called style. I know. I'm going to other on attribute called Style on this style Attributes is going to have a property. Ah, fixed a lying on this property will have a value off sent there. Now I say the changes on go to the browser to see what happens. Well, guys, after refreshing the page, you can see that all the phone numbers are centered as well as the address for the business . So I I think we I think we just We have just finished this with patient. So we're done with this page on. We can continue creating more with patients in the next medias. 30. Testimonials 28: Hello, guys. Well, in this video, I'm going to start creating a web page for I'm going to create the testimonials base. So in order to create the testimonials base, you were going to need three pictures. Okay, So go to Google and search for three pictures. In this case, I have I'm gonna use the pictures off three women in order to create my testimonial space. So, uh, go to Google and search for three pictures off women or men or whatever you find on. Um, I'm just take three pictures and save the pictures inside the for the folder for your project. Now what I'm gonna now what I'm going to do is to say these three pictures, Insight, um, the folder off my project in the images folder. OK, guys. Now I am in there in the cold, light or again. And, as you can see on a mashes folder, contains the pictures off the three women. The's pictures will be used for creating the testimonial space. So now I have to go to the toe testimonials page. So, uh, I'm gonna open the testimonial space, and I'm gonna start creating my my coat. You have to create a coat like this, Andi. Then you have to a start creating the title. The title will be, Ah, Bust three show batteries. Dash this the pneumonias on. Now, where I have to do is to go toe any off the previous spacious and I have to take the myth attacks. I'm gonna copy these Met attacks. I'm gonna face the mid attacks above the title. And I have to go to any of my previous patients. And I have to select and copy dealing tax. And I'm going to paste the link tax under the title attacks like this. Now I have toe to select. They go for the top navigation like this, I select the gold, copy the golf, and now I'm gonna paste the code, um, under the opening body that now I go back to any of the previous patients. I have to select the code for the navigation like this. I select the growth and I'm gonna copy. That goes and based the growth on their the top navigation like this. I'm going toe. Uh, I'm going toe copy the code for the food there as well. I said, like the call for the footer. I copy That goes on. I go back to my testimonial space, and I'm going to pace the growth after the navigation like this. Now, in between the navigation in between the navigation and the footer, I'm going to place a player off main tax. And, um, inside these these main tax I'm going to place the week, the class A container, a glass container. I'm gonna save the changes on now. Inside thes container A. If I have to create three more deeps on the first thief will have a glass equals toe test the this ammonia, and, uh, I'm going to copy this thes thief growth, and I'm going to paste it two more times like this. Now, inside the the first thief with the glass testimonial, I have to ask a picture. So I'm gonna use any much tack, and here I'm going to place a reverence in the source attribute. I'm going to place a reference to one of the pictures in this case. I'm going toe place. I'm going to use the picture Woman one, and now I type in the extension of the fire. Ah, Okay. I have to correct these. I have bean much is. And now, um, I have to I have toe as but rep. No, no, I'm going. I'm going toe. Yes, Yes, I'm going to other paragraph aunt inside this partner up, I'm going to based, um, some random next. So I go to any of my previous any off my Bravia spacious, and I have to select, uh, random. Next. I got to the random text, and I based it here. Now I have to repeat the process on a for the other two leaps, Um, I have to create to add a picture. So I select the code for a picture based based it here. But this time these thes the's picture will be the picture that that says a woman do on. Now I have to copy the text for the paragraph that I just created before I copied it. Takes for the program. I'm based it below the Korean picture again. I'm going to repeat this growth, so I select this growth on, uh, I'm going toe place the course or in between the beef with the testimonial class. Now, I have toe based the growth in here, but I have to change the picture file. So in this case, the picture. If I will be Woman three now I have to save the changes and I have to go to the browser to see what happens. After a refreshing the page, you can see that I have the pictures off. Three women on um, under each picture. The Reese said that the Riza random next. So basically, these will be my testimonial space. But in the next videos, I will improve this testimonial with Paige. I have toe have titles have to give format to these with patients to these with page. So in the next video, I will improve these Web based 31. Testimonials Page: Hello, guys. Well, in this video, I'm going to continue. I'm going to continue improving the testimonials with base. If I would use the size off the Web browser, you can see the appearance off the Web with Paige for in mobile devices. This is the appearance off the Web page in mobile devices. Now, if you pay attention to the web page, you can see that the pictures off the women are are very large. Eso the first step that I went to you is toe reduce the size off the pictures off the women so that each picture feeds inside the inside the web browser. So the first step will be to reduce the size off the pictures because, as you can see, the pictures, the 1st 2 pictures are are very large. So in order to do it, I have to go back toe to toe the styles. Well, guys, Now, um, in the styles file on, if I analyze the growth off the testimonials page, you can see that each picture is a east placed inside a div with the class testimonial. So I have to create our reverence toe each off the pictures. So I go back to my styles on in order to create such reverence, I have to scroll down the file on. I have type Team Deve. Uh, this pneumonia, this ammonia space image. This is a reference toe. Each of the pictures Ah, off the woman off the woman of the women. I'm sorry. This is a reference for each of the pictures off the women. Now I have bean the property wheat and said that this property to 100 on I'm going toe at a property five and I'm going to set this property. I would go. No, I save the changes and I have toe go back to the browser to see what happens. After a refreshing the page, you can see that the picture of the woman feeds very well inside the browser window. And if I scroll down, I can see the other picture of the woman on this picture appears a smaller on. Now the picture feeds very well inside the web browser. In other words, the pictures off the women now feet very well inside mobile devices. Now what I want to do east toe have more space between each off the testimonials. So I want to add more space between in between each off the testimonials off the customers , eso In order to do it, I have to go back to the styles and I'm going to create a reverence toe a beef with the class Tasty Morning this anymore. Sorry, sorry. Testy, More Niell. I used the racist on a Z. You can recall each testimonial is placed inside a div with the glass testimonial. So, um, in this case, in order to us more space a boat above the testimonial on below the testimonial I have toe the property Bob Bean top and I'm going to set this property toe 40 Speaks is now I have to work more space at the bottom off each testimonial, So I mean by the top on this property will have the value. 40 weeks is as well. Now I say the changes and I go back and I go back to the browser to see what happens. Well, guys, after refreshing the Web browser, you can see that there is more space. There is empty space in between each testimonial, so you can see the recent space between the paragraph off takes on the picture of the woman on If I scroll down, you can see that there is a bad rap off text. Then you can see empty space on. Then there is a picture of a woman as well. And so in other words, we just have we We've just a thief space in between each testimonial. Now what I want to do East toe have a heather, uh, a feather for these web page. Well, guys, now I am back in the html code for the testimonials with Paige, and I'm going to add a feather. So you know the wife. Stay there. I'm going to take being Heather. One tax on inside this killer want tax. I'm going to die peen this theme own ya's goof. Our customers. Gusteau, Merce. Now I save the changes on I have to go back to the browser to see what happens. Okay, guys, After refreshing the page, you can see that the heather appears above the base testimonial self our customers on. Um if I scroll down the base, you can see that the picture of the woman appears on. Then appears a paragraph off fixed where I went to the right now east toe. Add some for mating to these paragraph off text. So in order to add some for mating, told it to the paragraph off takes. I have to go back to my style's. Okay, guys, here am in my style's again. On If I analyze the HD me of the HTML code, you can see that each paragraph off takes is surrounded by by a paragraph on. I have to create a reference to such paragraph tax. So I take mean Deve, this the ammonia, his base, a space fighter left back on the embraces. Now what I want to do is to align the decks so I use the property, takes a line, and I want to justify the decks. So I think I said this property to use. Defy. Now I save the changes on Go back to the browser to see what happens. Well, guys, after refreshing the base, you can see that the paragraphs off text look the same. It appears like nothing happens. But if I increase the size off the Web browser window, you can see that the text appears justified. So, in other words, the text is already used to five, but If you see the text in ah smaller screen or in animal bile, it's a normal while devices screen. Um, the improvement is not very. It is not very clear, but they used If I I used to fight, the justification of the text can be seen if I increase the size off the browser window. So in this case you can see that the text is already used to fight. So this is why I wanted to achieve. 32. Improving Testimonials Page: OK, guys. Now I continue working on the testimonial space now, uh, as you can see, the testimonial space, this place, pictures of women, Andi, paragraphs of text. Now what I want to do is to have more information about each testimonial on. I have to go back to the so the html code s so that I can add more information toe each testimonial Bharara. Okay, guys, here I am in my HTML code. So I'm going to have some more information. So the twitch testimonial. So I'm gonna use a hitherto attack in this case inside, inside the skeletal that I'm going to type in a name. So the first name will be Mary Mary Steam son, I don't know. On I take on this I type. Um well, guys, as you can see, I am typing in the name of the person Marie Simson. Then for thes name is followed by the, uh, brake line death Andi after the break line that I have bean a place. So in this case, I'm going to take being on, say, Houston, Houston takes us for instance. Now, I have to repeat this process for, uh for each off the reminding testimonials. So in order to do it, I have toe, I want I just want to skip this part of the process. I'm going to repeat this step two more times inside each off the following, if each of the reminding testimonials. So I just want to skip this part of the process. Well, guys, I've just finished adding more information. Toe each off the testimonials. Um, is that you can see I have these three, um, three names alone. We'd three locations. Have you seen a tax? So I'm gonna hit over to the browser to see what happens. Okay, guys, After refreshing the page, you can see that the the picture of the woman appears followed by by her name here, location on, then a paragraph that describes here testimonial. Then I have a picture of a woman, followed by her name here, location and then a paragraph that contains her testimonial. And finally, I have the picture of a woman. Your name here location on a paragraph that describes here testimonials. I think we are done with this page. But remember that this is the way how the page display have the web page, this place in in a smaller screen. I need toe. I need to improve my layout. Four larger screens. So, uh, in the next video, I will be working on the same layout, but I just want to improve the layout for larger screens. 33. Responsive Testimonials Page: Okay, guys, here we are in the testimonial space, as you can see. But in this case, in this case, the testimonial space page, as you can see contains, contains the pictures off the women on such pictures are very large. So, uh, what I want to do right now is to reviews the size off the off each woman on. In order to achieve that, I have to go back to the to the styles on. Remember that our media query, um, our media query enable them. The media query enables you to place a styles four larger screens in this case, eso uh I'm going to use these media query to places tiles for larger screens. So if I go back to my estate html code, you can see that each testimonial is placed inside a deep with glass. That's pneumonia. So the first step will be to create a reference toe each off testimonials, and I'm going to place such a reference inside the media query. So I scrolled down the file and I'm going to die game leave this this the more neo thief this pneumonia then braces on the first step will be clue said they wit off each testimonial and the wit will be 101 101 100%. Now, where what I want to do East to set the they right for each for each testimonial. Now, in this case, the site will be, um, probably 400 beak cells. Now, what I want to do East toe, um, I want to float each off the testimonials. So I have that I mean float lift. So I have to go back to the routes there and see what happens. Well, guys, after refreshing the page, you can see that the picture off the pictures off the women are very large. So because of the fact that the pictures off the women are very large Ah, the picture. Each picture does not feed inside the leaf. So as you can see, I have two reviews the size of its off each picture because the pictures are very large. So in orderto reviews the size of which picture, because the pictures are very large, I have to go back to the browser and I have to have to go back to my style. Sorry, and I have to take being the following reverence leave this The memorial? Um, e much. This is a reference for each picture on the the wheat off. Each picture will be probably 50% on the the height off each picture will be said toe out. Oh, now I say the changes on I have to go back to the browser on refresh the page to see what happens. Okay, guys, after refreshing the page, you can see that each picture appears Smoller. But if I scroll down the page, you can see that there is a problem here because there is text below the the the footer. Andi, I don't like this. I have to prove my my layout. But at least the the pictures appearance mortar. And now what I want to do east toe to wrap to wrap the text around each of the pictures off the off the wall off the women. So I want Tobe wrapped the text around each of the pictures, so I have to go back to my style's and I have to make some improvements to my styles. The first step will be toe type type in a reference to To which off the off the barrel reps inside a testimonial. The testimony as on, um Well, before these, I'm going toe to remove these. Sorry. Before these, I just want to float the pictures to the left. Okay, I float the pictures to the left on. Now I have to go back to the browser and see what happens. Okay, guys, After refreshing they with Page, you can see that the pictures off the women appear smaller. Andi are. And next to the picture off the women appears the testimonial. Okay, this is very nice. I scrolled down the base. The picture of you wake up the picture of the woman on next to a picture we have at the testimonial. And I scrolled down the page again and you can see the picture of the woman on then Thebe testimonial on. If I continue scrolling down the page, you can see that the Reese footer. So I think so far everything is working fine. And now I thought toe asked more style toe each testimonial. So I have to go back to my style's file. Okay, guys, here I am in the steam. Moughniyah in the in the in the styles file. Now what? I want to do east toe some space, Um, tohave some empty space around each testimonial. So I have toe go to the testimonial reference, and I have to type in the property partying. And I'm going to say this property toe 20 picks us. I say the changes and I go back to the browser on refresh the page to see what happens. Okay, guys, after refreshing the base, you can see that there is some empty space next week's picture. But I don't like thes disappearance, so I will try with another property. So I have to go back to the toe the styles file on. I'm going to change the property, putting through the property, marching to see to see what happens. I save the changes and I have to go back to the browser on refresh the base. Okay, guys, After refreshing the page, you can see that there is empty space around each testimonial, Uh, on just the recently space around each testimonial, but I want to increase the amount off empty air space on. I want to fix this picture off the woman that because name is Angela Simmons. So I went to you to improve the appearance of this testimonial. So I have to go back to the styles so so I can make some improvements on. I'm gonna sit emerging toe 30 big sales, and I'm going to use a new property that is overflow Andi thes property overflow will be said toe hidden. So in the case, a picture is larger than than the testimonial dif then, um Then there's some Some portion off the picture will be hearing. I had to repeat this. If the picture off the woman is last year than the testimonial live, then some portion off the some portion of the picture will be he. Even so, I go back to the browser on refresh the page to see what happens. Okay, guys, here I am in the testimony, A space as you can see, the recently space empty space around each off the testimonials. Andi, thesis the appearance that I wanted for my testimonial space page. But in the next video, I will continue improving this Web page 34. Last Improvements to Testimonials Page: Okay, guys. Well, in this video, I will continue improving the testimonial space. Now, as you can see, that testimonial space page looks fine. Looks good. But if you analyze if you pay attention to these testimonials, for example, you can see that the big sure off the woman on the testimonial or the next are very close. So I want that certain amount off space is placed between the picture on the text. So in order to increase the amount off a space between the picture and the text, I have to head over to my styles. And I'm going to use a new another property. This is the property, Margene, right? This property is going toe at empty space between the picture and the text. And I said this property to then picks us now a save the changes and I go back to the browser and refresh the base to see what happens. Okay, guys, After a refreshing after refreshing the base, you can see that there is some empty space between the picture on the text. I scroll down the page and yes, there is space between the picture and the text on again. I scroll down on there is a 10 pixels, a space between the picture and the text. Now what I want to do is to increase the size off the next. So I have to get over to my style's ongoing typing. Uh, a reference to the to which paragraph. So I think being testimonial, this pneumonia followed, followed by the But after I open a player off braces on inside these braces, I'm going to take being, uh, the property phoned size. And I'm going to set this property toe 1.3 EMS. Now we save the changes and I have to go back to the browser to see what happens. Okay, guys, after refreshing the page, you can see that the size of the text is larger on. But what I want to do now is to move the haters so the to the left. So I have to go back toe my style's I have on If I analyzed the HTML code off the testimonial space, you can see that inside each testimonial there is our heather too. On this care to attack contains the name off the woman alone with the location off the woman. So I have to modify these killers to tax on. In order to do it, I have to take being a reference. Tow them. So I think being testimonial, there's more onion, this demon followed by hitherto tax on. Then I'm going to take being fixed. Allying, uh, lift. Now I say the changes and, um, I'm gonna I'm gonna make another improvement. So the battered wraps off each testimonial. So in, instead of typing in one, I'm going to change. They won't. Size value on the new body will be 1.5 EMS. So, um, as you can As you can see, I I mean, I've increased. I've increased the size off the paragraph text as on, I have shifted the position off the text in the headers. Now I have to go back to the browser and refresh the page. Okay, guys, After refreshing the page, you can see that the text appears larger on the name of the woman. Appears toe there. Right. I just left as along with, um, the location. So I think Yes, I think this is it for these for this page. So I just I just wanted to I just want to say that this page behaves in a different way, depending on the size off the screen. So, uh, if I reduce the size of the screen, you can see that the page displaced in a different way. As I said, thesis the appearance off the Web page in mobile devices or smaller screens on that. You can see this is the appearance of the base for mobile devices. And if I increase the size of the browser, we can see the appearance off the base in larger screens on the seas, the appearance of the page in larger screens so they lay out changes according to the size off the screen. 35. Creating a Services Page: Okay, I swell in these video, I will be creating the services with Paige. So in order to create such with page, you have to go to Google. Andi, search for a picture off a pastor shop. So I go to Google. Search for a big sure off a pastor shop down low the picture on save the picture to the images folder inside. Um, I were project folder. So go to Google, make a search for a picture search for a picture off a pastor shop. Don't love the picture and save it and save the picture inside our images folder. OK, guys. Now, as you can see, the pics your is already inside my images folder on here. You can see the picture that I will be using for creating the services with Paige. No, um Goto goto the services html fire and start creating Theo each team they and start creating the html code. The growth most have thes tax that with that we see on the screen on I'm going to start adding a title. So I take being bussed ratio. Pastor. Sure. Barry's dash, uh, services services on again. I have to go back toe any off my previews with patients and I have to copy the myth attacks . I say, like the myth attacks I could be the myth attacks on I go back to my services page I based in the the growth. Now I go back again to any of my previous with patients. I select the link attacks I copied attacks or the growth I place the link tax under the title like this on again. I have to go back to any of my previous with patience on going toe, select the growth for my top navigation. I copied this goat and I'm going to place a coat under the body like this on again. I have to go back to any of my previews with patients. I select the coach for the navigation Andrabi the gold and go back. I can't go back today Services page on based tickled after the doctor or below the top navigation like this. Now I have to create a player off main tax. This is where our contained will be placed. Now I plays the course or below the main ducks on. I have to go to any of my brave use with patients on. I could be the gold for the food. There could be the goat. Andi. I based the coast after the main tax, like peace or below the main tax. Like this. Now, if I go back to the browser and I have to go back to the browser and refresh the base to see what happens, Okay, guys here are young in the service of space. As you can see, I have a top navigation, the navigation as well on I have a footer. So the next step is to a start at in content to these with Paige. Okay, guys here, a young in the gold for my services page. I'm gonna start adding that Andi thes def. That is going to have the glass, the class container container Now inside the Steve Doug with the container class, I'm going toe a picture. So I think bean, uh, the the attacks, the much stuck on the source attribute will have a reference to the picture that I want to display in this case, I want to display the picture. That's that says past three shop. So I bean dot uh slash Images is slash blustery show up then the extension of the file. I said the changes and I have to go back to the browser to see what happens. Well, guys, after refreshing the page, you can see that the picture of the pastor show over the Buster shop appears. But as you can see, the picture is not center. So I have to send their this picture in order to send their this picture. I have to go back to my style's Andi, apply some improvements toe these webpage. Okay, guys, here I am in my html growth Andi, before starting toe have more styles to these with beige. I have to add a new glass. Do these, uh, to ease to this picture. So I I have two other class and attribute class A tribute to the image stack. So I take being blustery. This will be the glass for these pictures. So this is very important. So make sure that you do it because this is gonna let this is a thesis propped. This attribute will enable Jew to a style this picture. Okay, so, uh, pay attention to these and do it. Do it, please. On then we have toe go back to our styles on start eyes styling the picture off the pastor shop 36. Services Page for larger screens: OK, guys. Now, in order to a style the picture of the Buster shop I just got toe. Remember that the picture of the past three shop just the the picture off the pastor shop, uh, is placed inside, uh, a beef with the class container on the glass off the picture off the pastor shop east. Mastery like this, As you can see it. Now, I have to create a reference. So I mean, uh, thief going thinner. Uh, be mush glass. Um, mastery mastery pieces are referenced to the picture on where I want East this picture toe have a weight equal to 100% on a theme. The height off the off. The best off the pastor shop picture will be out now. I get over today with browser and see what happens now. After refreshing the page, you can see that the picture of the pastor shop. Um it's pants the whole screen. So this is the This is what I wanted to do, which is why I want to do. But now what I want to do east toe atthe ahead there both this picture. So, in order to add ah heather above this picture. I have to go back to my HTML code on Die. Have toe place the coarser after the thief a week after the leaf with a glass container or in inside believe with the glass container on a both the picture on. After placing my course or above the picture, I have to create a feather to attack neither one tax Sorry that says, uh, services, sir. BCE's okay, I save the changes and now I have to go back to the so the browser to see what happens. Okay, guys, after refreshing the page, you can see that the services cater appears. But what I want to do now is to reduce the size off the big off the off the pastor shop picture. So I go back to my my style's and I go to the reverence. So the to a picture off the off the pastor shop Andi, I'm going to say they wheat to, uh, to 60% Andi, I'm going to add another property. This property will be a margene margin left. I'm going to set this property toe 20 their scent Okay, 20% on. I'm going toe hit over to the the browser and see what happens. Okay, guys, After refreshing the page, you can see that the size of the picture is a smaller. But I want to see the appearance off these picture in a smaller screens. In other words, I want I want to see the appearance off this picture for mobile devices. So I have to reviews the size off the Web browser. Okay, guys, after reducing after producing the size off the Web browser, you can see the appearance off these with Paige in mobile devices. But personally, I have to say, I don't like I don't like it. So I just want to improve thes thes with Paige for mobile devices. So I have to make some improvements to my style's. Okay, guys, here I am, in the in the styles again, on in this tightness file again. So I'm going toe work in. I'm going to prove the to change the wheat property for the picture. I'm going to set this property toe 80% on. I'm going to say the margin left property toe 10%. Uh, well, I'm going to change the width Property toe 90%. Sorry. And I'm going to change the margin left property toe 5%. I'm gonna save the changes on Go to the browser to see what happens. Okay, guys, After refreshing the base, you can see that the picture of the past three shop appears larger. So, in my opinion, I think it looks better for mobile devices. But now I have toe increase the size off the Web browser to see the appearance of the page in larger screens. Okay, guys, this is the appearance off the page in larger screens. So I want to make some improvements to these Web page for larger screens. So I have to go back to my style's. Okay, guys here, young in my style's again On as I said before, if you want to apply styles for larger screens in this case, you have to go toe the media query, so thesis tiles will be applied only for larger screens. So I came over to my media query on inside the media query. I'm going toe typing a reference. So the big sure. So I think being a thief dinner is based in much dog blustery. And this is a reference to the picture. Remember that these styles will be apply will be applied only for larger screens. Now, I'm gonna change the wheat Teoh to 60% on. I'm gonna have a property margin left. I'm gonna set this property to, um, 20% on the fight off the off The picture will be said toe out. Now I save the changes and go to the browser to see what happens. Well, guys, after refreshing the base, you can see that the pastor shop picture appears a smaller. I prefer these layout. So I have to keep these vicious styles. In my opinion, it looks fine. So the next step will be to add more content. Do these, uh, to these with base. 37. Services Page for smaller screens: Okay, guys here are young in the in the services page. Now, the next step is to add some text toe these web page in order to what? Some text I have toe place the course or inside the container with inside the beef with the glass container on. I'm going to take being Hey there to that. I decided to hit the track, and I'm going to take being surveys one on I'm going to other paragraph below. I'm inside the paragraph. I'm going to based random text. So I go back toe to any off my brave use with patients on. I'm going to select a piece off random text on. I'm going to copy these Piece of break up. Next on, I'm going toe based The random text inside. The better attacks like these. Now I'm going to repeat this process one more time. Eso I can I can have two services on two paragraphs off text, so I'm gonna skip these this part of the process. Well, guys, I've just finished. Um, I my paragraphs off fixed. Andi, I have to go to the browser to see what happens. Okay, guys, as you can see after refreshing the beige. You can see that this is the appearance off the services page on. Uh Well, it looks good. It looks fine in larger screens. So I just need to verify the appearance off these with Page for more by devices. So I have to reviews the size off the browser. Okay, guys, After refusing the size of the bill off the web browser, you can see that this is the appearance off these with page for a smaller screens or mobile devices on, uh, so far it looks it looks fine. I just want toe try to improve the paragraphs off text because I want to justify the paragraphs off text. So I have to go back to the so the styles in orderto justify the paragraphs off text. Okay, You guys here young in these tiles off my off my website on. You have to look for the you have to look for the reference toe, the paragraphs off text inside the container. So look for the reference to the paragraphs off text inside the container. And after you have found the reference to such paragraphs, you steptoe No, there uh, another property on such property will be takes a line and you are going to set this property to justify, in order to justify the paragraphs off text inside the live with the glass container. Now I have to go back to the browser and see what happens. Okay, guys, After refreshing the with page, you can see that the paragraphs off text appear used to fight. OK, so they have a better have either. The other appearance. I like how the the paragraphs display so they appear justified. That's very nice on this is the appearance off the Web page in mobile devices. 38. Fixing Home Icon: Okay, guys Will. We are about to finish thes website. But before we finish this website, I have to make some improvements to these website. Okay, So I found I I found some problems with the home icon. If you click if you click on the home icon like this, you can see that the home icon is not working well because the home icon is taking us to the so the to the directories of my off ice off my car. Life on this is not ok that this is not good. I have to improve these The home icon or the Homelink is not working. I have to fix it. So I go. I have to go back to the to the coast writer. Okay, guys here. Oh yeah, me, the coach that I thought on now in orderto fix the home icon, I have to go toe any to each of my I have to go toe each off my off my wife patients and I have to make a little improvement to each webpage. So in this case, I am in the about html base and I have to look for the for the home icon Goethe in this case, this is the home I got growth. Andi, I have to go toe the answer to that. And I'm going toe to remove the the A slash. And I'm going toe to say that the new value on the new body will be index dot html. I heat a safe. I click. I save the changes. Now I have to go to the contact html base again. I have to look for the home icon growth that appears here. I have to look for the entire time. Remove the a slash on replay replaced the a slash by wheat index dot html. I saved the changes. Now I have to go to the fac html growth on. I have to look for the home icon on. Then I refer to the actual attack. I removed this slash like bean index dot html. I say the changes on again I go to the have to go to the index html beige. I look for the home icon coat. I go to the answer that I removed the a slash. Unlike replace Theus lodged. I've place the large wheat index dot html. I say the changes we're about to finish. Guys, we're out. We're about finished. Don't worry. This is very first. Ah, okay. I am I am the I am in the services based. I look for the code for the home icon. I remove these lash wheat index I every movie slash and replace theis slash with index dot html I save the changes we're about to finish. Don't worry on again. I have to open the terms. Html Paige I goto the home icon. I go to the church, remove the a slash Replace the a slash with a index dot html uh, on we're about to finish. Guys, guys, don't worry. We're about to finish. Were the testimonial space. Now I look for the home icon, go to the actual attack. Remove the a slash Replaced the a slash with index dot html Now he saved the changes and I go back and I have to go back to the browser to see what happens. Okay, guys, here I am in the browser again. I've just refreshed the based on if I click on the home page, I go on like this. You can see that the home page I gone takes me so the the home base. Okay, guys, After clicking the home page icon, they I was taken to the home page, which means at the home page icon he's already working. Fine. So, uh, physicist guys, I think we we just, uh we have finished thes website, and, um well, I hope you like thes website on. See you. See you later, guys. By good look.