Go Further With Advanced HTML & CSS And Build a Responsive Website | Kevin Lehtla | Skillshare

Go Further With Advanced HTML & CSS And Build a Responsive Website

Kevin Lehtla, Front-End Developer & Web Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Lessons (2h)
    • 1. Introduction to the course

      0:47
    • 2. Downloading Software

      2:35
    • 3. Installing Software

      2:22
    • 4. Setting Up Sass

      5:33
    • 5. Short Intro to Sass and Emmets

      13:39
    • 6. Creating The foundation

      26:06
    • 7. Getting Meaty

      27:24
    • 8. Covering The Sections

      29:48
    • 9. Making The Desktop Media Queries

      11:39
    • 10. Thank you for watching

      0:30

About This Class

d6c9d9a2

I have been designing and developing sites since 2010. During that time I have learned on how to improve my workflow and create meaningful responsive websites. It doesn’t matter for who or when you do it, time is always a valuable resource and we want to take the most of it.

This is a course to everyone who has taken up learning web development and now feels comfortable to get into the juicy bits of it.

But don't worry...if you are still a beginner this course will show you coding techniques that may help you in the long run, as a habit of coding in the wrong way may ruin your experience in the future.

You are going to learn about all of the following and few more :

  1. Setting up a Live Server
  2. Basics of SASS and SCSS
  3. Grid Layout
  4. Emmets
  5. Mobile First Solution
  6. Responsive Design using Media Queries

Using all of the above we will be creating a clean and modern landing page using one of the latest trends of 2018 and soon to become 2019 – Gradients.

Note: This course will also include a little bit of Javascript but nothing too crazy.

This is not a course by a Professional teacher who has certifications or awards, rather this is a course by a self thought Web Development & Designing loving person who has been in this field for quite a bit of time and has seen how the development world evolves every day in terms of coding. If you are an advanced web developer and notice something that i do is false please do write that to me as i am always open to fixing my own mistakes. 

As a young Front End Developer & Web Designer I always strive to push further with what I love but with the speed technology improves sometimes some things go past me. If after this course you are uncertain about some things or have questions to ask me personally then please feel free to do as 2 minds always think better than 1.

Resources that were used in this course : 

  1. Visual Studio Code - https://visualstudio.microsoft.com/
  2. Font Awesome - https://fontawesome.com/
  3. Mini Reset - https://jgthms.com/minireset.css/
  4. Slick Carousel - http://kenwheeler.github.io/slick/
  5. Learn to use Grid - http://cssgridgarden.com/
  6. Sass Doc. - https://sass-lang.com/documentation/file.SASS_REFERENCE.html
  7. Emmets - https://docs.emmet.io/

Transcripts

