5 потрясающих проектов HTML и CSS для создания (с предварительным просмотром codepen)

Программирование — это веселое и увлекательное занятие, но как вы измеряете свой прогресс в обучении?

Вот несколько крутых идей, которые вы можете воплотить, чтобы проверить свои навыки.

1. Формы опроса

Формы опросов — очень популярные первые проекты, и это отличный способ проверить свои навыки проверки HTML-форм. Кроме того, создание формы опроса — отличный способ протестировать различные элементы формы (радио, флажки, текстовые области и т. д.) в одном месте.

Вы можете начать с простой формы:

а затем перейдите к формам с большим стилем и отзывчивостью, например, к этой форме опроса :

2. Трибьют-страница

Трибьют-страница — одна из самых простых веб-страниц, которую вы можете создать как новичок, поскольку она требует лишь базовых навыков в HTML и CSS.

Вы можете поэкспериментировать с различными концепциями CSS, такими как добавление изображений, ссылок, абзацев, а затем использовать CSS для украшения страницы. Это пример простой адаптивной трибьют-страницы :

…и это пример яркой трибьют-страницы Майкла Шнайдера :

3. Целевые страницы

Создание посадочной страницы — увлекательный процесс. Вы даете волю своему воображению. Кроме того, вы можете проверить несколько навыков в HTML и CSS, таких как позиционирование содержимого на странице, нижние колонтитулы, создание столбцов и разделов, цветовых палитр и так далее.

Вы можете начать с чего-то простого, например, с целевой видеостраницы Брэда Трэверси.

а затем бросьте вызов своим навыкам и создайте более сложные страницы, такие как эта целевая страница продукта :

4. Техническая документация

Даже без javascript можно создать страницу технической документации, используя только HTML и CSS. У вас есть свобода творчества.

Для создания технической документации вы можете использовать этот образец , который предоставляет freeCodeCamp.

С помощью CSS вы можете создать стильную страницу документации, такую ​​как страница Маркуса Лизинга.

или может решить оживить вашу страницу анимацией, подобной этой документации

5. Личное портфолио

Существует, конечно, искушение создать портфолио тогда, когда вы изучили много технологий. Хорошие новости, вам не нужно ждать много времени в будущем. Вы уже можете попробовать сделать это сейчас, используя только HTML и CSS.

Если у вас есть сомнения, вот другие удивительные портфолио, созданные таким образом.

Тьяго Феррейра

Аарон Каддебек

Томас Вэт

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

Практикуйтесь и у вас все получится!

Источник статьи: http://dev.to/