⌨️ Учимся с нуля верстать сайт на CSS и HTML
Очень понятный и важный гайд для новичков по верстке: без препроцессоров, сборщиков и каких-либо сторонних инструментов. Только HTML и CSS. Один из лучших гайдов на русском Ютубе.
1. Начало и подготовка.
[50:42]
2. Верстаем блоки, работа с флексами и трансформацией.
[34:11]
3. Верстка блоки сервисов и девайсов.
[34:04]
4. Верстаем блоки с аккордеоном и отзывами.
[35:23]
5. Снова верстка блоков и работа с иконочным шрифтом Fontawesome.
[27:54]
6. Верстаем блоки с помощью flexbox.
[28:04]
7. Заканчиваем основную HTML-верстку.
[1:10:01]
8. Делаем блоки адаптивными и подгоняем сайт под разные устройства.
[39:35]
9. Завершаем адаптивную верстку.
[35:36]
10. Делаем мобильную навигацию, бургер-меню и взаимодействуем с JavaScript.
[27:43]
11. Оживляем сайт с помощью JQuery.
[47:16]
12. Выкладываем сайт: как настроить хостинг и домен, установить SSL-сертификат.
[32:54]
#видео #верстка
Очень понятный и важный гайд для новичков по верстке: без препроцессоров, сборщиков и каких-либо сторонних инструментов. Только HTML и CSS. Один из лучших гайдов на русском Ютубе.
1. Начало и подготовка.
[50:42]
2. Верстаем блоки, работа с флексами и трансформацией.
[34:11]
3. Верстка блоки сервисов и девайсов.
[34:04]
4. Верстаем блоки с аккордеоном и отзывами.
[35:23]
5. Снова верстка блоков и работа с иконочным шрифтом Fontawesome.
[27:54]
6. Верстаем блоки с помощью flexbox.
[28:04]
7. Заканчиваем основную HTML-верстку.
[1:10:01]
8. Делаем блоки адаптивными и подгоняем сайт под разные устройства.
[39:35]
9. Завершаем адаптивную верстку.
[35:36]
10. Делаем мобильную навигацию, бургер-меню и взаимодействуем с JavaScript.
[27:43]
11. Оживляем сайт с помощью JQuery.
[47:16]
12. Выкладываем сайт: как настроить хостинг и домен, установить SSL-сертификат.
[32:54]
#видео #верстка
YouTube
#1 Верстка сайта с нуля для начинающих | HTML, CSS
В этом видео начнем верстать сайт с нуля. Верстка сайта это процесс создания сайта из макета, который нарисовал дизайнер. Видео для начинающих, в нем не будет препроцессоров, сборщиков и каких-либо инструментов, только HTML и CSS!
---------------------…
---------------------…
⌨️ Учимся с нуля верстать сайт на CSS и HTML
Очень понятный и важный гайд для новичков по верстке: без препроцессоров, сборщиков и каких-либо сторонних инструментов. Только HTML и CSS. Один из лучших гайдов на русском Ютубе.
1. Начало и подготовка.
[50:42]
2. Верстаем блоки, работа с флексами и трансформацией.
[34:11]
3. Верстка блоки сервисов и девайсов.
[34:04]
4. Верстаем блоки с аккордеоном и отзывами.
[35:23]
5. Снова верстка блоков и работа с иконочным шрифтом Fontawesome.
[27:54]
6. Верстаем блоки с помощью flexbox.
[28:04]
7. Заканчиваем основную HTML-верстку.
[1:10:01]
8. Делаем блоки адаптивными и подгоняем сайт под разные устройства.
[39:35]
9. Завершаем адаптивную верстку.
[35:36]
10. Делаем мобильную навигацию, бургер-меню и взаимодействуем с JavaScript.
[27:43]
11. Оживляем сайт с помощью JQuery.
[47:16]
12. Выкладываем сайт: как настроить хостинг и домен, установить SSL-сертификат.
[32:54]
#видео #верстка
Очень понятный и важный гайд для новичков по верстке: без препроцессоров, сборщиков и каких-либо сторонних инструментов. Только HTML и CSS. Один из лучших гайдов на русском Ютубе.
1. Начало и подготовка.
[50:42]
2. Верстаем блоки, работа с флексами и трансформацией.
[34:11]
3. Верстка блоки сервисов и девайсов.
[34:04]
4. Верстаем блоки с аккордеоном и отзывами.
[35:23]
5. Снова верстка блоков и работа с иконочным шрифтом Fontawesome.
[27:54]
6. Верстаем блоки с помощью flexbox.
[28:04]
7. Заканчиваем основную HTML-верстку.
[1:10:01]
8. Делаем блоки адаптивными и подгоняем сайт под разные устройства.
[39:35]
9. Завершаем адаптивную верстку.
[35:36]
10. Делаем мобильную навигацию, бургер-меню и взаимодействуем с JavaScript.
[27:43]
11. Оживляем сайт с помощью JQuery.
[47:16]
12. Выкладываем сайт: как настроить хостинг и домен, установить SSL-сертификат.
[32:54]
#видео #верстка
⌨️ Осваиваем HTML & CSS для верстки сайтов — уроки для начинающих
Один из лучших туториалов по верстке на HTML и CSS. Особенно круто здесь то, что автор дает практические домашние задания в отличие от 95% всех видеокурсов на YouTube.
1. Знакомство с основным каркасом страницы
[52:57]
2. Знакомство с header, article, section и другими тегами
[19:00]
3. Ссылки и изображения
[34:47]
4. Верстаем таблицы
[26:44]
5. Создание web формы
[34:39]
6. Знакомство с CSS
[47:09]
7. Псевдоклассы и псевдоэлементы, часть 1
[28:34]
8. Псевдоклассы и псевдоэлементы, часть 2
[15:13]
#верстка
Один из лучших туториалов по верстке на HTML и CSS. Особенно круто здесь то, что автор дает практические домашние задания в отличие от 95% всех видеокурсов на YouTube.
1. Знакомство с основным каркасом страницы
[52:57]
2. Знакомство с header, article, section и другими тегами
[19:00]
3. Ссылки и изображения
[34:47]
4. Верстаем таблицы
[26:44]
5. Создание web формы
[34:39]
6. Знакомство с CSS
[47:09]
7. Псевдоклассы и псевдоэлементы, часть 1
[28:34]
8. Псевдоклассы и псевдоэлементы, часть 2
[15:13]
#верстка
💻 Соревнования для верстальщиков
CSSBattle — один из лучших способов практиковаться в создании фигур на CSS. Платформа представляет из себя онлайн-игру, где верстальщики соревнуются за первое место. Написал более лаконичный код — получил больше поинтов.
На сайте присутствуют уровни сложности для всех: есть совсем простые фигуры, для создания которых хватит только самых основ и 10 минут кодинга. А есть сложные, но интересные задачи, над которыми можно сидеть часами.
Приступить к соревнованиям
#верстка
CSSBattle — один из лучших способов практиковаться в создании фигур на CSS. Платформа представляет из себя онлайн-игру, где верстальщики соревнуются за первое место. Написал более лаконичный код — получил больше поинтов.
На сайте присутствуют уровни сложности для всех: есть совсем простые фигуры, для создания которых хватит только самых основ и 10 минут кодинга. А есть сложные, но интересные задачи, над которыми можно сидеть часами.
Приступить к соревнованиям
#верстка
⌨️ Уроки по HTML для начинающих
Язык гипертекстовой разметки HTML — основа любой веб-страницы, поэтому это первое, что следует изучать начинающему фронтенд разработчику. В своих коротких видео автор рассказывает про все детали, которые большинство упускает.
1. Установка brackets. Настройка brackets. Создание веб страницы
[10:00]
2. HTML что такое тег. Парные, непарные теги. Тег i
[8:12]
3. Структура HTML документа. Атрибут html тега. Параметры тега
[13:37]
4. Атрибуты тега meta: name, content, http-equiv, charset, description, keywords, robots
[11:31]
5. HTML теги для форматирования текста. html5 работа с текстом
[17:19]
6. HTML список. Маркированный список. Нумерованный список. Атрибуты списков
[6:48]
7. Cписки определений HTML. Теги dl dt dd. Frontend разработка
[4:52]
8. HTML5 работа с изображениями. Тег img. Атрибут alt. Фон body картинка
[16:29]
#верстка
Язык гипертекстовой разметки HTML — основа любой веб-страницы, поэтому это первое, что следует изучать начинающему фронтенд разработчику. В своих коротких видео автор рассказывает про все детали, которые большинство упускает.
1. Установка brackets. Настройка brackets. Создание веб страницы
[10:00]
2. HTML что такое тег. Парные, непарные теги. Тег i
[8:12]
3. Структура HTML документа. Атрибут html тега. Параметры тега
[13:37]
4. Атрибуты тега meta: name, content, http-equiv, charset, description, keywords, robots
[11:31]
5. HTML теги для форматирования текста. html5 работа с текстом
[17:19]
6. HTML список. Маркированный список. Нумерованный список. Атрибуты списков
[6:48]
7. Cписки определений HTML. Теги dl dt dd. Frontend разработка
[4:52]
8. HTML5 работа с изображениями. Тег img. Атрибут alt. Фон body картинка
[16:29]
#верстка
👨💻 Вёрстка простого сайта по PSD-макету — [1:56:03]
Это запись двухчасовой прямой трансляции, в которой автор верстает несложный сайт, используя HTML, CSS и язык программирования JavaScript, подробно комментируя все свои действия.
Перейти к просмотру
#видео #верстка
Это запись двухчасовой прямой трансляции, в которой автор верстает несложный сайт, используя HTML, CSS и язык программирования JavaScript, подробно комментируя все свои действия.
Перейти к просмотру
#видео #верстка
💥 Адаптивное CSS свойство — [11:07]
Адаптивная вёрстка помогает сайту выглядеть нормально на разных экранах одновременно: на планшете, телефоне и компьютере. Но проблема в том, что писать такой код довольно тяжело.
Автор придумал одну формулу, которую программа самостоятельно просчитывает при изменении экрана, которую он и показывает в этом видео. Она универсальна и подходит для размера шрифта, отступов или самих блоков.
Перейти к просмотру
#верстка
Адаптивная вёрстка помогает сайту выглядеть нормально на разных экранах одновременно: на планшете, телефоне и компьютере. Но проблема в том, что писать такой код довольно тяжело.
Автор придумал одну формулу, которую программа самостоятельно просчитывает при изменении экрана, которую он и показывает в этом видео. Она универсальна и подходит для размера шрифта, отступов или самих блоков.
Перейти к просмотру
#верстка
⌨️ Осваиваем HTML & CSS для верстки сайтов — уроки для начинающих
Один из лучших туториалов по верстке на HTML и CSS. Особенно круто здесь то, что автор дает практические домашние задания в отличие от 95% всех видеокурсов на YouTube.
1. Знакомство с основным каркасом страницы
[52:57]
2. Знакомство с header, article, section и другими тегами
[19:00]
3. Ссылки и изображения
[34:47]
4. Верстаем таблицы
[26:44]
5. Создание web формы
[34:39]
6. Знакомство с CSS
[47:09]
7. Псевдоклассы и псевдоэлементы, часть 1
[28:34]
8. Псевдоклассы и псевдоэлементы, часть 2
[15:13]
#верстка
Один из лучших туториалов по верстке на HTML и CSS. Особенно круто здесь то, что автор дает практические домашние задания в отличие от 95% всех видеокурсов на YouTube.
1. Знакомство с основным каркасом страницы
[52:57]
2. Знакомство с header, article, section и другими тегами
[19:00]
3. Ссылки и изображения
[34:47]
4. Верстаем таблицы
[26:44]
5. Создание web формы
[34:39]
6. Знакомство с CSS
[47:09]
7. Псевдоклассы и псевдоэлементы, часть 1
[28:34]
8. Псевдоклассы и псевдоэлементы, часть 2
[15:13]
#верстка