Интернет-резюме
https://altcampus.github.io/web-resume/
Веб-резюме - это самый простой проект, с которого можно начать как новичок. Для этого требуются только базовые знания HTML и CSS. Создание веб-резюме поможет вам практиковать следующие концепции:
- Базовые знания HTML и CSS
- Как использовать элементы, теги и атрибуты для отображения содержимого.
- Как мы можем стилизовать элемент с помощью селекторов, свойств и значений.
Блог Веб-сайт
https://altcampus.github.io/blog/
Изучив базовые концепции HTML и CSS, пора немного углубиться в HTML и CSS. Создайте страницу блога и попробуйте использовать все семантические теги в HTML. Создание страницы блога поможет вам практиковать следующие концепции:
- Разница между семантическими и несемантическими тегами.
- Использование семантических тегов, таких как header, nav, aside, section, article, footer и т. Д.
- Использование несемантических тегов, таких как div, span и т. Д.
- Типы селекторов
- Объединение двух или более селекторов
- Общие значения свойств CSS
Страница модели коробки
https://altcampus.github.io/box-model-page/
Бокс-модель - одна из важнейших тем HTML и CSS. Как элементы отображаются на странице и их размер зависит от модели бокса. Создание страницы блочной модели поможет вам практиковать следующие концепции:
- Что такое блочная модель и свойства, определяющие блочную модель элемента (ширина, высота, отступ, граница и поля)
- Различные свойства отображения (блок, встроенный и встроенный блок)
- Выравнивание элементов с помощью inline-block
- Как изменить коробчатую модель элемента (свойство box-sizing)
- Как применить контур и тень блока.
Целевая страница страхования
https://altcampus.github.io/proinsure/
После понимания всех основных концепций HTML и CSS, начните открывать для себя некоторые промежуточные концепции, такие как flexbox, свойство позиции, типографика и т. Д. Попробуйте создать этот макет с помощью flexbox, и это поможет вам практиковать следующие концепции:
- Как flexbox используется для создания макетов с несколькими столбцами.
- Использование свойств флекс-контейнера и флекс-элемента.
- Гибкое выравнивание элементов с помощью гибкости.
- Использование свойства позиции (статическое, относительное, абсолютное, фиксированное)
- Различные правила типографики могут сделать вашу страницу более заметной.
Градиентный веб-сайт с параллаксом
https://altcampus.github.io/platina/
Фон и градиенты оказывают значительное влияние на дизайн веб-сайта. Создание макета Platina поможет вам попрактиковаться в следующих концепциях фона и градиентов:
- Как применить цвет фона и фоновое изображение.
- Применение градиентов (линейный градиент и радиальный градиент)
- Как создать эффект параллакса с помощью свойства background-attachment.
Форма регистрации
https://altcampus.github.io/signup-form/
Форма является важной частью веб-сайтов, поскольку позволяет собирать информацию о пользователях и обрабатывать ее дальше. Создайте Регистрационную форму, чтобы практиковать следующие концепции:
- Как размечать формы внутри HTML-документа.
- Какие элементы использовать для сбора разных данных.
- Как стилизовать формы с помощью CSS.
Учебная Студия
https://altcampus.github.io/training-studio/
Интернет полон интересного и информативного контента, который вы обычно находите в виде текста. Помимо текста, HTML также предоставляет способ встраивать мультимедийные данные, такие как изображения, видео, аудио, а также встраивать контент с другой веб-страницы в виде встроенного фрейма. Посадочная страница Training Studio поможет вам отработать следующие концепции:
- Как встроить изображение, аудио и видео на страницу.
- Как применить видео в фоновом режиме.
- Как вставлять карты.
- Создавайте таблицы и отображайте данные в табличной форме.
Адаптивный веб-сайт для мероприятий
Https://altcampus.github.io/encore/
В наши дни важно также сделать веб-сайт адаптивным, чтобы он был доступен на любом устройстве и с любым размером экрана, независимо от того, насколько он большой или маленький, на мобильном устройстве или компьютере.
Разработка этого адаптивного веб-сайта для мероприятий поможет вам практиковать следующие концепции адаптивного веб-дизайна:
- Как создавать гибкие макеты
- Как определить медиа-запросы
- Использование разной длины отклика
- Как сделать встроенные медиа адаптивными
- Понять роль метатега области просмотра.
Адаптивный сайт ресторана
https://altcampus.github.io/restaurant-website/
CSS Grid - это недавно введенное правило внутри CSS3, которое значительно упростит вашу задачу. Создание этого веб-сайта Адаптивный веб-сайт ресторана с использованием CSS поможет вам практиковать концепции -
- Различные свойства CSS Grid
- Как одновременно создавать столбцы и строки.
- Как размещать, изменять размер, выравнивать и проектировать дизайн с помощью CSS Grid
- Как использовать функции Auto-Fit, Auto-Fill и min-max (), чтобы сделать макет адаптивным
- Понимание CSS Grid и Flexbox
Анимированный 2D-куб и 3D-куб
https://altcampus.github.io/animated-cubes/
Анимация - одна из самых захватывающих вещей, которые принес CSS3, который позволяет применять взаимодействие на веб-странице без использования JavaScript или Flash. Помимо анимации, вы также можете создавать 3D-эффекты, используя свойство transform. Создание этого 2D и 3D куба поможет вам попрактиковаться в следующих концепциях анимации и трансформации.
- Как применять переходы и анимацию.
- Различные свойства перехода, включая свойство перехода, продолжительность перехода, функцию времени перехода и задержку перехода.
- Как преобразовать элементы на двухмерной плоскости
- Как преобразовать элементы на трехмерной плоскости
- Объединение свойств преобразования
- Как установить перспективу элемента
Создайте личное портфолио
Все эти проекты предназначены для отработки всех концепций HTML и CSS. Теперь, прежде чем вы начнете работать над реальными проектами, создайте для себя портфолио. Портфолио - это резюме современных разработчиков, и они нужны каждому разработчику, чтобы продемонстрировать свои навыки работодателям.
Google о веб-сайтах-портфолио, черпайте вдохновение у других и создавайте свои собственные.
Если вам интересно, вы хотите изучить концепции и построить все эти проекты шаг за шагом, зайдите в AltCampus и начните свое путешествие веб-разработчика бесплатно. 🚀