1. Introduction to the course: Hi. I'm working the discourse on how to go further with advanced HTML. CIA says on building a responsive website. My name is Kevin lately and I'm a front end developer and a designer. I will be teaching you on how to set up a live server. Use s CSS and SAS, whichever you're comfortable with showing you how to improve your workflow using em. It's on shortcuts inside visuals do the goat. After completing this course, you will know by looking on a design or a website on know how replicated or created by using your own goat. So if you're interested in learning more, stick around and I'll see you in the first video. 2. Downloading Software: So the right our gold. We obviously need some sort of software to help us. Unfortunately for us, we have a good selection of big Staters with a lot of modern features to help us with that . So let's go over a list off. The best accident there's out there. In my opinion, the 1st 1 will be ate him. 18 has a beautiful interface. It supports both Mac and Windows. He has windows on my common to spills bean. It also has package manager building, so you can add some adults if you want. Also, you can customize the colors at themes and just play around with. The 2nd 1 is bracket brackets features inland Editors like preview pre processes support. And it also has extensions, so you can use em. It verify and kid in terms of the design. I would say it's pretty similar to hate him, so you can choose that if you want. It's excellent. There is some blind next. In terms of the features. You can customize it to work almost the same as brackets or eighth. Um, but the reason why I switch Waas because setting up life servers were trying to find support for the blogging was close to non existent. Only know it's a good rest later, but there are better ones out there. The fourth is going to be no bad plus bus. No plus plus is a free open source code. It are with bated design, in my opinion, on gold features. Honestly, I wouldn't recommend it to anyone, but if you really want to, you can use it. The fifth on the last one is going to be my favorite on the one that we're going to be using throughout. This course is going to be visual studio. They shouldn't. Stewart. Your features include, but are not limited. Teoh building interacted de border. It doesn't shut their or lack. It has building, get Commons and emits Porter out the completion off the goat on a very nice send mode in which you can hide all your you why and focus only on the coat. It also has tons off Adams and not to mention, you can change up the U I in so many ways. So let's get started and don't know what visual studio. If you're using Mac, your buttons will be really different on the wear time, but make sure the Jews the visual studio code, not anything else. Install the software to your computer, and I'll see you in the next video. 3. Installing Software: after you have installed visual studio your created with a welcome message from where you can either read a new file, open a recent one, get help or even customized visual studio itself. So let's click the tools and languages. This can also be accessed by clicking extension staff on the left side. Off the visual studio. We're going to want to find six Adams that we cannot install on the visual studio, the 1st 1 being Material team. You can actually use whatever team that you like, but I personally use material theme as I love the colors that it has. So let's type in material team into the marketplace. Click on it on press in style. I haven't already installed, so I only have option of disabling Winston, but you will have to install it after it has in styled vision. Student will most likely prompt you to restart the visual studio, but you can ignore it for now, as we can. I still quite a few more Adams. The 2nd 1 is going to be the material Eiken team, which is gonna be below that material team that we have already searched for. So instead of that one has worked. Now the 3rd 1 will be life servant. So shirts for that. And in stunned that onto your vision studio. The 4th 1 will be live SAS compiler, because we're gonna be using sass to compile our golden toe CSS Now, the 1st 1 will be beautified on its action and optional Adam, you don't have been started. But if you want to keep your document clean, this is a really simple way to do that. After you have installed all Adams, make sure the restart your visual studio. Now, if you don't see it changes into you. Why go into the view Jews common at on typing team The first option preferences color team in here you receive really stuff beams you can change too. I'm currently using materiality of high contrast. If you like how my visions through your currently looks, you can change into the high contrast more. But you can also change to any other team that you like 4. Setting Up Sass: with software now out of our way, we only have to set off on one thing, and that is SAS. So for that, let's create a folder that we're going to start making our whole project into. I'll be naming older as learn. Advanced. Hmm. You can name it into whatever you want to, so that doesn't really matter. Anyone to open the visual studio as a project inside that polar. So right, click and choose on the menu open with code. I will open a new visual code into your PC so inside that you're going to see that there's a folder named Learn Advanced HTML inside the father. We're going to make a new file on name it has in this of HTML. We're also gonna be making a new folder. Neffa was gonna be j esus inside that folder, we're going to be making a new file called Main of CSS. We're also gonna be making main that s C asses and that's gonna be our SAS file. So now that's it's Jews in their stuff patient, man, and stop anything that using emit short coat, we can make our HTML file a lot faster. So type in exclamation mark on just pressed up. These were great. The base off the Haitian metal fire for you. It's just named that I have something that you want. A name it as advanced. A similar course, but again, that doesn't really matter. So the most important thing that we want to do is at a link that CSS by we just made, but not to the CSS, because that is gonna be used in a different method. So again, I've seen Link choose the turned option, which is gonna be a CSS. Andi just changed the file to Maine on also redirected to the folder CSS. Now that you have done that because we installed the live server before, you're going to see two options underneath Visual Studio One is what's sass. And the 2nd 1 will be Go live. Well, first, gonna be pressing to cool life, and this is going to be opening your local host in your default processor for mine. It's chrome. For the sake of discourse. I also suggest you to be working in chrome as that's what I'm gonna be using, and I'm gonna split the screen into two parts on for visual studio on one for chrome. So just press windows and right key and choose chrome. Now I'm gonna move to crow me more to the left side. Make room for the coat. We're gonna choose the main. That s CSS while do make sure that the SAS violet is working. So let's great our first variable. If you don't know what that is, it's just a value that you can define and then use in multiple places all over again. So let's first make a comment. And variables always start with dollar signs. So let's write that down. And now let's make our first variable. Let's name it as yellow Andi Assigning a value and that value can be whatever you want. You can be a string or it can be a number and so many other things. But for now, we're just gonna name it as the oxidation One number for the color off a yellow. So that's gonna start with e a. D 31 on a and let's ended with a semi colon. Let's make another variable that there is coming back on and zero, a Serie 08 Andi, another available, And that very was gonna be our main fault. That's gonna go into our site on That's gonna be re boto. So now that some let's actually best and call out our first variable in the body tag, we're gonna be writing background and we cannot sign that background The variable that we just made. It's got beat, Diello. One on the fund family. It's gonna be the main fund. So let's save now because I forgot to press the watch SAS button below. We have to rest at this is gonna generate us. A new file called May not see assess that map. Andi, if you go into main that CSS you can see that our CSS while has bean populated by our new coat on. And you can actually see that our background now has to value that we have in the yellow value in the variable so we can see that it's working. Actually, Now your browser shoot out to refresh it. But I can see that I actually made a mistake in dispelling here. So I'm going to say that remember, you can save your document by pressing control anus, and now you can see that our website is with yellow background. So now you can close your main Nazi SS file because we're gonna be making our styling in the SAS file. 5. Short Intro to Sass and Emmets: So now that we have assessed a let's talk about it more in depth about, oh, SAS and M, it's Andi how they make our lives easier and faster in terms of coding. And let's start with them. It's what is them? It's basically eh, missus, essentially a collection of dynamics snippets that you can write in your document that will generate at piece of code that you want or you Andi. It's not limited to only see assess or a Samil. So pay it any mind. So what does that all mean? Let's say you want to type heading in your haste, um, and document. And this is how we would do it in a software without limits in styles, let's say, for example, in no path. So let's write the heading. See? It already ended my H one tag, and that is also built in into the M. It's so I can force. Do not do that, Andi. Let's say we're gonna call it as this is heading now. An easier way to do that is actually writing h one impressing path, and this is also gonna do that for us. Now, the second thing we can do is we can also right in what we want before we end attack. So let's say H one onda we are gonna go into this is heading inside the curly brackets. Go to the end. Impressed up. Now, this is gonna do the same thing for you. Now let's write the paragraph using a Lauren Ipsum snippet. So I'm gonna do it the peat breast app and inside that Chris Lauren on that this is gonna generate a whole paragraph of X for you you can use. Let's see it in action. So again, I'm gonna push the visual studio to the right side, on the chrome to the left side. Now you can see that this has made us this heading on the Lord and we just made So let's go to the river further on. Let's say we want to make a list, a list of elements that we can use by the way, you can go to the next line instead of going with the mouse turds. End pressing. Enter. You can call the next line by control. Enter now. That's right. Um, you A list. So this is how we would do it in the long way so inside that you all were gonna have list element. Andi Insight, at least in them. And we're gonna have a cherub, actually, let's just keep it with list elements. So we want to have realist lemons. No. How can we actually make that even faster? Andi, this is how we do it with em. It's instead off doing how I just showed you were gonna be typing in you well, and inside that you l we're gonna have a sign. And what's gonna go inside? That and inside. That's gonna go list element. And now what m it allows us to do? We can calculate how many of them do we want, so we're gonna just multiplied by tree on breast up now see how fast that did it for us. So let's go in and more further on. Let's right. I mean, sister, lead the first part. Now let's say we want something incited list element, like some text. So let's go again on right. You well, inside that you are gonna have list element. And inside that list element, we're gonna have ext called. This is a list ernment, and now we're gonna move it by this by tree. See? Just remember, if you actually do it like this, a new backspace or you go somewhere in here and you want to change something, let's say we want inside that list element to be our Hey, on inside. That is gonna be the This is a list element. If you press that in here, it's not actually gonna do the same thing. So remember, go to the end of the line and pressed up in here so you can see that inside the list element. We have three. Hey, sheriffs. Now let's correct it. So inside a list element, we want to have the world. This is a list element, and inside that list element, let's remove the curly brackets and just put do a and that he's gonna have ah, type off um, link Andi, that's gonna be multiplied by treat. So you can see already that there's an Obama abbreviation on the right side that will show you how it's gonna be looking. So if you breast that this is what it's gonna generate for us now, I haven't covered off classes and ideas, but we can actually do it the same way as we're gonna right? Are you well? And with the class off opera list, for example. And if you press tab now, that populist is gonna have the castle populist. And if you don't want the class, you can just right with the hashtag ur class. Sorry, I did so now that I was gonna have the value if idea So let's say we want to make a textbooks hypothetical thing. So we're going to start making a deal. And that's not with the period on period. Allows us to write the class name instantly Great into there. So let's say X books on that now what if we want something inside the export? Let's make inside that they spokes. We want to have a hate one that is gonna have the world off. This is heading on underneath that h one is gonna be P. And how do we do it? We write, Ah, plus sign that's gonna go underneath that hate one. So there's gonna B p with some kind of thanks to some kind off next. And now if you want to multiply it, you can do that. But let's just rest up and see how that works on gas. You can see I have just generated a text books with just one MP in type, much faster. Might sees a right. So if we wanted by poetry, this is how it's gonna look because we're now multiplying paragraph by tree. So now what if we actually wanted to make Greek exports is so how do we do it? We're gonna do that by using the round brackets that's gonna go over the textbooks on that is gonna be multiplied by tree. And now, if you go to the end of the line, breast up, you can see. And now we have three textbooks, is with all the same stuff inside that. Now, if we go into the CSS file, we can actually do the same thing similar to that one. So let's say we want to have some kind of batting to our body. So instead of writing adding basted Exel's savings, we can actually do it as p, which is for batting. Andi writing 50. So you're going to see that Emmett is showing us that this is gonna result abounding 50 pictures. Let's press that. So now that I have briefly covered emits let's go over into the SAS. So we have already started making the variables and we have used those variables in the body tag. So let's go a little bit further. Instead of always writing the variables in top part off our CSS file, we can actually do it this way. So we're gonna declare a batting. I think it's gonna have the value of two M. And if we put exclamation more global next to it, we can use that. Adding in every part of our series is file instead of doing it as adding to um So let's remove that. Andi, let's use the same putting in here. Andi, call it betting. So if I was saved now you can see that our document is now with the two empowering. And if I don't have the global bag in here, what's gonna happen it's gonna happen is that if we write api Andi, great. Adding on, we're gonna use a paring away declared earlier. It's gonna also have the betting off to em. That's right in here that we can also define variables and global scope inside a selector on. Then we can use those variables in here. So what does the global scope mean? It means that if I remove that global right now and save on repressed of age, But sometimes it doesn't refresh well, so I didn't say the Haitian will file, So let's say that we don't actually need, but it's a saving. Now we're gonna have the file with three headings on but adding in the text. So if we saved the CSS file with sass file, this is what it's gonna happen. It's gonna lose that, adding because we don't have a batting declared variable in here in the global scope. So if you put that back on, say now, all of our paragraphs are gonna have a batting because we just made global. What we can also do is we can do some calculations in our variables. So let's say we want to have a drink minus one m. We can do that. So now our powder craps actually have one AM off batting or we can even multiply by, say, timeless dream. Now our paragraphs have to Time Street M, which is 6 a.m. And you can see in the inspect element down here. Now let's go briefly over maps, maps are basically a collection of variables inside one value or variable. So let's define and make a common first off map so defined as such. Andi I pain unbearable, called Let's say my colors. It can be whatever you want to name us, and then we're gonna type the round brackets and inside those around records, we're gonna be making treat different types of variables. So let's say the 1st 1 is stark, and that's gonna be a color. So that car is gonna be COC 4 to 5 c, the second vulnerable. It's gonna be read that's gonna have a value off C five or 254 on the third value weight bowls, for example. It doesn't really matter. You can have a lot of fish in things in there, So let's use those values in our paragraph, and I'm gonna make a new one. I'm actually also when I removed this, he was spending in here. So now we want to use those colors that would just make So let's typing color. Andi, how do we get the violence from the map? We have to map hyphen, get with the round brackets, and inside I was around brackets break and all right, the name off map, which is my colors and the value that we want to pull from there, which is dark. So now that week saving, we can see that our text now is dark blue. So let's say we want to also make that next bolt ons take the value from our map. It's type in front weight. Actually, let's make it faster so you can actually do it. Like if we which is fun. Wait, Andi, I've been mad. IPhone get from records, my colors comma wait and said, Now all of our paragraph takes is old. This pretty much covers all the information. You need to know about sass in this course because we're not gonna be using very advanced techniques in here. We're gonna be using most of the intermediate or basic ones. Also, if I have gone over something too fast, I have linked the resource is in the description below so you can read about SAS or M. It's a bit more 6. Creating The foundation: Now that we have all the basics out of the way, we can actually start creating our side. As you can see, I have Adobe X'd opened up, which is free, by the way. So you can also go loaded and you can access hold exported files on the design, but downloading it in my course projects parts. So I have great both the desktop landing page under four landing page. And as we're gonna be making the website in the mobile per solution, we're gonna be making the whole landing page first. So let's start with grating the East ML file. First on, let's push, they extend to the left side and again the coat with the right side. So now that we have that, let's zoom into the phone landing page first and lets try replicating what we have in here . So let's delete all of our a similar that we have before inside the body bag. The first thing that we're gonna be doing is we're gonna add some resource into our HTML file. The first thing is gonna be the phone awesome, which is gonna allow us to have a lot of icons in our disposal So it's going to Doc's, um, actually start using. So in the start using, we're gonna be copping our free The link in here this is gonna be copied into our estimate fight. Now, the second thing we're gonna add is meaning reset. So find out from the Google just the first option. Save us on and saving in tow CSS folder. Now, the third thing is sleep corrosive. So Google a swell right, The first option going to the usage and from here, open this point. Now, remove the comment because we don't need it and change the final pass to the CSS. I guess this is where we're gonna be putting our files. Now go to the chase part from the website to that end, the whole body tank in that kind and also changed the final battle chair. Yes. Now let's go back out into our website on Jews ticketed now on. Don't load the file from the seat. We're gonna need to get three fires one for the chase and two for the CSS. So copy this lake at CSS slick of Js and slick hyphen team that say assess into our boulder Andi would chase fire into the chase polar on the CSS files to the CSS boulders. Then go back into the system until common on. Let's actually at the mini research as well. So type in link. Just 1/3 option CSS choose to see us is older And in here you can see the mini reset of many of CSS. Andi Now put it below the phone Tossem by all on Roky up two times. And now we have all of our resource is put in today Schimmel document and we can start creating the actual HTML for the website. If you have not under it, rest of what sass in your visual studio on Go Liar is gonna open their local host in your browser. We can also close the other ones. Let's go back into a race and modify it and let's actually start creating the content that we want. I'm going to open up the X d for our design and see that the first thing that's gonna be on the phone landing page is the header. Heather's gonna have the logo, the title on the actual navigation bottom. So this is what we are gonna be creating the first. So let's create a new with I d off my side now. On the glass off. Move along. Now on, uh, now inside that lets great a time with their half. Do it Tell a script. Avoid zero. Basically, what that's gonna do is it's just gonna allow the button to be unbreakable or is not gonna do anything with the class off close button on the on click event off close. Now on the inside, the A is gonna be at if I can find it at times. And Clement So the next line, it's gonna be image inside of them. It's gonna be resource is logo of being G and all that. It doesn't really matter. But let's put it to logo on the last name off menu local and low saving. And you can now see that there's alot going now. Html Kocaman. Now let's add or eight arrests with the different names inside those. So it's gonna be a with hate, a riff off high stag Andi times or and in each of those, it's gonna be a home about us. Okay, so this and contact save it. Sometimes it doesn't really fresh show and just many refreshing your so And now we have the list in our in their stock haven't. Also, we don't need site or in a reason, students. So control be on also close the D Parker below. So we have more room to work with. Now, let's take our design What we're gonna need to do next. The navigation that we just did is an irrigation that's gonna pop up when we click on the menu on the mobile. Well, and it's not gonna appear on the best off. So after that, we're gonna have to Great a main. Sorry, Great. A main with i d off main on the class off main Not really necessary, but that's how I want to do it. And another one is gonna be ahead there inside that head that we're gonna have a header let and inside the hair, the left. We're gonna have a span with the class off Mobile menu on flick event off. Open now. On inside the span, it's gonna be on I with the class off if s if a ours I'm sorry to your classes. You put them together with the period, um, or us that and Now we have to spend on a swell. So the next one is gonna be image with the resource off resource is actually sorry. Yeah, resource is resource is and local the energy with SPAC again with the logo on the glass of menu. I fell in love with a logo, and after that there's gonna be a SPEN with crazy. Now, if you re fresh the site or it's gonna be very fresh for you, unfortunate doesn't for me. You can see that there's two logos Now, we don't have to worry about that because later on in the CSS, we're gonna be hiding them and making them actually look nice. So let's go forward with a similar no below our dear in here, we're gonna be making a right side menu. So let's name it us at last with Heather, right? You will off class this the menu, and inside that menu, we're gonna have a whole list items again, just like in the side now. But I think in Les A We, uh, hr read through the hashtag Andi Curly brackets off home on times. For now, we're gonna have to put the normal records around our code to make a list multiply by four times. So do that. Could end up the life and rest up. Now we have released items with a edge inside those change the home off the second wants to about us. The 3rd 1 do case of this and the 4th 1 to contact this is gonna be over that stop menu. Now, the last one will be with the glass off, But then border and do life fence off outline, uh, saving. Let's put some spacing in where our main back ends. Unless actually start writing the content inside the maid. So my period content inside all content, we're gonna have all of our main sections which will be the first section, second section, the girl section on the food. So that's right Those how? Let's start with the first section with the class off section section one and the class off est ob. If page, which is that still full height inside that day there's gonna be a rapper that's gonna wrap around the competent with the F full with and inside that rapper. There's gonna be a textbooks inside the textbooks. There's gonna be a hate one with keep your child line break world space organized and you can see it in the design below the hatred. There's gonna be a paragraph and we're just gonna generate some law. I mean, let. And then after that, we're gonna have a tag Oh, class with but then radiant. Sorry, Great. And read more. Now, the first section this time let's go over into the 2nd 1 at the space south because this is where our on and here saved. And the next section first, it's gonna be section section two with the glass of this for Hi. That and next Books next said inside that we're gonna have a hate one off. What do we dio hate stream with class off? Sorry. A street with the classical to I tried thinking Yes, The new cool thing. Another need history. They're gonna have a paragraph. Oh, let's say we have years of experience that we can used to bring you so totally unique and customized at our working strategy Semi color. Working with you to decide what will work for you and what long period we understand and reshaped at each crime is a friend. Areas now control, Enter. Go the next line. We have a mistake over the next line on. Then start a new do. Sorry. Go below that. And let's start fighting our services. Those services are in here. You can see the connecting users analyzing data and creating solutions. So let's make a services this great. This is gonna be a green light them. Now, this is where it's gonna get because we're gonna make three off the same types of great items with the same next on the same classes. So I started writing period services list with the great class inside that glass, we're gonna have to get the services underlying Bite them with the class of next center inside. That we're gonna have readers first do is gonna be The service is on the line inside that I can we're gonna have and I come with the glass off. That's okay on class off F A users, then underneath the services I can is we kind of put the class smart science to go on the next line. Glass or services. Sorry. Service in here the same thing. Remove that s service underlie heading inside. That heading is gonna be with next off connecting. Use the service. Let me make the visions to the larger Now, the last line below the surface hitting It's kind of a deal or service on the line Next with the Biograph inside that one. And for that, let's great the lower emission below because we can't created inside our curly brackets. So let's go below five Florin on a copy. Two comma before the come actually inside the curly brackets. Now, we don't have that good s term or the long term Epsom. And now, because we want to have tree off the same service items inside the list off grade, we're gonna put this part inside the normal round brackets with this to the end off the line, Andi. Times it by trees. I'm dressed up. Okay, sorry. I made a mistake. So let's go back. And actually, we have to put the curly or the round brackets around each of our Davis. So we're gonna put the first Steve into the services side, which is gonna be happening in the service of Aiken. The 2nd 1 is gonna go the service heading on the 3rd 1 is going to go into the service next . Now If you have done that, go back to the end of the line. Remove and typing tree again on breast up. Now you can see it generate. Thus the whole pace, Tamil. Now, I don't like using so much space, so I'm gonna root removed the paragraph spacing in here. Same for here. I'm gonna do it to all of that same years, all right? And what, this one on the last one as well. So now we have all of the classes done correctly, and all we had to do is change out a requester now. Gonna be different. So for the second heading, it's gonna be, uh, analyzing data. And for the 3rd 1 it's gonna be a creating solutions and say we don't have to look at the Hay Cemal document now because it's gonna be broken anyway, because we have not added any CSS. So let's just go to the next section and make the third section. So let's check whether where it ends. So the section ends in here. It's type a new one with the class off section on Section three. Inside. That's gonna be again a rapper inside the rappers. There's gonna be a textbooks. We start with the class off next. Same thing inside that there's gonna be a street with the class off color to hyphens blue. And with that stuff, check out our on underneath. There's gonna be a hates to do with the latest case. This? No. After that, there's gonna be I'm not a rapper and it's gonna have the glass off that that w we for the full way. And now we're gonna do the same thing inside that rapper. We're gonna be generating a lot of the same case of this inside that. So let's start with writing out the case that the class case and this is gonna hold. Let me show. This is gonna hold all of our case that this Have you seen the adobe extreme? 123 until, like, 5 to 6 items. So now inside those case, that is, we're gonna have I take them off case study. I am now. This is gonna have to be inside curly brackets inside at this kind of I mean, after that, there's gonna be, uh, case study underscore number with the value of off the other sign, because that little sign is now, every time it's being multiplied, its being changed. So it can be 1234 500 forever. How many times we multiply the whole snapper? Let's put the space to the end of our line. Do you know where we are now? Plus case the underscore date with for 24 12 18 inside that this is also gonna be in the curly brackets again. So highlight it all. And curly brackets. And after that, there's gonna be another bus. I, with the class off you much overly inside the humans over late is gonna be image with source. Sorry, source off. Let's put the hashtag or no and class off case study in much and also with the new curly brackets. I mean, sorry, the round records. Andi, we're gonna have to times it by three. Rest up. Now we have three. Sorry. Let's go back. That's actually times it by five. Let's make five off those. Now we can see that all the numbers have been changed with the downside to 123 or five. And let's change the image sources to the correct ones now. So the 1st 1 is going to be resource is on and excels on just a 37 Or now the old can be study one. It doesn't really matter again. Now the second source is gonna be resource is excess just the 1st 1 3rd 1 is gonna be resource is Exel's on the second auction. Port one is going to be Resource is takes us 1st 1 again and this one is going tobe a resource is excess and one, 14 So now we have done all the items below those items that's actually gonna be do so right after the second year it's gonna be a beer with i d off arrows on the glass of arrows on dressed up And this is now they're section done. So let's move on to the foot now for the food that we're just gonna right foot inside that foot there. We're gonna have a beer with the class off rapper, but the glass off exports inside that I can inside that exports, there's gonna be history with stay connected with us. Um, her Here is a list off our social media sites. You should follow no below that exports. There's gonna be a new do with gas up with the list. And inside that put the list. We're gonna have a you. Well, with four items. Now, where can I use? I met again with four allies with it. Uh, a hates event. The hashtag that's gonna have that I, with the class off, have a baby on the class off F A Facebook, and we're gonna have to with this side into the round brackets and times it by four. Now let's go back and change the 2nd 1 Do the YouTube, the 3rd 1 and the 4th 1 instagram on that sport. And then so now I think we have all the haste ml covered. You can refresh the page and you can see that it just doesn't look very good. So we can now move on into the CSS. 7. Getting Meaty: now, before we are going to start making our CSS, I want to go a few things. One of those would be that there are gonna be huge changes in terms off our CSS design on the website Onda Adobe expertly designed that I have made already. As for example, I'm gonna have the services with opacity. The 0.7 background as well at the keep, your actual work is organized. Other things that I want to clarify is that you can see that on the phone landing page there's gonna be apartment that opens our menu. This is gonna be the side now that we made in the Hasty Mel on this so there won't be any buttons that would be just a normal navigation menu. Another thing that I want to go or is that I have made some changes in the HTML as I have had a few comments on where our section start, where our menu starts on where our poetry starts. So it's just for you to understand as what we have just written as far for now, um, you would change this I have made is that I forgot to actually write Aikens into the correct ones. So in the services Aiken's, the 1st 1 will stay as FAA users. But the second and the 3rd 1 will change. And they will change, too. If a chart lying on the 3rd 1 will change too. Check circle, and you can see three precious. Our icons here have now changed. I also suggest you to open your adobe X design and have it close to you as this is gonna be the reference that you're gonna be designing from. And I won't be constantly opening because I have it already opened on my second money. Now let's move on to the sea Assess. I'll close my unnecessary windows open the SAS file on. We're gonna be cleaning up our talk moment until the variables because now we're gonna be adding a few more on, then starting with our SAS file or the CSS. So that's right. A new wearable called Blue that Lou's gonna have the value off three e nine e fire on another variable called Think, and that is gonna have the value off E 0 to 5 F nine. Okay, Andi, one more. It's gonna be a rapper. This is gonna be the rapid that's gonna contain our website in the desktop. Andi, it's gonna be applied later when we go into the media queries. Because as we're doing the mobile for a solution, we're starting with the mobile. You can also on your chrome Blake on the Inspect. Just this part, and you will always see the more tired of you click on the mobile l for 25 XL size. Okay, so go back to the cess Assess or the rapper will be 1040 pixels. Andi, that concludes our variables. Now, let's start with our body attack in our body type. We're gonna be assigning our funds. Family. You can also write it as if yeah, on dressed up, remove the city and right revote, though inside the strings. Now we're gonna be styling the H one hates do and so forth. Each one will have a phone size off two ends. Morgan, bottom off. 20 pixels on weight off. Bold Save it. Hates do is gonna have the value on size off one point eight gm's andi fund. Wait off. Both. Okay. Now the pastry is gonna have fun size off. Sorry. Fund size. 1.5 years on the phone. Wait, Cold paragraph is gonna have a marching forth, um, off 20 pixels on a tag all around. Our website is gonna have a text decoration unknown on that's gonna remove the underline in our A tax. And if I save it, you can see our eight tax. Now, don't have the underlying because we're not abusing any underlines in our links. Okay, let's go over to the header school back up and create a small comment and the area. And now we're gonna be writing in SAS or CSS style. Wait, So mobile. Now it's it's gonna have Ah, height. 100%. We're off 200 pixels. Position fixed because we want the mobile now to be fixed on the phone. Remember, we are styling the phone first. We're not actually making the best of right now. We're gonna be making a meat equerry later. That's gonna change the violence or the vest up. So transform off, translate. And if you don't know what translate in itself is translate, it's basically the same as writing code for something which is like position absolute on moving it with top left, right, or about them how many pixels you wanted to. But it's much better in terms off Web speed on. When you animated, it's not gonna have others. And we're gonna be needing this only because later on, when we make our mobile now or the site now it's gonna have to move with it. So the same index is gonna be one. So it's always gonna be on the top from the top down zero from the left, zero background color. It's gonna be our variable think overflow. It's gonna be or the X hidden and the padding it's gonna be from the top 60 pixels on transition. It's gonna be a transform for 0.5 seconds. Now, instead of writing in the normal CSS from here, we want the mobile love with the local to be target. That's we write in the SAS inside our mobile. Now we go to the next line, we make space on be right logo, and this is gonna do the same thing as it's gonna target our mobile number logo. And I'm sorry later how it works. So let's color it with white. The text to be white, the margin to be out of the text decoration to be none display to be flex because many people she's sending it a line items to the center and both the justify content to be also center. I'm from the march in autumn. We're gonna ads. Sorry. We're gonna add 40 pixels. We're not gonna be seeing any changes because we are not gonna have the clickable parting it. But I'll also show that later. Now, the next we're gonna be typing gaze A not inside the round brackets local. And this is gonna target every eight AG inside our mobile NAB, which is not with the class off logo for the padding. We're gonna we're gonna add a exults Exel's Excel sincere pictures. And this is gonna be from the top eight pixels from the right, eight pixels on the bottom, eight pictures and from the left, zero pictures, it goes clockwise. Thanks. Decoration is gonna be again. None phone size. It's gonna be 25 pieces. The color is gonna be white. This place can look on the fixed line is gonna be sent and transition. It's gonna be 0.3 seconds now for the close button that we just made in haste. Ml It's gonna have a position off. Absolute From the top, it's gonna be a serial from the right. It's kind of 25 pictures. The phone size is gonna be 36 pixels and the marching left. It's gonna be 50 pixels. Now, before we go forward, I won't do Write a few lines of today s to make our side number Hopefully. So let's press control be if you don't have the explorer over the open going the CEA s folder. Andi, let's create a new file called Script Chase Onda. Let's right the view lines of gold So we're gonna be right in two functions for the side now, Andi, first function is gonna be Oh, and no, we're not gonna have anything in the barometer's document. Get element by i d. It's gonna target our my side now on. It's gonna style it with transform with translate X currently around brackets zero pixels on document. Get element by I d. This is gonna talk at the main our content march in left it Cruz 250 pixels. So what is this essentially doing? This is so that when we click our side now bottom it's gonna open a new menu from the left side, and it's gonna push off our content to the right side. 250 pixels. Now, this is only the first function which is gonna open the now We also want their close now. So let's write second function, which is close now. Round brackets with the curly brackets. Document get element my i d Again my site now style transform equals translate X Rome brackets minus 3 250 pixels and document began. Get element my i d Targeting the main class off our Eastern melt document and styling it with margin left. Oh, zero Exel's Let's save it and see us anything. So if you go into your browser and you click on the navigation button with bars, you can see that we have a menu that opens up and it has a pink background. It has the main navigation, and it has the logo on. This is mainly for the phone, which we're gonna be hiding later on in the CSS. So with that on, let's continue writing, oversee, assess or the SAS After our close bottom, we're gonna be opening a new main and insight that mean we cannot be right in transition. Marching left or 0.5 seconds. This is gonna any made the moment off our main glass. When we open our side navigation inside the main, we're gonna have Heather. Hey, there is gonna have a position of absolute with off 100% putting off 30 pixels. The color is gonna be black on the sea index It's gonna be. And which means that the position after it is gonna absolute our hey, Heather on the sea Index is always gonna be on top. Now let's go forward. Do hands left. This is gonna have the display off Flex Onda line items off Santa the head of right. It's gonna have extra line send now. Um, I guess I made and no OK, no ever. Now logo that style our local. The logo is gonna have the with off sported by of Exel's and that's with 0 100% Morrison from the left side is gonna be 10 pixels on march in from the right side is kind of it 10 pixels and just Teoh explain. We can actually write marching. So when we go from clockwise, we would say from the top serial pixels from the right and pixels on the bottom zero pictures and from the left, 10 pictures instead of writing how I just did in two lines. But I do it both ways. Every time. I just It's a habit. So, uh, let's go even more alone on by the start menu. So I made a misspelling here, I think. Stop this menu. Now we finished writing our mobile left side off the navigation. Now let's move on to the test of menu. It's gonna have a display off. None. Because on the phone, it's not gonna be displayed on later on in the media query we're gonna display I block to show it. So the fund Wait, This gonna have a old inside the best menu. It's gonna have the list elements to be in line. The margin is gonna be did the right 25 pixels inside that don't forget the semi colons inside that lee or the list element. We're gonna have a tag or color both valuable black. So pass it is gonna be When, seven. You can actually write it with serial points ever. Or you can remove the zero because it's actually not necessary, Andi. Then we're gonna be making the eight act to be horrible. So, Chris and on we're gonna do it with typing at Collins Hunger opacity one transition opacity 0.3 seconds. And he's So now we have under this stop menu on the mobile menu. Actually, uh, we have to put the mobile menu below here. Mobile menu. It's gonna have the font size off 1.6 e ems. And now we have the more while under they stop me new time. So in the mobile, it works like this on. Later on, this part off our minute's gonna be hidden. Now I can see that the menu has you mistakes. So let's check on our problems. That individual studio, it's also hide the left panel to make more room for us. So we're missing a semi colon. Oh, okay. Martian left. This is gonna be like that on. Save it. Refresh it, Andi. Yeah, Okay. Now we have our heading. Done. Obviously, our first section is on for off our header because its position by absolute, But if we start actually goading the sections, you can see it's gonna fix it by itself. So before we start goading our section C assess. I want Teoh make you memes or actually, glasses that we're gonna be using throughout the rage, Tamil. And you can see what these pants are. For example, in Hazem El Bottom button do hyphens Creating is gonna be a class that is pretty defying and we're gonna be reusing it instead off, uh, or just assigning a class to our estimate classes. So for the section, I'm gonna have a generic height equals 100% with equals 100%. The position is always gonna be relative on batting for the sections Is gonna be 30. Excels on the top to the bottom and syrup facials from the left and to the right background is gonna be repeated by No, Andi, we're gonna be making the rapper. So inside the section there's a rapper on the rapper is gonna have the marching off outta. So we are going to center our wrapper inside our section. It's gonna have a batting off Sierra pictures from the top, do the bottom on, then expend percent from the left and to the right side. So, on the height, 100%. Now, if we say that we can see now our talk mint has adding all over our content. But we actually have to do one more thing. Because if we go back into our hace normal document, we can see that we have a rapper with another class of full with or if probably we in short on is a glass that I generally used Teoh reassign into rapper source sections multiple times. So let's right that with that sign. Andi Oh, period f of the week. But the max with off 100% now, another redefined class that we're gonna be making instant ex center, which is for text the line center. Really simple. Then the color. If two hyphens blue is gonna have the value off color variable blue, another part them with border off, two hyphens outline. And this is existent in our menu part. So if we go in here way school into our contact, this contact link is gonna have a different order, and it's gonna have the outline for that. So we're gonna be making a class sport that so the border is gonna be two pixels. So it on think the border radius for it. It's gonna be 50 pixels on the batting. It's kind of before pixels 25 excels Vertical align to the mill on the transition. It's gonna be all 0.5 seconds at least on for the outline. We're also gonna have the hover effect. So hover background it's gonna equal. Do think so. We're being changed. Outline to the background. The color off the text is gonna go the white instead of being, uh, the use of color, the transition is gonna be off all 0.5 seconds and these And if you save it, you're not gonna see a lot of difference. Because the thing is, our menu on the mobile is hidden as's. We did it on the top here. That s top menu is displayed as one. So if I actually make this larger and go even further so it's beyond 700 67 Victuals is the point where our test of menu is going to be appearing when we at the at media query. But right now our code is not changing because we're not done yet. So let's write another glass. It's gonna be plucked them, but then do hike unscrew agent with four courageous actually, let's make it faster. Order rages Ah, off 50 pixels based decoration with none the color off white, the background image. Now why are we adding a background image to our radiant? Because this is a new thing in C assess that week and cheat the system do actually at a radiant into our button, that is, ah, defined as a background image. So the linear radiant is written as such an insight that dinner radiant were saying From what point? What point are a, uh, showing too. So we are going from the left to the right. So too right on. We're starting with blue color from the syrup percent, the pink color on the 51% which is the center on the blue. Sorry, um, the blue off 100 percent. Andi, the backbone size is gonna be 200% auto. What this is gonna do is when we actually hover our crazy in about them, the great and off the center is moved to the right side. So to the end, off our bottom, on on the hover, it's being pushed at the beginning. So it feels like it's ah animation. Instead, it's ah really much a cheat were cheating the system on the transition off 0.5 second. He's also the betting is eight pixels and 20 pictures on for the great in three. Adding a harbor effect, which is the background position, is being moved. So this is now where we change our animation from the right to the center transition. It's gonna be 0.5 seconds. He's now. You can see me. I'm writing a lot of positions 0.5 seconds sees. So if you want to do it, we can actually add available here as I didn't before, we can add a variable called transition Andi assigning the value off 0.5 seconds ease. So instead of writing it everywhere we used 2.5 seconds ease, we can actually go back. And chains are transition in the outline, for example, I'm putting the transition. The same goes for here transition and the same goes for here on the sorry. Here on with the control we add to off those. So it's gonna be open position. Okay, actually, didn't choose the earlier one. So again, let's write transition here. And if we say we're still gonna have the same result But of course, we're not gonna be seeing that, because again, we're not showing the best version right now. It's gonna happen later. So bear with me Now that we have the redefine classes on, let's move over to the sections. 8. Covering The Sections: so under the first section. That's right. The comment, this is our were our section one starts on this double the fold area. Okay, Section one, Section one is going to have a background image emits off you r l two periods, hyphen resource is press enter. You can choose Ah, visual studio on choose the phone landing on and semi colon the background position. It's gonna be a center on top and the padding from the bottom. It's gonna be a 680 pixels because we want a lot of room for our first section to be shown until we show the second section. Now, that's right. Our wrapped her The rapper is gonna have the display off. Great. If you have not learned about grades, I strongly suggested because we're gonna be using created a lot. So the greed is gonna have our content aligns to the center and the line items to center as well. On this is actually a work around or our older browsers, because older process behave differently when it comes to great. And we also have to make a work around. If it comes to edge or it comes to explorer, the next is going to be The textbooks, which is inside our first section on the Xbox is gonna be positioned relative to our section. It's gonna have the march in top value off 100 pixels. The background is gonna be our TV 255 Do five players do five pipe on the opacity. It off 0.9 border majors is gonna be eight pixels and the padding is gonna be 30 pixels on the top to the bottom and five pixels from the left and to the right. If you save it, it gives a scenario. So let's save it again. Let's see if there's any problems. No problems. Let's refresh our server. Okay, we can see that our section one is actually missing the background, so let's try and fix that. So let's close our responsiveness on the chrome on open our inspect element will check on what's missing or what's wrong. As in the folder. We don't see anything wrong with that. Um, let's try on and re making our lives ever. Maybe that's the case. Just so. Seems like that's not the case, So let's take our output off what our size skates. So we can see that our SAS is having an error with our transition. So maybe there's missing letter. So line 164 is in here. So it's transition. Let's check the earlier. Okay. So we can say that our earlier line of code is having a misspelling. So, friend decision. Let's re save it. Okay. Just okay, let's check our first way. But maybe I made a misspelling in pair. Um, okay, Yeah, we made a trance. Still not transition. So we're getting another everywhere where I made misspelling. So let's go back to line 199 on the line night 199. It's giving us that our background. Okay. Our background is actually missing energy be a because the last value is all for it. Can't be energy beat. We have one more value. Okay? And now, if we read it, automatic refers our site. We can see that we have our back from here with a very nice spacing to the next section. So that's good. Let's move onto the next one. Let's start creating our section two. That's comment. Section two and type section hyphen, too. Inside that section, we're not gonna have any CSS so type ext. Books at exports is gonna have a marching from the bottom or 40 pixels. Um, insight that exports. We're gonna have the hates one being marching bottom, so way basically resetting, get We're putting cereal pictures because, remember, on the top of our CSS, we made all of our hate ones being march important. 30 or 40 pixels were not resetting it because we don't want any march in there. Andi, the hace tree is gonna have a margin. All of them off 30 pictures. So the next one background element, which is I'll show you the background. The lemon is this one. So that background element is now being positioned absolute. And it's gonna have a set index or minus one, which means that if we want to click on something, then the sea index minus one is putting our element behind our content. That has to see index off zero or about on the left off minus 50%. Let's save it. And we can see now that our Akron element is behind our services and it's not taking space that we want. Let's more onto the services list services list is gonna have an immediate tile or service underscore item. That service item is gonna have the margin off 10 pixels and serial pixels padding 20 pixels. 50 pixels. Okay. Seems like the emitted and worker Adding off 20 pixels is two pixels of background. Again, our TV A Do you find? Let's press center, because we already have it. Uh, freak them here. This removes that, um, racket because I was unnecessary. All the Raiders off eight pixels. Now, inside that service item, we have more items. One off those is service on the score. I can that I can. It's gonna have the with off 186 pictures, which is the limit size the high is gonna be 150 pictures, 145 pictures. I'm sorry. I'm semicolon marching. It's gonna be out there, so we're gonna send it. The background is gonna be You are? Well, two periods. IPhone resource is on global two times the size, the background. It's gonna be repeated it, but non Sorry. No, repeat, it's gonna be displays as flex. Andi at next item is gonna be justified to the same. And items inside are gonna be centred as well. Now, inside that service, Iker, we have that likens So we're gonna slide those as well. The color is gonna be white for likens upon size. For them, it's gonna be three m's on batting is gonna be a serial pixels cheer. Pixels are pictures and 12 pixels. So from the top zero from the right zero on the bottom fireplaces and from the left side, 12 pixels. Okay, so now that's service likened. Then let's go from the yellow jacket. The next line, which is service underscore heading the fund. Wait for the heading. It's gonna be cold on the phone size off. That is gonna be 1.3 gm's after the service heading. We have the service next on the score. Next on, that's gonna be opacity by 0.7. Let's save it, and we can see that our text is now slightly less than black. I just can't really prefer putting our colors into rapacity rather than a great color, because if something's behind that, it's just it looks nicer. So now we have the section to Don. Let's more under the third section that's scroll down and see how that is. So section three. It's actually common as well. That's like section three. So that section three is gonna have the overflow off X being hidden. Because this is gonna be made into the Corozzo using the sleek that we just put into the haste I Mel, we can see in the bottom. We have the sleek being applied as a script here on the sleep is gonna have the sea assess applied from the top of our heads. Similar document as well. Now arrows after the section, it's gonna be displayed as a create element with the with off 50 pixels on decreed template columns being one fraction on one fraction float is gonna be the right side on the batting . Welcome. It's gonna be 60 pictures. Now, let's go home. Right. The slick previous comma slick. Next on, those glasses are taken from the slick Corozal that is up. It's being applied later on, if we make our Che query. So after we finished the section three, we're actually gonna be going back to the take where, if I a javascript file on, we're gonna add the corrosive in there, and then it's gonna look a lot better. So let's go forward with sleek Revis. And the next one, those are gonna be positioned initial because go, That is, um, initial because the goat that is being applied by the team see, assess off, slick. We don't want that. We're gonna be changing that. So from the top zero, Well, the week off those elements is gonna be 20 on the highest. This kind of between as well. I'm betting it's kind of a zero that elements off those both for before Andi before, because we're applying that before to both sleep previous and sleek next one. So comma and again before those elements are gonna have the color off blue over 2.5 on transition because we made available before transition trend position. Now, let's right from the horrible curly bracket Slick. Some of previous hover off before element. So basically, when we Harvard, the sleep previous, But then it's gonna change that before elements styling, and same goes for slick element off the next hover before off the opacity, one on the transition is gonna be and Citian it's gonna be transition. So what does that mean? It means that if our buttons are initially gonna be a 0.5 opacity. If we go over those problems with the hover, it's gonna go back to opacity one. Okay, so let's warn, let me just put that smaller here because we don't need so many space being taken away. Let's go and write our, um, case studies because now we are done with the arrows. The case that this is gonna have the marching from the top to being 20 picks is moving on the case that is light them inside. The case of it is gonna have this case study underscored. Fight them. It's gonna have the Martian from the top being 15 pixels, the position is gonna be relative. And the more she it's kind of the 40 pictures on 15 pixels. So we're now basically styling. Our case thought isn't here, and we have made our heading correct. We have made off our others. It's parts of correct. We are moving on the number on the date that we have in our case studies. So let's right the number case study on the score number. Position it with absolute. This is gonna go on for our case. Study from the right. It's gonna be minus by Exel's on from the top. It's gonna be calculated off 50 pixels. 50%. I'm sorry. Minus 60 pixels. The fun way is gonna be bold. The color is gonna be pink. The phone size is gonna be 80 pixels on to see index is gonna victory so it always save some top. That's save and check so we can see that our number is on the right side off our case study all the time. Now, let's more Did it. Eight Case study on the score eight. It's gonna have the same things as positioned. Absolute. It's gonna go from the bottom minus 25 pixels. The phone weight is gonna be pulled again from the left. It's gonna be 10% and the color is gonna be blue. The phone size is gonna be 50 pixels on to see index again. History to make sure it's on top. Let's save refresh. Just remember, you can always say with control s if you didn't know that before. So now we have our date. On top of our case, study on All we have to do is making image. So the ace study benches itself. Image is gonna have a border rages of very small called raises off four pixels. Andi image overlay for the whole thing. So after the blue bracket, remember Is image over laid after element. So what we're doing right now is we are adding, um, dark overlay with blue color. On top of our case of the image on, we did it in the haste ml, if we go back on, scroll into our services, I'm sorry. Case studies, there's an over laid them that is covering our image. And it was done because we can then at a color on top of our image. So if in the future we want at some kind of fixed, it's gonna be much more visible and much more readable so that after Element is gonna have the content off to strings to make it appear. If you don't know after elements, if they I'm sorry with, it's gonna be 100%. The height is gonna be again 100% to make it covered. The whole area, the border radius, is gonna have for pixels because in the image we already removed four places off the radios . We're gonna have to do the same port after element, it's gonna be positioned absolute, because otherwise it's not gonna go on talk from the top. It's gonna be zero from the left. It's gonna be Cyril Andi Now for the background appear we're gonna add a color, which is gonna be a G B A 61 105 55 229 on point to opacity. Let's save it on. We can see that we have ah, overlaying color here. Now let's start coding our JavaScript because our slick elements are our case. Studies are not looking how it is in the Adobe X'd design. So go to our script file. Now we're gonna add a new function, and that function is gonna start when our talk mint loads. So document it. Ready a function with two round records in Before that last practice, we're gonna add a curly practice. The case studies, actually, let me just show you Let's go to our slick, corrosive. Let's open our there documentation scroll down and we can see how it's being used. So we're basically making a middle ground with the responsive for only one break point, which is 760 picture on. That's gonna be happening in the media query later as well. So is she want you can copy this whole part? Let's do that. Just Teoh make it faster. Andi, With that inside here after the document is ready, I hope it now we're not gonna be needing the 400 went 40 80. I mean, right point. We also don't need the comments. We also don't need the 608 point remove the coma. Because this is gonna be the only break point for us. The brain point is gonna be 760 pixels. The same things is gonna go slides to show is gonna be only one. We're not gonna show three slides as one on. We're also gonna be removing that thoughts on infinite devalue. I am with the calm as well. Actually put the comma back here. Yeah, Andi slice. Tres scroll is gonna be one. The slides, the show, it's gonna be tree speed is gonna stay. 300 infinitely is actually gonna be true because we wanted Teoh have infinite Scroll on. We're gonna actually make the thoughts. Not true. We're gonna add arrows being too now if we save. Actually, the responsive is not gonna be through our We don't have a responsive last or we're gonna have to change it to case studies, because this is our in the system and we have our case that is being wrapper around our case study items. Now, if we say that, go back to our document, we can see that we have arrows in our latest latest case that this part. But those arrows are actually false because we're gonna be making our own arrows that we made earlier in our CSS. But we're just being we're assigning those to our dim that is in the bottom side of our case. Studies on how do we do that? We at a new line off goes, which is a friend. Arrows again. Everything is in the documentation off the slick with the dollar sign round records, string hashtag arrows. So that's the deal that is targeting with the comma and save it. Now, if you scroll down, we can see that we have arrows on the bottom side of our case. Studies on those arrow. We're perfectly fine, but those are not started correctly and the numbers have few issues. So let's go back up and check if we have any misspellings. Actually, we can see in the problem. Stop. There's already a Jew off those. So click on the 1st 1 seem that it's the opacity is written wrong on really missing a semi colon in the bottom off our JavaScript file. Save that and say this ES is as well repressed the site on. We can also see that our ceases or our numbers is incorrect. Let's go find the value. So our right is actually 50 picks else, even though it should be five pixels so changed that it's a on we can see that's looking a lot nicer now explicate the arrows on their working fine as well. So let's move on to the floater. The last part of our haste Immelt document. Let's scroll down to the bottom and our records and start food there. That food there is gonna have all of our its text being aligned to the center. All the text is gonna be white on. There's gonna be a huge background image that is in the resource is folder. It's kind of the Ural strings to periods because, remember, with two piers, we go back a folder CSS file is in a CSS older. We have to go pack off older to find the resource is father because the resource is again is not inside to CSS Older resource is press enter and choose to foot the e n g. Send me call him the background size is gonna be cover the background position. It's gonna be centered and center. It's gonna be repeated by none. It's gonna have the height off 597 pixels and with it's gonna be 100% on every item inside that, it's gonna be displayed as a great element on they're gonna be aligned the center. So the rapper, the rapper is gonna have also the items displayed as a create elements. Those are gonna be again aligned. It is a center, and the rapper is gonna have with 100% No, After the rapper, there's gonna be a P, which is the paragraph. It's gonna have the opacity before the whole text being when eight phone size is gonna be 0.1 point two e ems batting from the book is gonna be 50 pixels. The next with it's gonna be for 400 pixels on the margin is gonna be also now the create container in the wrapper. I'm sorry. In the fourth, it's gonna be displayed as a creative element. There's kind of a creek that applied, which is 80 pixels. Basically, it's the same as a padding. Uh, sorry. I mean, Mr Misspelling here, Andi, it's gonna be marching from the top off 60 pixels. We can save it and see how far we have progressed. Right now we can see that we have our ground nicely applied. But now we have to our social media list. So let's go and do that. After our for curly bracket, that's type in a food. I've been list the hype and fought the list. That list elements are gonna be, um, this lemons are gonna be displayed in line so they are not going as a column. They're going as basically rose from the left with right at town, from the top to the bottom. I'm betting it's gonna be Serial Exel's A pixels, Andi. The second element. It's gonna have a different batting because they you do. But then it's a bit larger than other ones. So the boulder rages after after we are gonna apply, it is gonna look off. So we're gonna have to add the second. And I'm as well. So Collins Anti H child, the second child off a It's gonna have a petting off 13 pixels on a 16 pixels on. I'll show you later. Why now Moving, Gone. Reckon on tight for that day that scrolls down a little bit. The phone size is gonna be for the links off 1.2, gm's color is gonna be wiped. The border is kind of a big three pixels solid on Dwight, adding is gonna be hurting Exel's on 17 pixels on the border radius is gonna be 100% to make it a circle. We're also gonna be applying harbor effect for our links Hunger. The color is gonna be blue when we hover. It said, basically, the phone is gonna be flu, the car, the text, this kind of blue is gonna have a background off white on. It's gonna have a transition off 0.3 seconds on these so we can't use our variable here because it's different. And if we save it on, we have all of our social media links done so going back a sisterly what I meant by making this second element. So if we remove it, save it. We can see that our second element is looking a little bit more, not circling. I don't know if you can see it, but it definitely is Because the icon iss more rectangular and square and other. I can. So if you put that back, save it. I think it looks a lot better on I hope you think that s what 9. Making The Desktop Media Queries: Now that we have all of our mobile styling done, we can move on to the media query, which is for the best up. So let's put our proud sir back to the normal size, at least when it hits more than 768 pixels and start writing our good. So let's make a comment off our main great point, which is happening from 768 pixels, which means that we have so far mobile first solution to start that media. We start with the at sign media only screen Andi the minimum with its gonna be 768 excess. So below this coat or inside this media query, everything is applied on Lee when the browser hits 768 pixels because that's what men with means. So if we had a Maxwell, that means everything is applied only until 768 pesos. So basically from the mobile smallest toe, 768 cases are not for the desktop. So let's start making the vestal. Let's make a comment for the header area on. Right. Hey there. This is gonna be positioned. Absolute. This place is gonna be create on the great elements are gonna be used with template column with one fraction on two fractions, the mobile number inside that it's gonna be displayed as none because we're hiding the mobile and we are making the best of menu up here by using displayed lock. Okay, let's say that and we can see we have our menu appearing what that stopped, just like we wanted to now on to the content area. Let's make two and first because then we know where that media ends. Let's make a content for content area right for the section that section is now gonna have adding initialized because we don't want 10% from the left side and 10% of putting from the right side as we called in the CSS for the mobile Andi that it's gonna be there, stop full height. It's gonna have the value off 100 view or tights if you don't know what we would hide. This we were. Height means that everything inside the browser is being applied from the top to the bottom is 100% form the view port height. There's also available with, so that means 100% off the view port with its being covered. Now for the rapper inside our section, it's gonna be on it's gonna have a max with off 1000 or the pixels on a padding off 50 pixels on 20 paces. If we save it, we're not gonna be seeing much of a difference because we also have to do the sections. So let's go forward on right The first section up with the comment of section one. So that section is gonna have it's miss Roll down. That section is gonna have the background image changed into you are all to here. It's resource is landing normal. So but the semi colons the background position it's gonna be But, um right, the background size, it's gonna be cover inside the section one. We're gonna have a rapper that's gonna have padding zero pixels and then percent place items is kind of the center and start and thats working because we have it as a great element. Expos is gonna have the maximum with or 600 pixels on the Martian talk is gonna be initialized. You will save it. We can see that our first section is put into the center on our background is where it should be now on to the sex and section. That's right. A comment session to So the second section is gonna have a cutting from the top being 200 pixels because we want the content to be at it. I found it's gonna be new, so we're gonna add a new background there. With that, you are well off two idiots. Resource is a section do semi colons position is gonna be full on right, And we can also have a one size being cover. You will save it. You can see what that it's you re scroll down. Now the second section is blending into our first section. Now let's go further on the right second sections. Expos being, I think, with serial pixels and 80 pixels. The background element. It's gonna be left minus 28% on services list. Sorry, It's gonna have a display off grade on those creed template elements are gonna have. Sorry, columns are gonna be one fraction one fraction on one fraction. So each of those elements that you see on this mobile view right now is going from left to right with each being the same height and with no the same with as everything else. So if you save it now, you can see that our elements are from the left or the right, each with the same size. Okay, let's go on to the third section, Section three. Section three is gonna have a really simple gold, and it's only gonna have section drink inside. That section is gonna have a center on. We're gonna put that they center backs the next a line left because we don't want our text to be sent out here in it. So save it on now. It's right on the left side, on the food. What? They're it's gonna have a margin from the boat being 150 pixels. The rapper it's gonna have a max with off 1040 picks. Is monitoring is gonna be Opto on the height is gonna be 100% that scroll down to see for our changes? No, for the list. He's also gonna have a bad ink off Syria faces and 25 pictures, photo list list elements, and only the 2nd 1 First, it's gonna have the child too. Okay, Have adding that is different from the each other. Ones 17 and 22 on the normal eight tax are gonna have a fun size fun size off 1.8 p. M. On a planning off. He's in pixels on 0.2 pixels. Save it. Now let's resize our processor to make room for the changes and see that we have our s stop looking the same as we wanted to check it. Arrows work. Those were fine. Onda links have a homer. Contact has a hover read more as a hover and everything's perfect. So this is mostly working or, for example, firefox and chrome. But we also want to make you extra changes. For example, Max eyes on for the Internet Explorer nine and a ball. So we're gonna add two more at media queries. One off that it's gonna be at media screen, Andi, I mean, with 2560 pixels on the food, that is gonna change with height because otherwise it's gonna it's not gonna look good. 0 800 It's in pixels. You can't see that if you're not working on a Mac with higher pixels off with 202,560 pixels, So don't worry about that. Andi Ieave work around. So Internet Explorer work around i e nine us were around me to query That's gonna be at media screen and the men with off zero and a back slash off zero Andi I mean, Resolution plus 72 t p I insight that the head is gonna change from display Great display Microsoft lex Books on Justify content off space around the Section two off the services list It's gonna change from display create this way Microsoft like spokes and save it also again. You're not going to see the changes if you're not working on Internet Explorer nine all about. But this is a work around that we have to apply to make sure that everything works correctly on every browser and every size. So let's close our visual studio because we're not gonna be needing at close it on. Let's check our website looks and it's looking by. Everything's perfect. Just how it is in a Adobe X'd 10. Thank you for watching: I see that you have made it to render us this course. I really hope you enjoy this and earned at least something new. Now, remember, I have had all the necessary links and files into the project files. And if you stuck somewhere for getting a nadir, feel free to contact me as I will do my best to help you out with that. Said if you enjoyed this course, don't forget to spread the world. How can I stay happy coding?