Вы находитесь на странице: 1из 6

Карта цветов:

- черный - к изучению
- лиловый - учить после всего модуля
- светло-зелёный - эти знания будут плюсом
- красный - пока что не трогать
Базовые знания (минимум, чтобы войти на рынок
разработки/компанию)
1)HTML
- Базовый HTML
- https://www.freecodecamp.org/learn/responsi
ve-web-design/#basic-html-and-html5
- http://code.mu/ru/markup/manual/html/
(Справочник HTML)
- Семантическая вёрстка
- https://medium.com/@stasonmars/секреты-испо
льзования-семантической-верстки-в-html5-c7
cd5e6f1ebb
- Гиперссылки и якоря
- https://developer.mozilla.org/ru/docs/Learn
/HTML/Introduction_to_HTML/Creating_hyperli
nks
- Валидация форм
- https://developer.mozilla.org/ru/docs/Learn
/Forms/Form_validation
- Условность и лучшая практика
- Доступность
- Базовый SEO
- https://www.socialmediatoday.com/news/8-of-
the-most-important-html-tags-for-seo/574987
/
- Opengraph
- https://ogp.me
- Заголовки и метаданные
- https://developer.mozilla.org/ru/docs/Learn
/HTML/Introduction_to_HTML/The_head_metadat
a_in_HTML
- Schema.org
- https://schema.org/docs/gs.html
2)CSS
- Базовый CSS
- https://www.freecodecamp.org/learn/responsi
ve-web-design/#basic-css
- http://code.mu/ru/markup/manual/css/ -
справочник
- Каскад и наследование
- https://developer.mozilla.org/ru/docs/Learn
/CSS/Building_blocks/Cascade_and_inheritanc
e
- Визуальный дизайн
- https://www.freecodecamp.org/learn/responsi
ve-web-design/#basic-css
- Прикладная доступность (UI) (user interface)
- https://www.freecodecamp.org/learn/responsi
ve-web-design/#applied-accessibility
- Селекторы
- https://flukeout.github.io - Наглядная игра
для того, чтобы понять что такое селекторы
и какие они существуют в CSS
- Создание макета
- float-элементы (не используется, но
желательно знать)
- https://developer.mozilla.org/ru/docs/W
eb/CSS/float
- Позиционирование
- https://developer.mozilla.org/ru/docs/L
earn/CSS/CSS_layout/Positioning
- Отображение (display)
- https://html5css.ru/css/css_display_vis
ibility.php
- Блочная модель документа
- https://developer.mozilla.org/ru/docs/L
earn/CSS/Building_blocks/The_box_model
- CSS Grid
- https://www.freecodecamp.org/learn/resp
onsive-web-design/#css-flexbox
- https://cssgridgarden.com/#ru - Игра для
наглядного понимания гридов, как
работаю и что делать с ними
- Css Flexbox
- https://www.freecodecamp.org/learn/resp
onsive-web-design/#css-flexbox
- http://flexboxfroggy.com/#ru - игра для
наглядной практики Flexbox
Выпускная работа по Css + Html (Адаптивная вёрстка)
- Лендинг для портфолио
- Страница технической документации. Пример:
https://codepen.io/freeCodeCamp/full/NdrKKL
3)JavaScript
- Синтаксис и базовые конструкции
- https://www.freecodecamp.org/learn/javascri
pt-algorithms-and-data-structures/#basic-ja
vascript
- http://code.mu/ru/javascript/book/prime/
- http://code.mu/ru/javascript/book/supreme/
- Регулярные выражения
- Книга для прочтения
(https://drive.google.com/file/d/1tjnuQp_95
ZcyofzqZBLCyNw3Hs9saTQ1/view?usp=sharing)
- Изучение работы с DOM
- Изучение Fetch Api / Ajax (XHR)
- ES6+ и модули Javascript
- https://www.freecodecamp.org/learn/javascri
pt-algorithms-and-data-structures/#es6
- Регулярные выражения в JS
- https://www.freecodecamp.org/learn/javascri
pt-algorithms-and-data-structures/#regular-
expressions
- Дебаггинг в JS
- https://www.freecodecamp.org/learn/javascri
pt-algorithms-and-data-structures/#debuggin
g
- Структуры и данные
- https://www.freecodecamp.org/learn/javascri
pt-algorithms-and-data-structures/#basic-da
ta-structures
- Базовые алгоритмы
- https://www.freecodecamp.org/learn/javascri
pt-algorithms-and-data-structures/#basic-al
gorithm-scripting
- ООП (Объектно Ориентированное программирование)
в JS
- https://www.freecodecamp.org/learn/javascri
pt-algorithms-and-data-structures/#object-o
riented-programming
- Функциональное программирование
- https://www.freecodecamp.org/learn/javascri
pt-algorithms-and-data-structures/#function
al-programming
- Продвинутый JS
- https://www.freecodecamp.org/learn/javascri
pt-algorithms-and-data-structures/#intermed
iate-algorithm-scripting
- Понимание концепций декорирования, добавление
события, область видимости, прототипов, теневой
DOM, строгий режим, промисов
4)Системы контроля версий
- Хостинги для контроля версий
- GitHub
- https://github.com/git-game/git-game -
игра для освоения git
- GitLab
- BitBucket
- Базовые знания Git
Знания более высокого уровня, будет большим плюсом
5)Безопасность в js
- HTTPS
- CORS
- Content Security Policy
- OWASP Security Risks
6)Менеджер пакетов
- npm
- yarn
7)Архитектура CSS
- BEM
- OOCSS
- SMACSS
8)Css Препроцессоры
- Sass
- PostCSS
- Less
9)Инструменты сборки
- Исполнители задач
- npm scripts
- Gulp
- Сборщик модулей
- Webpack
- Rollup
- Parcel
- Форматирование
- Prettier
- ESLint
- StandartJS
10) Выбираем фреймворк
- Современный CSS
- Стилизация компонентов
- CSS Модули
- Стилизация JSX
- Emotion
- Radium
- Glamorous
- Web-компоненты
- HTML-шаблоны
- Пользовательские элементы
- Теневой DOM
- CSS-Фреймворки
- Reactstrap
- Material UI
- Tailwind CSS
- Chakra UI
- Bootstrap
- Materialize CSS
- Bulma
11) Тестирование приложений
12) Типизация
13) PWA (Progressive Web App)
14) SSR (Server Side Rendering)
15) GraphQL
16) SSG (Static Site Generator)
17) Мобильные приложения
18) Десктопные приложения
19) WASM (--> Путь к изучению Go, C, C++ или Rust)
20) -- Продолжаем учится:)

Полезные ссылки:
- Снипетты (рецепты кода, гайды)
- https://css-tricks.com/snippets/html/
- Вдохновение для дизайнеров и кодеров
- http://tympanus.net/codrops/category/blueprints
/
- Хорошие статьи по колористике, CSS, дизайну
- https://css-live.ru/css/css-colors.html
- https://code.mu - решебник-задачник