Front - основы вёрстки HTML5 и CSS3

1. GitHub

1.1. username.github.io

1.2. файл readme.md - https://github.com/GnuriaN/format-README

1.3. документация - https://docs.github.com/ru

2. Система контроля версий - Git

2.1. тренировочная платформа - https://learngitbranching.js.org/?locale=ru_RU

2.2. офф.документация - https://git-scm.com/book/ru/v2

2.2.1. Как вернуться (откатиться) к более раннему коммиту?

2.3. шпаргалка - https://github.com/nicothin/web-development/tree/master/git

2.4. сам git - https://git-scm.com/

2.5. учебный курс - https://youtu.be/f2TurkSBnYQ

2.6. документация от Github - https://docs.github.com/ru

2.7. интерактивные уроки - https://githowto.com/ru

2.8. генератор gitignore - https://www.toptal.com/developers/gitignore

2.9. оформляем Readme.md - https://habr.com/ru/articles/649363/

2.10. работаем

2.10.1. локально

2.10.1.1. git init

2.10.1.2. git config --global user.name "John Doe"

2.10.1.3. git config --global user.email [email protected]

2.10.1.4. git add .

2.10.1.5. git commit -m "message"

2.10.2. удалённо

2.10.2.1. git clone https://github.com/itstepgomel/front21.git .

2.10.2.2. git remote show

2.10.2.3. git remote add prepod https://github.com/itstepgomel/front21.git

2.10.2.4. git push origin main

2.10.2.4.1. проверка на права доступа

2.10.2.5. git pull prepod

3. HTML + CSS

3.1. классификация HTML-тэгов

3.1.1. семантические теги

3.1.2. парные

3.1.2.1. ссылка - a

3.1.2.1.1. https://mailxto.com/

3.1.3. непарные

3.1.4. блочные

3.1.4.1. div

3.1.5. строчные

3.1.5.1. span

3.1.6. визуализация структуры HTML

3.2. блочная модель

3.2.1. контент

3.2.2. внутренний отступ - pading

3.2.3. рамка - border

3.2.4. внешний отступ - margen

3.2.4.1. конфликт полей

3.2.5. box-sizing

3.3. CSS

3.3.1. подключение

3.3.1.1. link

3.3.1.1.1. https://habr.com/ru/articles/445264/

3.3.1.2. тэг style

3.3.1.3. атрибут style

3.3.1.4. @import

3.3.2. селекторы

3.3.2.1. https://goo.su/css_sel

3.3.2.2. игра для изучения селекторов - https://flukeout.github.io/

3.3.2.3. css игра-батл "повтори код" - https://cssbattle.dev/

3.3.2.4. как называть классы в HTML

3.3.2.4.1. https://telegra.ph/Kakie-nazvaniya-davat-klassam-v-HTML-08-03

3.3.2.4.2. https://tpverstak.ru/common-css-class-names/

3.3.2.4.3. https://dan-it.gitlab.io/fe-book/programming_essentials/other/css_structure.html

3.3.2.4.4. https://github.com/yoksel/common-words

3.3.2.5. специфичность селекторов

3.3.2.5.1. калькулятор специфичности

3.3.3. reset.css

3.3.3.1. https://www.npmjs.com/package/reset-css

3.3.3.2. https://unpkg.com/reset-css/

3.3.4. Normalize.css

3.3.4.1. http://necolas.github.io/normalize.css/

3.3.5. http://autoprefixer.github.io/

3.3.6. фон

3.3.6.1. паттерны - http://ava7patterns.com/

3.3.6.2. градиент - https://cssgradient.io/

3.3.6.3. bgc

3.3.6.3.1. имена цфетов в HTML - https://colorscheme.ru/html-colors.html

3.3.6.3.2. color Picker - https://hslpicker.com/

3.3.6.4. bgr

3.3.6.5. bgi

3.3.6.6. bgs

3.3.6.7. bgp

3.3.6.8. bga

3.3.7. интересные-полезняки

3.3.7.1. эффекты поверхности - https://neumorphism.io/#e0e0e0

3.3.7.2. https://html-css-js.com/css/generator/

3.3.7.3. https://www.html-code-generator.com/css/text-stroke-generator

3.3.7.4. https://css3buttongenerator.com/

3.3.7.5. ломаный фон - https://bennettfeely.com/clippy/

3.3.7.6. эффект стекла - https://css.glass/

3.3.7.7. бордер генератор - https://9elements.github.io/fancy-border-radius/#66.86.93.60--216.300

3.3.7.8. рисуем стрелки-треугольники - http://apps.eky.hk/css-triangle-generator/

3.3.7.9. градиент-генератор - https://cssgradient.io/

3.3.7.10. фильтр-генератор для фото - http://www.cssfiltergenerator.com/

3.3.7.11. магазин генераторов теней - https://cssbud.com/css-generator/

3.3.7.12. border-radius - https://9elements.github.io/fancy-border-radius/

3.4. изображения

3.4.1. иконки - https://www.flaticon.com/

3.4.2. svg-генератор фигур - https://www.blobmaker.app/

3.4.3. генератор волн - https://getwaves.io/

3.4.4. object-fit - https://webref.ru/css/object-fit

3.4.5. favicon

3.4.5.1. классический вариант - https://www.favicon.by/

3.4.5.2. развёрнутый вариант - https://realfavicongenerator.net/

3.4.6. генераторы изображений

3.4.6.1. фэйк-изображения - https://fakeimg.pl/

3.4.6.2. случайное изображение - https://picsum.photos/

3.4.6.3. вариант случайного изображения - https://lorem.space/

3.5. видео-аудио

3.5.1. https://it-step-gomel.github.io/videoslider/video/cloud.mp4

3.5.2. https://it-step-gomel.github.io/fpv/cloud.webm

3.5.3. https://it-step-gomel.github.io/videoslider/video/islands.mp4

3.5.4. https://it-step-gomel.github.io/videoslider/video/moon.mp4

3.5.5. https://it-step-gomel.github.io/videoslider/video/star.mp4

3.5.6. js-библиотека

3.5.6.1. https://github.com/goldfire/howler.js

3.5.6.1.1. https://m2in.github.io/hunter/

3.5.7. Как использовать звук на сайтах

3.6. технологии вёрстки

3.6.1. блочная

3.6.1.1. position

3.6.1.1.1. static

3.6.1.1.2. relative

3.6.1.1.3. absolute

3.6.1.1.4. fixed

3.6.1.1.5. sticky

3.6.2. табличная

3.6.3. float

3.6.4. flex

3.6.4.1. игры для изучения

3.6.4.1.1. https://mastery.games/flexboxzombies/

3.6.4.1.2. https://flexboxfroggy.com/#ru

3.6.4.1.3. http://www.flexboxdefense.com/?ref=producthunt

3.6.4.1.4. https://dmitrylavrik.ru/training/process/flexbox-grid

3.6.4.2. шпаргалки

3.6.4.2.1. https://tpverstak.ru/flex-cheatsheet/

3.6.4.2.2. https://www.wm-school.ru/flexbox/flex-cheatsheet/index.htm

3.6.4.2.3. https://joomlatown.net/free/flex/spargalka-flexbox.pdf

3.6.4.2.4. https://hmarketing.ru/tools/flex/

3.6.4.2.5. https://yoksel.github.io/flex-cheatsheet/

3.6.4.2.6. https://flexbox.malven.co/

3.6.5. grid

3.6.5.1. грид-генератор - https://cssgrid-generator.netlify.app/

3.6.5.2. игра для изучения - https://cssgridgarden.com/#ru

3.6.5.3. Grid Attack ещё игра для изучения - https://codingfantasy.com/games/css-grid-attack/play

3.6.5.4. шпаргалки

3.6.5.4.1. https://tpverstak.ru/grid/

3.6.5.4.2. https://morphismail.github.io/css-grid-manual/

3.6.5.4.3. https://grid.malven.co/

3.7. анимация

3.7.1. animation

3.7.1.1. keyframe

3.7.1.2. шпаргалка - https://fls.guru/cssanimation.html

3.7.2. transition

3.7.3. https://cubic-bezier.com/#.17,.67,.83,.67

3.7.4. cssfx - коллекция эффектов

3.8. framework

3.8.1. animate.css - https://animate.style/

3.8.2. https://animejs.com/

3.8.3. Animate On Scroll Library - https://michalsnik.github.io/aos/

3.8.4. https://www.toptal.com/developers/css3maker/css3-animation

3.8.5. Magic Animations - https://www.minimamente.com/project/magic/

3.8.6. balloon.css - https://kazzkiq.github.io/balloon.css/

3.8.7. hover.css - http://ianlunn.github.io/Hover/

3.8.8. imagehover.css - http://imagehover.io/#download

3.8.9. toggles.css - https://jnkkkk.github.io/MoreToggles.css/

3.8.10. bootstrap

3.8.10.1. https://getbootstrap.com/

3.8.10.2. https://bootstrap-4.ru/

3.8.10.3. https://bootstrap-5.ru/

3.8.10.4. https://bootstrap-v5.ru/

3.8.10.5. https://bootstrap5.ru/

3.8.10.6. https://getbootstrap.su/

3.8.11. https://astro.build/

3.8.12. Materialize CSS

3.8.12.1. https://materializecss.com/

3.9. переменные

3.9.1. https://geniuscourses.com/руководство-по-переменным-в-css/

3.9.2. https://developer.mozilla.org/ru/docs/Web/CSS/Using_CSS_custom_properties

3.10. формы

3.10.1. конструкторы форм

3.10.1.1. Гугл формы - https://forms.google.com/

3.10.1.2. Яндекс формы - https://forms.yandex.ru

3.10.1.3. QForm.io - https://ru.qform.io

3.10.1.4. Re:plain - https://replain.cc/ru

3.10.2. pattern - http://htmlbook.ru/html/input/pattern

3.11. работа с текстом

3.11.1. шрифты

3.11.1.1. font-pallete - https://goo.su/fontp

3.11.1.2. системные - https://goo.su/fontsys

3.11.1.3. https://fonts.google.com/

3.11.1.3.1. https://10015.io/tools/google-fonts-pair-finder

3.11.1.4. иконочные шрифты

3.11.1.4.1. https://icomoon.io/

3.11.1.4.2. https://fontawesome.com/

3.11.1.5. конвертер шрифтов

3.11.1.5.1. https://transfonter.org/

3.11.1.6. https://gwfh.mranftl.com/fonts

3.11.1.7. https://webfonts.pro/

3.11.1.8. https://developers.google.com/fonts/docs/getting_started?hl=ru

3.11.1.9. адаптивный шрифт

3.11.1.10. как подключить внешний шрифт в CSS

3.11.1.10.1. https://codebra.ru/ru/lessons-css/fonts/6/1

3.11.2. text-indent

3.11.2.1. https://youtu.be/oBF8QCQ4IYw?list=TLPQMjQwODIwMjOVc5MB3dPNUA

3.11.3. кодовые последовательности или спецсимволы

3.11.3.1. документация на английском - https://html.spec.whatwg.org/multipage/named-characters.html

3.11.3.2. документация на русском... спецсимволы - https://html5book.ru/specsimvoly-html/

3.11.3.3. Специальные символы HTML - https://htmlweb.ru/html/symbols.php

4. 🐱‍🏍 Настройка рабочей среды

4.1. 💖 для браузера

4.1.1. антибанер

4.1.2. менеджер паролей

4.1.3. коллекция ссылок

4.1.4. полезные расширения для верстальщика

4.1.4.1. https://goo.su/snipCSS

4.1.4.2. https://telegra.ph/Poleznye-rasshireniya-Chrome-dlya-verstki-12-18

4.1.4.3. Рулетка - https://www.felixniklas.com/dimensions/

4.1.4.4. CSS Peeper

4.1.4.5. Копируем код из видео

4.1.4.6. Генератор картинок сразу в браузере JourneyDraw

4.1.5. вкладки для подписки на Youtube

4.2. редактор

4.2.1. VSCode

4.2.1.1. плагины для вёрстки минимальный комплект

4.2.1.1.1. Russian Language Pack for Visual Studio Code

4.2.1.1.2. HTML to CSS autocompletion

4.2.1.1.3. Image preview

4.2.1.1.4. indent-rainbow

4.2.1.1.5. IntelliSense for CSS class names in HTML

4.2.1.1.6. Live Server

4.2.1.1.7. All Autocomplete

4.2.1.1.8. Auto Complete Tag

4.2.1.1.9. CSS Navigation

4.2.1.1.10. CSS Peek

4.2.1.1.11. eCSStractor for VSCode

4.2.1.1.12. Svg Preview

4.2.1.1.13. Vscode Google Translate

4.2.1.1.14. vscode-icons

4.2.1.1.15. Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero Pro

4.2.1.1.16. px to rem

4.2.1.2. настройка "горячих клавиш"

4.2.1.2.1. шпора по клавишам - https://www.nikomedvedev.ru/other/vscodeshortcuts/hotkeys.html

4.2.1.2.2. HotKey или "Горячие клавиши" для всего

4.2.1.3. Emmet

