Skip to main content
Loading Explore guides…
Create a Website with HTML & CSS · Acedra
Home
Explore
Computer Science
Create a Website with HTML & CSS
Sign in to save
Chat
If YouTube asks you to sign in, open the video on YouTube.
Watch on YouTube
Reload player
Transcript
52 segments
Copy
Hide video
0:02
hi guys today in this video we will be learning how to create a website using html and css only these kinds of website can be used for your business purpose for your personal purpose and also can be used as a college project i have used a very simple html tags and css styling in this video so that everyone can understand including beginners very easily ok i have a folder named a website and a background image open a vs code
0:39
and select a folder which you have created and create a file name index.html and dial dot css
0:56
okay and delete this we don't need it and i would name my website webpage design and link this webpage with style.css okay inside the body we create a div dot main and inside the class main we create another div that is dot nav bar and inside the navigation bar we create dot icon which is for our logo
1:33
class logo and name pra are z okay let's see in our browser okay here we have our logo now we go to style.css put a margin of zero in padding also zero we go to our class main with 100 background linear gradient
2:11
making our background image 50 dimmer
2:18
connecting with url one 1.jpg background position of center and background size cover and height of 100 views we go back to our website and see it looks good now let's go back to next class nav bar width of 1200 pixel height of 75 pixel margin auto okay go to next dot icon width of 200 pixel float left height 70 pixel and go to dot logo and we'll keep color like orange color let's see in website yeah okay looks good now font size of 35 pixel on family area padding left 20 pixel
3:37
float left and padding top 10 pixel okay now we go back to index and create another div that is for menu that is div dot menu and create unordered list inside another list we create a list and anchor tag then we copy this paste and type a home about service design and a contact now let's go back to our website okay here we have our menu go back to style.css dot menu okay here we have width of 400 pixel and float left and height of 70 pixel okay it looks good okay now we go to another list
4:51
upload lift display flex and justify content center and align item also center okay let's go to our webpage and here we have okay now we go to another list inside list and we have list type none and margin left 62 pixel margin top 27 pixel and font size 14 pixel okay now it looks more good okay now we go to another list list anchor tab
5:35
which is text decoration color white okay
5:45
and our font family ariel and font weight bold
5:57
we have transition of 0.4 s is in out okay now we will put a hover effect in our menu color and orange okay here we have our hover effect on our menu bar
6:25
now let's get back to our index and create another dip that is for search bar we put input that is for search and name placeholder type to text
6:46
and class src h okay anchor tab button inside button we put a class that is btn and another search okay here we have our search bar let's get back to our style.css in class search we have width of 330 pixel float left margin left 27 0 pixel okay and dot srcs font family of times new roman width of 200 pixel height of 40 pixel and background transparent okay it looks good now we have our border one pixel solid orange and mars in top of 13 pixel okay a color of white and border right now
8:19
font size 16 pixel float lift padding of 10 pixel and border bottom 5 pixel and border top border top left radius 5 pixel okay
8:45
next dot btn width of 100 pixel height of 40 pixel background orange and border 2 pixel solid orange mars in top 13 pixel color white font size 15 pixel and border border top left bottom right 5 pixel and bottom also 5 pixel now we go to that btn focus outline none and also dot srcx focus outline none okay here we have error let's see okay here is 100 pixel not 100 okay here is our search box let's get back to index.html and create another div that is our description deep dot content s1 tag
10:17
web design and br for break and spend development
10:28
break and course okay here is our
10:38
here is p tag class or paragraph type luring it some paragraph you break there and in break over here okay here is our description short description about our website and um we have a button request that is for contact and let's say and join us if you're interested okay here is our join us link okay now we get back to our dot content with 100 pixel height of auto margin also auto color would be white poisson relative okay we get to that content dot paragraph padding left would be 20 pixel
11:59
padding bottom 25 pixel one family area letter spacing will be 1.2 pixel and line height would be 30 pixel okay it looks good now we go to dot content x1 tag yeah one family of times new roman font size of 50 pixel padding left would be like 50 pixel no uh 20 pixel and margin top 9 percent uh letter spacing 2 pixel okay more better and then we will add that content for that contact that is of join us with 160 pixel height of 40 pixel and background orange border none here is our
13:20
link join us and we put now margin bottom of 10 pixel
13:31
margin left of 20 pixel okay now font size 18 pixel border radius of 10 pixel and cursor point pointer okay now it looks good now we need to remove that underline so we go to next class content dot cn e and we'll text decoration none okay now color put a color of black
14:13
and transition will be 0.3 is
14:19
i will put a hover effect in over there background would be white okay now put a transition time
14:41
a point four hours is okay now it looks more good
14:52
now content dot content for a span that is inside deb for development we put orange color and font size
15:05
of 60 60 pixel okay now we get back to index.html and create another div that is for our login box this is div dot form and h2 tag login here and put an input type email name email
15:39
and placeholder enter email here and input for password type password and placeholder enter password here
15:59
then button class btnn anchor tag here login okay here we have our login box
16:16
now in view paragraph tag p class link i don't have an account and break anchor tag sign up here okay now again p tag class login a bit okay now we'll move it to right go back to style.css start from and now we would be 250 pixel height would be 380 pixel background linear gradient to top just like before
17:22
and then position would be absolute and top would be minus 20 pixel and left 870 pixel okay it looks more good now we will add our border radius of 10 pixel and padding 25 pixel okay more good then h2 tag width of 220 pixel uh font sciphon family sans serif
18:06
text online center okay
18:12
and color would be orange font size 22 pixel background color white and border border radius would be 10 pixel margin 2 pixel padding 8 pixel
18:45
okay now for dot from input i will be width of 240 pixel and a height of 35 pixel and background transparent okay now um we'll have border bottom one pixel solid orange and border top none border right also none and border left also none and we'll have our color white okay it looks more good and font size are 15 pixel and letter spacing would be one pixel and mirror is in top 30 pixel font font size on font family would be sensitive
19:59
okay
20:04
okay now we'll have dirt form input focus and outline none and for the placeholder we'll have a color white and one family of ariel okay it is more brightening and darker now
20:38
okay now we go
20:46
and i have made a mistake dot p t n n that is
20:56
width of 240 pixel and a height of 40 pixel and background will be orange okay here is our login box and then we'll keep our border none margin top would be 30 pixel font size would be 18 pixel
21:28
and border radius would be 10 pixel okay it looks more good
21:40
and cursor would be pointer color white
21:55
now we will put a hover and background would be white and color would be orange okay now remove a text declaration remove that line with the text decoration let me tnn a text decoration none and color black okay and a font weight would be bold okay now it looks more good
22:48
now for form dot link you keep fun family area and font size of 17 pixel padding top would be 20 pixel and text online would be center okay
23:07
we'll have dirt form dot link anchor tag link anchor tie and have text decoration of none and color orange okay
23:31
now i have a login with um padding top of 15 pixel and padding button 10 pixel and text online would be center okay now this sign up here is not working um wait
23:53
okay my paragraph tag is up uh keep it down now it will work okay we just want a sign up to be highlight so put closing anchor tag over there okay it looks more good
24:17
okay now we put our script source
24:22
click in the link which is in the description and copy the url copy the url and paste it inside the quotation mark okay now we will create another dip that is for our icon
24:45
um anchor tag uh iron icon name equals to logo facebook okay here we have our logo on facebook and copy similarly we put instagram login with twitter google and skype okay here we have our five logo and icons okay that icons a text decoration none color would be white
25:32
okay here is our white color icons and that icon iron icon we put color white right and then font size of 30 pixel and padding left would be 14 pixel and padding top would be five pixel okay it looks more good now we'll putting a hover effect in that icon
26:13
um over okay color would be orange
26:22
wait it is not working maybe i okay icons that is class icons not icon okay it looks more good i will put a transition of point three s is okay now it looks more good so we have finished making our website so thanks for watching guys do like and subscribe my channel if you have any question regarding my video do comment below and let me know so thanks for watching again see you soon bye bye
27:17
you
Here to help you learn
Sign in to keep a private conversation with your course tutor.
Ask me anything about the material…
Sign in to chat