HTML и CSS - это языки, при помощи которых создаются сайты. Они помогают добавлять контент, переносить дизайн, работать с фонами т.д.
Содержание:
- Немного базовых навыков
- HTML: создать web-страницу и опубликовать бесплатно
- Полезные советы
- HTML. Создание страницы с закрепленным окном
- HTML. Создание анимированной кнопки на HTML/CSS
- Разработка веб-приложения погоды HTML/CSS/JS
- HTML: как быстро создать форму для обратной связи на сайте
- Разработка сайтов HTML/CSS. Гибкая сетка
В программировании есть профессия под названием “верстальщик”. Это люди, занимающиеся созданием сайтов. Свое обучение они обычно начинают с одного языка, но потом переходят и на другие. Сегодня мы рассмотрим несколько бесплатных уроков по HTML/CSS, которые помогут познакомиться с языками.
Немного базовых навыков
В уроке ниже затрагиваются простые и фундаментальные вопросы. С него и нужно начинать изучать HTML. Все подкреплено практикой, можно наглядно увидеть, за что отвечают конкретные теги.
HTML: создать web-страницу и опубликовать бесплатно
Этот урок поможет понять, что из себя представляет HTML. Все начинается с самого простого - создания документа. После этого сайт медленно начинают наполнять контентом. За полчаса вы разберетесь, какие функции HTML может использовать новичок, а также поймете, как выложить сделанный сайт на GitHub.
Полезные советы
Разработка на HTML и CSS - тема сложная. На начальных этапах затрагиваются азы языка. Но этот раздел посвящен инструментарию, полезному разработчику. Чем больше навыков вы освоите, тем лучше будет сайт.
В данных уроках новички могут почерпнуть полезные идеи. Они понадобятся в дизайне, адаптивной верстке (когда сайт подстраивается под разрешение экрана) и других задачах.
HTML. Создание страницы с закрепленным окном
Иногда на сайтах нужно сделать элементы, которые будут постоянно находиться на одном месте (таковой может быть табличка с рекламой). В видеоуроке будет изучено несколько команд, способных помочь сделать закрепленные окна. Одни из них будут просто фиксированными, а вторые станут передвигаться по своей оси при пролистывании страницы.
HTML. Создание анимированной кнопки на HTML/CSS
Анимированные кнопки помогают сделать сайт более динамичным. Они используются многими крупными компаниями и считаются трендом. Кнопка будет сперва иметь надпись, а потом превращаться в стрелочку при наведении. Также она будет немного менять свой размер при клике.
Автор погружается в CSS и рассказывает о важном свойстве под название transition. Оно позволяет элементу плавно переходить из одного состояния в другое. К примеру, при наведении на надпись станет появляться плавная подсветка, а не резкая.
Разработка веб-приложения погоды HTML/CSS/JS
Урок посвящен стилизации приложения погоды. Тема объемная, поэтому делится на две части. О некоторых аспектах уже было рассказано в других роликах. В видеоуроке HTML/CSS затрагиваются следующие темы:
- Работа с изображениями;
- Форматы картинок, их отличия друг от друга;
- Тег, который связывает HTML и CSS;
- Небольшая работа со шрифтами.
HTML: как быстро создать форму для обратной связи на сайте
Форма обратной связи помогает интернет-магазинам обрабатывать заказы и общаться с клиентами. Верстальщик должен уметь создавать этот элемент. Также он полезен для лендингов и людей, продающих свои услуги.
В данном уроке рассматривается простая форма обратной связи. Также заучиваются несколько тегов. Обработка письма в данном вопросе не затрагивается, так как она касается работы с серверами.
Разработка сайтов HTML/CSS. Гибкая сетка
Гибкая сетка - это про разрешения экранов. На ноутбуке, ПК и планшете сайт должен быть одинаково полезным и удобным. В уроке автор рассказывает о правильном оформлении сайта.
На практике все выглядит просто. Есть блог. В нем все поделено по блокам. Если установить их в пикселях, то на большинстве экранов сайт будет выглядеть неаккуратно. Но вот если научиться растягивать эти блоки, то блог будет читабельным для любого разрешения.
Эти бесплатные уроки HTML и CSS помогут разобраться в базовой структуре документа. Но для полноценного понимания структуры и языков можно использовать книги или курсы. В CODDY дети за год пройдут курс, который сэкономит много времени. Приходите, мы вас ждем.