How To Make a Website from Scratch with HTML and CSS

There are now dozens of software that can help you create websites without necessarily knowing how to code with HTML and CSS. But knowing how to code with HTML and CSS will save you a lot of time and effort to get the specific design you want and it would be easier for you to update and maintain the site when the need arises. You'll be able to set specifications for the various components of your website with CSS and enable you to control the appearance, behavior and functions with HTML.

Tools you'll need to code with HTML and CSS. All the tools you need are already in your computer. You'll need a browser to view your website, and a simple text editor like the notepad where you will write codes on.

1. Learn basic HTML. HTML or Hyper Text Markup Language is the foundation of all websites. HTML has evolved through the years to what is known now as XHTML or extended HTML, which is a standard set of codes that was created so the website can be seen by all user agents that access the Internet, like web browsers, mobile phones, or email clients.

HTML is made up of elements and tags. Elements define the structure of your website and are responsible for how your website looks. It is represented by beginning and ending tags such as <h1></h1>, which is a type of a heading element. Any text that goes in between the beginning <h1> and ending </h1> tag will be treated as a heading, which will be visible to us on the website with a slightly larger and bolder text.

The basic HTML structure will look like this on your notepad:







Wherein the <html> and </html> tags will wrap the entire html codes or elements within it. The <head> and </head> tags will contain the title, CSS, java script and the Meta tags that will describe what your website is about. The <body> and </body> tags will contain all the elements, attributes, tags and contents that will create your website. You'll find a lot of good books and tutorial sites that will have all the types of elements, attributes and tags to help you structure and create your website.

2. Learn to apply CSS. CSS or Cascading Style Sheets is more of a style language and it formats the layout of the HTML documents. CSS gives you more layout opportunities and precise control over the layout. You can layout several documents with a single style sheet. Think of CSS as a list of instructions for how all your pages will look, setting factors like the background color, font type, font color, font size, margins, or page width. You no longer have to set these factors every time you introduce another page to your website. The CSS document is linked by the HTML document with a link code in the <head></head> tag within the HTML document.

You'll find all the elements, attributes, and tags for your HTML and CSS documents in books or online websites. HTML and CSS will give you full control over design and style to enable you to create and achieve the type of website you want.


Share this article!

Follow us!

Find more helpful articles: