We teach you how to create websites: we explain how a browser works, how to use HTML, CSS, and JavaScript (ES6). The teachers will teach you how to repeat the framework, explain how to build a web application using the Gulp/webpack tool.

You will understand the tools that speed up development and will be able to use the rules that will soon become a standard right now. You will work on projects in a team and independently. You will create several websites and a web application, and you will be able to build websites for mobile devices. After completing the course, your portfolio will help you take the first steps in your career as a Front-End developer.

Why Front-End?

  • After writing the code, you see the result immediately
  • Your portfolio is visualized for the customer
  • Knowledge of Front-End will allow you to move to any area of development
  • You will learn how to create websites and interfaces using HTML and CSS
  • You will learn one of the most popular languages – JavaScript

Course program

HTML/CSS

  • Introductory lesson, familiarization
  • What is a website. Setting up the workflow. Introduction to HTML
  • Git version control system and GitHub service
  • Semantics, links and HTML5 tags
  • Figma for Front-End developers
  • Building forms
  • Introduction to CSS
  • CSS selectors
  • CSS Box Model of a document
  • Flexbox, Bootstrap
  • Web fonts, Font Face
  • CSS positioning and transformation
  • Scalable vector graphics (SVG)
  • Working with pre- and post-processors
  • (optional) Approaches to CSS code organization and architecture: SMACSS or BEM
  • Responsive web design (RWD)
  • Responsive navigation
  • Responsive graphics
  • CSS Grid Layout system (CSS Grid Layout)
  • CSS animations
  • Practice – layout design
  • Project 1. First website with HTML and CSS
  • CSS styling of forms

JavaScript

  • JavaScript basics
  • Data types and operators
  • Loops and conditions
  • Functions
  • Objects
  • Arrays
  • Document Object Model (DOM)
  • Events
  • Introduction to jQuery and Slick Slider/Swiper plugins
  • Asynchronous JavaScript and XML (AJAX).
  • Web storage
  • Project 2: Architecture – basic website + JS

Front-End libraries and plugins

  • Gulp. A set of open source JavaScript tools. Introduction to Webpack, an open source JavaScript batch module
  • Classes
  • Classes. Inheritance
  • Introduction to React
  • Stateful vs Stateless components. Forms, events. Popular libraries for React
  • React state and props
  • List & Conditional rendering
  • React: Hooks
  • React: Routing
  • Project 3 – Responsive Website with JS
  • Presentation of the final project