Lesson01. HTML + CSS Basics

Alexander Kuzmenko
Nov 4 · 5 min read

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:

File structure of our course

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:

task01_hello_world.html

You have just created your first web page (document with an html structure). Open this file in your browser to test your code:

Your first web page in browser

Task 02 “Article” (task02_article.html). Create a web-page with some headings and paragraphs:

task02_article.html

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:

It should be displayed in a browser

Tip. Paste the code of the element into the body of your page:

HTML-code of unordered list

Task 04 “Multi Lists” (task_04_multi_lists.html). Create a page with multilevel list:

It should be displayed in a browser

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:

The page in the browser
Just replace the word “selector” by correct name of the rule

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:

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade