Карта цветов: - черный - к изучению - лиловый - учить после всего модуля - светло-зелёный - эти знания будут плюсом - красный - пока что не трогать Базовые знания (минимум, чтобы войти на рынок разработки/компанию) 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-ofthe-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/#regularexpressions - Дебаггинг в 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 - решебник-задачник