You can create your own css files like this "index.css" or "any-name_you_want.css", connect it to an html page and open it in your browser.

To insert CSS code in an HTML page we use the <style>, <link> tags or the "style" attribute.
The options are to write the CSS code outside the HTML page with <link rel="stylesheet" href="/any-name-you-want.css" /> or inside the page with <style>some css</style> or on the tag with "style" attribute <p style="css code">text</p>

Connecting HTML and CSS

In order to set design rules with CSS to an HTML element (tag).  We need to use a selector, to specify which element should the rules (declarations) apply to.

Selectors

There are some special rules selectors to be more specific about which tags should be changed. depending on the tag state or place in the page.

Pseudo selectors (special selectors)

CSS rules are style declarations of how the selected element should appear. There are many but we will focus here on the basic ones.

CSS rules (declarations)

Many time you will find yourself in need of change the behaviour of elements with others in the page. For those cases knowing the display and position are really useful.

CSS rules positioning: display and position

To control the spacing between elements on the page we use margin and padding rules. They are similar besided the fact that margin effects the outer part of the element and padding effects the inner part of the element.

CSS rules spacing: margin and padding

Font rules enable you to change how text appears and much more. Some of the basic useful font rules are: font-family, font-size, color, line-height, font-weight and font-style

CSS rules fonts: font-family, font-size and more...

Media queries are blocks of css with a condition to apply when it fits. Mostly used to activate rules per the screen width for mobile, tablet and desktop devices.

Media queries (mobile and different screen sizes)

Styling language of the web

JavaScript is mainly run in the browser, but can run on servers and any other place today.

JavaScript

To insert JavaScript code in an HTML page we use the <script> tag.
The two options are to write the JavaScript code inside the tag or link to a JavaScript file with a url.

Connecting HTML and JavaScript

JavaScript variables are used to save some value or data to reuse it later. Declaring and using a variable is easy since you don't need to specify the type.

Types and Variables

Making conditions helps to decide what your code will do next. For these case we use if, else and switch statements.

Conditions

Functions are blocks of code you can declare to call (execute) later at the right time. They are very useful in order to reuse specific code actions.

Functions

Many times you will find that you want to go over an array list or values of an object. There are many ways to do loops and we'll cover the basic ones here.

Loops

To make websites interactive you might want to change the page by adding different styles or showing different data. To do that we fetch the element (html tag) that we want to change and make our changes on it.

Changing the DOM (the HTML or the page)

Every tag on the page has many events that you can listen to and assign a function to be called when that event happens. Some of the basic ones are click (a left click of the mouse on the tag), hover, keydown (when a user clicks a key on the keyboard) and many more events.

Events in the browser

You can simply open this URL https://jsonplaceholder.typicode.com/users in the browser and see the data that is being returned.

Fetching data is very common on the web, whether it is data that you show on the page like text or numbers or something else you need to show something to users. Often in JavaScript when fetching data, promises are in use.

Fetching data and Promises

Many times you would find other people wrote a library (code) that you could use to build your website. A bit of searching online with the text 'html', 'css' or 'javascript' you could find a lot of useful libraries, tools, widgets and many documentation of how to implement other people's code to help you out. The community is great and everyone uses other people's code inside of their own websites to develop stuff faster and easier. It is common to find many articles explaining how to do things with different libraries, even though they are not connected to the official library documentation. One example is having a map on your site with the leafletjs library. If you're interested in further learning about this particular library, go to https://leafletjs.com/examples/quick-start/

CSS

Need to know (before learning CSS): HTML