Steps To Designing A Website

Hello great minds, I wanna show simple steps to designing a website.
Now grab your PC,boot it and lets get started.
What is a website?

A website is a set of related web pages located under a domain name.

Web pages or files can be created using web languages like HTML, Php, CSS, Javascript, Node.js etc.
At this point we will start with HTML

HTML = Hypertext Markup Language

We are going to design a simple web page using HTML.

(Hope your PC is on)
Launch this software "Notepad"
Now Notepad is a text editor, it is available on all window operating systems.

Now HTML is like using a word processor like Microsoft sword

HTML gives the content structure, example: paragraphs, headings, images etc.

Before we create our first web page, let's look at the elements of HTML.

We have <h1> to <h6>, <em>, <div>, <a>, <span>, <strong>, <p>

As we proceed with HTML sessions, you'll get to understand all the elements.

Before proceeding, lemme show some features of coding.

There is what is called opening and closing tag

This is opening <>
This is closing </>

Now, on your Notepad, open a tag <>

In between the tag type DOCTYPE ="HTML"
Like this
<DOCTYPE ="HTML">

Press Enter

(Now we have open a tag and we have to close it).

Press Enter 4 times

Type

Save the file as test.html
When you save don't close the Notepad, minimize it instead.

Open the file you saved

It should be blank
And it should open in a browser.

Now back to the Notepad

Inbetween the opened tag and closed tag, we are going to open another Tag just like this

<DOCTYPE ="HTML">
<title>    



</HTML>

Where you have

```
<title>  
```

type this

```
<title> My first web page</title>    
```

Press Enter

(Title is used in giving the name of the web page).

Type

```
<body>    
```

Press Enter 3 times
Then Type

```
</body>    
```

Now inbetween the opened and closed body tag, type

```
<h1>    
```

Like this

<body>    

<h1>    

</body>

Complete the

```
<h1>    
```

tag
Like this:

<h1> I love my first web page </h1>

Now save the file exactly like you did before (test.html)

Open the saved file (remember not to close the Notepad, minimize instead).

I love my first web page is what should show on your browser.

Now h1 shows how big you want your write up to be.

Now back to Notepad

Go to

```
<h1>    
```

copy the whole line with the closing tag
Press Enter and paste 5times

Make it like this

<h2> I love my first web page </h2>    
<h3> I love my first web page </h3>    
<h4> I love my first web page </h4>

And so on till h6

Save the file

Now open the saved file
Note: you must not see any open tag or closed tag. If you see any script/code it means error

Now that's the Heading, so when designing a website, you can choose any heading you want that is either h1 to h6

Now delete all other h1 tags except h2, I want to use h2 heading

Now under h2 tag

Type

<p>This is my first time of designing a website through Notepad </p>

Now on this code,

```
<p>    
```

means paragraph

Save and open

What you will is

```
I love my first web page
```

This is my first time of designing a website through Notepad

Let's stop here for now, to be continued next time...

Thank you for always visiting my blog
💖💖💖💖💖

Sort:

Trending

[-]

clairestern (25) 3 years ago (edited)

Thanks for sharing! I think it'll be very useful for novice developers. I'm learning web design, and I'd be very grateful for any advice and such detailed instructions on this. Recently, when designing photos and layouts, I ran into the problem of choosing effects. And this source helped me solve this https://masterbundles.com/best-film-dust-textures/ I chose film dust textures and was pleased with the result. This classic theme made an awesome effect on my works.

$0.00