Create A Simple Modern Homepage Using HTML, CSS & JavaScript | Godson Thomas | Skillshare

Create A Simple Modern Homepage Using HTML, CSS & JavaScript

Godson Thomas, Full Stack Web Developer

Create A Simple Modern Homepage Using HTML, CSS & JavaScript

Godson Thomas, Full Stack Web Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (27m)
    • 1. Intro To The Class

    • 2. Setting Up The Files

    • 3. Writing The Markup

    • 4. Styling The Page

    • 5. Adding JavaScript

    • 6. Thank You

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

Community Generated

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





About This Class

Hi, welcome to this class.

In this class, I will show you how to create a simple modern-looking homepage using HTML, CSS and some JavaScript. I will guide you step by step in this class.

Here is what we will design:


The pre-requisites for this class are:

  • Basic knowledge of HTML, CSS & JavaScript
  • Working internet connection

The benefits of taking this class:

  • You will have a homepage designed by the end of this class
  • Learn how to use Google Fonts and FontAwesome Icons
  • Source code for the homepage is available for download

I hope this class will help you become a better web designer. The design that we are creating in this class is pretty simplistic. A lot of modern websites have shifted to a simplistic design.

Thank you.

Meet Your Teacher

Teacher Profile Image

Godson Thomas

Full Stack Web Developer


Start this class

See full profile

Class Ratings

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

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

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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



