Html and CSS - Make a Website Layout | Dev Gupta | Skillshare
Drawer
Search

Playback Speed


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

Html and CSS - Make a Website Layout

teacher avatar Dev Gupta, Front End Developer and 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 to the Course

      1:47

    • 2.

      Main Lecture

      20:35

  • --
  • 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.

158

Students

1

Project

About This Class

In this video series you will learn

  • How to create a website wireframe.
  • Coding the website template using HTML and CSS only.
  • Adding content to the template. 

This course will teach you the fundamental of web designing process by making a 2 column website  using only HTML and CSS. In this series i will cover the web designing workflow that can increase your productivity and reduce your development time.

When it comes to website development, many beginner face their first hurdle in deciding from where to start. I have answered this question in this series. After completing this series you will surpass this first hurdle and can build up your web development career to its fullest.

what you will learn in this series?

  • Using an online editor to write your HTML and CSS.
  • Creating the website wireframe using online resource for free.
  • Creating the markup of the website wireframe using HTML.
  • Styling your template using CSS.
  • Adding content to the template and styling it.

Meet Your Teacher

Teacher Profile Image

Dev Gupta

Front End Developer and Designer

Teacher

Hi Everyone, My name is Dev and i am Software engineer from India. I am active in various programming language and have a passion to learn new emerging technologies and update my knowledge as new things developed.Apart from all these, I love to play the Guitar (Classical) and Piano in my leisure time.

I have found out that by teaching you learn more and this has driven me to create online courses. I aspire to become a full time content creator and maybe some day with your support, i will become one. 

I love to share my knowledge and believe its my duty to give back to the society that has made me the person i am today. 

I know i am not perfect but someone has rightly said that "practice makes perfect". 

I hope that my courses will of ... See full profile

