Build Mega Responsive Website: HTML, CSS, JavaScript (2024) | Giorgi Lomidze | Skillshare
Drawer
Search

Playback Speed


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

Build Mega Responsive Website: HTML, CSS, JavaScript (2024)

teacher avatar Giorgi Lomidze, UI / UX Designer

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

    • 1.

      Introduction

      4:03

    • 2.

      Setup

      1:52

    • 3.

      Getting Started

      7:01

    • 4.

      Header HTML: Crafting the Markup Structure

      4:04

    • 5.

      Creating Default CSS Styles

      4:33

    • 6.

      Styling Backgrounds in the Header

      14:55

    • 7.

      Designing Banner in the Header

      8:22

    • 8.

      Creating the HTML Markup of the Navigation

      5:41

    • 9.

      Designing the Logo of the Website

      11:27

    • 10.

      Styling Navigation Items

      8:08

    • 11.

      Creating the HTML Markup of the First Dropdown

      13:01

    • 12.

      Styling Features in the First Dropdown

      10:17

    • 13.

      Styling Services in the First Dropdown

      20:08

    • 14.

      Making the Dropdown Menu Work

      5:00

    • 15.

      Creating the HTML Markup for the Second Dropdown

      5:04

    • 16.

      Styling the Second Dropdown

      12:56

    • 17.

      Creating the HTML Markup for the Third Dropdown

      6:06

    • 18.

      Styling the Third Dropdown

      11:14

    • 19.

      Creating the HTML Markup for the Fourth Dropdown

      4:00

    • 20.

      Styling the Fourth Dropdown

      5:31

    • 21.

      Creating HTML Markup for the Fifth Dropdown

      5:04

    • 22.

      Styling the Fifth Dropdown

      10:44

    • 23.

      Creating the HTML Markup for Services Section

      7:08

    • 24.

      Styling Services Section

      21:52

    • 25.

      Creating Sticky Navbar on Scroll

      12:04

    • 26.

      Creating the HTML Markup for Projects

      7:49

    • 27.

      Styling Header of Projects and Filter Navigation

      11:37

    • 28.

      Styling Website Packs

      9:16

    • 29.

      Making Filter Navigation Work

      12:09

    • 30.

      Creating the HTML Markup for Templates Section

      4:46

    • 31.

      Styling Templates Section

      23:55

    • 32.

      Creating the HTML Markup for Video Player

      11:08

    • 33.

      Styling Video Player

      21:50

    • 34.

      Making Play / Pause Button Work

      5:38

    • 35.

      Updating Progress Bar

      6:13

    • 36.

      Skipping Video Backward and Forward

      3:58

    • 37.

      Working on Volume Button

      7:06

    • 38.

      Working on Volume Slider

      6:09

    • 39.

      Controlling Speed Options

      14:30

    • 40.

      Picture in Picture and Fullscreen Modes

      5:19

    • 41.

      Working on Video Timeline

      17:20

    • 42.

      Creating Draggable Progress Bar

      11:51

    • 43.

      Hiding and Showing the Controls

      12:38

    • 44.

      Creating the HTML Markup for Subscribe Section

      4:34

    • 45.

      Styling Subscribe Section

      16:34

    • 46.

      Creating HTML Markup for Footer

      8:35

    • 47.

      Styling Footer

      11:02

    • 48.

      Creating Custom Scrollbar

      3:19

    • 49.

      Customizing Navbar

      8:45

    • 50.

      Creating the HTML Markup for Testimonials Section

      11:19

    • 51.

      Styling Testimonials Section

      22:21

    • 52.

      Creating the HTML Markup for Products Page

      11:27

    • 53.

      Styling Products Content Section

      19:43

    • 54.

      Styling Products Promo Section

      27:44

    • 55.

      Creating the HTML Markup for Contact Page

      10:54

    • 56.

      Styling Contact Section

      27:39

    • 57.

      Creating the HTML Markup for Account Page

      8:27

    • 58.

      Styling Account Section

      18:34

    • 59.

      Creating the HTML Markup for Pricing Page

      12:33

    • 60.

      Styling Shapes

      7:20

    • 61.

      Styling Header

      7:27

    • 62.

      Styling Pricing Cards

      16:16

    • 63.

      Making Project Responsive for Larger Screens

      12:49

    • 64.

      Making Project Responsive for Smaller Screens - Part 1

      6:59

    • 65.

      Making Project Responsive for Smaller Screens - Part 2

      11:41

    • 66.

      Making Project Responsive for Smaller Screens - Part 3

      19:41

    • 67.

      Creating Hamburger Menu - Part 1

      15:42

    • 68.

      Creating Hamburger Menu - Part 2

      10:35

    • 69.

      Making Hamburger Menu Work

      23:34

    • 70.

      Making Project Responsive for Tablets

      29:09

    • 71.

      Making Project Responsive for Mobile Phones

      51:14

    • 72.

      Deploying Website

      5:10

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

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.

243

Students

--

Projects

About This Class

Welcome to our "Build Mega Responsive Website: HTML, CSS, JavaScript (2024)" class, where we dive right into the practical aspects of UI/UX Design. This course is tailored for both beginners taking their first steps in web design and experienced designers looking to enhance their skillset. Our focus is on helping you create a fully responsive, professional website, without delving into the fundamentals of HTML, CSS, and JavaScript.

