Intro to The Web tools HTML/CSS – Part 1

HTML (HyperText Markup Language) is the standard language used to create web pages. It is a markup language that uses various tags and attributes to define the structure and content of a web page. HTML provides a set of elements and attributes that can be used to define the different types of content on a web page, including headings, paragraphs, links, images, etc.

CSS (Cascading Style Sheets) is a style sheet language used to define the layout and appearance of HTML files. CSS allows web developers to separate the presentation of a web page from its content, making it easier to maintain and modify the layout and style of a website. With CSS, you can define the colors, fonts, margins, padding, and other design elements that give your web pages a personalized look.

In a nutshell, HTML and CSS work together to create visually appealing and interactive web pages.

Fundamentals of Web development

  • Front-end: HTML, CSS, and JavaScript development
  • Back-end: Consists of a server, an application, and a database.
  • Full-stack: Involves both developments.

Essential attributes to work with in web development


JavaScript: Programming language; used for adding functionality to web pages.

React: Library – Frameworks help build websites faster.

Git & GitHub: Version Control Systems – keep track of project history.


  • With HTML we can define all the building blocks of code.
  • CSS styles objects and provides visual effects.
  • JavaScript helps features to be interactive.

How the web works


  • The client/device asks and consequently, the Server responds.
  • The client/device requests a service to the server, and the server retrieves it.
  • This process is formatted on HTTP/Hypertext Transfer Protocol and HTTPS protocol, secure (encrypts) communication and data transfer between a user’s web browser and a website.


The browser/client sends an HTTP request to the server to receive an HTTP response, the HTTP response contains an HTML document, and the browser reads the HTML document to construct a document object model and render/display de page.


Note: HTML and CSS validators give insight into what we should do to improve our code and the errors found.


Code Example:



Visual Example (Live Server):



<DOCTYPE html> Initializes a new HTML file, we can type “!” for a full HTML well-structured empty template every time a new .html file is created.


<html lang = “en”>specifies the language of the file so that when a user is browsing, the websites/pages pop up according to the user’s language</html>


<body>In order for the browser to render an HTML file, we must have a body, otherwise an error will occur</body>


<p>for paragraphs</p>

<h#number>for the heading size or order</h#number>


<style>The CSS instructions are inside the style element, usually used with classes and ids to modify specific content</style>


<a href=””>is used for hyperlinks, images, emails, etc</a>


This Blog just describes what HTML and CSS are for, I will be writing more about these web tools soon.