Введение
Как Frontend-разработчик, вам важно практиковаться, чтобы оттачивать свои навыки разработчика и развивать свою страсть к программированию.
Когда я начал учиться программировать, я прошел курс, и все, что я делал, это вел записи. Я помню, как смотрел видео о модели CSS Box и усердно писал заметки. К концу видео я уже не мог определить практическую разницу между margin и padding.
Найти руководство по проекту, подходящее для новичка в программировании или начинающего разработчика интерфейса, сложно, но возможно. Вот почему я потратил свое время, чтобы курировать 5 очень простых проектов, созданных с использованием HTML, CSS и JavaScript, включая исходный код и работающий сайт.
1. Приложение-генератор советов
Суть этой задачи заключается в том, чтобы генерировать случайные советы с использованием сторонних API. Если вы никогда не слышали об API, это нормально. Вы могли бы посмотреть видео об этом. Если да, то это очень интересный способ попрактиковаться. Дизайн также очень минималистичный. Некоторые из свойств CSS, которые я использовал, были position, border-radius и max-width.
URL-адрес активного сайта
Репозиторий GitHub
2. Интерактивная рейтинговая карта.
Представьте, что вам поручили создать рейтинговую систему для бизнеса или компании. В этом проекте пользователи должны иметь возможность выбрать и отправить числовой рейтинг, а затем увидеть благодарственную карточку после отправки.
Этот проект поможет вам проверить свои знания в области манипулирования объектной моделью документа (DOM).
URL-адрес активного сайта
Репозиторий GitHub
3. Фото-сайт
Если вы хотите опробовать свои навыки верстки, этот сайт может дать вам необходимое вдохновение. Это был мой первый веб-сайт, и я создал его без гибкости и сетки.
URL-адрес активного сайта
Репозиторий GitHub
4. Клон Starbucks
Если вы хотите создавать красивые веб-сайты, вы должны быть знакомы с фреймворками CSS. Они дружелюбны к разработчикам и дизайнерам. Это более эффективный способ создания целевых страниц.
Как фронтенд-разработчик, вам придется создать множество целевых страниц.
Этот веб-сайт является отличной практикой для адаптивного дизайна. Flex — наиболее рекомендуемый макет для создания гибких и отзывчивых элементов.
Да, это настоящий сайт Starbucks. Я построил его с помощью Tailwind CSS.
URL-адрес активного сайта
Репозиторий GitHub
5. Приложение-калькулятор
Создание приложения-калькулятора — это обряд посвящения для каждого веб-разработчика :), к сожалению, я никогда его не создавал. Прежде чем приступить к этому проекту, вам необходимо понять операторы JavaScript, прослушиватели событий DOM, циклы for и операторы JavaScript.
URL-адрес активного сайта
Репозиторий GitHub
Заключение
Создание веб-проектов с нуля заставило меня особенно гордиться собой, и я хочу того же и для вас. Внимательно прочитайте код и убедитесь, что вы его понимаете, прежде чем копировать.
Не стесняйтесь исследовать свою художественную сторону, вносить изменения и улучшать пользовательский опыт при создании своих проектов.
Спасибо за чтение. Я надеюсь, что вы сочли полезным.