Level: Beginner

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 to the Course: welcome to this video series where you will learn how you can easily create your own website using just HTML and CSS. In this series, I've really making a simple website using only HTML and CSS. Not only you will learn how to make a website, but you will also learn the website. Designing workflow which I believe if you follow, will definitely increase your productivity in this city is really making this website, although it looks simple. But by building this, you will learn the fundamental and the Web designing workflow that are very crucial in web designing process. First, I will teach you to create a layout. This website is a two column website with a simple structure. Then I will use HTML and CSS to design this layout and after designing the layout, I will add content in it this way off, creating a website that is first you designed the load, either on paper or on any sort of like paint or Photoshopped and then bringing it to life using HTML and CSS and then adding content will make your development process so much easier and well organized. First, let me tell you, this course is not intended for a complete beginner who knows nothing about HTML and CSS. I assume you have a very basic understanding off HTML and CSS like, say, for example, you know what a header tags, paragraph tags, hotel target CSS I D and change the background color at Sitra. If you want to learn about the basics off HTML and CSS, you can goto the blue three schools website. They have some amazing will organize content, so that being said, let's start. 2. Main Lecture: First, let me show you the layout that I designed using the free online Victor Sort for which is also called Vector V E C P. R. Just search on Google and you will find this. It's an amazing program to make Victor art online. Here I have just used basic shapes toe build a slope. This layout is divided into different sections. This out of black box is the rapper which will hold all our elements inside the page, the hash or the pound Sign in front. Off this rapper means that I will declare this as an I d in my Dave. After this I have the head of section which will be a live with an idea header. And inside this I have the logo which will also be a live with an I D logo. Then I have this never bar. After this, I haven't another Div with an i d container which will hold our main content and this has to section left and right. The left section has a bit off around qualified person and the right section has a little now 73%. And at the bottom Here I have the footer with I d photo. So I hope the structure of this load is clear to you. Now that we have made a Leo, it's timeto quote it. So in this video series, I'll be using Corp in which is an online tool to write html, CSS and JavaScript. You can also use a text editor like sublime text or bracket More pack plus plus if you like to make this website. But here I will use Corp in which will be perfect for this tutorial. So let's start. Go to court, rendered Io and create a vehicle and then click here to make a new pin. This is the General Interferes Off Corp in this left part is divided into three sections for rating each demon CSS and JavaScript code. And in the right section you will see the output for this tutorial. I will not be requiring Js or JavaScript, so I will minimize it. No, we already let's create our html Marco first. First I will make a reparative right. Hash it up and breast stub Corbyn will automatically create the David Idea Rapper all our content will go inside this rapper So this is a black box that I have shown you in our design low. So inside this rapper, I'm going to create the Dave with the idea header. And then inside the hurdle, I will create a deal with the idea logo. I'm creating the lucrative inside the head additive. Since our logo is present inside the harder No after the head. Oh, I will create the knave bar and after it I will create the container. And if you see our design, I have to live inside this container, the left section and the late section. So I'm going to create these primitives inside this container and finally outside the container. I will create the photo section. So this is all we have to write for HTML markup. Now comes the fun part two style allowed. First, let's reset all tags by using a strict and then said the margin to zero and parting 20 and foreign family Ariel, if you write FF and press tab the court when will or completed, so give a foreign family off aerial. After this, I will target the rapper, So let me give a border off red color so that you can see all the elements which goes inside this rapper. Then I will target the header. Let's give it a bit off 100% and height off 100 pixels. See how a rapper has expanded to hold this header tive. Now let's change the background color for this. I will use a hex core value. You can have any color you like, but for this tutorial I have this website which provide heck scored So I will just click on this electron blue which will copy the X scored into the clipboard and now I can paste it here to get the background color. Let me remove this vit because by default it is 100% so I don't have to write it. Now let's select the local. I will give it a height off 50 pixel and ditto 100 pixel And let's give it a background color. G gone. Let me change the height. 200 pixels. It's stupid. So let's write 80 pixel. OK, this is good. Now let me give some parting toe a main rappel so as to create some space. Right? Biting 20 pixel. So this will apply 20 pixel padding on top, left bottom and right side off. This rapper birding means the inner space and margin means space outside. Now let's position our logo first. Let's increase the toe 200 pixels Now It's good here. I'm going to give it a position relative and she is the top 20 pixel or make it 10 pixels and left 20 pixel. So this will move the logo relative to the head of the Let me just over 2150 pixels. After this, let's add a number. Give it a heart off 70 pics of and they're grown color off this light three and give a margin Top off 10 picks in so that it does not stick with the harder after the nerve bar, I will target the container. So first I'll give it a green border to see whether the left and right section opposition correctly. Then I will target the left section. So here I'm going to give it a height off 400 pixels. See how Lacandona has expanded. Meaning are left section has been created inside the container. Now let's give it over. So I want this left section to occupy 25% off this container so I will write. Picked 25% and finally give it a background color. So I'll choose this greenish blue. See, our left section has occupied 25% off her spirit, which is the diff with I d container. Let's increase the height off this to 600 picture. Now it's good. Now I'm going to target the right section. So here I'll give a height off 600 pixel and a bit off 73%. I'm not giving it a victor off 75% because if I made it 75 person, then there will be no space in between the left and the right section. So to have the margin, I am making it 73%. And finally I will change the background color. But this duck mint leaf color. So there is a rate section. Don't worry, it is here at the bottom. So to have this side by side, we have to floor them. So first floor, the right section two right here you will notice that the section has come out offers container that is this green border. So this is because venue floored and element it comes out from the normal flow off the document. So the normal flow is from the top to bottom. So that's why this has moved up. To fix this, we have to clear the flute. But first, let's float our left section. Who left so right float left? No. You can see both our position correctly, but our outside its cantina, even the main rapper Container. So fix this. We have to clear the float for this level. Add a pseudo selector on the container. So right container and then to colon. And right after they're inside this right content Colin, double condition mark, display block and clear both. So this is a trick used to clear the floors and makes the element come to their normal floor. Normalcy are left and right section is within its parent, which is the davit idea container. So let's give some top margin to the container. Say margin. Top 10 pixels. No, finally, we will create the photo. So right found photo, give it the height off 100 fixer and lets it the background color to this American river. And I'd imagine top 10 pixels. Let me change the wit off the right section. 74%. But this look fine. So congrats, you have made your to colon website layout using HTML and CSS. So now it's time to add the content in a layout to make it a functioning that site. So first I'm going to add a text inside the locomotive. For this, I'm going to create its three header tag. And inside this I'm going to write company name. You can write anything. You No, Let's make this navigation bar first. I will create the navigation Manu inside the header and then I will create the navigation inside the knave bar. So first, let's create it inside the head of section. The most common way to create a navigation bar is to use a Norden list. So I will create an A nordeste. And inside this I will have list items which will contain a link. So right, you will then abated inside and press tab Court can will create the market for you. Then inside the list item right A and pressed up to make the link in the X Chef right pound . So if you click on this link, it will go nowhere. And then inside that a tag, right, the menu item name. So this is our Manu, but this does not look like a navigation menu. We have to add some CS is to make it look good. But first, let me position this X three element inside the lower so they hash logo. It's three and inside this right position absolute. Then I will give a top 20 pixel or say, 30 pixel. It's look right. So now let's work with Domino. First target, the U element and then floated to the right. After this, I'm going to target the Ally element and make the display in line, so this will place the item side by side. Let me give a top margin to the U Element First, right margin, top 30 pixel or let's say, 40 Dixon. Also, let's give a margin rate 40 pixels to create some space in the left side. Then I'm going to target the A type so right hash A. And inside this, I will write text decoration. None. This will remove the underlying Now let's give a color color fight and apply your pardoning off 20 pixel on all sides. So this is how we make our navigation menu? No, let's remove the background color off this header. I mean, wait, um, on auction because I have a white color to it. So change the color to black, and now it is wrong. I will also remove the background color off logo. Now I'm going to add some ho effect dwellings using the pseudo class over so right, header U l I a colon over And then inside this first, let me give a bottom border to see how it looks. It's kind of look good, but I will add border on all sides so removed bottom. No, it look good. So this is the naba inside the head of section. No. Let's create this menu in the nab our live for this. I am just going to cut this, um list and taste it inside the Nath Bharti. I have to make a little change in my CSS. So just remove the hash header and replace it with hash. Never because our ul element is now inside the nerve. Bardo. Then remove the margin top inside the hash value. Well, because I don't require the negative space which is pushing the menu up and then I'll give a margin top off 20 pixel. There should be space here, let me change the margin to 25. No, it's good. I know that we have a logo and navigation created. Let's add content in the left section. So inside the left section, I'm going to create its three tag with the text news, and then I will add a paragraph off dummy text. So just write P, then greater than sign and write. Load him and pressed Up Corp envelope automatically insert them. It takes for you. Let's copy and paste this one more time and change the H Street to work. So we have the content placed inside the left section. It's time to right some CS is first. I'm going to target the estate tax inside the left section, so I'll give a parting off 30 pixel and then centerline this text. Let's decrease the party in 20 pixel. Okay, now let's target the Peter right pound left section and p Here. Let's see how justify looks. So I text align. Justify now. It's not looking good. Change it to center. Okay, so I will give a margin bottom off 10 pixels or maybe four to fix it. So now let's change the background color off this left section to something which looks good here. I'm going to choose the color, which I have used for the never. So I have installed a Google chrome Extension politica. This is an awesome tool to pick color from any website, so click on this extension and now click on the option pick color from pitch and now just take your most over to the color that you want to choose. And when you see the color in this top square box, just click. The color will get copied to the clipboard. Now I'm going to just based this color in the left section background color property as simple as that. So let me add underline towards to tag to make it stand. Note a little bit Here for this tutorial purpose, I have added, are heading and some paragraph time. But you can also create aside menu if you wish. So next is the right section. So go inside the rate section, live and create a Jordan tang and right. Welcome to my website. Then I'm going to create a paragraph tag with some dummy text. Let's add one more better. So again I'm going to copy this entire twin p content and paste to have some more content. Let's change the H one toe suffered in Gaza. They're still space. So again I'm going to copy and paste one more thing and let's change. That's 12 more content now. I think I have enough content. You can add more if you like, but I'll stop here now. Let's add some. See ancestral to the H one and Pitak inside the right section. First, I'm going to target the H one tag. Let's try a margin left. 20 pixel. Oh, maybe 30 picks it. Let's just leave it for now. We will change this further after eating styling toe a paragraph. Next target, the paragraph type. Let me give it a text. The line Property center margin left off 30 picks him or maybe 10 picks him. So these paragraph looks very close to each other. So I'll add a margin bottom or 20 pixels to create some space for good. I think now I can change the H one style. Let's move it to the center by using the text Align center property. So now I don't need the margin, so remove this, but I'm going to add a margin bottom off 10 pixels so as to make more room in the bottom. Now it's time to change the background color. So I'm going to choose the critical again using the color picker tool and then test it in the right section. Background color. Okay, Our website now have some content now. I don't need these green borders, so remove the border. Let me add some margin top toe this H one tag. So margin talk 20 pixel. No, it's good. Finally, it's time to add content to a photo. I will add some very basic text inside a photo, so I'll use its four tag. And inside this I warned a copulate symbol for this u can write on percent copy and then I laid all right reserved than a pipe symbol and made by you. Now let's dial this text. Let me first aligned this to the center and then Al Gore parting off for 20 pixel or maybe 30 pixel No. 40 pixels. No, it's good. And finally, I'm going to change the background color off this water to the same gray color we have used for all our section. So finally are simple. Upside is ready, and we have made this using only HTML and CSS. So now that you have created your two column website, it's time to expand on the skills learned in this video cities. So try to make three column website or four columns. Just search on Google for three column or four columns. Ears is loud. You will get over every and from that boyfriend designed the layout for yourself and after the layout is made, then add the content. I can bet if you follow this principle that is first designed the Lord in paper or any graphic program and then implemented using the HTML and CSS and then add content, you will be able to bear any website one. So I hope you have learned something from my video series. And if you do, I request you to kindly review and a thumbs up. It helps me immensely and keeps him motivated to make more control. Thank you