HOW IT ALL STARTED

I love tech

Farida NDiaye

My passion for the tech world started more than 15 years ago, around 2001. I was in 4th year of high school. Where I come from (West Africa), IT was not quite developed. So, this dream of understanding how these computers worked stayed with me until around 2007 when I started college. But unfortunately, I could not concretize it...

It was only a few years after my arrival in the USA that I was able to fully "throw my feet together" in the field of tech and begin to really learn the basic components of a web page, in particular HTML, CSS, and JAVASCRIPT ( the three main "ingredients" of a web page presentation).

In the following lines, we will see in a basic way what importance these two major "ingredients" represent and what roles they play in the creation of a web page.

A webpage is like a human body structure:

The skeleton: HTML
Flesh/Clothing: CSS
The functioning of the organs: JAVASCRIPT

Let's take an overview look at each element:

HTML

The HyperText Markup Language (HTML) is the code that is used to structure a web page and its content. HTML uses tags to define the structure and meaning of content on a web page. It is composed of three main elements:

Html: contains the entire HTML document.

Head: contains any metadata describing the document.

Body: is the second child of the "html" element. it is what is displayed on a web page when opened. Everything that we want the view to see is coded into the "body" section (called opening and closing tags "<", and "/>")

Footer: is the section used to add a note at the bottom of a page, but it is not a "must use" element.

Here is an example of what a basic HTML document setup looks like (source: w3schools.com):

To create an HTML file:
Open a text editor (such as Notepad, Sublime Text, or Visual Studio Code) and create a new file. Save it with a .html extension, for example, index.html. This will be your main HTML file.

CSS

The Cascading Style Sheet (CSS) allows you to control the layout, colors, fonts, and other visual aspects of your web pages. CSS works in conjunction with HTML to separate the content and structure of a web page from its presentation.

There are three main ways of implementing a CSS file into a HTML document:

Inline CSS: You can apply CSS styles directly to individual HTML elements by using the style attribute.
For example:

Internal CSS: You can define CSS styles within the 'style ' tags in the 'head ' section of your HTML document. This method applies styles to all elements on the page.
For example:

External CSS: The recommended approach is to create a separate CSS file with a .css extension and link it to your HTML file using the 'link' tag. This allows you to keep your styles separate from your HTML code and apply the same styles to multiple pages.
For example:

CSS Selectors: CSS uses selectors to target specific HTML elements and apply styles to them. There are various types of selectors, such as element selectors, class selectors, ID selectors, and more.
For example:

JAVASCRIPT

JavaScript is primarily used in web development but can also be used for other types of applications, such as server-side development or desktop applications. It allows you to add interactivity and dynamic behavior to your web pages

It One of the primary uses of JavaScript in web development is manipulating the Document Object Model (DOM). The DOM represents the structure of an HTML document, and JavaScript allows you to access, modify, and interact with the elements and content of a web page dynamically. You can change the content, style, and attributes of HTML elements, create new elements, handle events, and more.

JavaScript is supported by all major web browsers, including Chrome, Firefox, Safari, and Edge. However, browser compatibility can vary, so it's important to test your code across different browsers and versions.

JavaScript code can be embedded directly in your HTML file by placing it within 'script ' tags.
For example:

Alternatively, you can write your JavaScript code in a separate '.js' file and link it to your HTML file using the 'script ' tag. This approach keeps your JavaScript code separate from your HTML code, making it easier to manage.
For example: