CSS за напереднали: Flexbox, Grid & media queries
научи тънкостите на CSS и ги прилагай, за да създаваш адаптивни уеб страници
Ниво: напреднали
Времетраене: 4:30 часа
Допълнителни учебни материали: да
Обратна връзка от преподавателя: да, по имейл
Технологии
Less
CSS3
Figma
Какво ще научиш по време на това обучение
През почти пете часа, които ще прекараме заедно, ще научиш как да използваш съвременни 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
За кого е подходящо обучението
Какво ще получиш
Вземи достъп до запис и всички материали
Цената на това обучение е 80лв. с ДДС. Плащането се извършва с карта или чрез банков превод след попълване на формата по-долу. След отразено плащане ще получиш имейл с достъп до всички материали и запис.
Те ми се довериха ❤️
През 2024-та организирах 2 пълни курса и над 10 работилници, а междувременно развивам блога на {dev} blondie; в който може да намериш много полезна и практическа информация, свързана с програмирането.
Много съм доволна от работилницата, беше ми много много интересно. Много професионално и увлекателно обучение. Супер смислено, достатъчно теория и въвеждане в материята и изчерпателна практическа част, която нагледно предтавя стъпка постъпка как да си разработим уебстраница.
Блонди ис дъ бест <3
Елеонора Воденичарова
Работилницата беше изключително полезна за мен, тъй като до момента не бях имала опит с писането на код.
Още от първата работилница усетих как тези нови знания допълват съществуващите ми умения в дизайна. Огромна заслуга имаш ти като лектор, който успя да направи сложната на вид материя достъпна и интересна.
Жаклина Симова
Петя, страхотна си ❤️ Наистина ми беше толкова интересно, че чаках с нетърпение да изпратиш записа, за да доизчистя грешките, които в бързината направих по кода. По много лесен и възприемчив начин ни въведе.
Ния Иванова
Петя, страхотна работилница.
Благодаря ти за страхотния лесен, ясен и разбираем подход с множество примери.
За мен това беше едно от най-удовлетворяващите и смислени обучения, на които съм била през последната година.
Михаела Ризова
Изключително полезен workshop! За хора с базови познания по HTML, CSS, и JavaScript се изясняват доста неща и се показа процеса по писане на сайт Бих се записал за бъдещи workshop-и.
Бисер Дойков
Много добре подготвен workshop, само за 4 часа и обхванахте и преподадохте достатъчно умения, с които може човек сам да се справи с направата на малка уеб страничка.
Михаила Крушарска
Обясняваш достъпно и с нормално темпо. Смятам за много смислено обучението, тъй като ще улесни работата ми като ux/ui дизайнер, както и работата ми с колеги. Също така ми дава възможност да погледа от друга перспектива процеса по създаване на дизайн система, което смятам също за много ключово.
Антинио Георгиев
Получих много интересна и нова за мен информация за front-end и създаването на интернет сайтове за уеб и мобилна версия.
Светла Христова
Чудесна работилница!
В рамките на няколко часа успях да получа толкова много знания, които определено ще са полезни в работата ми като UI Дизайнер и ИТ Проджект мениджър.
Ренета Георгиева
Нормално е да имаш въпроси
Затова отговарям на някои от тях тук. А ако има такива, които не са споменати – не се колебай да ми пишеш на hi@devblondie.com
Ще получиш имейл с опции за плащане – линк за директно плащане с карта или нареждане на банков превод. След като плащането бъде отразено (отнема няколко минути), ще получиш имейл с достъп до запис на обучението + всички разработени материали и файлове, както и презентация.
Обучението е с продължителност от около 4:30 часа. Един от тях е теоретичен – там си говорим за това какво изобщо представляват HTML и CSS, от какво се състои един уеб сайт и кои са основните стъпки по изграждането му. В оставащите 3 часа работим над първият си уеб проект – реализираме дизайн, подаден във Figma, пишейки HTML и CSS.
Да, разбира се 🙂 Мога да издам фактура както за физическо, така и за юридическо лице.
Да, всеки участник ще получи сертификат за преминато обучение по основи на HTML5 и CSS3.
Не, няма дори да се опитвам да те заблудя, че за 5 часа ще станеш програмист. Но за 5 часа ще видиш процесите, които съпътстват създаването на една уеб страница, а отделно от това ще получиш допълнителни учебни материали, които да ти помогнат да създадеш първият си софтуерен продукт.
