Web Developer from Scratch
Stage 1: HTML, CSS and responsive design
Learn how to layout and style websites using HTML and CSS and adapt them for different devices. Master Grid Layout and Flexbox technologies for positioning elements on the page, and learn how to connect preprocessors to your project.
Project Outcome:
- Solidify the skill of layout without hints and instructions, and connect JavaScript to your project;
- 4 lendings – selling one-page websites.
Lessons:
- Introductory lesson and introduction to the course project;
- HTML basics;
- CSS basics;
- Line and block elements;
- Introduction to graphic editors;
- Element positioning. Flexbox;
- Positioning elements. Grid Layout;
- CSS preprocessors;
- Introduction to Adaptive Design;
- Practice of creating adaptive design;
- BEM methodology and animation for the site;
- Final testing of the site.
Stage 2: JavaScript Fundamentals
Get a smooth entry into programming: learn the basic syntax of the JavaScript language. Learn how to work with variables, functions, objects and arrays. Learn to solve problems in this language independently and in teams.
Project Outcome:
- Solidify the skill of layout without hints and instructions, and connect JavaScript to the project;
- At the end of the course, you’ll make a stylish JavaScript game-based landing page.
Lessons:
- Introduction to JS language;
- Git and command line basics;
- Variables. Data types;
- Conditional branching;
- Cycles;
- Functions;
- Arrays;
- Built-in objects;
- Callback, setTimeout, setInterval;
- DOM 1. Template control from JS, events;
- D OM 2. Events on dynamic elements;
- DOM 3. Popup events. Limitations of innerHTML;
- API 1. GET, POST, DELETE;
- API 2. Promise chains;
- API 3. error handling;
- Modular JS;
- API 4. authorization;
- Libraries and npm.
Stage 3: Development Tools
In this course you will learn about the basic developer tools that are important for the ease of working with the project and the speed of making changes. You will get to know and work with Git, GitHub, linters, formatter, package managers and Webpack build tool. In the second half of the course, you will learn how to test your project, refactoring and code review.
Project Outcome:
- Program a card game application, configure formatters and linters;
- Debug and refactor your project after testing.
Lessons:
- Code review;
- Package Managers. Code Linting;
- Tools for building projects;
- TypeScript;
- Testing basics (automated tests, unit tests);
- Application debugging, debugging and profiling;
- Refactoring;
- Coursework (end-to-end).
Stage 4: React Library
React library is a set of ready-made solutions and functions in JavaScript. Today React is the most popular library in frontend development, and most large companies use it. In this course, you will learn React components, React Hooks, and how to work with the Redux library.
Project Outcome:
In this course, you will create a music service similar to Google Music, which will include: a showcase with available tracks, an in-app player, adding a track to favorites and a selection list.
Tutorials:
- Introduction to React;
- JSX;
- Component state and lifecycle;
- Styling. Styled Components;
- Routing;
- React Refs;
- Context;
- State management. Redux;
- Redux. Asynchrony;
- Component testing.
Step 5: Familiarize yourself with backend development
Understanding server-side is the key to building complete web services. During the course you will learn how to receive, process and collect data in json format, work with APIs and understand how the backend is organized: server startup, routing, request processing. Become familiar with Express.js server application development library, Node.js runtime environment, and databases.
Design Outcome:
- Within this short module, you will create your own backend to a project.
Lessons:
- Backend fundamentals;
- Node.js;
- REST API;
- Express and MongoDB.
Stage 6: Team Development Processes
By this point, you will have gone through the basic blocks of web development, apart from the actual teamwork practice. You’ll break down the topic of Deployment and CI/CD in more detail before starting a project. Next, you will learn how to decompose tasks, divide areas of responsibility, conduct code reviews and test solutions. In addition to professional skills (hard skills), you will develop your teamwork skills: you will learn to accept and give feedback, meet deadlines, negotiate, compromise, motivate each other and present the work of the whole team.
Project Outcome:
Team development of an online training website awaits you. Within the team you will have to distribute tasks to meet deadlines, evaluate each other’s code, and work on time segments (sprints). The project will be defended in the format of a presentation in front of the customer – in his role will be a technical leader of the profession (techlead) or a mentor.
Step 7: Final Individual Project
Any training should end with a demonstration of everything the student of the web development course has learned. In 4 weeks, apply all your skills and experience to develop the frontend part for an ad service – an analog of Avito.
Project outcome:
- Develop the frontend part for an amazon-like classifieds service;
- Backend-part – task with an asterisk.
If desired, you can finish it yourself and get feedback from the teacher.