Table of contents
No headings in the article.
Title: The Basics of web development.
Subtitle: A comprehensive guide for beginners on web development.
Introduction:
Web development is the process of developing a website for the internet
(World Wide Web) or an intranet(a private network).
Prerequisite:
To get the best out of this article, you should have downloaded and installed
Node, VScode(or any code editor) and Git.
What is web development?
Web development is the process of building a website and application for the Internet or a private network known as an Intranet.
Web development is not only concerned about the design of a website, it's also about the coding and programming that powers the website’s functionality.
Web development layers
1. Client-side coding (Frontend).
2. Server-side coding (Backend).
3. Database technology.
Who is a web developer
A web developer is an interactive and creative artist.
A web developer uses building blocks like HTML, CSS and Javascript to build web applications.
Two ways of creating a website
1. CMS(Content management system): it is easier to use a system that allows you to control and manage the content within your website without necessarily having technical skills.
2. Hard coding: This requires specific skills and knowledge of programming language.
What is HTML?
HTML stands for Hypertext Markup Language.
HTML is the language that most websites are written with, it is used to create the structure of the web page.
HTML code structure
All HTML must start with document type declaration <!DOCTYPE html>.
HTML document begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
A tag is closed this way: </tagname>.
Types of tag
There are two types of tags;
Paired tag: The paired tag has to be closed. It is composed of the opening and the closing tag with content inside of it. e.g <body> </body>
Unpaired tag: The unpaired tag does not have to be closed because it is a self-closing tag. e.g <br>
Here are some tags in HTML
<body>, paragraph(<p>), <head>, anchor(<a>), break a line(<br>), bold(<b>), italic(<i>), small text(<small>).
.
HTML attributes
HTML attribute provides additional information about an HTML element.
Examples of HTML attributes are “src” and “alt” attributes.
HTML lists
Lists are used to arrange related pieces of information so they are connected, understandable and easy to read.
Lists are advantageous from a structural point of view because they help create a well-structured, highly accessible and easy-to-maintain document.
The most used types of lists:
Unordered list: An unordered list is typically rendered as a bulleted list. syntax: <ul>
Ordered list: The HTML <ol> element represents an ordered list of items, typically rendered as a numbered list.
Description list: The HTML <dt> element represents a description list. The element encloses a list of groups.
Semantic Tags
Semantic tags are used to add meaning to our HTML document.
The document is divided into 3 different sections: Header, Main and Footer.
What is an HTML form?
In HTML, forms are a way of receiving input from users and they help collect the website’s data.
A form is created with <form> tag.
Form input
The most useful component of a form is the input tag, which creates a text field where users can enter data.
Selection input
You can use the <select> (with nested <option>) element to create a dropdown selection of items that a user can choose from.
Text area
If you want your user to be able to include a new line (by pressing the return key) in the text input, you can use a <textarea>.
Button
An <button> element should be used when you want to create a clickable button to perform a certain action on the page.
What is CSS?
CSS stands for Cascading Style Sheet.
CSS is a simple design language intended to simplify the process of making web pages presentable.
With CSS you can control the color of a text, the style of fonts, the spacing between paragraphs and how columns are sized and laid out.
Linking CSS to HTML
There are three ways to attach CSS to HTML:
Inline: By using the style attribute in the HTML pages.
Internal: By using <style> element in the <head> section.
External: By using an external CSS file.
CSS selector
CSS provides a set of rules, each rule consists of a selector to indicate the element meant for modification, followed by a declaration block that contains a set of properties and its values.
There are three types of selectors:
Type: To select HTML elements by element’s name.
Class: To select HTML elements by element’s class value.
ID: To select HTML elements by the element’s ID value.
CSS Box model
Every element in web design is a rectangular box.
The CSS Box model is defined by the four layers below:
Content: This is where text and images appear.
Padding: Padding is transparent and clears the area around the content.
Border: The border goes around the padding and content.
Margin: Margin clears outside the border, the margin is transparent.
CSS display
Every element on a web page is a rectangular box, the display property in CSS determines just how that rectangular box behaves.
There are four types of CSS display:
None: None allows us to hide elements by declaring a display: none.
Inline: Inline enables you to put specified HTML elements in the same line.
Block: HTML elements are divided into default block elements(automatically force a line break without the use of <br>.
Inline-block: In some cases, both of the display values may not be enough for better web design, in this case, the inline-block display comes to the rescue and makes alignment much easier.
CSS flexbox
Flexbox makes it easier to design flexible, dynamic, and responsive layout structures without using floating or positioning.
How does Flexbox work?
Flexbox starts by making a parent element a flex container.
Example:
.flexy {
display: flex;
}
CSS Grid system
A Grid is just horizontal and vertical lines that define the placement of other design elements.
In the context of CSS grid layout, a grid container is a parent that contains all items within it.
The grid container defines the initial placement of the grid lines, both vertically and horizontally.
Introduction to Javascript
Javascript is the most widely used scripting language on earth. Javascript has the largest library ecosystem of any programming language.
Javascript is the core language of the web and the only programming language that can run in all major web browsers.
The program in Javascript is called “Script”.
Javascript was standardized in 1997 under the name ECMAScript. Since then the language has undergone several rounds of improvement to fix awkwardness and support new features.
Adding Javascript to a web page
In HTML, Javascript code must be inserted between starting and closing <script> tags.
It is highly recommended that the <script> tags are inserted right before the </body> tag, so that the page can load all other HTML elements before Javascript.
External Javascript
We can also place scripts in external files. This is applied when the same code is meant to be used by different web pages.
To be able to use this external script, we will put the name of the script file in the src(source) attribute of a <script> tag.
Alert, Prompt and Confirm
Alert(): Alert is a simple function to display a message to a dialogue box(also known as an alert box). The alert() cannot interact with the visitor.
Prompt(): Prompt is used to interact with users.
Confirm(): Confirm displays a dialogue box with 2 buttons(ok and cancel) and text as a parameter.
Comments in Javascript
“//” to comment anything on the same line after the double slash.
“/* and */” to comment on multiple lines.
Basic Data types
Most programming languages help you to create values that symbolize numbers, a character in a text or longer text.
Boolean: It shows true or false.
Number: Includes integers like 1, -2 and floating point numbers like 3.14, 2e-3.
String: String is used for storing text, and must be inside of either a single or double quotes.
Null: Null has one value.
Undefined: Undefined is a variable that has no value.
Symbol: A symbol is used for storing symbols.
Program flow: Function
A Function is a piece of code that can be reused without having to write it again and again.
A classical Function declaration begins with the keyword “function” followed by;
The name of the newly created function.
A list of parameters the function accepts, enclosed in parentheses(()) and separated by commas(,).
A block of Javascript code enclosed in curly braces({}), to be executed when the function is called.
The opening curly brace({) indicates the beginning of the function code and the closing curly brace (}) marks the termination of a function.
Function Parameters
Parameters are variables listed as a part of the function definition.
Arguments are values passed to the function when it is invoked in Javascript, parameters of the function default to undefined.
Default function parameters allow named parameters to be initialized with default values if no value or undefined is passed.
Three types of control structures
Sequence writes instructions one after the other.
Selection executes one set of instructions or another.
Iteration executes a set of instructions for a finite or infinite number of times.
The IF statement
The condition inside of the branch is only executed if the condition is truthy.
The ELSE statement
This is executed when the condition is falsy.
The ELSE IF statement
To specify a new condition to test, if the condition is false.
Switch statement
To specify many alternative blocks of code to be executed.
Loops
A loop allows us to execute the same expression as many times as we want by just writing down the code once.
While loop
A while loop will first check its condition, if it evaluates to true, then it will execute the statement within its body.
Example:
while (condition) {
statement(s)
}
Do-while loop
The do-while loop executes the loop body at least once and checks the condition after the execution and before the end.
For loop
The for loop combines several lines of code into one, while its execution is identical to the while loop.
Example:
for (let i = 0; i<arr.length; i++) {
}
Introduction to Array
Array provides us with a way to create and maintain a list of data.
An array is an ordered list of items.
Adding and Removing element
.push adds an element to the end of an array.
.unshift adds an element to the beginning of an array.
.pop removes the last element from an array.
.shift removes the first element from an array.
Introduction to Object
Objects in Javascript are stand-alone entities that can be likened to an object in real life. For example, a book can be presented as an object in Javascript.
There are two ways to create an object:
Object literal which uses curly brackets {}.
Object constructor which uses the new keyword.
Properties and Methods
Property is the association between a name(key) and value within an object. It contains any data type. A property generally refers to the characteristics of an object.
Method is a function, that is the value of an object property, therefore a task that an object can perform.
Two ways to access object properties
- Dot notation: we can access object properties by typing the variable name of
the object, followed by a dot(.) and the property or method name.
- Bracket notation: We can retrieve data with bracket notation by typing the variable name of the object followed by bracket([ ]) and the property or method name.
Conclusion:
In this article, we have learned the basics of web development and the key
components of the web page, which are HTML, CSS and Javascript.
You can also get resources online to learn more web development.
Resources and References:
You can check out the resources listed below to learn more about web development.
Gomycode
W3schools