Website creation Front-end development - free course from Children's online programming school Hello World, training 44 hours, Date: December 3, 2023.

How the Internet works

Let's talk about the basic concepts of the Internet and its architecture. Let's find out what a domain, hosting, client-server architecture is. Let's set up the working environment and talk about the three pillars of Front-end development - HTML, CSS and JavaScript.

HTML

HTML Document Structure

Let's create the first HTML pages and look at examples of simple and complex web pages. Let's figure out what blocks should be on our page. Let's make our pages link to each other, find out how text differs from hypertext and what tags and attributes are.

Work with text

Let's learn how to work with text in HTML correctly: break it into paragraphs, indicate headings and subheadings. Let's learn how to make numbered and bulleted lists and quote the classics.

Links and images

Let's get acquainted with links in more detail, and also learn how to insert pictures and use them as links.

Table layout

Let's create our first table and find out what tags it consists of. Let's learn how to merge cells, change the number of rows and columns, align text and much more. We will also learn basic tips from the designer on how to make your table beautiful.

Introduction to Forms

Let's create our first form, learn how to work with input fields, drop-down lists, checkboxes and, of course, buttons. Let's study other form elements that will be useful to us in the future.

CSS

Introduction to CSS

Let's remember what CSS is and how to use it. Let's learn how to use CSS when working with HTML pages. Let's study the syntax of CSS and what selectors are, inheritance, and with what priority our styles are applied to an HTML document.

Selectors

Let's study selectors in more detail. Let's learn how to access one or more elements, what is the difference between a class and a pseudo-class and an element from a pseudo-element. Let's take a look at the CSS guidelines and find out what people like to ask about CSS in interviews.

Inheritance, cascading and priority

We learn that stunting and stuntmen are not from the same field. Let's understand the principles by which CSS styles are applied to HTML elements.

Text decoration

Let's return to where we started - to the text. Let's learn how to make our text beautiful and user-friendly using CSS properties: boldness, italics, size, color, background and others.

Block document model

Let's learn div and span tags, as well as how to set element sizes, padding, and borders. Let's understand how the block model of a document is formed and what capabilities we have for positioning elements.

JavaScript

Introducing JavaScript

Let's get acquainted with the third pillar of Front-end development - JavaScript. Let's find out what variables are, data types and why they are needed. And of course we will write our first program.

Conditions

Let's remember logic, logical operations and their combinations. May the strength and control be with us.

Cycles

Let's learn how to do a lot while writing little code. Let us understand that a cycle within a cycle is simple, but you need to be careful.

Arrays

There are ice masses, forests, and there are arrays in programming. We will study what they have in common and how they differ in this lesson. Hint - the loops from the previous lesson will help us a lot.

Functions

If variables and the right name for them are the ABCs of programming, then the ability to work with functions and choose suitable names for them is already a recipe. We will learn how to break a program into logical blocks and why this is important in this lesson.

Objects

We will get acquainted with the concept of objects, methods and begin to get acquainted with the principles of OOP.

Introduction to DOM

JavaScript would be useless if it couldn't interact with an HTML document. We'll learn what the DOM (Document Object Model) is, but more importantly, we'll learn how to work with HTML and CSS through JavaScript.

Event Handling

Now we'll take it to the next level and learn how to react and interact with the user using JavaScript. We'll also learn why JavaScript events can bubble and sink.

HTML5 & CSS3

HTML5: what's new and why?

Let's find out what changes have occurred in HTML5 and why. Let's study new elements and analyze cases of their correct use.

Positioning Elements and Grid

Let's look at new ways to structure pages and position elements on them.

HTML5 forms

Let's explore the dark side of power and practice with new forms in HTML5, as well as changes to old ones. Let's work with new types of fields for entering dates, colors, numbers and how to prompt the user to make his life a little easier.

Audio and video

In this tutorial, you are the DJ as well as the editor. We won’t have time to make our own Youtube during this lesson, but we will try very hard to create a prototype with basic functionality.

Working with text in CSS3

Let's find out what opportunities there are and recommendations for text formatting in the latest version of the standard.

Transition and Transform Effects in CSS3

Let's learn how to create animation and various effects using CSS3. Let's get acquainted with the pitfalls when creating such effects.

Adaptive layout

Let's find out why you need to layout adaptively, and when it is unnecessary and can cause harm. Let's look at the basic syntax and, of course, practice adaptive layout.

Flexbox & CSS Grid

We will learn about modern approaches to block layout, as well as what difficulties there are in using them.

CSS preprocessors: LESS and SASS

Want to use variables in CSS? Easily! Find out what interesting things you can do using CSS preprocessors.

JavaScript on a new level

ES-2015+

What is modern JavaScript, "strict mode" and how to live with it all.

OOP in JavaScript

Let's study how classes are structured in modern JavaScript and why they are used if everything can be done using functions. How inheritance works and what other ways to create classes exist in JS.

Functions in detail

Let's find out what Function Declaration and Function Expression are, learn how to call a function without a name. Let's look at the phrase “context binding”.

AJAX and JSON

Let's take ourselves to a new level as developers, learn how to make HTTP requests, and learn how the server and client can communicate with each other and not quarrel.

Regular Expressions

"If you have a problem and you're going to solve it with regular expressions, then you've already got two problems." Let's learn how to avoid shooting yourself in the foot using regular expressions.

Builders, task runners and dependency management

Bower, npm, gulp, Grunt, webpack and co. There is nothing complicated about this, but you will need to figure it out.

Testing in JavaScript

Where there is code, there are always errors. You will learn how to minimize their number and what practices and tools will help us with this.

Algorithms

We will learn how to write code so that later the processor and browser do not experience excruciating pain when launching your program.

ReactJS

Introduction to ReactJS

Let's get acquainted with ReactJS, learn how to write simple components and compare it with other popular frameworks. Let's get acquainted with the concept of Virtual DOM.

Architecture and configuration of React applications

Let's find out what actions we need to perform in order not only to write in React, but also to do it as efficiently and conveniently as possible.

Creating the first application in ReactJS

Let's take a closer look at JSX, ReactComponent, ReactDOM.render, Render function. We configure and launch the first application, establish relationships between components and process events.

Routing and ReactJS

What is routing; Let's get acquainted with ReactRouter and its functionality; We organize routing in our application.