Basics of HTML and CSS

Here are some basics for understanding HTML and CSS, that I think everybody should know when they start learning Frontend basics.
This will be my first article about HTML and CSS, starting with some basic markdowns and elements that many of you know or have heard of.
This is the first of three articles that concern basic knowledge of HTML and CSS, and as I write more, I will be writing about more complex stuff.
But before that, let’s start with the basics.

Here are some Websites that I recommend, that helped me in the beginning:

Lets start with HTML:

“HyperText” refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.

Tags in HTML are case insensitive. That is, they can be written in uppercase, lowercase, or a mixture. Example <title> tag can be written as <Title>,<TiTlE>or in any other way.

“Markups” and “Elements”:

-The following code shows all the heading levels, in use:

-Here is the result of this code:

-First paragraph-

This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text.

-Second paragraph-

This is the second paragraph. This is the second paragraph. This is the second paragraph. This is the second paragraph.

<footer></footer>

So basically we have this structure :

This was some basic HTML set up,i will be diving in to more markups in other articles that i writhe.

Now lets dive in to CSS:

“Cascading” refers to the rules that govern how selectors are prioritized to change a page’s appearance. This is a very important feature, since a complex website can have thousands of CSS rules.

Box Model

The CSS box model is the foundation of layout on the Web — each element is represented as a rectangular box, with the box’s content, padding, border, and margin built up around one another like the layers of an onion. As a browser renders a web page layout, it works out what styles are applied to the content of each box, how big the surrounding onion layers are, and where the boxes sit in relation to one another. Before understanding how to create CSS layouts, you need to understand the box model — this is what we’ll look at in this article.
Every element within a document is structured as a rectangular box inside the document layout, the size and “onion layers” of which can be tweaked using some specific CSS properties. The relevant properties are as follows:

For a start, I think that knowing how those a Box Model behave is important.
To know, how margins, paddings, borders influence our content on the page.

I am not to take credit for all of the text, because most of it from MDN, I just put it together. But I think that we need to direct people that want to learn in the right direction so that they can learn more easily.

Related posts:

Buildings on Fogo Island are traded as movable goods not rooted to the land. When Newfoundlanders on Fogo Island move, they would reuse their home by moving it with them to the new destination…

Intento coger el ritmo de las cosas. “Todo” is published by Fae.