TABLE OF CONTENT

I. Introduction

Front-end uses 3 languages HTML, CSS, and JS browser understands and process of writing. Users use a browser to send requests through the domain to a web server the web server responds to browsers.

HTML is responsible for the content of the page so that the text, video, images, …

CSS is responsible for the presentation of that content so basically for styling and for laying out the element on the page.

JS is the programming language of the front end. It allows us to add dynamic and interactive effects to the webpage. And use it to manipulate the content of the CSS to load data from a web server and even to build entire front-end applications, which we call web applications.

HTML is not a programming language

II. HTML

HTML is a markup language that web developers use to structure and describe the content of the webpage.

1. Anatomy of an HTML Element

In HTML Element have 3 parts opening tag, content, and closing tag.

<p> Hello World </p> | This is a Element

<p> | This is Opening Tag

Hello World | This is Content

</p> | This is Closing Tag

2. Semantic

Semantic is a defined element that has meaning.

3. Box-Model

Inline Block Inline-block
Not change size (width and height) but can change padding-left and padding-right. Can change size (width, height, padding, margin) if the element is set. Can change size with properties of inline but can change size as a block.
Width: Fit-content Width: 100% Width: fit-content
When initialized, inline will change the width fit content. When initialized, the block will change the width by 100%.

Box-Sizing: Content-Box; (This is the default, not initialize)