Мой обзор проектов freeCodeCamp по отзывчивому веб-дизайну

Я с гордостью сообщаю, что в прошлую пятницу я получил сертификат по Responsive Web Design от freeCodeCamp! Эта сертификация — первая из одиннадцати, которые freeCodeCamp предлагает в настоящее время, и я планирую получить остальные в ближайшие месяцы. Те, кто видел мой профиль в LinkedIn, знают, что это не первый мой сертификат по веб-дизайну; у меня также есть сертификаты Microsoft Technology Associates (MTAs) по HTML/CSS и JavaScript, но мой опыт участия в freeCodeCamp не похож ни на один другой. В отличие от MTA, которые вы получаете, сдавая итоговый экзамен, сертификаты freeCodeCamp вы получаете, выполняя серию проектов в конце каждого курса. В курсе «Отзывчивый веб-дизайн» есть пять финальных проектов:

  • Построить страницу посвящения
  • Создание формы опроса
  • Создание посадочной страницы продукта
  • Создание страницы технической документации
  • Создание страницы личного портфолио

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

Создание страницы памяти

Я создал свою страницу в честь Ады Лавлейс. Я счел уместным сделать страницу о ней, потому что и она, и мой проект в чем-то первые: моя страница — мой первый проект freeCodeCamp, а Лавлейс считается первым в мире программистом.

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

Единственное, что мне хотелось бы изменить, — это идентификатор элемента фигуры. Проект требует, чтобы учащиеся включили либо div, либо figure, содержащий изображение и подпись, но даже если они выберут последний вариант, они должны присвоить ему идентификатор img-div. Поскольку это не один и тот же тег, нет смысла называть figure «div». Таким образом, я почти использовал div ради последовательности, но решил использовать альтернативу HTML5 для доступности. Если бы я мог поступить иначе, я бы присвоил figure такой идентификатор, как img-container.

Постройте форму опроса

Моя форма запрашивает у посетителей основную личную информацию и то, что они думают об этом и других моих проектах.

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

Моя единственная проблема заключается в том, что freeCodeCamp не предоставляет URL-адрес для атрибута действия формы. Таким образом, при отправке формы посетители попадают на страницу ошибки. Тем не менее, я решил эту проблему, отключив кнопку отправки и создав сообщение, чтобы успокоить посетителей, что она не должна быть включена.

Построение посадочной страницы продукта

Мне было трудно решить, какую компанию использовать для своего проекта, поэтому я воспользовался примером, приведенным на странице примера freeCodeCamp, — вымышленной компанией Original Trombones.

Больше всего мне понравилось работать над проектом, экспериментируя со стилизацией элементов ввода. Я всегда знал, что это возможно, но никогда раньше не пробовал. Мне всегда нравились поля ввода в форме таблеток, которые можно увидеть на таких сайтах, как Google, и я решил добавить их в свой проект. Я добился этого эффекта с помощью JavaScript, установив радиус границы полей ввода равным половине их offsetHeight.

Есть несколько вещей, которые я хотел бы сделать по-другому. Я бы сделал #navbar и #title-and-subtitle дочерними элементами элемента div или section, а не header, и поскольку это больше не элемент заголовка, я бы также изменил его ID. Я также использовал бы элемент заголовка для #title-and-subtitle вместо section.

Вот как я написал HTML:

<header id="header">
  <section id="logo-and-nav">
    <!--Logo and navbar-->
  </section>
  <section id="title-and-subtitle">
    <!--Company name and slogan-->
  </section>
</header>
Вход в полноэкранный режим Выход из полноэкранного режима

А вот как я хотел бы написать это:

<div id="page-header">
  <section id="logo-and-nav">
    <!--Logo and navbar-->
  </section>
  <header id="title-and-subtitle">
    <!--Company name and slogan-->
  </header>
</div>
Войти в полноэкранный режим Выход из полноэкранного режима

Я бы написал свой код таким образом из семантических соображений. Несмотря на то, что навигационная панель технически может быть частью заголовка, подобно тому, как нижние колонтитулы некоторых сайтов содержат карты сайта, я все же считаю, что лучше было бы держать их отдельно. Сделав элементы h1 и p единственными дочерними элементами заголовка, будет более очевидно, что абзац на самом деле является подзаголовком страницы.

К сожалению, требования проекта не позволили мне написать HTML таким образом…

Создание страницы технической документации

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

Обновление: Чтобы лучше отслеживать обновления, которые я делаю, я также загрузил свои проекты в обновления. Если вам интересно проверить репозитории, я добавил ссылки на них внизу поста.

Это был, безусловно, мой любимый (и самый подробный) проект! Я создал документацию для TI-BASIC 83, встроенного языка программирования для калькуляторов Texas Instrument серии TI-83. TI-BASIC был одним из первых языков, которые я выучил, и поскольку он так малоизвестен, я решил создать ресурс для тех, кто хочет его изучить.

Больше всего при создании этого проекта мне понравилось писать CSS для кода и блоков с примерами. Я придал им те же цвета фона и текста, что и реальному экрану TI-83/TI-84. Я также стилизовал их псевдоэлементы ::selection так, чтобы они меняли цвета текста и фона при выборе — таким образом, сохраняя дуотоновую палитру настоящего экрана TI!

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

Создание страницы личного портфолио

Назначение этой страницы, вероятно, не требует объяснений. Она содержит описания и ссылки на четыре моих других проекта freeCodeCamp Responsive Web Design.

Больше всего мне понравилось то, как использовать flexbox для размещения ссылок на проекты в правом нижнем углу соответствующих плиток проектов. Я добился этого эффекта с помощью свойств flex-grow и align-self.

В отличие от других моих проектов, я считаю, что этот проект не нуждается в каких-либо изменениях!

Заключение

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

Ссылки на репозитории GitHub

  • Страница, посвященная Аде Лавлейс
  • Простой опрос
  • Оригинальные тромбоны
  • TI-BASIC 83
  • Страница портфолио

Оцените статью
Procodings.ru
Добавить комментарий