We'll get straight into the action, starting with the creation of your website. Think of HTML as the framework, CSS as the visual design, and JavaScript as the interactive functionality – like building the different layers of a cake. You'll learn how to structure your web pages with HTML, ensuring they are well-organized and accessible. HTML serves as the foundation on which you'll build the rest of your site.

CSS comes next, transforming your website's appearance. We'll explore beautiful designs, layouts, and responsive features that make your site visually appealing. These skills ensure your website looks great on various devices, from large desktop screens to small mobile displays.

Our journey then leads to JavaScript, which adds interactivity and functionality to your site. We'll master features like forms, navigation menus, and dynamic content, making your website engaging, interactive, and problem-solving. This is where your site becomes more than just a static page; it becomes an active platform that caters to user needs.

By the end of this class, you'll have the expertise to ensure your website functions seamlessly on different devices, from desktops to smartphones. We believe in hands-on learning, and our course offers practical experience, providing you with the confidence to bring your web projects to life.

In summary, this course focuses on practical application, taking you from scratch to a fully responsive, user-friendly website. It's an exciting journey that empowers you to turn your web design dreams into reality. Whether you're just starting out or seeking to expand your skills, join us, and let's bring your web development aspirations to life. This course is your direct path to building a professional website, and we're thrilled to guide you every step of the way.

Resource Files

Meet Your Teacher

Teacher Profile Image

Giorgi Lomidze

UI / UX Designer

Teacher

Hi,

I'm George, an UI / UX Designer, Web Developer, Founder at 'Code And Create' , and an author of several best-selling online classes.

I'm excited that I have a chance to help people to learn one of the most interesting and hottest fields in the world.

I decided to share my knowledge and experience with you and that's the main reason for being here at Skillshare.

Looking forward to seeing you inside my classes and help you to become a professional UI / UX Designer

See full profile

