Lesson01. HTML + CSS Basics
Today we are starting our two-month course “Fundamentals of JavaScript” with a topic “HTML and CSS basics”.
Before we start take a few minutes to create a file structure of our course in your computer (as alternative way you may choose Google Drive or GitHub Gist for saving your study materials). I use such organization of my materials:

Every folder here is intended for different types of study materials. In the folder JS_LESSONS I suggest to collect small samples of code, to practice with exercises and to solve home tasks. Anyway you can do it by yourself, as you think to be convinient.
So let’s start. I have several tasks for you to practice with simple HTML pages.
In JS_LESSONS create a subdirectory lesson01_html_css, in which you will keep the next tasks.
Task 01 “Hello world” (task01_hello_world.html). Create a file task01_hello_world.html. Copy and paste this code into the file and save:
You have just created your first web page (document with an html structure). Open this file in your browser to test your code:

Task 02 “Article” (task02_article.html). Create a web-page with some headings and paragraphs:
Save the code and test it on browser. You will see the content of the article in convenient view for reading
Task 03 “Lists” (task_03_lists.html). Sometimes our data must be displayed as a list. I need you to create an unordered list:

Tip. Paste the code of the element into the body of your page:
Task 04 “Multi Lists” (task_04_multi_lists.html). Create a page with multilevel list:

Tip. For making multilevel list put your inner list into the element of parent list:
Task 05 “Recipe” (task_05_recipe.html, hometask). Create a page with the following view:

Task 06 “Styling blocks” (task06_styling_blocks.html). And now we will start with using styles. For styling elements on page CSS rules are used. Lets create 5 blocks on page (tag <div>), which are looked like this:

The first step, create a structured web page with 5 <div>-elements. In the <head> section append <style> which will contain
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Styling Blocks</title>
<style>
</style>
</head>
<body>
<div>Primary #0275d8</div>
<div>Danger #d9534f</div>
<div>Warning #f0ad4e</div>
<div>Info #5bc0de</div>
<div>Success #5cb85c</div>
</body>
</html>In <style> container add a CSS-rule with tag-selector div:
div {
width: 80%;
margin: 10px auto;
height: 50px;
border: 2px solid black;
color: white;
padding: 10px;
}Open the file in browser and you will see 6 blocks displayed with the properties we declared in the CSS-rule.
If we need to use different sets of styles to our elements we should use classes. Classes are CSS-rules with a name preceded by a period (“.”) character. Lets create such rule. In <style> container put this code:
.bg-primary {
background-color: #0275d8;
}We have created a rule with class-selector .bg-primary. To use this rule to element we need to add the name of the class as a value of an attribute “class” to this element:
<div class="bg-primary">Primary #0275d8</div>Create other CSS-rules with class-selectors for styling background-color, add classes to our elements and test the page in your browser.
Compare your code to my solution:
Task 07 “Correct selectors” (task07_correct_selectors.html). In this task use the following sample of code and just declare correct selectors in CSS-rules to make our elements looked like this:

Task 08 “Grid” (task08_grid.html) - Part 1. Like in the previous task, assign correct selectors to the rules in the sample of code to receive following view of grid:

Task 08 “Grid” (task08_grid.html, hometask) - Part 2. In the same file create a separate container (orange block) and put the following grid of blocks in it. Use the html-structure and css-rules as in the task above.

Task 09 “CSS” (task09_css.html, hometask). I have an html-structure of a component which called card and want you to create several CSS-rules for presentation it in this style:

Here are some requirements of properties:
- The font family is Montserrat
- The width of the card is 300px
- Bottom margins of the card-text blocks is 15px, except the last one
- Padding of the card-body block is 15px
- Background-color of card-header block #96c0CE
- And other properties you can visually determine
The elements of a card already have classes. You need to create CSS-rules for styling these elements with the class-selectors accordingly. And here is the sample of html-structure:
Task 10 “Our Team” (task10_our_team.html, hometask). And the last task:
