Introduction

This article is a basic step-by-step process for beginners; those starting a career path in front-end web development, who knows nothing of it and it’s also for those who for one reason or another other took a pause in learning frontend and maybe they want to refresh their memory on some things they might have forgotten.

By the end of this article, a complete novice should be able to understand the fundaments of HTML, CSS, and JavaScript and build at least one project using these technologies.

What is Front-end Web Development?

Front-end web development refers to the process of designing the user interface and user experience for websites or web applications. It involves creating and implementing all the elements that users directly interact with on their web browsers. The goal is to build responsive and interactive websites by combining various computer languages, markup and styling techniques. These include popular frontend libraries such, as jQuery, HTML, CSS, and JavaScript and frameworks like React, Angular or Vue.js. We will delve into these languages in detail later, in this article.

Who is a Front-end Web Developer?

One who designs and implements the user interface and user experience of websites or web apps is known as a front-end web developer. They specialize in using HTML, CSS, and JavaScript to program interactive, responsive, and aesthetically pleasing interfaces that people may interact with directly on web browsers.

Technical Tools/Technologies To Build a Web Page

HTML5 - HyperText Markup Language

HTML5, which is the iteration of Hypertext Markup Language serves as the universal language, for organizing and presenting online content. It made its debut in 2014. Has since become an essential component of contemporary web development. Acting as the framework, for web pages HTML5 utilizes tags to structure and arrange content.

• HTML tags are the essential building blocks of the Hypertext Markup Language (HTML). They serve to specify a webpage's organization, design, and content. Each tag is surrounded in angle brackets ("<" and ">") and often appears in pairs, with an opening tag and a closing tag. The name of the element appears in the opening tag, while the closing tag uses the same name but starts with a forward slash ("/").

(N/B: Not all HTML tags have closing tags).

A. HTML tags with closing tags include the following;

• html: The root element of an HTML document, covers the entire content of the webpage.

• head: Contains key information about the document, such as the title, links to external resources (CSS, scripts, etc.), and other key data.

• title: Shows the title of the webpage, which appears in the browser's title bar or tab.

• body: Contains the visible content of the webpage, including text, images, multimedia, and other elements displayed in the browser.

• h1 to h6: Heading elements, where <h1> is the highest level (most important) heading and <h6> is the lowest level (least important) heading.

• p: Represents a paragraph of text, providing structural grouping for blocks of content.

• a: Creates a hyperlink that links to another web page, file, or resource. It can also link to email addresses or specific parts of a webpage (anchors).

• ul: Defines an unordered list, a list of items without any specific order. Each list item is represented by li.

• ol: Represents an ordered list, a list of items in a specific numerical or alphabetical order. Each list item is represented by li.

• div: A generic container element used to group other elements together for styling or layout purposes.

• span: A generic inline container element used to apply styles or add hooks to a specific part of the text.

• table: Creates a table for organizing data with rows defined by tr, and columns defined by td (or th for table headers).

• form: Used to create a form that collects user input. Input elements like input, textarea, and select are placed within the form.

• textarea: Allows multi-line text input from users, useful for longer text entries.

• button: Represents a clickable button that can trigger actions or submit a form.

• iframe: Embeds another web page or external content within the current page.

• audio &video: Embeds audio and video content, respectively, allowing playback within the webpage.

B. HTML tags without closing tags:

• meta: Provides metadata about the document, like character encoding, viewport settings, and other information that browsers or search engines may use.

• img: Embeds an image into the webpage, displaying the specified image file.

• input: Creates an input field for user data entry, with different types (text, password, checkbox, radio, etc.).

1. HTML Attributes: HTML attributes are like extra toppings you can add to your HTML tags; they jazz things up or give special instructions. They're like little notes you slip into the opening tag, using the "attribute_name=attribute_value" style. So, if you want to make your elements look or behave a certain way, just sprinkle in some attributes!

HTML attributes include the following;

• Class and ID: Consider the "class" attribute as a VIP pass you grant to specific elements, signaling to them, "Hey, you all belong to the same group!" They can all be styled together in this manner. On the other hand, the "id" attribute is like a superhero moniker for one particular element; ideal for when you want to give it some special styling or have it do interesting tricks with CSS or JavaScript!

• Src and Href: Think of the src attribute as the GPS for elements like img and script; it tells them where to find cool stuff like images or scripts online. And then there's the href attribute for a tag; it's like the address for links, pointing them to where you want to go on the web. It's all about giving directions in the digital world!

• Alt: Imagine the alt attribute in the img tag as a helpful buddy that whispers a description of the image. If the image goes on vacation and can't show up, or if someone needs a little extra help understanding, this description pops up. It's like having a backup storyteller ready to jump in whenever needed.

• Width and Height: Think of the width and height properties of the img tag as a pre-measured space on a wall for a painting. The ideal position is created by informing the browser about the image's width and height, much like reserving a seat for a VIP visitor before they arrive. In this manner, the browser may prepare everything so that when the image loads, it appears naturally and seamlessly.

