Основи на модерното оформление - безплатен курс от Hexlet, обучение 9 часа, Дата: 5 декември 2023 г.
разни / / December 06, 2023
Ще научите повече за HTML маркирането и възможностите на съвременния стандарт HTML5. Освен това ще придобиете основни познания за стилизиране с помощта на CSS: научете как да свързвате стилове, да използвате селектори и да работите с каскадиране. В допълнение към HTML и CSS, ще се научите да работите с вградените инструменти за отстраняване на грешки в оформлението на браузъра, по-специално Google Chrome DevTools. В резултат на това ще научите как да използвате HTML език за маркиране, за да оформите текст на уебсайт, а също така ще се запознаете с основните правила за използване на CSS и стилизиране на текст.
Ще можете незабавно да приложите новите си умения на практика - ние ще изучаваме редактори на оформление и плъгини за тях. В края на всеки урок ще намерите малки самостоятелни задачи. Те са насочени към по-практическо разбиране на разглежданата тема и затова са силно препоръчителни за изпълнение.
Основите на оформлението ще ви бъдат полезни, ако решите да изучавате уеб разработка, независимо от посоката. Знанията от този курс помагат на програмистите да маркират данни и да ги показват на сайта. Този курс е подходящ за начинаещи и разработчици, които не са се сблъсквали
Въведение
Курсът „Основи на модерното оформление“ е основата за изучаване на основите на HTML и CSS оформлението на уебсайтове. В този урок ще говорим накратко за това, което научаваме в курса и как тези знания могат да бъдат приложени на практика.
Въведение в HTML
Урокът е посветен на HTML оформлението от нулата. Говорим за ролята на атрибутите и изучаваме общата схема за описание на HTML тагове.
Блоков модел
Кои елементи отговарят за рамката на страницата и кои помагат в процеса на нейното стилизиране или добавяне на функционални части? Нека се запознаем с блоковите и вградените HTML елементи и да проучим влиянието на стиловете върху крайната ширина на елементите.
Семантичен HTML
Основната цел на всяко HTML оформление е да предаде значението на блоковете. В този урок ще проучим семантичните възможности на най-новия стандарт HTML5 и ще научим за уеб достъпността.
Основна структура на HTML документ
Всеки HTML документ има основна структура, състояща се от тагове и сервизни елементи. Браузърът се нуждае от тях, за да показва информацията правилно. В този урок ще разгледаме всеки ред от тази структура.
Основи на CSS
Езикът CSS е създаден за визуален дизайн на уеб страница. Ние изучаваме основните възможности на езика, разбираме как да ги използваме заедно с HTML. Научаваме се да включваме CSS файлове и се запознаваме с основните видове селектори.
Каскадно в CSS
Какво е каскадиране и как работи в CSS? Урокът е посветен на разликите в приоритетите на селектора и способността да го използвате във вашите проекти.
Chrome DevTools
Когато оформяте уебсайт, е важно да откриете грешки навреме или да разберете как правилно да конвертирате блока, от който се нуждаем. Преди това се правеше предимно на ръка. Съвременните браузъри имат функция за уеб инспектор. Нека разгледаме възможностите на един от тях - Chrome DevTools.
Редактори на кодове
За да запазите работата си, имате нужда от редактор на код. В този урок ще разгледаме как да инсталирате Visual Studio Code. Това е мощен инструмент, който може да се използва не само за оформление, но и за програмиране на всеки език.
Емет
Нека проучим един от най-полезните плъгини за дизайнери на оформление - Emmet. Това ще ускори маркирането на HTML код и ще премахне повечето от рутинните стъпки.
Публикация в Интернет
За да поставите проект в Интернет, трябва да използвате хостинг - специален сървър, който ще съхранява файлове и ще предоставя достъп до тях чрез име на домейн. В този урок ще разгледаме безплатния хостинг на GitHub.
Графичен редактор
На пазара има няколко основни редактора. Някои от тях са специфични само за една операционна система, други могат да бъдат инсталирани на всяка от тях. В този раздел нека разгледаме основните стъпки, когато дизайнерът на оформление работи с онлайн редактора Figma.
Самостоятелна работа
Допълнителни задачи, които ви позволяват да консолидирате придобитата теория
Допълнителни материали
Статии и видеоклипове, курирани от екипа на Hexlet. Ще ви помогне да се потопите по-дълбоко в темата на курса