Минулого року я взявся за захопливий підсумковий проект — відтворити головну сторінку Google DeepMind, використовуючи лише HTML та CSS.
Цікаво, що головна сторінка Google DeepMind отримала стильне оновлення UI в грудні минулого року, і я вирішив прийняти виклик створити новий інтерфейс.
Я поділюсь тим, як я підійшов до цього проекту, структуруючи та стилізуючи інтерфейс на професійному рівні, будучи новачком у фронтенд-розробці. Пот та сльози, які я витратив на подолання викликів, і основні уроки, які я отримав у процесі.
Підсумковий проект: Головна сторінка Google DeepMind
Моя мета для підсумкового проекту полягала в тому, щоб якомога точніше відтворити сучасний дизайн головної сторінки Google DeepMind та вийти за межі моїх поточних навичок у HTML та CSS.
Планування макету для головної сторінки
Щоб покращити своє розуміння організації HTML-структур, я спробував інший підхід: візуалізувати дизайни безпосередньо в коді, а не малювати їх у Figma або на папері (як я зазвичай роблю).
Спочатку я мав проблеми зі структуризацією певних секцій за допомогою цього підходу. Скажімо, це зайняло кілька днів і було багато проб та помилок 😂, але врешті-решт все стало на свої місця, і я знайшов шлях написати код для HTML-структури.
Цей процес навчив мене терплячості та зробив мене більш впевненим у перетворенні концепцій дизайну на чисті та логічні HTML-розмітки.
Створення структури за допомогою HTML
Ось кілька ключових фрагментів, що демонструють базову структуру як старої, так і нової версії інтерфейсу головної сторінки.
Стара версія: Секція фону з відео
Стара версія мала фонове відео для героїчної секції.
Секція фону з відео
Нова версія: Секція заголовка та фонове зображення
Нова версія інтерфейсу має фонове зображення для героїчної секції
Секція заголовка
Секція фону зображення
Основна контентна секція
Секція, що містить три картки, у обох версіях — старій та новій — мала подібний підхід до структури макету.
Я прагнув створити добре структурований макет і використовував <div class="cards-container"> для групування всіх карток разом. Усередині контейнера я додав окремі <div class="card"> для кожної картки.
Секція карток
Текстовий контент був розміщений всередині <div class="card-content"> і я використовував <h2> для заголовку та <p> для допоміжного тексту, а вміст зображень для кожної картки був розміщений за допомогою <img>.
Секція футера
Я організував структуру макету за допомогою <footer> і використовував <div> для групування схожого контенту в футері. Для логічного групування я використовував ненумеровані списки <ul> та елементи списку <li> для створення груп посилань.
Форма для підписки на email була структурована за допомогою <form>, <input> та <button>.
Секція футера
Стилізація за допомогою CSS
Після завершення HTML-структури, я застосував стилізацію CSS для макету, кольорів, відступів та фону, щоб оживити головну сторінку.
Універсальний селектор, стилі HTML та Body
Я налаштував глобальні стилі CSS для узгодженого відображення елементів, відступів та макету.
Нова версія інтерфейсу Google DeepMind має темну кольорову схему.
Універсальний селектор, стилі HTML та Body
Стилізація кнопки “Chat with Gemini” (Чат з Gemini)
Для тонкої інтерактивності я додав свій власний штрих до кнопки “Chat with Gemini”, використовуючи градієнтне обведення.
Стилізація кнопки "Chat with Gemini"
Основна контентна секція
Я використав flex-wrap в секції, що містить три картки, щоб створити адаптивний макет для менших екранів.
Стилізація секції карток
Я додав синє обведення на всіх межах для кожної картки на головній сторінці.
Мої основні висновки
- Я все ще вважаю, що потрібно внести кілька коригувань і, можливо, додати специфічні теги, такі як тег
<header>для семантичної ясності. - Використання ресурсних сайтів, таких як MDN Web Docs, було дуже корисним для вирішення проблем.
- Відлагодження навчило мене терпінню і тому, як підходити до проблем логічно.
Що далі?
Мій наступний крок — додати кнопку відтворення з інтерактивністю JavaScript для фонових відео та інших ключових секцій.
Я дуже задоволений тим, що досягнув, але знаю, що це лише початок. Проте, щоб не поспішати, я вирішив ще не додавати інтерактивність за допомогою JavaScript. Спочатку хочу добре освоїти його основи.
Мої фінальні думки
Створення головної сторінки Google DeepMind з нуля було складним, але надзвичайно корисним у розвитку моїх навичок. Це не ідеально, як на справжній сторінці, але зробивши перший крок, я повільно наближаюсь до своїх цілей як фронтенд-розробник.
Перекладено з: How I Recreated the Google DeepMind Homepage with HTML and CSS