BUILD A WEBSITE USING HTML AND CSS
BUILD A WEBSITE USING HTML AND CSS
In this article, we show you all the steps to get from a blank screen to a working website that is optimized and good-looking at the same time.
So first, we need to know what is HTML and Css?
- HTML (Hypertext Markup Language) defines the structure and contents of a web page – where things go, how they are laid out, and what’s on the page.
- CSS (Cascading Style Sheets) defines the styling/ presentation of a web page and the elements on it.
The two works together to make up the final web page, its design, and the content that’s on it.
Now follow these steps:
1. Learn the Basics of HTML
The main element of an HTML structure is an HTML tag.
A tag, for example, looks like this:
<a href="https://websitesetup.org/">This is a link to my homepage</a>
Hyperlinks are defined with the HTML <a> tag:
The href attribute specifies the destination address of the link.
2. Understand HTML Document Structure
Here’s the simplest HTML document structure:
1. <!doctype html>
2. <html lang="en">
3. <head>
4. <meta charset="utf-8">
5. <title>World!</title>
6. </head>
7. <body>
8. <h1>Hello World!</h1>
9. <p>My First Web Page</p>
10. </body>
11. </html>
Let’s explain the individual parts of this code:
- The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly. It must only appear once, at the top of the page, before any HTML tags.
- The <html lang="en">declaration says what’s to come next is an HTML document written in English.
- The <head> element contains meta information about the document.
- The <title> element specifies a title for the document.
- The <body> element contains the visible page content.
- The <h1> element defines a large heading
- The <p> element defines a paragraph
3. Get to Know CSS Selectors
Just like HTML has its tags, CSS has selectors.
Selectors describe how a given element should behave appearance-wise. Here’s an example of a CSS selector:
- p {
- font-size: 18px;
- }
This selector indicates that all HTML <p> tags within the document will have a font size of 18px.
With the “normal-text” class defined, we can now assign that class to those specific HTML tags that we want to make 18px in size.
For example:
<p class="normal-text">This text is going to be 18px.</p>
Let’s just explain all the elements of that piece of CSS code above:
- .normal-text – class definition; everything after the name of the class and between the opening and closing brackets {} defines what the elements assigned to this class will look like
- font-size – an example CSS property
- 18px – a value assigned to the property
4. Put Together a CSS Stylesheet
The way you put a CSS stylesheet together is by defining each class one by one, and then testing if the outcome in your page design is what you wanted.
We’ll make things easier for you, by take a living organism and dissect its elements.
This is where a thing called Bootstrap comes into play.
5. Download/Install Bootstrap
Bootstrap takes care of the basic structure of an HTML document and CSS stylesheet for you. It delivers a framework that makes sure that the main scaffolding of your web page is ready and optimized for further development.
There are two paths you can take:
- Option (a): go to the Bootstrap homepage, download the main Bootstrap package and start building on top of it.
- Option (b): take a shortcut – get a starter pack for Bootstrap with a good-looking design and a demo web page already built.
We’re going to go with Option (b) for this article. We’re doing this for a couple of reasons, chief of them:
- Starting with a ready-made structure saves a lot of pain in trying to figure out the basic necessities of an HTML document. This lets you focus on the interesting stuff – like laying out content and making it look good.
- In short, learning things this way will give you a better-looking result quicker, which we guess is what you want.
6. Pick a Design
When you’re creating a website with HTML and CSS, you are free to use any Bootstrap template you like. They should all work similarly enough.
7. Customize Your Website With HTML and CSS
Let’s work on the homepage of the design first. This is going to show us how to replace the graphics, texts, and tune everything up in general.
Let’s have a more in-depth look into it here.
When you open the index.html file of your Bootstrap site, you’ll see a head section like this
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Creative - Start Bootstrap Theme</title>
<!-- Theme CSS - Includes Bootstrap -->
<link href="css/creative.min.css" rel="stylesheet">
</head>
8. Add Content and Images
Let’s work on adding our own content to the page.
1. Change the Title
<title>My HTML Site</title>
2. Customize the Hero Section
The hero section is what we call the block. It would be cool to have our own content inside of it. To modify the block, go back to your index.html file and change the content.
3. Customize the Other Blocks on the Page
As you go through the index.html file, you’ll notice that there’s a lot of different sections already on the page.
We have a section for the navigation, and about a block, some services, a portfolio, a call to action, a contact block, and a footer.
While there’s different content in all these sections, the sections themselves are similar in structure. They all have roughly the same set of HTML tags – just different CSS classes assigned to them.
The best way to modify the page to fit your needs is to go through the blocks one by one and experiment by changing things around.
9. Fine-Tune Colors and Fonts
Changing colors or fonts is very easy to do in HTML and CSS. The simplest thing you can do is assign some in-line styling to an HTML tag.
For example:
<p style="color: #FF0000;">Red text</p>
In HTML, colors are represented by their hex values like “#FF0000” is red. There would be a table for all other standard colors.
A better way to assign colors is to do it via the CSS stylesheet.
For example, to get the same effect as the code above, we could put this in our CSS stylesheet:
- p.red {
- color: #FF0000;
- }
And then use the following piece of HTML code in the main document:
<p class="red">Red text</p>
This second method is basically how things are done in Bootstrap.
To change the color of any text on the page, first find the tag responsible for styling that text, and then go into the stylesheet and modify the corresponding class, or create a new class.
10. Create Additional Pages
Now that you have the homepage customized, it’s time to start working on some additional pages and then link them to the homepage.
When creating a website with HTML and CSS, you can build any number of sub-pages and then link them all together.
Here are some of the common pages that most websites need:
- about page
- contact
- portfolio
- products/services
- team
- policies (privacy policy, terms, etc.)
Follow the steps:
1. Start With the Layout
When building a new web page, the first decision you have to make is what you want the layout to be.
2. Build a New Page
The easiest way to start working on a new page is to duplicate an existing page and use it as a template.
Example: Create a copy of the index.html file and rename it about.html.
3. Link to the New Page
With the new page done, let’s now link it from the homepage (the index.html file). Naturally, the best place to add this link is in the navigation menu
