Это пятая часть путешествия по портфолио разработчиков, поэтому, если вы каким-то образом наткнулись на эту статью, я бы посоветовал вам прочитать часть 1.
Эта неделя была первой, когда я потратил большую часть своего времени на написание кода. Используя Coda.io в качестве предпочтительного программного обеспечения для управления задачами, я смог выполнить свои задачи на неделю; создание страницы приветствия для сайта вместе со страницей, используемой для перечисления моих проектов.
Хотя я закончил почти в конце недели, то есть очень близко к сроку, я смог завершить двестраницы, которые мне нужно было создать. По пути я столкнулся с некоторыми проблемами, и хотя они довольно незначительны, я хотел бы поделиться ими как для самоанализа, так и для всех, кто может испытывать трудности.
Не стесняйтесь смотреть на мой прогресс на cosparks.me.
Размеры
Первое, что я быстро понял, я понятия не имел, как делать, — это управлять позиционированием контента на странице, чтобы получить результат, который чем-то напоминал мой макет. Некоторые базовые вещи не были слишком сложными, например центрирование контента на странице или размещение различных разделов друг над другом, но я быстро столкнулся с проблемами при размещении нижнего колонтитула в нужном месте.
Первая проблема, с которой я столкнулся, заключалась в том, чтобы просто оставить нижний колонтитул внизу страницы. Поскольку он просто поднялся, чтобы занять любое место, которое мог. Я думал, что будет достаточно просто использовать некоторые поля и отступы, чтобы переместить его чуть ниже страницы, но потом я понял, что количество места, которое ему придется переместить вниз, будет зависеть от размера устройства. Используя Интернет, я смог найти min-height: 100vh;, основная проблема заключалась в том, что при использовании другого CSS он располагался внизу страницы, а не внизу.
Это произошло потому, что у меня был нижний колонтитул внутри того же окна просмотра, которое занимало всю страницу, но если я переместил его, он оказался под страницей. Чтобы довести это до совершенства, потребовалось больше усилий, потому что сначала мне пришлось использовать -margin, чтобы центрировать другой контент независимо от панели навигации. Затем я обнаружил команду calc() и легко смог это исправить.
Если ничего из этого не имеет смысла, не стесняйтесь просматривать код.
Управление
В макете у меня есть часть для моих проектов, которая представляет собой просто набор плиток, в которых указана некоторая информация о каждом проекте, выступающая в качестве ссылки на записи для каждого из них. Однако мне пришлось придумать способ управлять этим.
Как и у любого ленивого человека, у меня не было желания писать код для одного тайла, а затем копировать его в любое время, когда я хотел добавить новый проект, поэтому я использовал некоторые свойства Vuejs, чтобы упростить это.
В Vue есть оператор v-for, который можно применить к любому элементу HTML, чтобы он отображал содержимое для элементов в списке.
<div v-for=”(value) in pageData” v-bind:key=”value.id”>
<project-tile :data=”value”></project-tile>
</div>
Это позволило мне просто создать список, содержащий всю необходимую мне информацию, чтобы затем я мог передать ее компоненту vue, который будет отображать всю информацию в виде плитки.
плитка
Эта часть была несколько сложной, потому что каждая часть тайла требовала от меня работы с некоторым CSS, которого я никогда раньше не видел. Каждая из них состояла из четырех основных частей, и было непросто заставить каждую из них работать.
Проблемы
- Изображение
Создание изображений оказалось немного сложным, потому что все те, которые я хотел использовать, не совсем вписывались в рамки, а это означало, что мне нужно было найти способ их обрезать. Я просто использовал object-fit: cover; в своем CSS вместе с высотой и шириной, и проблема исчезла.
2. Заголовок
Это было не так уж сложно, я просто хотел по элементу списка для каждой основной части. Тем не менее, на самом деле проблема заключалась в том, чтобы выяснить, как добиться того, чтобы размер текста несколько соответствовал общему стилю, к которому я стремился в макете с точки зрения размера и интервала.
3. Теги
Это заняло много времени, потому что я не знал, как я должен выстроить их в линию. Для начала мне было немного трудно понять, как определить их размер, но после некоторого CSS и сравнения с макетом я смог получить место, которое меня удовлетворило. Чтобы выровнять их, потребовалось некоторое время в поиске в Google правильного CSS, но оказалось, что все, что мне нужно было сделать, это использовать float: left; для каждого тега, чтобы они идеально выстроились.
4. Описание
Проблема, с которой я столкнулся, заключалась просто в том, что текст выровнялся с тегами, а не находился под ними. Чтобы исправить это, мне просто нужно было разделить их каждый на свой собственный div, а затем присвоить ему фиксированный размер.
Следующий…
Теперь мне нужно создать страницы «Контакты», «Резюме» и «О нас»!
