Интеграция визуальной части фронтенда в простой проект.
Давайте отвлечемся от прохождения курсов и выполнения онлайн-упражнений: вместо этого давайте сделаем проект с нуля! Когда вы начинаете изучать фронтенд-технологии, HTML становится понятным быстрее всего, за ним следует CSS, а JS — это большое путешествие само по себе. Здесь мы оставим задачи JS на потом, а сосредоточимся на интеграции визуальной части фронтенда в простой проект.
Почему вам стоит делать проекты
Работа над проектами — отличное упражнение, позволяющее практиковать навыки в среде, более похожей на реальную работу. Проекты:
- сосредоточены на результатах: на вещах, которые от вас ожидают;
- используйте технологии как инструмент для достижения цели: это заставляет вас сосредоточиться на том, что имеет значение; и
- обычно намного сложнее, чем задачи, которые вы найдете в курсах или книгах.
Проекты позволяют вам применить свои навыки для создания чего-то значимого. Они позволяют вам обрести уверенность в своих навыках, и это осязаемые вещи, которыми вы можете хвастаться, чтобы другие знали, на что вы способны. После изучения основ на курсах проекты станут отличным шагом к совершенствованию ваших навыков.
Что такое нарезка?
Нарезка превращает дизайн в веб-сайт. Вы берете результаты работы графического дизайнера, скорее всего, в виде файла PSD или дизайна Figma, и создаете веб-сайт HTML + CSS с таким внешним видом. Это требует всех навыков, которые вы использовали для настройки внешнего вида элементов веб-сайта, а также создания основной структуры веб-сайта — сохранения верхнего и нижнего колонтитула и меню.
Исходники шаблонов
Для проекта упражнений вам не нужен индивидуальный дизайн — вам просто нужен какой-то дизайн. К счастью, есть сайты, на которых люди бесплатно делятся файлами дизайна, которые вы можете использовать для своего проекта: пример 1, пример 2.
Не забудьте проверить лицензию файлов, которые вы используете. Вероятно, лицензия потребует от вас:
- отдать должное автору дизайна и
- выпускайте свою работу под той же лицензией.
Независимо от лицензий, вы всегда можете поиграть с дизайном локально, но хорошо убедиться, что вы также можете поделиться своей работой публично.
Гит и Гитхаб
Работая над своим проектом, вы можете поделиться им на GitHub. Это отличный способ продемонстрировать свои усилия и получить обратную связь, если вы работаете с наставником. Если вы еще не зарегистрированы на GitHub, имеет смысл зарегистрироваться там, как только вы начнете учиться программировать.
Опишите свой проект в README
Еще одно замечательное дополнение к вашему проекту — обмен информацией о его контексте. Стандартным местом для этого является файл README, и вы можете следовать этому руководству, чтобы выделить его.
Развертывание на страницах GitHub
С помощью GitHub вы можете сделать свои проекты легко доступными для тестирования с помощью страниц GitHub. Узнать больше можно здесь.
У вас есть проекты HTML + CSS? Поделитесь в комментариях, чтобы я и другие читатели могли взглянуть на это!
Первоначально опубликовано на https://how-to.dev.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.
