Съвременен CSS: Flexbox, Grid & media queries
научи тънкостите на CSS и ги прилагай, за да създаваш адаптивни уеб страници
Ниво: начинаещи
Къде: на живо онлайн (Zoom)
Сертификат: да
Видео запис на обучението: да
Допълнителни учебни материали: да
Задание за домашна работа + видео обратна връзка
Група: макс 30 души
Кога: очаквай дата
Технологии
Figma
CSS3
Less
Какво ще научиш по време на това обучение
През пете часа, които ще прекараме заедно, ще научиш как да използваш съвременни CSS features, като Flexbox и Grid, за да създаваш адаптивни и отчивчиви уеб страници. Ще използваме готов дизайн, подаден във Figma, който ще превърнем в интерактивна уеб страница.
1
Какво в CSS препроцесор и как да използваш такъв
По време на работилницата ще раотим с Less – CSS препроцесор, който ще ти позволи да пишеш код по-бързо и ефективно.
2
Как да използваш Flexbox и Grid заедно и поотделно
За целите на страницата, която ще създадем, ще приложим както CSS Flexbox, така и CSS Grid. Ще видиш какви са ползите и ще знаеш кое кога да използваш.
3
Как да създаваш responsive уеб страници
След като създадем страницата, ще създадем media query правила, с които да сме сигурни, че уеб страницата ни изглежда добре на всякакви устройства и резолюции.
Как ще протече обучението
Внимание: това е практическо обучение.
Означава, че няма да прекарваме време само в приказки, а тъкмо обратното – ще създаваме заедно (точно така, ти също ще имаш задачи и участие).
Теоретична част – 1 час
– какво е най-новото от CSS3
– какво са препроцесорите и за какво се използват
– какво представляват т.нар. media queries
– какво е Flexbox
– какво е Grid
– каква е разликата между responsive & adaptive в уеб
– какви видове размери има в CSS
– какво представляват CSS библиотеките и за какво ги използваме
Практическа част – 4 часа
– ще работим с дизайн, подаден във Figma
– ще продължим работата върху изградената HTML структура от работилницата „Основи на HTML5 & CSS3“ (не е задължително да си участвал в нея)
– ще започнем със стилизиране на отделните секции, както и с добавене на нови
– ще използваме rem единици за подаване на размери
– ще създадем media query правила, с които да направим страницата адаптивна
– ще използваме Flexbox и Grid за задаване layout на нови секции
– за по-бързо и ефективно писане на код, ще използваме Less CSS preprocessor
За кого е подходящо обучението
Какво ще получиш
Запиши се за известие
Цената за участие е 180лв / 92.04€ с ДДС.
Плащането се извършва с карта или чрез банков превод след попълване на формата по-долу.
Остави имейл, за да те уведомя, когато има обявена дата
Те ми се довериха ❤️
През 2024-та организирах 2 пълни курса и над 15 работилници, а междувременно развивам блога на {dev} blondie; в който може да намериш много полезна и практическа информация, свързана с програмирането.
Още от първата работилница усетих как тези нови знания допълват съществуващите ми умения в дизайна. Огромна заслуга имаш ти като лектор, който успя да направи сложната на вид материя достъпна и интересна.
Жаклина Симова
Петя, страхотна си ❤️ Наистина ми беше толкова интересно, че чаках с нетърпение да изпратиш записа, за да доизчистя грешките, които в бързината направих по кода. По много лесен и възприемчив начин ни въведе.
Ния Иванова
Изключително полезен workshop! За хора с базови познания по HTML, CSS, и JavaScript се изясняват доста неща и се показа процеса по писане на сайт Бих се записал за бъдещи workshop-и.
Бисер Дойков
За мен това беше едно от най-удовлетворяващите и смислени обучения, на които съм била през последната година.
Михаела Ризова
Получих много интересна и нова за мен информация за front-end и създаването на интернет сайтове за уеб и мобилна версия.
Светла Христова
Чудесна работилница!
В рамките на няколко часа успях да получа толкова много знания, които определено ще са полезни в работата ми като UI Дизайнер и ИТ Проджект мениджър.
Ренета Георгиева
Нормално е да имаш въпроси
Затова отговарям на някои от тях тук. А ако има такива, които не са споменати – не се колебай да ми пишеш на hi@devblondie.com
Очаквай дата
Ще ни липсваш 🙁 но няма проблем – веднага след провеждане на обучението ще получиш запис от него, както и всички материали, които сме разработвали.
Да, разбира се 🙂 Мога да издам фактура както за физческо лице, така и за юридическо.
Да, всеки участник ще получи сертификат за завършване на съответната работилница.
Не, няма дори да се опитвам да те заблудя, че за 5 часа ще станеш програмист. Но за 5 часа ще видиш процесите, които съпътстват създаването на една уеб страница, а отделно от това ще получиш допълнителни учебни материали, които да ти помогнат да създадеш първият си софтуерен продукт.
След края на работилницата ще полчуиш имейл със задание – дизайн на малка страница, реализиран във Figma. Задачата ти ще бъде да го превърнеш в адаптивна уеб страница, използвайки HTML5 и CSS3 – технологиите, които сме усвоили по време на практическата част. Не се притеснявай, ще имаш пълни инструкции и ясни очаквания за това какъв трябва да бъде крайния резултат 🙂
О, да! Нямам търпение да видя какво ще сътвориш и доколко си успял/а да усвоиш HTML5 и CSS3. Ще разгледам работата ти индивидуално и ще ти изпратя имейл с текстова и видео обратна връзка, така че да си вземеш максимума от приложеното.