Level: All Levels

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

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. Introduction: Hello and welcome to our hands on course built mega responsive website with HTML, CSS, and Javascript. I want to thank you for choosing to enroll in this course. If you are excited about diving straight into the creation of a real world multi page website, then you've come to the right place. Throughout this course, I will be your guide as we build a complete, modern and adaptable website from scratch using HTML, CSS, and chavscript. Here you won't find lengthy theoretical discussions. Instead you will receive practical step by step instructions to equip you with the skills required to develop impressive websites. In this introductory video, I will provide an overview of our project and detail what we're going to accomplish. Our project is designed to be a multi page website and it will adapt to different screen sizes and devices. We will start by creating a website header followed by the navigation bar complete with user friendly drop down menus for each navigation item. Next, we will delve into the Services section, which will be followed by the project section featuring a dynamic filter for project categories. Clicking any of the links will display the corresponding projects. Moving forward, we will develop a template section consisting of two parts. The first part is visible here, and the second part comes to life with the click of a Play button. The video player is fully functional. It offers control over volume playback. You can skip backward and forward. Also, we can choose speed. Also, you can find here picture in picture mode and full screen playback. After the template section, we will build a contact section, which will be followed by a footer to wrap up the website. As I said, our website is multi page and you can navigate to different pages by clicking the links in the navigation bar, You will discover a client's page with customer testimonials. Then we will have a project page featuring an engaging wat. Then the next page is going to be a contact page which is equipped with forms and chat options. Also, we have here an account page for logging in, and finally, a pricing page. As I mentioned earlier, the website is responsive to various screen sizes. If you inspect the page, switch to responsive mode and preview it on different screen sizes and devices, then you will find that it is adaptable and it looks pretty nice. All right, I'd like to note that this project is designed for extra large screens with a resolution of 1920 pixels with and 1080 pixels height. If you're using a smaller screen, I recommend switching to responsive mode during lectures and specifying the width and height accordingly. This will ensure that the project looks its best on smaller screens until we make it fully responsive. Okay, I hope you will enjoy working on this project as much as I do. Without further ado, let's get started. 2. Setup: Hello and welcome to the course. We're delighted to have you here, and we're confident you'll find this course enjoyable. Before we start diving into our project, let's first prepare our working environment. If you're already set up and ready to write code, you can skip this video and jump straight into the project. However, if you are not prepared yet, that's perfectly fine. We'll guide you through setting up some essential tools throughout this course. There are two main tools you will need, A modern web browser and a text editor. For our web browser, I'll be using Google Chrome, but I also recommend Mozilla, Firefox. You likely already have these browsers, but let's quickly go over how to download them, just in case to get Google Chrome, simply visit this URL and download the browser. The installation process is straightforward, so we won't spend much time on it. For Mozilla, Firefox, you can obtain it from this URL. Both links will be included with this lecture for your convenience. All right, now let's talk about the text editor. We will be using visual studio code which is one of the best text editors available today. However, you're welcome to use your preferred text editor if you have one. It's entirely up to you still. I recommend giving Visual Studio code a. Try to download Visual Studio code, Visit this website and select the version for your operating system, Windows, Mac or Linux. The installation process for Visual studio code is also straightforward. You should not encounter any issues. Once you've installed both of these tools, you'll be all set to get started with the course. Let's dive right in. 3. Getting Started: Hi and welcome to our new section in which we're going to start to build our project. I have created a new folder on the desktop. It's called responsive website. If I open it up, you'll find here two different folders. The first one is images in which I have all the different images which we're going to use throughout the project. As for the second folder, it's called videos. I have here one single video. Okay, let's go ahead and open this folder in VS code. Besides those two folders, I'm going to create other folders as well As you know, our project is a multi page website, so we'll have a couple of different HTM and CSS, and Jas files. I'm going to store them in separate folders. The first folder is going to be, actually we need here folder and the file. The first folder is going to be HTML, in which I'm going to create index dot HTML file. Then the next folder is going to be, actually we need to create it outside of the HTML folder. The second folder is going to be CSS. I'm going to create here style SS file. Next we need to create folder for v script, which I'm going to insert script file. All right, let's open e HTML file and create the basic HTML document. For that, I'm going to use a built in package of the VS code. It's called Amet. If I insert an exclamation mark and hit Enter, then we'll get here the basic HTML tax. The first thing that I'm going to do here is to change the title instead of document. I'm going to insert responsive website. Next thing that I'm going to do is to link CSS and Jovscp files. For that, we have to open link tag in the head element. Then in the H reference attribute, we have to specify the path of the file. First of all, we have to exit the current folder, which is HTML. For that, I'm going to institute two dots. Then forward now we can choose the needed folder. It's going to be CSS and then we need style SS. All right, in the same way I'm going to link the Jovsc file. First of all, we have to open script tag right above the closing body tag. Then I'm going to insert your source attribute in which we have to specify the part of the file. Again, we need to exit the current folder. We need here two dots followed by the forward. Then we have to choose JS folder and select script or JS file. All right, all three files are connected. Now I'm going to open the folder in browser using live Server. As you can see, the project is running in the browser. Actually, if you're not familiar with live server package, you can find it in VS code. Let's close those messages. You can search for live server here in the packages. You can install this package and run the project in the browser. When you're using live server package and you're making some changes and updates to the project, then you don't have to refresh page each time it automatically reloads the page and runs the changes and updates of your project. All right, next thing that I'm going to do is to place the editor and the browser side by side, like so. In order to make our working process more convenient and simple, you can switch browser and the editor like. So next thing that I'm going to do is to bring in some other CDN links as well throughout the project. We're going to use phone, some icons. In order to use them we have to go ahead and search for phones CDN JS. Then we have to copy the first link from here. Next, we need to open link tag in the head element and paste the CDN link here in the H reference attribute. Besides that, I'm going to use Google phones throughout the project. Let's go ahead and visit the Google Phones website. I'm going to search for phones here. The first phone that I'm going to use throughout the project is going to be Croson One. Let's go ahead and select this style. Next, I'm going to search for phone called Uli. I don't know if I'm pronouncing it correctly, that phon, Let's select this style. The last phone that I'm use is going to be Ta. Let's go ahead and select a couple of different styles. Next, I'm going to grab this link from here and paste it in the head element. All right, so that's it. Our working environment is prepared and now we have to go ahead and start to create the HT mark up for that. Let's move on to the next lecture. 4. Header HTML: Crafting the Markup Structure: All right, in the previous lecture we have prepared our working environment. We have created different files and folders. Also, we have created the basic Html document in which we have the links for the phonosomics, also for the Google phones. Now it's time to start to create the Html markup of our first section. If we take a look at the finished project, you will see here the header of the website with the navigation. In this lecture, we're going to create the HTML markup. Markup for the banner and also for the backgrounds. As for the navigation, we will take care of it a little bit later. Let's go ahead and start to create the HTM mark up. Actually, I'm going to zoom in little bit the code. The first thing that I'm going to do is to create the comments for the container we need here, end of container, I'm going to separate all the sections and parts from each other with the comments. Let's open tag with the class container. Next we're going to create the header. But before that I'm going to insert here again the comments for the header. Let's insert here HTML five header tag. Next, we need to create the banner. But again, let's insert here the comment for the banner we need here. End of banner. Let's open p tag with the class name banner. The banner will include three different files. We will have two headings and also the bottom, the first one is going to be H one heading elements with the text Create. Next we need three heading elements. The text is going to be modern and beautiful themes. Now the bottom, I'm going to wrap button with the link element because at the end of the day, once we click the button, we have to move to the different page. We need a elements. Right now I'm going to in pound sign. Then let's create the type of the button is going to be button. Then I'm going to join today. Right, That's, it's about the banner. Next we have to take care of the backgrounds. I'm going to insert your comments for the backgrounds. Then I'm going to open tag with the class name backgrounds. Overall, we'll have three different backgrounds. The first one is going to be main background. I'm going to open tag the BG main. Let's duplicate this line of code twice. Change the class names we need here, G one and then G two. All right, I think that's it about the table markup of the header. Let's take a look. We have here just three elements which are visible, the headings and the button. Those backgrounds are not visible because we have here just the empty, deep elements. All right, now it's time to style those elements. And for that, let's move on to the next lecture. 5. Creating Default CSS Styles: Okay, in the last lecture, we have created the HTM mark up for our first section, which is going to be the header of the website, this part of the website. Now we have to start to write some CSS. I'm going to open the style CSS file. Actually, I'm going to place the file on the right side of the code editor. In this case, both files are visible and it's more convenient for us. In this lecture, we're going to create some default styles which will be used for every element we need here. End of default styles, Then I'm going to select every element, and for that we have to use an asterisk. In this case, all the elements are selected. The first thing that I'm going to do is to get rid of default margin and padding from the elements. If we check the browser, you can see here the space between the elements. So it means that the elements have some default margin. Let's set margin to zero. Also, I'm going to set padding to zero as well. Now if we check the elements, you can see that the space is removed. Okay, Next I'm going to set box sizing to border box. Actually, border box is a way to tell the web browser to make sizing the elements on a web page easier when you set the within height of an element. Border box makes the browser include the border and padding in those measurements. If you say an element should be 100 pixels wide, that 100 pixels includes the border and padding, and the actual content inside the box adjusts to fit within that space. This helps you control the size of an element more conveniently. Okay, next I'm going to set decoration to N. In this case we remove underline from the links. Next I'm going to use and set it to non as well. With this code we remove default outlines from the elements like inputs or buttons. Finally, I'm going to set phone family for every element. As you know, we grab a couple of different phones from Google phones website. I'm going to use one of the phones, Let's call it Ut. All right. So as you can see, the font is changed for every element. After that, I'm going to set the font size of the H mal element to 62.5% What this code does is that it sets the font size for the entire HTML document to 62.5% of the default size. By default, most browsers have a standard font size for text, which is typically around 16 pixels. When you set the phone size to 62.5% it means that all text on your web page will be 62.5% of the default size. This is often used as a tweak in web design. 62.5% of 16 pixels is ten pixels, which is a nice round number. It makes it easier to work with the relative units like M. We're going to use Ram as the measurement unit throughout the project. That's why I set font size of the HTML to 62.5% For example, if you set something to be two Ram wide, it will be 20 pixels wide because each Ram is ten pixels. This makes it more convenient and straightforward to work with the sizes in your web design. If we check the results, you can see that the elements became smaller. That's because of the font size of the HTML element, which now is set to 62.5% That's it about the default styles. Let's move on to the next lecture. 6. Styling Backgrounds in the Header: All right, in the last lecture we started to write some CSS. We created some default styles, and now we have to move on and take care of the header. First of all, I'm going to insecure comments for the container, then I'm going to select the container. Let's go ahead and define within height. Width is going to be 100% As for the height is going to be 100% as well. Also, I'm going to change the background color. Let's set background color to white. Right now, nothing is changed here. Next, let's move on and take care of the header. I'm going to institute comments for the header. Then let's go ahead and select Header with a tag name. I'm going to define with height. The width is going to be 100% As for the height I'm going to study to 100 viewport height. It means that the header will take up 100% of the view port as the height. All right, now I'm going to style the backgrounds and then we'll move on and take care of the banner. Let's go ahead and insert here new comments for the backgrounds. Then I'm going to select developments inside the backgrounds I those three developments we need here, backgrounds, followed by the selector and I'm going to set the position for all three developments to absolute. First of all, we need to position elements, in this case I'm going to position elements according to the parent elements, which in this case is header. In order to position element according to its parent element, we have to assign to the parent element position but with a relative value. After that I'm going to select the first background which in our case is background main I ground, which you see here, this one. Let's go ahead and select background mean. First of all, as defined within heights, I'm going to set with 150% for the heights, it's going to be 150% as well. In this case, the element will take up 150% of with height of its parent element. In this case, the parent element is backgrounds. But as you can see, backgrounds doesn't have any within height. The background main will take up 150% of the w and height of the header element. Right right now we have here the same results. Nothing is visible, I mean the background. Now I'm going to set the background with linear gradient function. The direction is going to be to right. Then we need three different colors. The first one is actually we need here two left and not two rights. The first color is going to be transparent. Then we need second colors going to be purple color. The dark one, we need here 4400 pi. Also, we need here the second color, it will be purple again. But the lighter one, I'm going to use here 4400b. Let me explain what this code does here. As you can see, this code creates a background for header. It uses a gradient that starts on the left side and goes from transparent to dark purple to a slightly lighter purple. It gives the background a smooth color transition from left to right, going from dark purple to lighter purple and then transparent. All right, next I'm going to set the position of the elements to position is going to be -95% Also I'm going to define left position, it's going to be -10% Let's check the browser. The element is positioned and now we have to rotate this element using transform property. I'm going to use here two functions, rotate z and skew x. I will explain each of them separately. The rotate Z function will have the value -15 degrees. Also, we need here skew x with the value 30 degrees. The first function, I mean the rotate Z function, makes an element on the web page rotate or tilt counter clockwise by 15 degrees. It gives the element a slight slant to the left as if you're turning a picture frame slightly to the side. As for the second function skew, x, it makes an element on a web page slant or skew to the right by 30 degrees. It's like tilting the element to one side, making it look like a parallel ground. As you can see, we have here such results. Now we have to make the corner of the background rounded, and for that I'm going to use property called for the radius, it will have four different values. The first three values be zero as well. The last value which indicates the bottom left corner of the element, it's going to be ten m. Now, as can see, the corner of the element is rounded. Lastly, I'm going to decrease slightly opacity. Let's say 2.9 All right. As you can see, we have here a scroll bar. Actually we don't need it. In order to get rid of the scroll bar, I'm going to assign to the container property called overflow hidden, which allows us to hide the scroll bar. Okay, so everything looks good. Next I'm going to take care of the second background, I mean the background one. This one which is placed under the main background. Let's go ahead and select background one. Define within heights. In this case I'm going to set with 50% then the height is going to be 100% Again, I'm going to use background with linear gradient function. In this case, we need here default direction. I'm not going to insert here two left or two right or anything. The first color is going to be transparent. Then I'm going to add here the percentage value which I'm going to explain very soon. Let's insert here the second color. It's going to be F 26 C. Then we need here the third color. It's going to be F724b. Here, the percentage value, I mean 60% specifies the position where the color transition occurs within the linear gradient. Simple terms, it means that the background will start as transparent, then change to the first color when 60% of the gradient is complete and continue transitioning to the second color for the remaining 40% of the gradient. In this code, 60% of the gradient will be transparent and then it will smoothly change to the first color, creating a smooth color transition on the background. Okay, let's take care of the position. I'm going to set to position to -40% Also we need right position. It's going to be -10% the element is positioned. Now as a guess, we need to rotate it like the first background I'm going to use. Actually, we need here the same properties and values. Let's copy this code, paste here. Background is rotated and it looks nice. Let's make the corner of the background rounded using a border radius in this case. We need here 000.5 ran. The background looks pretty nice, but we have here a tiny problem. We need to place this background under the main background. For that, I'm going to use Z index property. By default, each element has a Z index property with the value zero. But if we add here index with the value, let's say one which is greater than zero, then the background will end up behind me under the background in. All right, about the second background, now we have to take care of the third background, which in our case is background two. Actually, I think will be better if we duplicate this code here. Let's change the class name. The width and height will be similar, 50% and 100% As for the linear gradient, I'm going to change it slightly. We need here 70% Also, we need here different colors. The second color is going to be a 5995. As for the third color, I'm going to institute E. Then we need here 9458. As for the positions, I'm going to set two position to 60% The right position will be 10% We need the same transform property here. Border radius will be again same. Let's check the results now. As you can see, the background ended up behind the main background. In order to fix that, we need, again, Z index property. But in this case, the value of the z index property should be greater than z index one. Let's set it to two. Now the background should be visible, and yes, it's visible. The only thing that I'm going to do is to add opacity. I mean to decrease opacity 2.4 Also, I'm going to add to the background some shadow effects we need here. Box shadow with the values seven an four Ram. The six Ram, and the color is going to be RGBA 000 and the opacity 0.9 This code adds a shadow to an element on the web page. Let me explain what those values do. The first number seven Ram, determines how far the shadow is horizontally from the element. The second value, four Ram, determines how far the shadow is vertically from the element. The third number six Ram, controls the size or bar of the shadow. As for the color, it specifies the color of the shadow. In this case, it's a very dark, almost black shadow because we have three zeros here, which indicates the black color. But we have here opacity 0.9 which makes the dark black color slightly lighter. Eventually, we have here this nice and cool shadow effect. All right, actually that sits about the backgrounds. I'm going to stop here and move on to the next lecture, in which we will style the banner of the header. 7. Designing Banner in the Header: All right, in the last lecture we have styled the backgrounds of the header. As you can see, we have here three different backgrounds which are positioned and look pretty nice. Now we have to take care of the banner, which right now is placed at the top left corner of the page. Actually, it is placed behind the background. Maine. Let's go ahead and insert new commons for the banner. Then I'm going to select Banner and define its position, which is going to be absolute. As you know, when we use position absolute, we need position relative for the parent element. As you can see, header lady has position relative. Next I'm going to set the two position to 18% Then we'll have here left position. It's going to be 20% As you can see, the banner changed its position. It's placed under the background main. So we have to fix that using the index property. I'm going to set the index 24. Now as can see, the problem is fixed. All right, now it's time to customize each of the elements separately. I'm going to start with the first heading element, which is H one. So let's go ahead and select Banner, followed by the H one heading element. First of all, I'm going to change the phone family. In this case, let's use phone called mull. It's going to be cursive. Then I'm going to increase the phone size, make it 13 Ram. Let's check the browser. The phone size is changed, and also we have here different phone family. Next I'm going to change the color, it's going to be white. I'm going to add here some shadow effect. In this case, let's use text shadow. It works in a similar way as the box shadow does. I'm going to interfere values 01 Ram, then we will have three Ram. As for the color I'm going to use are to be a black color, but in this case with a lower opacity, or it's going to be 0.3 As you can see, the header looks pretty nice. Next, I'm going to take you of the second heading element, which is three. Let's go ahead and select Bender, followed by the H three heading elements. I'm going to change the font size, in this case it's going to be three Ram. Then I'm going to change the font weight. Let's make font weights lighter and set it to 300. Then I'm going to transform text into upper case. Now I'm going to change the color of the heading. It's going to be white. Again, use tech shadow. Let's grab this line of code. The only thing that I'm going to do here is to decrease the opacity. It's going to be 0.1 Finally, I'm going to create some space using margin. The margin at the top is going to be zero. Then we'll have zero on the right side. Next we have bottom, it's going to be three Ram. As for the left side, I'm going to set it to one Ram. All right, that's it, about the second heading. Now it's time to customize the bottom. Let's go ahead and select Banner followed by button. First of all, I'm going to set with in height. Let's set with 215 Ram. Then the height is going to be five fram. Also I'm going to change the background. Let's use again linear gradients. The direction of color transition is going to be two, right? Then we need here the first color which is going to be A three EC, it's a purple color. Then we need another purple color, which is going to be 84, then 30. It's again a purple color, but the darker one. Let's check the button we have here. Nice and cool background with gradient. Next I'm going to get rid of default border. Let's set it to none, as I'm going to make the button rounded using border radius. Let's send it to the Ram and check the browser step by step or button. Looks great. Next I'm going to set the phone size to 1.6 Ram. Also, I'm going to make the phone weight bolt. Then let's transform text into upper case. The text looks pretty nice, but we need to add some more style to it. We need to create some space between the letters using letter spacing. It's going to be a 0.1 Ram and also change the color. We need lighter color. I'm going to set the color to white. Now the button looks pretty nice and cool. Next, I'm going to add shadow effect to the element using pox shadow with the value of 01 Ram, three Ram. And the color is going to be RTB A with the lower opacity 0.1 As you can see, the button has the shadow effect. Then I'm going to create some space on the left side using margin left. It's going to be one ramp. And also change the type of the cursor, make it pointer. Okay, Before we finish this lecture, I want to add one more thing to our button. I'm going to create hover effect. Once we hover over the button, we need to move it up using transform translate function. Let's go ahead and select Banner, followed by button. And we need here pseudoclass hover. Let's use transform translate y function. It allows us to move the elements according to y axis. I mean vertically. I'm going to add here negative value. It's going to be -0.2 Ram. If I check the browser, as you can see, once we hover over the button, then it will move up slightly. Let's make this effect smoother using transition. I'm going to add here transform. And the duration of the effect is going to be a 0.3 second. Now if I hover over the button, then we'll get this nice and cool effect. All right, actually that sits about the banner. Next we're going to take care of the navigation, the logo and the of bar, those navigation items with their dropdown menus. Let's move on and take care of that. 8. Creating the HTML Markup of the Navigation: Hi and welcome to your new section, in which we're going to be creating a navigation bar for our project. In the last section, we have created the header of the website, which consists of a banner. It is placed on the left side of the page. And also we have here three different backgrounds which I think look pretty nice. Let's take a look at the finished project. The navigation bar will consist of a logo. It is placed at the top left corner of the page. And also, we will have those navigation items which are placed horizontally in a row. Each navigation item has a drop down menu, except the button. In this lecture, we're going to be creating HTML markup for the logo and also the navigation items. As for the dropdowns, we will take care of them a bit later. Okay, let's go ahead and open the VS code and start to create the HTML markup. First of all, I'm going to insert here comments for the navigation. Then I'm going to open HTML Five Novelment with the class name offer. Next, we need to create the logo. At first, I'm going to insert the comments for the logo. Then I'm going to open link Elements. We use here Link element, because when we click the logo, we have to move to the main page, the index HTML. If I go to any of the pages here and then click the logo, we should go back to the main page I, the index of HTM file. In the H reference attribute, I'm going to indicate index HTML. Then we need here development with the class logo. The logo will consist of a couple of different span elements. Let's open span tag and insert code. And then we need again, span elements with the text Create. Next, I'm going to open another span tag. I'm going to insert your templates. Okay, that's it, about the logo. Next we need to create the navigation items. I'm going to insert your comments for items. And then I'm going to open list I ll elements with the class name, no items. The list will consist of six different list items. We need here LI elements and it will have the class no item. Then inside the LI element, I'm going to open link like the logo, we need to specify here the names of the pages. At first I'm ins here class, it's going to be no link and then the first item is going to be home. Once we click the first item, we should go back to the main page. I mean the index of HTML file. Let's take a look at the finished version. If I go any of the pages and then click Home, then we'll go back to the main page. I'm going to institute again, index HTML overall. We'll have six different list items. Therefore, I'm going to duplicate LI element five times, then change the items. The second item is going to be clients. We need to change the name of the HTML file. Actually, those files are not created yet. We will take care of them in the coming sections. In this case, I'm just specifying the names of the HTML files. We'll create them later. Okay, the third item is going to be products. Change the HTML file, we need to hear products next. We'll have contact, then I'm going to insite your accounts. Finally, we need to hear pricing. As I said, it's going to be button and not the link. I'm going to change the class name we need here now, PTN. Also change the name of the HL file. It's going to be pricing the HTML. All right. I think that's it about the HTML markup. Let's take a look at the projects. As you can see, the navigation items and also the logo are placed behind the background. And also the layout of the backgrounds are changed slightly. We need to take care of them and fix those problems. Let's go ahead and move on to the next lecture. 9. Designing the Logo of the Website: All right, in the last lecture we have created the HDMl markup for the navigation bar of our project. And now it's time to style this element. In this lecture, we're going to be styling the logo. Let's go back to the CSS file and start to write the CSS code. We need to add here new comments for the navigation. I'm going to select nav elements, which has class name. No, first of all, I'm going to define its position. It's going to be fixed. Also, we need to define the top and left properties. Both of them is going to be zero right now, nothing is changed here. As you can see, the elements of the navigation are placed behind the background and we have to fix that. In order to fix that problem, we need to use z index property and I'm going to assign to it a higher value. Let's say ten. Now as you can see, elements are no longer placed behind the background. Next I'm going to set width and height of the navigation that's defined with, it's going to be 100% As for the height, I'm going to set it to 12 Ram. Also, I'm going to add here a temporary background color in order to see better where the navbar is position. Let's set color. Let's say light gray. It's going to be CC Here we have our nap. It's placed at the top side of the web page. Next, I'm going to create some space using padding. The padding on top and bottom is going to be zero. As for the left hand right sides, I'm going to set it to 15 rapid. As you can see, we have here some space on the left hand right sides. Next, I'm going to use flex box in order to align the elements. As you know now, part consists of two different parts. We have logo and the navigation items. We need to place both elements in a row horizontally on the left and right sides. For that, we need to use Display Flex. As you can see, the logo and the navigation items are placed side by side. In order to place them on the left and right sides, I'm going to use justify content with the value space between. Now, as you can see, the logo is placed on the left side. As for the navigation items, they are placed on the right side of the No. Okay. Next I'm going to place items, I mean, the elements of the nav bar in the center vertically. And for that I'm going to use another property of CSS, Flexbox, and it's called Align Items. And I'm going to set it to center. Now the elements are placed in the center vertically. All right, that's it about the now bar right Now. Next I'm going to take care of the logo. We need to insitu new comments for the logo. Then I'm going to select Developments which has the class name logo. Again, I'm going to use Flex books to align the elements. Let's set display to flex. In this case, I'm going to place the items vertically on top of each other. For that, we have to change the direction of flex book and it's going to be column. Now as you can see, the elements are placed vertically. Next I'm going to select the first span element in the logo. I mean this one. For that we need here logo. Then span elements. Now we have to use one of the pseudo classes called nth child selector. Here we have to specify the number. As I said, we need to select the first span element. Therefore, I'm going to sit you one. First of all, I'm going to change the phone family. Let's use here phone called the moles. Also, let's increase the phone size. I'm going to set it to three Ram. Let's take a look here we have the first span elements. Let's change the font weight. I'm going to make it bold. Let's transform text into upper case and change the color. I'm going to use white color. Here we have the first span element of the logo. Actually, let's go ahead and get rid of this temporary background. I think we no longer need it now. The logo looks much better. Next, I'm going to select the span element which is placed inside the first pane element, this one the text create. For that we need logo followed by the span element with chart selector first. And then again we need span element. Let's change the phone size. It's going to be 1.8 Ram. The size of this part, this pan element, is changed now the text becomes smaller. We have to move the element up like the text here. For that, I'm going to use transform. With translate y function, it moves the element according to y axis. I mean it moves element vertically. In order to move the element upwards, we need to use negative value. In this case it's going to be 0.8 As you can see, the element hasn't moved up. The problem is that Spanelon is an inline element. And once you have the inline element, then transform property is not applied. So we need to transform elements from in line to inline block in order to apply transform property. Now, the problem should be fixed. All right, as you can see, the element is placed up and the transform property works fine. Next I'm going to select the second span element. I mean this one templates actually let's copy this selector from here. And change the ni selector. We need two. Let's change the font family. It's going to be croson one Cosi. Then we need font size, it's going to be 1.5 Rams. I'm going to change the color. Let's add it to DDT, which is a light gray color. Here we have the second spanlement. Next, I'm going to create some space between the letters using letter spacing, and it's going to be 0.1 Ram. Also, I'm going to place the elements on the right side. And for that let's use line property with the value, right, the text is placed on the right side. But actually that's not what we need here. If we take a look at the finished version, you see that the second spin element is placed nicely on the right side. We have to move it slightly to the right side and also upwards again, I'm going to use transform property. We need here to translate function as the values I'm going to pass here to. 0.2 Ram, also line here, minus one Ram. The first value, 2.2 Ram, moves the element to the right horizontally by 22 pixels. As for the second value, minus one Ram, it moves the element up vertically by ten pixels. The negative sign in the case the direction, is upwards. As for the positive values, they would move it downwards. Now we have the same problem here. Let's assign display inline block to the second element as well. Now as you can see, the problem is fixed. We have here nice and cool results. Finally, I want to add a little shadow effect to the logo. I mean the span elements. Let's go ahead and select all the span elements in the logo text shadow property with the values 0.5 Ram, one Ram. Then the color is going to be RGBA, black color with lower opacity, and it's going to be 0.2 All right, so here we have the logo. It looks pretty nice with the logo. We are done now, it's time to move on and customize the navigation items. Let's go ahead and do that in the next lecture. 10. Styling Navigation Items: All right, in the last lecture we have designed the logo of the website. Now it's time to move on and continue styling the navigation bar. In this lecture, I'm going to style the navigation items. Let's go to the VS code. First of all, before we start to style the navigation items, I want to move the navigation up. I mean outside of the header. Let's cut the code from here and paste it here. Okay, after the logo, I'm going to ser new comments for navigation items. Then I'm going to select UL element which has the class name Now items. First of all, I'm going to define the width. It's going to be 50% Then I'm going to place the navigation items side by side, horizontally in a row. Because right now they are placed vertically. In order to do that, I'm going to use Flex box. We need Display Flex. Now if we check the results, you will see that the items are placed horizontally in a row. Next, I'm going to create some space between the items and for that I'm going to use one of the flex box properties called justify content. And I'm going to assign to it value called space even. It will create even space between the items. All right, after that, let's go ahead and select the LI elements which has class name of item. I'm going to get rid of the default bullets for that. Let's use list style and assigned to it value none. As you can see, the bullets are gone. Next I'm going to select the link elements we need here. No link. Let's increase the phone size. I'm going to make it to Ram, then I'm going to transform text into upper case. Actually we need here text transform and the value appl case. And also change the color. The color is going to be white. Let's check the result. As you can see, the navigation items look pretty nice. Next, I'm going to create some space between the letters. Let's make it 0.1 Ram. After that, I'm going to add a little shadow effect to the link elements using tech shadow. The values will be 0.5 gram one Ram. And the RGBA black color with the opacity 0.2 All right, so I think the knob items look pretty nice. Now we have to take care of the last item which is going to be the button, I mean the pricing button. Let's go ahead and select this element using class name now, PTN. Let's define within height. I'm going to set width to 13 Ram. As for the height, I'm going to make it five Ram. Also change the background color. Let's set it to white. As you can see, the with heights are not applied to the elements and we have here the same problem. I mean the link element by default is an inline element and therefore within heights are not applied to the element, we have to change it. In this case I'm going to use Display Flex because we will need other flex box properties as well. That's why I use here flax and not inline block or block. Now if I check the result, you will see that the within height are applied to the element going to place the content in the center of the box. And for that I'm going to use justify content with the value center. And also we need line items center, justify content center. Align the element in the center horizontally. As for the Line item center, it places the element in the center vertically. Now we have here the perfect centering. Actually. Going to place link elements and also the bottom in the center vertically. For that, we can add here line items center and the problem will be fixed. Now the link elements and the button are placed nicely in the center. Let's move on and add here a couple of more styles. Next, I'm going to make the button rounded using for the radius, it's going to be form, now the button is rounded. Also, I'm going to add to the bottom little shadow effect using box shadow with values 01 Ram. Then we'll have here three Ram. The color is going to be RTP A with the opacity 0.1 We have here nice shadow effect. After that I'm going to take of the phone. Let's increase the phone size. It's going to be two rams. I'm going to use letter spacing. It's going to be a 0.1 Ram. Let's change the color. I'm going to use color F88 344. It's going to be an orange color like the knob items. I'm going to make the text upper case. Let's use Texans form upper case. All right, the knob items with the button look pretty nice. I'm going to add a hover effect to the button. Actually, I'm going to use the similar hover effect. Let's select knob PTN. With hover, we need to transform. Translate Y value is going to be -0.2 n. If I hover over the button, it will move up. But as you see, we need smooth transition. Use transition property we need here to transform. The duration of the effect is going to be 0.3 second. Now we have here nice and cool hover effect. All right, actually that's about the n items. Now we have to add to each navigation item the drop down menu, like it we have in the finished project. For that, let's go ahead and move on to the next lecture. 11. Creating the HTML Markup of the First Dropdown: All right, in the last lecture we have customized the navigation items and also the button. And now it's time to move on and start to create the drop down menu. I mean the drop down menu for the first navigation item. Let's take a look at the finished project. If I hover over the first navigation item, then the drop down menu will appear. As you can see, the first drop down menu consists of two main parts. We have the left side and also we have the right side. On the left side, we have the list of the features. As you can see, once we hover over the list items, little hover effect. The right side is more complex. We have here the phones icons with hover effect. Also, we have some textual elements with different colors. And down below you can see the buttom. All right, that's it. What we're going to create in this lecture. I'm going to create the HTML markup and then we will design the top town menu. All right, let's go to the VS code and start to create the HTML markup. We have to insert the comments right after the link element, inside the LI element. Let's insert your comments for the drop down menu. It's going to be the first drop down we need here, Drop down one. Then of drop down one, I'm going to open deep elements which will have two different classes. The first one is going to be a common class name, drop down. Besides that, we need here, drop down one. Next I'm going to insert here another deep element which is going to be the left side of the drop down we need here. Drop down one left. Also, let's create the right side. Let's duplicate this line of code and change the class name. We need you drop down one, right. All right, At first, let's take care of the left side. I'm going to insert here H, three heading elements with the text features. Then after heading, we need another development which is going to be the least, I mean the wrapper inside the development. I'm going to create another which is going to be the features item. So I'm going to add here class name, features item. Each list item will consist of two elements. The first one is going to be a phonosomicons. For the second one, we'll have here sanelement if we take a look at the finished project and check the left side. So as you can see we have the phonosomicons and also the panelement with some text. Let's insecure I elements with the classes FA solid A star and then instead here span element, the text is going to be all features. All right, overall we'll have 11 different list items. Therefore I'm going to duplicate feature list item ten times. Then we have to change the class names of the phons and also the content of the span elements. The second elements is going to be a solid, A boxes stacked. As for this fan element, it's going to be 100 plus elements. Then the third phonosomicon is going to be a solid, A file. As for this fan element, I'm going to insert 1,000 plus layouts. The next phonosomicon will be a solid, a pen nib. Also, we need to change this panelment. I'm going to insert your no code design. Then after that the phones micon is going to be a solid wrench. As for this panelment, I'm going to insert your theme builder. Then the next icon is going to be a solid, a car shopping. As we need to change this panelment which is going to be E Commerce. Then we will have a network wired also change this panelments. We'll have here workflow. Then the next one is going to be a solid, a light bulb. As for this panelment, let's insert here marketing. Next we will have here a phase solid Code developers. The next icon is going to be a solid desktop. As for this panelmentI'm going to insert side examples. Finally, we need here last icon which solids the spanelme