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.

The post Web Developer from Scratch appeared first on M&D_WS.

You’ll go through the basics of HTML and CSS layout, learn how to create websites and make them adaptive so they look equally beautiful on monitor screens, smartphones and tablets.

• Basic HTML;
• Basic CSS. 2 modules;
• Preparing for layout;
• Layout. HTML layout;
• Layout. Flexbox;
• Layout. Styling;
• Advanced HTML. Forms;
• Advanced CSS. 2 modules;
• Adaptability. Desktop;
• Adaptability. Mobile devices;
• Accessibility;
• Cross-browser;
• Grids;
• Animation;
• Working with hosting Final project: you’ll build a custom layout for Blanchard Art Gallery or W-Wawe podcast platform (your choice).

JavaScript. Basic Level

You will learn the basics of JavaScript, learn how to work with DOM and make your projects dynamic. Learn how to use JavaScript to communicate with the server.

• Introduction;
• Variables and working with numbers;
• Strings, boolean and conditional statements;
• Arrays and loops;
• Functions;
• Objects;
• Introduction to DOM. 2 modules;
• Constants, scopes and closures;
• Type conversion and non-strict comparisons;
• Server communication, async/await;
• Final project: develop a full-fledged CRM-system.

Course to choose from. Vue

You will learn how to develop applications using the Vue JavaScript framework.

• Vue basics;
• Project creation;
• Product Catalog;
• Pagination and filtering;
• Product page;
• Shopping cart;
• Working with API. List of goods;
• Working with API. Order placement;
• Deploy;
• Vue 3.0.

Final project: write an online store on Vue.js framework. your choice will be either Moire premium lingerie store or Technosaurus electronic equipment store.

Course of choice. React

You will learn the popular React framework. Learn how to use Redux for data management.

• Introduction to React;
• Project creation;
• TypeScript;
• Components on Reddit news card example;
• Hooks and functional programming;
• More about components and an introduction to component testing;
• Introduction to Component Testing;
• Working with public API on Reddit example;
• API + Context;
• Portal and Form;
• Introduction to Redux using the comment input field as an example;
• Using Redux-Thunk with the example of loading a user profile;
• Forms on comment and post card example;
• Infinite lists using the post feed as an example;
• Routing;
• Deploy;
• Bonus module: Mobx, effector and other alternatives to redux;
• Final project: develop a timed task tracker using the Pomodoro method.

On these courses you will get versatile skills that will help you feel more confident in your profession.

The post Web Developer Profession appeared first on M&D_WS.

• 8 lessons (video and/or text);
• 17 quizzes;
• Supplemental materials;
• Help in Discussions.

What you will learn

• Understand basic web development terminology, distinguish frontend from backend;
• Use browser tools to view and modify page source code;
• Understand the processes that occur when accessing a website (how the browser works, protocols, servers)

Description

Before we move on to writing our first program, we will systematize our knowledge of web development and become familiar with related technologies. This course will help to understand what you need to know and where you can go as a beginner developer.

Course Program

Duration 3 hours

Introduction

• Familiarize yourself with the course;
• theory.

HTML

To familiarize with HTML markup language, understand its basic idea.

• theory;
• tests.

CSS

• To get acquainted with CSS technology and its capabilities. Learn about CSS frameworks;
• theory;
• tests.

Hosting

• To consider such concepts as hosting, its types, DNS and domain. Briefly familiarize yourself with the process of site registration;
• theory;
• tests.

Backend development

• Learn what backend development is, the languages and technologies used;
• theory;
• tests.

Frontend development

• Learn what frontend development is, its difference from layout and the languages and technologies used in it;
• theory;
• tests.

Role

• Examine what roles there are in website development. Learn about the positions of developers on the team;
• Theory.

Learning

• To learn what knowledge you need to become a programmer, how you should organize the learning process and what resources to use;
• theory.9. Additional materials

Articles and videos to help you dive deeper into the course topic.

The post Introduction to Web Development appeared first on M&D_WS.