Верстка сайту з нуля на HTML | CSS / #1 – Розробка крутого веб-сайту для початківців
Відеоурок
Корисні посилання:
- Курс з
- Програма
З чого складається сайт?
Будь-який веб-сайт складається з набору кількох основних технологій: HTML, CSS і JavaScript. Незалежно від жанру сайту або рівня складності його побудови, цей каркас присутній у будь-якому веб-сайті. За допомогою HTML можна базово описати, де і які елементи будуть розташовуватися на сторінці. За допомогою CSS можна додати стилі до цих елементів, а JavaScript дозволяє визначити користувацькі функції, які спрацьовують під час взаємодії користувача з різними елементами на сторінці.
Це базовий каркас, до якого можна додати серверну мову програмування для опису функцій на сервері, таких як авторизація на сайті, робота з кукі, сесіями та інше. Також можна інтегрувати роботу з базою даних і налаштувати хмарні сервіси. Усе це додає функціональність сайту, але коли ми говоримо конкретно про дизайн сайту і те, що побачить користувач, то йдеться лише про HTML, CSS і JavaScript.
Сучасні фреймворки
У рамках нашого курсу ми будемо працювати над розробкою дизайну веб-сайту. Дизайн сайту також можна розділити на кілька складових: розробка зовнішнього вигляду та додавання користувацьких функцій.
Якщо за зовнішній вигляд відповідають виключно HTML і CSS, то за додавання функцій може відповідати JavaScript і сотні його фреймворків та бібліотек. Якщо ви тільки починаєте вивчати цю тему, то вам може бути складно одразу розібратися, з чого почати в контексті JavaScript. Тут є React JS, Vue JS, Angular і багато інших фреймворків, які, по суті, виконують одну й ту саму задачу, але роблять це по-різному.
Ми рекомендуємо на старті добре вивчити HTML, CSS, сам JavaScript і потім перейти до вивчення, наприклад, Vue JS.
План курсу
У ході курсу ми навчимося створювати зовнішній дизайн сайту. Ми розробимо красивий сучасний веб-сайт, використовуючи лише HTML і CSS. При цьому ми не будемо використовувати різні препроцесори та task-менеджери. Хоча вони можуть спростити задачу, ми спеціально зробили курс, у якому все максимально нативно, без додаткових технологій.
Макет сайту
Як дизайн для нашого сайту ми скористаємося . Для роботи з макетом ми будемо використовувати програму Figma, яка є аналогом Photoshop, але більш сучасним і зручним для роботи з різними дизайн-проєктами, включно з макетами веб-сайтів і застосунків.
Програма навчання
Також на нашому сайті є більш поглиблені курси HTML, що будуть пройдені в програмі з вивчення розробки веб-сайтів. Ознайомитися з програмою навчання з Front-end можна за і з програмою навчання Full Stack за .
Онлайн редактор коду
Велике завдання за курсом
Вам необхідно оформити передплату на сайті, щоб мати доступ до всіх великих завдань. У завдання входить методика рішення, а також готовий проект з відповіддю до завдання.
PS: подібні завдання доступні при підписці від 1 місяця
Також варто подивитися
