Будь вкурсе свежих уроков!

В категории: Курсы Frontend — HTML, CSS и JavaScript

Будь вкурсе самого свежего материала. Где мы отправляем статьи, видео и много чего интересного.

Получать на e-mail Закрыть

Вы успешно подписались на рассылку

Поздравляем. Теперь вы будете получать больше актуальной
информации по категории: Курсы Frontend — HTML, CSS и JavaScript

Введите ваше имя:

Введите e-mail:

Подписаться

Нажимая кнопку, Вы принимаете Положение и Согласие на обработку персональных данных.

Курс доступен после регистрации ← ЖМИ!

Чтобы научиться делать сайты, нужно точно понимать, что сайт состоит не только из вёрстки. Разработка сайта состоит из несколько этапов: 1 – разработка дизайн-макета сайта, 2 – вёрстка дизайн макета (Frontend), 3 – серверная часть где происходит настройка самого сайта (Backend).

Вёрстка сайта по сути – это превращение изображения (будь то картинка в формате JPG или картинка в формате PSD Adobe Photoshop) в кликабельную страницу в браузере. Существует несколько подходов, а именно разновидности вёрстки сайтов.

В данном миникурсе речь пойдёт о более современном виде вёрстки – FlexBox. Почему современном, ответ простой. Вся суть кроется в простоте адаптировать сайт под мобильное устройство.

Содержание видеокурса:

1. Введение в FlexBox
2. Первая сетка
3. Адаптивная верстка сайта. Макет.
4. Верстка сайта адаптивно с flexbox 2.
5. Делаем header и навигацию сайта
6. Продолжаем, верстка SideBar сайта
7. Верстка адаптивного слайдера
8. Верстка галереи адаптивно
9. Верстка постов блога
10. Верстаем форму регистрации
11. Верстка адаптивного макета сайта

Что такое сетка и какие способы существуют помимо FlexBox

Любой сайт состоит из блоков, которую можно представить в виде сетки. Например, меню сайта слева, а текстовый блок справа, в общей сложности уже получилась сетка из двух ячеек. На сегодняшний день, существует несколько способов разбить сайт на блоки:

• При помощи готовых CSS-стилей, где вам нужно лишь сделать разметку в HTML документе. Другими словами, CSS-Framework или в переводе CSS-шаблон. Один из более известный на сегодняшний день Framework – Bootstrap.
• При помощи плавающих блоков (свойства FLOAT)
• При помощи inline-блоков
• Более сложные и старые методы, например, при помощи таблиц, но данный способ давно устарел.

Как сверстать сайт без сервера и хостинга

На самом деле многие входят в заблуждение что чтобы сделать сайт потребуется определённое ПО или покупка хостинга. Для многостраничных сайтов да, ПО потребуется, но чтобы сверстать одну страничку потребуется лишь создать текстовый файл и поменять расширение с .txt на .html и открыть файл при помощи браузера. Далее потребуется лишь найти видеоуроки по вёрстке сайта.

Как работает всё остальное вы можете узнать в разделе Программирование: в разделе web-разработка.

Почему стоит начинать с FlexBox

У большинства способов, которые были упомянуты выше есть свои недостатки с выравниванием по вертикальной плоскости и подстройкой под ширину экрана. Многие годы разработчики мучились с подгонкой определённой длины, отступами чтобы сделать так как в макете. FlexBox разработан чтобы упростить вёрстку сложных страниц и неординарных решений в дизайне сайтов.

С чего начать вёрстку сайта:

Первый шаг: начать с выбора среды разработки.

Для вёрстки сайта необязательно скачивать Adobe Dreamviewer или подобные сложные и непонятные программы. Знающий специалист знает, что для того чтобы поменять номер телефона на сайте или названия кнопки достаточно простого Блокнота. Но чтобы ускорить процесс написания кода, всё-таки лучше скачать программу, в которую уже встроены все удобные функции. Например, можно скачать самый простой вариант NotePad++ или более современные программы как WebStorm или PHPStorm.

Второй шаг: найти видеоуроки

Наш ресурс предназначен для тех людей, которые хотят научится самостоятельно. Мы выбираем из интернета лучшие миникурсы и размещаем в специальную категорию. Дополнительно для тех кому требуется поэтапное обучение, на сайте существует специальный раздел, где мы более детально подбираем курсы для изучения с самого начала.

Третий шаг: смотреть видео и стараться производить те же действия что на экране

Практика – лучший инструмент для запоминания тех же CSS-свойств. Свойств очень много и поэтому рекомендуем смотреть видео и писать все вручную.

Четвёртый шаг: скачать все браузеры

Вы спросите зачем скачивать все браузеры. Вопрос хороший, но когда в будущем вы столкнётесь уже с реальным проектом, очень важно просматривать сайт во всех браузерах. Ведь у каждого человека разные предпочтения, кто-то сидит с Google Chrome, кто-то с Firefox Mozilla, а кто-то и вовсе зайдёт на ваш сайт с Internet Explorer 6.0 (очень старый браузер, где FlexBox возможно не поддерживается).