Instructables
loading
loading
Picture of Web Designing Basics (HTML and CSS)
I am learning HTML and CSS and am soon going to get certified in it as well, and I thought that it would be a good idea to give out a tutorial on how to start designing your own website using HTML and a little bit of CSS...

HTML is an abbreviation for Hyper Text Markup Language.
CSS is an abbreviation for Cascading Style Sheets.

HTML is actually used to create the webpage and the content that it has, like the images and writing.
CSS is used to design the webpage and tell the writing and images to be in a certain place, like an image on the top of the page, another in the center etc...

"Anything on the internet can be modified, deleted or added just with the use of HTML and CSS! Even on instructables.com!"


The best thing is...

All you need is a computer!

So lets get started on our journey into web designing...





 
Remove these adsRemove these ads by Signing Up

Step 1: What is a website made of?

Picture of What is a website made of?
Untitled-3.jpg
Untitled-4.jpg
If you are surfing the web and find any website interesting and cool, and want to find out what and how it was made, or to find out what HTML coding they used, then all you need to do is,

  • Right click on any blank area on the webpage.

  • Click view page source

  • This will open up a new window or a tab according to your settings showing the HTML code that the website runs on.


NOTE : Some websites like instructables, google, youtube etc use a lot of Javascript in their coding, so don't get scared...after reading this instructable, you will be easily able to understand what HTML and CSS are and the fundamental tags.
1-40 of 56Next »
adnanj124 days ago

I can web design and code very well.. my weak point is only CSS sometimes I don't understand it.. Any tutorial for help would you suggest?

Web Design Dubai Company

AdnanJ24 days ago

Cool visual tutorials. Help me a lot in my academic web designing projects.

Dubai Web Design Company

DiyaA126 days ago

Well defined basic web design tutorial. What is the first step to take in web design please tell me?

UAE Web Design

AfraM126 days ago

How about an advanced web design where do I get tutorials from? Any help would be appreciated

Web Design Dubai Company Adwebstudio

In this post, very informative knowledge has been shared by vishalapr. Here, I want to suggest HTMLPanda (www.htmlpanda.com) for the best web and mobile app development services. They convert your PSD file into 100% hand coded HTML or HTML5 and CSS.

JohnM321 month ago

Thanks for nice post ! I am working in Minneapolis web design firm. It's really helpful to learn more about HTML and CSS. I also keep track some more posts about responsive design in your blog.

devox_io2 months ago

Great post if you want can found more on devox.io

vysystems3 months ago

Great post thanks for sharing

AnimeChuK4 months ago

OMG thank you,i've been such a n00b at thisXD

vysystems4 months ago

Very Useful guidelines for Beginners. Thx

MarinaEB5 months ago

Nice guidelines indeed, also I see you where interested in certificates so I would like to recommend you to check this out:

http://www.testdome.com/Certificates

These are free certificates for which you need to solve some online coding tests, something like these ones (which you can use for practice):

http://www.testdome.com/Programming-Tests/Html-Css/13

inodayC6 months ago

Nice post for learning web designing!! Get web design and web
development services at inoday

KarenG17 months ago

I am currently taking a class and trying to figure out how to do the HTML formatting, and I am very, very confused with the formatting of the text. Any help as far as websites or information would be greatly appreciated.

www1398 months ago

forgot the doctype...

www1398 months ago

upgrade to html5! Nice though.

ghost2541 year ago
I have two questions
1.Did you use notepad?
2.How did you view your text on a page without the code?
I'm new to HTML and CSS
Thank you for everything!
vishalapr (author)  ghost25410 months ago

Yes I used notepad and I took a screen shot of the text in the web browser and cropped out the rest.

Nice these basic steps are useful and helpful for website designing

vishalapr (author)  Mastercomputech10 months ago

Thanks!

Exotio11 months ago

Ensure you use Google Chrome, Safari or Firefox if you would like to find the "Inspect Element" tool, which allows you to highlight specific parts of the HTML and see which part of the website they correspond to.

k00bst3r1 year ago

This was very helpful - clear and effective. Thank you so much for all your time and effort

vishalapr (author)  k00bst3r1 year ago

Glad I could help, :D

msudhagar1 year ago
HTML is use for designing purpose, and JavaScript is use for doing validations as well as to perform some action.
vishalapr (author)  msudhagar1 year ago
lol, that is exactly what johnmacd said....
johnmacd1 year ago
HTML is use for designing purpose, and JavaScript is use for doing validations as well as to perform some action.
vishalapr (author)  johnmacd1 year ago
Yup
hi vishalapr im new in html
i have 2 questions.
1.how can i find my html on the web?
2.how can i make its name like =name.html
nice instructables
go here http://www.webs.com
vishalapr (author)  crazy lazy man1 year ago
Once you have coded the whole website, you will need to host it for it to be online and for others to see it. You can either do this by setting up your own server(Not really recommended) or you can buy a server slot from others or buy a domain online,

These sites provide web hosting but they charge you;
http://www.ipage.com/ipage/index.html
http://www.justhost.com/

there you can name it with the domain name, to make it the name of your website.

By name,html do you mean like how to save the file that way or once its online the name that you type in like www.instructables.com? if thats what you mean then using the above websites you can name it.

Thx :) glad you liked the ible
Not meant to offend but maybe you could use a doctype?
Doctypes are a form of metatags that tell your browser which version HTML you wrote in your webpage. There are subtle differences for each version so it matters quite a lot which one you use.

You can find all the info on w3schools,
btw, you can also apply a HTML5 doctype to #1 of your html page to make the page HTML5 instead of 4.01
vishalapr (author)  BillieBobbel2 years ago
Yeah doctypes are quite useful and should be added, and yes W3Schools is an awesome website, I did learn a lot for that website.
Nove-Noga2 years ago
Thanks a Bunch. I have started my own site www.Nove-Noga.com based on my study of w3schools available info. You managed to clearly present much of their content in a very clear, concise format. REALLY appreciated your discussion of IDs and CLASSes. Please forgive my site. I only started using the style sheet a couple of days ago.
Thanks, Nove-Noga
vishalapr (author)  Nove-Noga2 years ago
That's a nice website you have got there :)
Glad I was able to help,
EsDorlion2 years ago
Thanks for the informations. If you have incerrect coding in a web site you cannot have a good position in search engines. Also SEO is very important for a website. i am also amking web sites Eskisehir web tasarim
Thanks
vishalapr (author)  EsDorlion2 years ago
welcome.....I agree.....
gomas2113 years ago
html 5?
vishalapr (author) 3 years ago
You can use HTML code to make your comments on other instructables cooler, and more noticable, like

THIS FONT IS BIG AND IN RED COLOR

ABBR
The_Warlock3 years ago
Cool. To the point.
vishalapr (author)  The_Warlock3 years ago
Thx
______3 years ago
I started learning HTML at 10, built my own functioning website at 11, now I am 13 and learning HTML5 as soon as you learn the basics this gets easier and easier. I also build and sell professional looking websites for my friends, and people in my area, I am friend with the chairman of my town and he let me remodel the website, my point is get good, get certified, get a name for yourself, then keep getting better. It's a good business.
1-40 of 56Next »