Where to Start Programming the Web?
By: Adetutu Gbangbola
Tags: JavaScript, CSS, HTML, Web Development, Newbie Guide

Where to Start Programming the Web?

A Brief Guide for Complete beginners to jump-start their Web Development Career

google photos

WHAT IS WEB DEVELOPMENT ANYWAY:

Web development is simply the act of writing some set of computer instructions called codes to make a website look interactive & functional, to perform some specified tasks. For example, taking a look at one of the most common web applications we use daily Facebook. When accessed via the browser and not on its mobile apps, this is a typical example of a website application (created by web development) starting from the designs of the user interface to the functionality included. Now let’s dive into the three most important skills to learn in this journey.

SKILLS REQUIRED:

The three basics skills required to excel in this field are HTML, CSS& JAVASCRIPT. These three depend on one another. Follow the thread below to see how the three works. I will be showing a short illustration of how they work, The illustration is titled “demo”.

HTML:

This is the first thing, to begin with on this journey. HTML stands for HYPERTEXT MARKUP LANGUAGE. In its core, Html isn’t a programming language, It is a markup language used in creating web pages. The Html takes care of the display of the web pages, as pillars are to houses or the bones to the body, HTML is responsible for how your webpage is displayed on the web.

With the latest of HTML 5, the HTML tags, there are close to 100 of tags used & as a beginner, you are not expected to cram it all, surprisingly you only need a handful of them, something like 10 to begin your journey of building awesome stuff

The more you practice, the better you get to understand their usage. Let’s visit our demo page to see a sample of how HTML works. The illustration will be carried out on the most popular code editor , vscode text editor, any one will work, feel free to use any you comfortable with.

Checking through the editor online, all that we have so far on the screen are tags, don’t be scared. They are what enable the output to come out well. The h1 tag stands for headings, the P stands for paragraph & the button. The onclick function inside the button is a JavaScript function which is to be used to reference our button in the JavaScript

The output of the code is shown below

Output of the html code on the browser

CSS:

This stands for CASCADING STYLES SHEET. CSS helps to give cool designs to the already made markup language, think of it as painting is to an apartment or make-up to the face so is CSS to any webpage. Let’s begin by giving some styling to our HTML code up there.

This code up here is what resulted to the output below.

CSS styling has resulted to a good looking interface

Now we can see the usefulness of CSS, they all rely on each other to work, without the HTML, the CSS will have nothing to act on, and without the CSS, the HTML won’t have a good looking interface.

JAVASCRIPT:

Here comes the big JavaScript. JavaScript is a programming language that helps add functions to the webpage. Think of the engine that makes a vehicle, so is the javascript to our webpage/websites. We have done the first step by putting up a markup page followed by adding beauty to it. Now let’s go and add some functions to the page. Let’s make the button responsive by making it show something when been clicked on.

Javascript function

Remember the onclick function used in the HTML, That function is what is been used to reference our button. Now when you click the button it shows you “learning starts now”.

Javascript effect

Check below for another simple illustration of the three skills highlighted above

HTML:

The image of the coupled car below signify our html.

Engines, part of the body getting coupled together

CSS:

Adding designs to the car to make it worth looking represents our CSS here

The car which now look beautiful is an example of CSS on our Webpage

JAVASCRIPT:

The necessary things required to make the car move on the high way & function effectively here represents our javascript.

Javascript is what makes the web page interactive

This is a brief guide to starting a career in web development, it’s an exciting career, you sure going to love it. Determination & Consistency is the key.

One of my favourite quote by Roy T. Bennett says “The Beginning is NOW.”

Thanks for reading, your claps,review,comments will be well appreciated.