1. Intro To The Class: Hi. Welcome to this class in this class. We're alone How to create this homepage over here so we can see that this is a simplistic design and a lot of websites have turned to a simplistic design. So let's see how to create this home page using estimates eases and some javascript. Here's the demo off our homepage. We have these social media icons over here. And if you hold over this, we can see we have this different effect over here where the size of the icon changes. And, ah, when the cover changes to White Onda, then we have this icon, our here for the menu. So when you click on this, you can see these menus pop up, and we also have this color changing when we hold over them, and when we click on it again, it goes back. So this is what we're gonna design in this class. I'm godson and I'll be your instructor throughout this class, So let's get started 2. Setting Up The Files: in this way, you will create all the necessary files we need for our project. So here I have a folder called I m G. And if I go inside that we can see that we have an image called Bijie and will use this image as the background off our homepage and will create the estimable CSS and JavaScript files. So first of all, let's open this project with V s code, which is the court editor that we're gonna use. So just right click over here and click on open with Years cold, and here we can see, our project has been opened with V s code. You cannot open folder envious code by just clicking on file and, uh, click on open folder. All right, so now we'll create a new file, and we'll name it index dot STM l Then we'll create another file and limit style dot CS is . And then one more file called main dodges. We can name these files. What are you like? But just remember that two unit to how the extensions estimate jails and seizes or are so we'll goto our index start estimate and envious called. We have a shortcut to ride at the basic estimate. Five. Boilerplate. So just type exclamation and then press tab, and they will get this estimate. Fire gold structure. Now just change the title does something you want. Now we link our Google phoned and the front or some icons that we're gonna use in our homepage. So let's go to our browser and just goto front awesome dot com and click on Start for free . And here you have toe type in your email I D. And you'll get a line off court and you have to copy that and paste it in your estimate file. And I will go to the Google Phones website. Just iPhone slowed google dot com and we'll source for the phones that we want. So we'll be using the phone called Roboto. So just type rubbled over here and just like on this icon toe, select the phone and click over here and then go to customize and we have this regular one selected. We also select the thing version right now. Just goto embed and copy this line off good, and we'll place that over here. Onda will also paste in the court that we got from front. Awesome. So this is my court. Over here, you'll get your own court and you can paste that over here. All right, so that's basically with this video. In the next year, we will write the markup off our homepage. 3. Writing The Markup: and I will start with the markup off our homepage. So here, first of all, we have the social media icons and will be using a now element for these three icons. And then we have two icons over here. One is this hamburger icon, and when we click on that, we get this close icon, and then we need to have one more now element for these nominees over here. And at last we will have a header element for this on will create an X one, No or else So let's go to our estimable and start with the markup. So first of all, we'll create another element. Now millions are usually written in another lists. So I will just create another list and in that will create a list item on duh. Then we'll create an ankle tag, and here you can type the Ural off your social media account. I'm just time pass for now. Now here will use a front awesome icon. Now, if you go to the front or some icon and click on icons over here, you can see a list off all the icons that we can use, So just type the name off the icon over here, so we'll just time Facebook. And here we have all the icons for Facebook. Let's just click on this one. And here's the court that we can use to have this icon. So just click on this to copy this and well paced it here in our ankle tag, and we'll open this with live server. So I have this extension called Life Server installed in via scored. So if you just type live server, you can see this extension over here. And if I click on this, this is an extension that I use a lot. So after installing the extension, all your to do is right. Click over here and click on Open with Life Server. Now, with this extension, you can see the result off your estimate file on the browser by just saving the file so you don't have to refresh your browser every time. All right, so now just duplicate this line off good. And, ah, here we will type Twitter. And here we will type instagram here. You can see the three icons. Now let's go ahead and create a division and we'll get a class off menu icon Onda in here we will have an icon and we'll give it a class off F S and f Aybar's. So here we can see the hamburger icon. I will create one more division for the clothes icon and he will have an icon with the class off F s and a few times right here we can see about the icons. Now let's right the market for the main menu. So let's create another element and will give the class off main menu. And he will have another list. Onda, we'll have some list items over here, and we also how ankle tags and I'll just type has over here and a human dive. Blawg. And we just duplicate this three more times. And Harold type contact and a human time about and testimonials. All right, so that's it with the main menu. Now let's go ahead and create the header element. So dive header and she will have to x once in the first s one. We will time the developer And in the 2nd 1 we will type musician. All right, so that's basically to the markup off our homepage. Willow selling car javascript file over here, So we just typescript SRC and she will type main daughters. So that's basically with our index dot html fine. In the next video, we'll start with the seizes. 4. Styling The Page: Now let's start styling the homepage. So first of all, we link our style or CSS file over here in our estimable file sold up link and stab Onda, then in the Aesir. If you will type style dot CS is right now they're linked our style Does CSS file. Now let's go to our stylus uses, and we'll start writing some styles over here. Now. The first thing that will do is we'll get rid of all the margin and padding for all the elements. So we'll have a universal selector and Harold type margin zero and batting zero. I will change the font family off. All the elements in the estimable toe robot does will die, performed family and he will die Roboto and sensitive now first of style, the now bar so he will give it a comment. Now bar So heroes Diab now And we said the position toe fixed so that even if you have any other sections below our main header, the number will still be there. So type position fixed and we'll also said the vid to 100%. Now I think we need toe style. The header first, so level do is the type header over here. Heroes die Pedder, and we'll set the height to 100. Report tight on without the display to flex. Now this play flex is actually a way for you to lay out or items on the webpage. So what type A line items So the center and we can see that are hitting is now vertically centered. Knowledge. Center it horizontally as well, so we'll dive, justify content and we'll set it so center. And we have this heading over here and then we have the other heading on the right. So for that we have to change the flex direction, So type flex Direction two column. I will also give a background image to our header, several job background and, uh, will top Ural, and he will give the part off our image. I am G slash digital jpg Onda here again see our image but also give fullback color. So if the image is not displayed for some reason, this color will be displayed instead. So time 163644 now is that the background size to color and we lose a position. The background toe, the center and We'll also select a background blend mode so I will have background blend more and there are different options Over here we will select Multiply Onda Here you can see we have this background being blended with this color. So if you change this color, for example, if he changes toe say red, we conceive you have this red overly for our image. All right, so that's it with the header. Now we will style the It's one inside our headers Oldham header. It's one and we'll give it a phone size off 37 pixels and will text transform it toe upper case and we'll also set the color of the text toe White will give a little bit off vertical margin tow rs ones, so he will type margin 10 pixels off top and bottom and zero for left and right now for the front gate, they will set it to 100 on will also give it a letter spacing off 16 pixels and when we give letter spacing, we can see when you select this, we have this margin at the right side. So to get rid of that, we have toe also add a margin right off minus 16 pixels. Right now, our text is centered. Now here to change the color off the first letter off our headings, so we'll type. Header. It's one Colin Colin first letter and will give the color off F FC 107 Now get back to styling the now bar. So now we'll style the US inside the night element. So for that, we will set the display to flex and justify content. So the center and we'll also give it a padding off 24 pixels, and I would love to get rid off these bullets over here. So we'll time list style so none or and I will give a margin toe thes list items so that now you will ally. So I will give a margin off, zero for top and bottom and 32 pixels for left. And right now just hired these two icons so that we can see these now. We're clearly so. He was just time menu icon Onda close icon, and we'll set it to display none. And we'll also hired this main menu from here. So if you go to our index dot estimates, sure, we have given a class off main menu toe this number, so he will also add main menu or a novel style. The ANC attacks inside the now so now you will ally A and well, said the color toe fight the F F F zero and will to the phone to size toe 28 pixels. And when we hover over this, we want to change the front size and also the color, so he will type. Now you will ally a hour and we'll see the color toe white, and we'll also said the phone size to 32 pixels. All right, so now then we hover over this. We can see we have the color changing on the phone size changing. Now we want to make it smooth. So what we'll do is we will add transition and cable type, phone size and for the phone size you want toe change it in 0.2 seconds, and for the color, we will change it in one second. So now if I hover over this, we can see we have this small transition or at my wood style, the menu icon and the clothes I console. We'll just move this down, and, uh, we would have some styles over here. We just give it a comment. Many icon and close icon Now, First of all, we want it to sit about everything else. So will give a said index off 100. And we'll also set the position toe fixed. And you said the right toe, 24 pixels and top toe 10 pixels now will change the color to white. And there we can see about our icons will give a phone signs off 26 pixels, and if you give it a background color off read, we can see how wide Onda tall it is. I will also give it a batting off four pixels. Right now. Let's get rid off the background color. Now, when we hover over these, we want to have a different cursor, so he will type cursor pointer. Now, when we hold over this, we have this. Different cars are over here. Onda. We'll also set the pointer events toe none, because initially we don't want both these icons to be clickable, so we'll just set the pointer events toe none, and we'll add a class called active toe, the main icon and the clothes icon. So when we add the class off active, we don't make some changes over here. So first of all, we have this stop position toe 10 pixels and when we add the active class, you want to change to 24 pixels. Onda. We want the pointer events to change to auto, and we'll also set the opacity to zero over here. And when we have the active class well said the opacity to one. Now we want everything to happen smoothly. So we'll add a transition and we'll add transition for all the properties and was at the time toe 0.5 seconds. Right now we'll go to our index start estimable, and here for the many icon, we will add a class called Active and later we're gonna add some JavaScript to add and remove these classes. But for now, we just add the class over here. So go toe style does CSS. And here we will type dot menu icon don't active. So you don't want to have a space in between because we want to access the elements with both the menu icon and the active classes. So for such elements, we want toe have the capacity toe one and the top 24 pixels and pointer events toe auto. So we will add the same stylings for the clothes icon. Not active as well. All right, so that's it with the icons. Now let's start with the main menu. So he will give a comment Main menu and remote This display? None for now, and we'll give it. Ah, height off 100 report height and a background color off 009688 Right now, well, style the US inside the main menu. So he will set the display to flex. And you said the height to 100% align items to the center and justify content to the center . And we'll also said the flex direction to call him out style. The list items. So Tab Main menu. You will ally and will give a margin off 24 pixels for top and bottom and zero for left and right. And then, for the ankle tax will dab main menu. You will ally a and we said the color toe white. You said the phone to size toe 30 to pick cells. We'll get rid of the underlying soil type text, decoration, toe none. And when we hover over this, we want to change the color. So type main menu. You will ally a whole hour and you said the collect Oh black. So here we can see the color is changing now for the ankle tanks. We don't want this smooth transition for the color. So what we'll do is we'll time transition and we'll set all to zero seconds Onda here we can see the color changes instantly now. Initially, we don't want to display this main menu. So what we'll do is we'll go to our main menu and here well, said the top toe 100 report height. So right now it's at the bottom of this page and will also give it of transition off all those 0.4 seconds now for the list items. What we'll do is, ah, we'll move down 100 pixels, and when we add the active class two main menu, we will bring it up. So, first of all, let's just comment this out so that we can see the result so he will type, transform and a human top. Translate why and we'll set it to 100 pixels, and we'll also set the opacity to zero, and we will give a transition off all to one second. All right, now we'll un comment this top 100 report height now, just like we did with our icons will goto our index dot estimates. And, uh, for the men. Many will add a class off active and we'll go toe style or seizes. And down here we'll target the element with main menu and active classes and was at the top 20 and will type main menu not active. You will ally. So when we have both these classes for the ally, we want to apply these styles. So will transform translated by, and we'll set it to zero. And we'll also said the capacity to one. All right, so that's it with the styling. Now let's go to our index start estimate and will remove these active classes from here. And we leave this active class over here because we want the many icon Toby active from the beginning. All right. Now, the next thing to do is add some JavaScript to add and remove these classes 5. Adding JavaScript: we have already linked our JavaScript file over here in our estimate. Now let's go to our main door chess file, and here we'll write some code toe, add and remove the classes. So, first of all, lose store all our references. So time CONST. Menu icon equals document dot very selector and a huge Time dog menu icon. So this will select the element with the class off many icon we're now Will Tab Const. Close icon equals document about very selector. Don't close icon now reference the main menu, so we'll have main menu document. Don't very selector dot main menu. Right now we will add uneven listener toe the menu icons. I will type menu icon dot and even listener for the click, and that will create an arrow function over here. So when you click on this menu icon, we want to remove the class active from many icon, and we want to add it toe the clothes icon so he will die. Menu icon dot class list dot removed, active, and we'll just duplicate it here and here. We will type ad for the clothes icon and will duplicate it once more, and here we will type main menu and we'll add the active class toe, the main menu as well. And we'll just copy this for the clothes icon. And we just replaced this menu icon with close icon. And when you click on the clothes, I can we want toe remove the active from the clothes icon, and we want to add it to the menu icon, and the active class from the main menu will be removed so he will type remove. So now let's test our homepage. So when you click on this menu icon, we can see the icon changes to close icon, and we have this main menu displayed over here. And when we don't disclose icon, we can see it goes back and we have this menu and come over here. Now the last thing we need to do is relevantly conscious menu icon. We can see these menu items are displayed over here, but we want to add a transition delay for each of these items. So the bloke comes first and then the contact and then about and then the testimonials. So we want to add a transition delay for each of these menu items. But We also want to add a different transition delays for each of these. So if you had a transition delay off 100 milliseconds toe the blawg, then for the contact we want to add a transition delay off 200 milliseconds and 300 for this and 400 for this. So we will use our script to add different transition delays toe different elements. So here, real time const menu items and a human type document dot very selector all because you want to select multiple items so he'll die. Main menu u l l I So all the allies inside our main many will be selected. Now we'll use for each loop toe add different transition delays. So real time menu items dot for each and in forage, we can have two arguments, so one is the name of each of the individual items. So for that, we will type item over here, and the next is the name of the index. So for the index will just give it a name. Off index and the hero create an Arab function and hey, will type item dot style dot transition delay on. We'll set it Equal toe Index which starts from zero and the increments by one times 100 and we can get in it. The units over here so milliseconds, or is that what we're doing over here is for each of the items inside the menu items that we accessed from here we are adding transition delay off index that starts from zero times 100 milliseconds. So for the first item, we will have a transgender layoff zero times 100 which is zero for the second item. We will have a transition delay off one times 100 which is 100. And for the third, I think we will have a transition delay off two times 100 which is 200 so on. So let's test it out. So when we look on this menu icon, we can see each of these have different transition delays. All right, that's basically with the homepage. I'll make the source code of this website available for you to download. That's it for this video. See you in the next one 6. Thank You: Thank you so much for watching this class. I hope that you will be able to use some of these techniques in your own website. I'm either to hear back from you, so please go ahead and, uh, submit your review for this class. And also follow me in school. Share where you'll be notified if I launched a new class. I also have a YouTube channel called Judy Coding where I teach representing so you can check that out as well. So that's all for this last. Thank you. And have a nice day.