• Required: Think of the required attribute in form elements as a digital bossy boot; it's like saying, "Hey, you gotta fill this in before you can hit that submit button!" It's your way of making sure folks don't accidentally skip important fields when they're sending you info. So, it's like having a friendly reminder right there in your online forms!

  1. HTML Contents: HTML contents are like the cool stuff inside a treasure chest; you know, the juicy bits that make a webpage exciting! We're talking about the real deal here: words, pics, videos, all the fun things. It's the secret sauce that gives your page flavor; from text and images to links, forms, tables, and anything else you can think of. So, whether it's a funny meme, a helpful form, or a fancy table, it's all part of the awesome HTML content party!

Below is a simple illustration of an HTML structure;

<!DOCTYPE html>
<html>
<head>
     <title>My HTML Sample</title>
</head>
<body>
     <h1>Hi,</h1>
     <p>I am a <span>Front-end Web Developer</span> using HTML, CSS, and JavaScript</p>
</body>
</html>

CSS - Cascading Style Sheets

CSS is like your website's personal stylist – it gives HTML elements a makeover! It's all about picking elements and jazzing them up with some serious swag. Think colors, fonts, spacing, and where things hang out on the webpage. It's like dressing up your site to look sharp, making sure everything's in the right place and totally on fleek!

CSS properties include the following;

• Fonts: CSS lets you choose cool fonts for text. You can make it big, small, bold, or even fancy-italic using the "font" property.

• Colors: Change text color with the "color" property. Think of it as picking colors for your digital artwork.

• Margins: Create space around elements with the "margin" property. It's like giving things breathing room.

• Padding: The "padding" property adds space inside stuff. It's like having a cozy cushion around your content.

• Borders: With "border," you create stylish outlines around elements. Go wild with different border styles!

• Width & Height: Make elements wider or taller using "width" and "height." Imagine it as stretching a picture.

• Float: "Float" lets you put stuff side-by-side. Text can hug around these floated elements like friends in a group hug.

• Selectors: CSS uses selectors to target elements for styling. It's like choosing who gets a makeover.

• Properties: These control how elements look. Each property is like a magic wand changing something specific.

• Values: Properties get values, like changing text color to "blue." Think of it as picking colors from a painter's palette.

• Classes & IDs: Use these to pick specific elements. It's like giving special badges to certain folks.

• Box Model: The box model is like an element's personal space. It has padding, border, and margin for comfort.

• Flexbox: Flexbox is a layout superstar. It helps elements adjust and play nicely in a container.

• Grid: Grid is like a webpage checkerboard. It helps you arrange elements in rows and columns.

• Media Queries: These are like style switches for different devices. Your site looks cool on phones, tablets, and desktops.

• Transitions & Animations: CSS can make things move smoothly and dance around. It's like adding a bit of magic to your site.

• Pseudo-classes & Pseudo-elements: These are like special rules for certain situations. They add extra flair when elements are clicked or hovered over.

A simple illustration of how to style HTML elements using CSS is seen below;

body { 
background-color: white;
}
h1 {
font-size: 16px;
color: black;
}
span {
color: blue;
}

In the illustration above, there is a CSS command that the background-color of your web page should be White, the font-size of the heading on your web page should be 16px and its color Black, and the content wrapped in span tag only should be in Blue.

JavaScript

JavaScript is like the web's cool magician; a super flexible and popular language that brings websites to life! It's the go-to tool for making things interactive and lively. When you click buttons, drop-down menus pop open, or pictures slide around; that's JavaScript doing its thing. It's the web's chatterbox, talking to your browser and making things happen without needing to refresh the whole page. And if you've seen stuff move or dance on a webpage, that's all thanks to JavaScript's magic touch!

Here are some basic JavaScript functions and properties;

1. Functions

   • alert: Imagine a friendly wave; it pops up a message in a little box for the user to see.

   • prompt: This one's like a chat window; it shows a message and lets the user type in some info.

   • console.log: Think of it as your website's diary; it writes secret messages to a special log where you can check for errors and see what's happening behind the scenes.

   • parseInt: Turn a word into a number; like changing "5" into 5.

   • parseFloat: It's like turning "3.14" into the real deal 3.14, making sure your numbers have the right flavor.

2. Properties

• length: It's like a string and array ruler – counts how many letters or things are hanging out.

• innerHTML: Think of it as a sneak peek inside a DOM element – shows you the secret HTML stuff in there.

• textContent: It's like the behind-the-scenes text – gives you words without any fancy HTML tags getting in the way.

• value: This one's the input inspector – checks out what's typed into form fields and lets you change it if you want.

These are just a taste of the cool things JavaScript can do! There are tons of ready-to-use functions and tricks built into JavaScript, and you can even make your custom ones for special tasks. Knowing these basics is like having the key to a treasure chest – it's your ticket to starting your journey into the JavaScript world!

How to Declare and Call Functions in JavaScript

