code, html, digital

How to set up your static webpage?

This is an article for a complete beginner to coding, preferably a complete novice who wants to explore coding. Now, I know there are a lot of websites that will help you build a fully functional and responsive webpage. If you are serious about it and want things fast then this is probably not for you. But for those of you who are keen on how these websites are really created, strap on. We are up for a small ride.

I will guide you through how to set up your own page in a local computer and understand the small nuances of programming that are essential for you to build a base of web development and design.

First and foremost you need to have a idea about what kind of page you want to create; now its very important that you have a clear idea about what you want in your page, think simple, and don’t clutter up your page with loads of content. The best way is to take a pen and paper and design your layout.

software, internet, web design

Once you have a vision of the layout you want, the next most important thing is color. There are much better resources that can explain you about color and help you chose your own palette as compared to me. Here is one such page https://www.smashingmagazine.com/2010/02/color-theory-for-designer-part-3-creating-your-own-color-palettes/ . In order to pick the right color code [each color has a RGB value or a hexadecimal value associated with it which makes it unique] , you can use any of the color picker extensions available on Google Chrome. I’m adding a snap of the one I use.

Once all that is decided, we get to down n get our hands dirty with CODING the webpage. Now there are two parts to it :

  • HTML – which decides where your visual objects are going to be placed i.e., the structure.
  • CSS – which decides what these objects will look like i.e., the design.

So, we do need to code in HTML and CSS at the very minimum.. BUT, the question arises.. WHERE do we write this code? There are a range of editors you could use for this like Bracket, Eclipse, Visual Studio Code, Notepad++ or our very own humble Notepad.

Here I am going to code in VS Code cause it makes our life a little more easy. You can download it from https://code.visualstudio.com/download.

Go to any folder and create a file “index.html” and open it in VS Code. It is preferable to code along in small blocks rather than copying the whole code at once in order to understand how each part works. You can open the index.html with Google Chrome or a browser of your choice and keep refreshing the page when you make changes.

Start out with a blank canvas like so.

<!DOCTYPE html>
<html>
<head>
    <title>The Page is About</title>
</head>
<body>
</body>
<html>

Start adding small blocks inside it by referring to the code below.

<!DOCTYPE html>
<html>
<head>
    <title>COMMUNICATION</title>
</head>
<body>

<div class= "navbar">
    <h1> COMMUNICATION</h1>
</div>
<br>
<br>
<div>
    <img src="https://www.userlike.com/api/proxy/resize/communication-techniques/communication-techniques-header.png?height=720" alt="communication banner" width= "80%" height="45%";>
</div>
<div class="content">
<h2 class="drop-down">What is Communication?</h2>
<p class="drop-down-content">Communication is defined as the act of expressing our views to others through the use of 
  signs, expressions, symbols, spoken words, or any activity to reach a common understanding.
  We can communicate with a person or a group of persons.
</p>
   
<br>
<br>

<h2 class="drop-down"> Types of Communication?</h2>
<p class="drop-down-content">The different types of communications include:
    <ul> 
        <li>Written</li>
        <li>Verbal</li>
        <li>Non verbal </li>
        <li>Visual</li>  
    </ul>
</p>

<br>
<br>
<p>
    <h3><u>Written Communication</u></h3>
    <p>The written communication is defined as an act of sharing our views through writing,
    which can be in the form of emails, the Internet, books, magazines, diary, circulars, manuals, 
    letters, cards, social media, reports, bulletins, messages, etc.
    </p>
</p>

<p>
    <h3><u>Verbal Communication</u></h3>
    <p>Verbal communication is defined as the act of presenting the views to others in the form of 
     words or sounds. The series of words and grammar rules define the language. Human language is
     different for users around the world.
     eg.,communication through radio, television, or mobile phones
    </p>
</p>

<p>
    <h3><u>Non Verbal Communication</u></h3>
    <p>TNon-verbal communication is defined as presenting the views to others in the form of eye contact,
    gestures, facial expressions, body language, etc. Such type of communication is present everywhere 
    around us.The way we sit, stand, our expressions, dressing style, etc. is also a non-verbal 
    communication that depicts our behavior and personality without speaking any word.
    </p>
</p>

<p>
    <h3><u>Visual Communication</u></h3>
    <p> By definition, visual communication is the practice of graphically representing information to 
        efficiently, effectively create meaning. There are many types of content in the realm of visual 
        communication, with examples including infographics, interactive content, motion graphics, 
        and more. The possibilities are endless. But no matter the medium, all incorporate at least
        some of the following elements: interactivity, iconography, illustration, supporting text, 
        graphs, data visualization, and animation.
    </p>
</p>
</div>
<footer>Do visit us again</footer>

</body>
</html>

As soon as you are done with the HTML part you will be able to see a rough layout of your page but its not really structured in a good way and doesn’t look very appealing. So now is the time to add your CSS..

Go to the tags. Write tag and insert the code in it. Like so.

<head>    
 <style>
    footer{
        background-color: black;
        color:#E5E8F1;
        text-align: center; 
        height:60px;
        padding:relative;
     }
   </style>
</head>

Lets now go ahead and add more style specifications to it.

.navbar{position: sticky;
        background-color: #313036 ;
        color:#E5E8F1;
        text-align: center;
        height: 100px;
    }
    .navbar>h1{
        padding:2%
    }
    .content{
        padding: 70px;
        margin-left: 1%;
        background-color:#E5E8F1;
    }
    .drop-down {
      /*background-color: #7e32d4;*/
      
      /*padding: 16px;*/
      font-size: 20px;
      font-weight: bolder;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      border: none;
    }
    .navbar>h1{
        font-size: 30px;
        font-weight: bolder;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .content>h3,h2{
        color: #FE0000;
        font-size: 20px;
        font-weight: bolder;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .content>p,li{
        font-family: neue-haas-unica - 400;
        font-weight:400;
        color: #80828F;
        font-size:large;
    }
    img{
        margin-top: 0%;
        padding:7%
    }
    footer{
        background-color: black;
        color:#E5E8F1;
        text-align: center; 
        height:45px;
        padding:10px;
        font-size:27px;
    }

And now you have got your first webpage that you coded all by YOURSELF! Give yourself a pat on the back and do let me know on the comments below if you want to make it a little more functional and responsive. In which case we can have another tutorial for it.

2 thoughts on “How to set up your static webpage?”

  1. each time i used to read smaller articles that also clear their motive, and that is also happening
    with this piece of writing which I am reading here. gw – Zane

Leave a Comment

Your email address will not be published. Required fields are marked *