Мой первый веб-макет

Apr 18 2023
Мой путь к тому, чтобы стать веб-разработчиком.
Как пользователь, я всегда с энтузиазмом относился к технологиям, но на этот раз я хотел изучить их глубже. Итак, я решил выяснить, как создаются веб-сайты, приложения или платформы, которые мы используем ежедневно.
базовый доступный и отзывчивый веб-макет с использованием flexbox

Как пользователь, я всегда с энтузиазмом относился к технологиям, но на этот раз я хотел изучить их глубже. Итак, я решил выяснить, как создаются веб-сайты, приложения или платформы, которые мы используем ежедневно. Эти инструменты помогают нам с задачами дома, на работе или просто для развлечения. Приятно видеть, что из строк кода можно что-то воплотить в жизнь. Поэтому я решил изучать веб-разработку самостоятельно.

Я изучал онлайн-руководства, документацию по HTML и CSS с таких сайтов, как W3schools и Pluralsight, которые, как я обнаружил, содержат много информации для начинающих. На этих сайтах я нашел объяснения, основы и соображения, которые необходимо учитывать при начале этого пути, такие как правильное использование элементов HTML, доступность нашего кода, отзывчивость и как написать наш код наилучшим образом. .

Использование Flexbox для создания адаптивного макета

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

Думая о доступности с самого начала

Это тема, которая мне очень нравится, потому что, как создатели программного обеспечения, мы должны гарантировать, что то, что мы создаем (приложения, сайты, платформы и т. д.), является инклюзивным. Что я имею в виду? Речь идет не только о написании строк кода и обеспечении работы продукта. Мы должны учитывать, что есть люди, которым нужна наша помощь, чтобы понять продукт или услугу, с которыми они хотят ориентироваться, люди, которым нужны вспомогательные технологии, такие как программы для чтения с экрана.

Фото Мими Тиан на Unsplash

И начинается это с написания кода, который должен быть простым, понятным и способным донести смысл наших сервисов до всех пользователей, чтобы они могли без проблем взаимодействовать с нашими интерфейсами от начала до конца. Вы когда-нибудь пробовали перемещаться по сайту или платформе, используя только клавиатуру? Без использования мышки? Или вы использовали программу чтения с экрана? Вы видели, как этот читатель описывает пользователю код, который вы написали ранее? Я приглашаю вас сделать это. Я использовал программу чтения с экрана после того, как закончил макет, и это было очень интересно. Это дало мне новую перспективу и заставило задуматься о том, как важно писать хороший код и делать его как можно более описательным.

Некоторые из способов, которыми я научился делать код доступным, включают использование правильных элементов HTML вместо div, создание более описательных текстов, представляющих изображения, использование звука, субтитров, цветового контраста (вы можете использовать цветовые палитры). О цветовых палитрах я расскажу позже. На данный момент это то, что я изучил и реализовал.

Подводя итог, я считаю, что технология должна быть союзником для людей, чем-то, что помогает нам решать повседневные проблемы, чем-то, что облегчает наши задачи, а не чем-то, что ограничивает, исключает или воздвигает барьеры. Поэтому я рад продолжать учиться и предлагать решения для будущего.