JavaScript has something called functions. They're like magic boxes where you can stash a bunch of code and use it whenever you want! Check out how to make and use them:

Function Declaration:

To make a function, start with the word "function," then give it a name and use () and {}. Inside the {} goes your special code that runs when you call the function. It's like having a secret recipe card you can whip out anytime!

Syntax:

function functionName(parameters) {
  // Function body (code to be executed)
}

Example:

function greet(name) {
  console.log("Hello, " + name + "!");
}

Function Calling:

To call a function, simply use the function name followed by parentheses (), passing any required arguments (if the function accepts parameters) inside the parentheses.

Syntax:

functionName(arguments);

Example:

greet("John"); // Output: "Hello, John!"

Function with Return Value:

Functions in JavaScript can also return values using the return keyword. The value returned by the function can be assigned to a variable or used directly in expressions.

Syntax:

function functionName(parameters) {
  // Function body (code to be executed)
  return value; // Optional, can return a value
}

Example:

function add(a, b) {
  return a + b;
}

let result = add(5, 3);
console.log(result); // Output: 8

Keep in mind that function names play by the same rules as names for your cool variables in JavaScript. They kick off with a letter, underscore, or dollar sign, and after that, you can have letters, numbers, underscores, or dollar signs in the mix. Just steer clear of using words that JavaScript already has special plans for.

With these easy-peasy steps, you're all set to create and use functions in JavaScript. This lets you keep your code tidy and in neat little chunks that you can use again and again. It's like having puzzle pieces you can rearrange whenever you want, making your programs easier to understand and keep in check!

Linking CSS and JavaScript files to your HTML5

Linking CSS file:

To link an external CSS file to an HTML5 document, you use the <link> element in the <head> section. The href attribute specifies the path to the CSS file.

<!DOCTYPE html>
<html>
<head>
    <title>My HTML Sample</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hi, </h1>
    <p>I am a <span>Front-end Web Developer</span> using HTML, CSS, and JavaScript</p>
</body>
</html>

In our little show here, we've got the "styles.css" file shaking hands with the HTML document. Whatever cool rules are written in "styles.css," they're gonna jazz up the whole webpage.

Linking JavaScript Files:

To make friends with an outside JavaScript file and your HTML5 buddy, you use the script tag. You can either do this in the head part or right before the party ends with the body tag. And that src thing? It's like giving GPS coordinates; just tell where the JavaScript file is chilling.

<!DOCTYPE html>
<html>
<head>
    <title>My Webpage</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
   <h1>Hi, </h1>
    <p>I am a <span>Front-end Web Developer</span> using HTML, CSS, and JavaScript</p>

    <!-- Linking JavaScript file at the bottom of the body -->
    <script src="script.js"></script>
</body>
</html>

The "script.js" file has joined the fun in our little example here and is located at the bottom of the webpage. Why? So, after the remainder of the page is polished up, the JavaScript magic happens. It is comparable to allowing everyone to choose their seats before the show begins.

By linking CSS and JavaScript files to an HTML5 document, you can easily separate the styling and behavior from the structure of the webpage, promoting a clean and organized code structure.

Setting up A Development Environment

What is a Development Environment?

Think of a development environment like a tech playground; it's where developers have all the cool tools and gadgets they need to create, test, and fix their software. Picture this: a fancy code editor, a genius translator (compiler/interpreter), a teamwork coordinator (version control), and even some detective gadgets (debugging tools). It's like a superhero belt, packed with everything the developer needs for the language or style they're working with. This magical setup makes sure the whole software-building adventure runs like a well-oiled machine, letting developers zoom through projects with ease!

Types of Development Environment

Let's talk about different types of development environments, each having its special vibe for crafting software. In this article, we'll shine a spotlight on just a couple of them:

1. Integrated Development Environment (IDE): An IDE is like a developer's ultimate toolbox; it's got everything you need for software development. Inside, you'll find a code editor, a language translator (compiler/interpreter), detective gadgets for hunting bugs, a version control buddy, and even more cool stuff. Think of it as your programming superhero HQ. Visual Studio is one fine example of this coding wonderland.

2. Code Editor: A code editor is like a comfy writing nook just for code – it's all about making your coding words look snazzy. It gives you cool tricks like color-coding your code, predicting what you're typing, and even some simple detective work. Examples include Visual Studio Code, Sublime Text, and Atom.

Recommended learning resources

There are several platforms where one can learn and practice the skills of front-end web development. These platforms include the following;

1. FreeCodeCamp

2. W3Schools

3. GitHub

4. Codecademy

5. AptLearn

6. YouTube

Conclusion

To wrap things up, getting the hang of frontend web development basics is like leveling up on your journey to becoming an awesome web developer. Frontend stuff is all about making the web look great and feel amazing for users; it's like adding a coat of magic to web apps. Once you've mastered these essentials, you're building your web skills. From here, you can tackle bigger, cooler projects like a pro!

#HappyCoding!