На этой неделе мы взяли перерыв, чтобы расслабиться, наверстать упущенное или сделать все, что нам заблагорассудится. Я знал, что не могу взять полную неделю отдыха без какой-либо практики. Я еще настолько новичок, что если я не буду практиковаться, я могу забыть некоторые вещи. Так что вы, наверное, догадываетесь, для чего я использовал эту неделю – для ПРАКТИКИ.
Если вы не поняли этот мем, посмотрите это.
Для практики я решил попробовать воспроизвести какой-нибудь сайт. Наш наставник разбросал несколько сайтов, которые, по его мнению, мы могли бы воссоздать, поэтому я выбрал Starbucks. Он выглядел относительно просто. Только верхний колонтитул, большой нижний колонтитул, а основная часть выглядела так, как будто она была разделена пополам по вертикали с несколькими различными строками внутри внутренней колонки. Я знал, что смогу сделать это с помощью нашего надежного flexbox, который мы изучали. Вот как я разбил страницу на части:
Каждый цвет представляет собой раздел или div. Синий раздел – это внутренний столбец, в который все завернуто. Красные секции – это ряды flexbox. Каждый ряд содержит два одинаковых по размеру div (желтого цвета). Как вы можете видеть, красный div превращается из колонки (в мобильной версии) в строку (в веб-версии). Что касается макета, я думаю, что воссоздать его было довольно просто. Кроме того, у него всего два вида – мобильный и веб-версия. Мы уже создавали более сложные сайты, которые включали в себя вид для планшетов.
Конечно, сначала я создал мобильный вариант! (Видите, как быстро я учусь?) Я создавал его раздел за разделом, начиная с заголовка, который был самым сложным. В мобильном варианте он отображает только логотип и значок меню гамбургера. Это довольно просто, но по мере увеличения ширины появляются ссылки. Поначалу у меня были проблемы с их расстановкой, но, к счастью, у нас есть наш постоянный наставник, который поможет нам решить эти проблемы. Простой flex-grow решил мою проблему.
Поскольку я хотел, чтобы моя копия сайта выглядела точно так же, я потратил немного слишком много времени на то, чтобы внести множество изменений в отступы и поля. Наверное, я мог бы воспользоваться инструментом inspect, чтобы сэкономить время, но это лишило бы меня удовольствия, и результат не был бы таким полезным.
Некоторые инструменты CSS
Создание этой реплики Starbucks позволило мне использовать некоторые инструменты CSS, которые мы изучали в течение курса.
1. Создание пользовательских шрифтов
Вместо того чтобы напрямую стилизовать свойства h1, h2 или p. Я создал классы для каждого типа “голоса”. Например, h1 получал класс “громкий голос”, и я стилизовал этот класс. Это оказалось полезным, когда я решил изменить h2 на h3, но не хотел, чтобы их атрибуты стиля менялись. Я просто изменил элементы в HTML-документе, и как будто ничего не изменилось 🙂
2. Создание пользовательских свойств CSS
Это было очень новое, что мы узнали. В CSS вы можете задавать цвета в родительском элементе. Я часто использовал два разных оттенка зеленого на всей странице, поэтому я установил цвета в теле таким образом.
Теперь, когда я захочу вспомнить эти цвета, вместо того, чтобы запоминать запутанный буквенно-цифровой шестнадцатеричный номер, мне нужно будет просто вспомнить название, которое я дал им – “starbucks-light”, что было намного проще.
3. Обратный ряд
Когда я решал все свои практические задачи по flexbox, я не мог придумать, когда может пригодиться обратный ход строки или обратный ход колонки. Ну, ребята, это было очень полезно! Когда вы прокручиваете сайт Starbucks, вы видите, что фотографии и парный им текст меняются в каждом ряду, вот так:
Вместо того, чтобы переключать html для каждого ряда, мне просто нужно было отобразить флексбокс как “row-reverse!”. Было очень приятно найти ему практическое применение и увидеть, что он действительно работает.
4. SVG-изображение
Я решил использовать SVG-изображение для иконки булавки местоположения. Я не знаю, нужно ли мне было использовать SVG, поскольку значку не нужно масштабироваться, но я подумал, что это будет хорошей практикой. Что заставило меня использовать SVG для иконки, так это состояние наведения. Мне нужно, чтобы при наведении она становилась зеленой, и поскольку я знал, что могу сделать это с помощью SVG, я так и поступил.
В целом, создать структуру сайта было довольно просто. В основном, я столкнулся с проблемами в некоторых интервалах и выяснении того, какой родительский элемент лучше всего стилизовать. Я также зациклился на переходах с мобильного на веб-сайт и на том, как выравниваются изображения и текст. Я знаю, что это неважно, поскольку люди обычно не изменяют размер экрана, но по необъяснимым причинам мне нужно было, чтобы моя реплика взаимодействовала точно так же.
Теперь настало время для финального теста. Какой сайт настоящий, а какой – копия? Верхняя или нижняя?
Вы можете сами посмотреть на это здесь и здесь. Но, возможно, вы уже посетили мой сайт-реплику, так как я дал ссылку на него ранее 😉
Несколько замечаний о моей реплике. Я не привел ни одной ссылки, так как не считаю нужным копировать/вставлять каждую ссылку. Там, вероятно, около 50 или около того. Я также не смог создать какие-либо клики, такие как выпадающее или гамбургерное меню, так как мы еще не изучили эти функции.
В любом случае, я остался доволен результатами, и это была действительно хорошая практика для меня. Это потребовало от меня продумать макет для мобильных и веб-версий и создать интуитивно понятные для сайта названия классов. Что мне делать дальше? Комментируйте ниже!
Чуть не забыл! Количество пользователей Twitter остается на уровне 33. Я беру на себя ответственность, так как в последнее время я не писал в Твиттере. Я не знаю, что писать в Твиттере!