taras-budzyn / frontendTeach

Basic info for learn HTML, CSS and Javascript from scratch with practice tasks

Materials to learn frontend from scratch

At this repo we will try to collect there useful links and practice work (to consolidate the course materials).

Main plan

1. HTML basics

• Theory
  1. Quick overview of HTML
  2. DOM
  3. HTML head
  4. Social media keys
• Practice work
  1. HTML basics

2. HTML most used elements and HTML attributes

• Theory
  1. Basic/custom/data attributes of elements
  2. Found and read the basic info about most used elements
  3. h1..h6 heading elements
  4. Section Divisions (div, p, br)
  5. Images
  6. Links
  7. Lists (ul, li)
• Practice work
  1. HTML basics elements

3. HTML tables and HTML interactive elements

• Theory
  1. Tables (1, 2)
  2. Forms (Mozilla reference, Big detailed tutorial)
  3. Iframes
• Practice work
  1. HTML tables, forms and iframes

4. CSS basics

• Theory
  1. Basics
  2. Syntax
  3. Measure units in CSS
  4. Margin, padding, border properties regarding blocks; width and height
  5. Selecting elements
  6. Ways to add CSS to page
  7. Browser Dev tools (Google, Firefox)
• Practice work
  1. Block indents, borders and width/height property
  2. Selecting elements

5. CSS text formatting

• Theory
  1. Text and font formatting
• Practice work
  1. Stylize text

6. CSS blocks formatting

• Theory
  1. Displaying elements and flow of page
  2. Display options
  3. Block, inline and inline-block
  4. Understand float
  5. Positioning (1, 2, 3)
• Practice work
  1. Create the page example 1
  2. Create the page example 2

7. HTML/CSS layout

• Theory
  • https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• Practice work

8. CSS media query

• Theory
• Practice work

9. CSS animations

• Theory
• Practice work