4.2.1.3.1. шпаргалка - https://dwstroy.ru/stail/plaginy-rasshireniya/emmet-shpargalka/

4.2.1.3.2. тренажёр - https://epixx.github.io/emmet/

4.2.1.3.3. оффициальная документация - https://emmet.io/

4.2.2. SiblimeText

4.3. автопереключатель клавиатуры

4.4. Кибербезопасность...

4.4.1. вопрос-ответ - https://goo.su/evm-pc

4.4.2. кибербезопасность простым языком - https://cyber-care.ru/videolessons

4.4.3. антивирус - https://www.virustotal.com/gui/home/upload

5. справочники

5.1. https://html5book.ru/

5.2. https://webref.ru/

5.3. https://www.w3schools.com/

5.4. https://caniuse.com/

5.5. http://htmlbook.ru/

5.6. Анна Блок полезное - https://tpverstak.ru/

5.7. https://wm-school.ru/index.html

5.8. https://caninclude.glitch.me/ проверяем можно ли вложить один тэг в другой

5.9. валидаторы

5.9.1. https://jigsaw.w3.org/css-validator/

5.9.2. https://validator.w3.org/

5.10. https://dev-questions.com/ - подготовка к собеседованию

5.11. https://ru.w3docs.com/

5.12. Коллекция советов профессионалов CSS

6. Продвижение сайта SEO

6.1. Качественный код

6.2. Не нарушай авторское право

6.2.1. Аудио

6.2.2. Видео

6.2.3. Фото

6.2.4. Плагиат / Копирайтинг

6.2.5. Шрифты

7. Способы создания сайта

7.1. самописный

7.1.1. работа с макетами

7.1.1.1. Figma

7.1.1.1.1. https://tinyurl.com/2msl4ucd

7.1.1.1.2. https://www.figma.com/

7.1.1.1.3. Хелп по Фигме — https://figma.help/

7.1.1.1.4. Карта канала — http://start.video

7.1.1.1.5. плагины

7.1.1.1.6. обновления и уроки

7.1.1.2. альтернатива Figma - Pixso

7.1.1.2.1. https://pixso.net/ru/

7.1.1.3. avocode

7.1.1.3.1. https://avocode.com/

7.2. online конструктор

7.2.1. tilda.cc

7.2.1.1. бесплатные icon - https://tilda.cc/ru/free-icons/

7.2.1.2. http://stepfromit.tilda.ws/

7.3. CMS (Content management system)

7.3.1. Wordpress

7.3.1.1. пример начала работы - https://goo.su/wp_start

7.3.2. Joomla

7.3.3. Drupal

7.3.4. 1C Битрикс (CMR)

8. Препроцессоры

8.1. Less

8.1.1. https://lesscss.org/

8.1.2. https://webref.ru/index.php/layout/less

8.1.3. https://mrmlnc.gitbooks.io/less-guidebook-for-beginners/content/

8.2. Sass / SCSS

8.2.1. https://sass-lang.com/

8.2.2. https://sass-scss.ru/

8.2.3. https://webref.ru/course/sass

9. Сборщик проектов (пакеты - avtopref)

9.1. Gulp

9.1.1. https://gulpjs.com/

9.2. PUG

9.3. WebPack

9.4. Prepros

9.4.1. https://prepros.io/downloads

10. ДЗ

11. Оптимизация

11.1. изображений

11.1.1. https://www.iloveimg.com/ru

11.1.2. https://tinypng.com/

11.1.3. конвертер webp - https://cloudconvert.com/webp-converter

11.1.4. ещё конвертер - https://www.11zon.com/ru/

11.2. видео-аудио

11.2.1. https://123apps.com/ru/

12. готовые решения для вёрстки

12.1. админка для статического сайта

12.1.1. http://textolite.ru/

12.2. мои коллекции в https://codepen.io

12.2.1. фоновое офорление - https://codepen.io/collection/XpzvBM

12.2.2. первые экраны - https://codepen.io/collection/DrYMgL

12.2.3. обратный отсчёт - https://codepen.io/collection/VYjbxa

12.2.4. страницы 404 - https://codepen.io/collection/pgeYBw

12.2.5. оформление кнопок - https://codepen.io/collection/NqBVQe

12.2.6. оформление меню - https://codepen.io/collection/bNxVpg

12.2.7. текстовые эффекты - https://codepen.io/collection/VYBJrd

12.2.8. карточки товаров - https://codepen.io/collection/jbpjNb

12.2.9. заготовки сайтов - https://codepen.io/collection/qOQdEB