- Autor:
- Długość
- liczba lekcji: 51, czas trwania: 07:59:29
- Ocena
Kurs video
Ambitny Frontend: Zaawansowane techniki CSS i HTML. Kurs video. Projektuj nowoczesne layouty, które zachwycą Radosław Madecki
- Autor:
- Radosław Madecki
- Wydawnictwo:
- Videopoint
- Wersja:
- Online
- Czas trwania:
- 7 godz. 59 min.
- Technologia:
- HTML5, CSS3
- Ocena:
Spis lekcji kursu video
-
1. Wstęp 00:07:41
-
2. Poznajemy projekt w Figmie 00:23:03
-
3. Tworzymy lokalny brand book 02:46:28
- 3.1. Pobieranie fontów 00:14:27
- 3.2. Definiowanie klas fontów, remy i emy 00:15:30
- 3.3. Strona z podglądem brand booka 00:22:38
- 3.4. Szlifowanie fontów 00:22:15
- 3.5. Szukanie błędów 00:09:47
- 3.6. Natywny akordeon HTML 00:05:02
- 3.7. Techniki definiowania kolorów 00:18:23
- 3.8. Definiowanie zmiennych CSS 00:10:17
- 3.9. Plan na przyciski 00:05:01
- 3.10. Implementowanie przycisków 00:17:07
- 3.11. Przycisków ciąg dalszy 00:10:30
- 3.12. Stany przycisków 00:07:41
- 3.13. Ribbony 00:00:37
- 3.14. Podpowiedzi z kodem w brand booku 00:04:32
- 3.15. Linki 00:02:41
-
4. Start implementacji strony 00:50:45
-
5. Mini-kurs CSS Grid 01:16:15
- 5.1. Wprowadzenie do Grid CSS 00:03:14
- 5.2. Grid container 00:03:41
- 5.3. Kolumny, grid columns 00:16:50
- 5.4. Grid rows, wiersze 00:05:35
- 5.5. Gridowy słowniczek - kluczowe pojęcia 00:03:20
- 5.6. Nietypowe kształty wskazanych komórek (grid na designie) 00:07:01
- 5.7. Cały layout strony za pomocą grid areas 00:08:13
- 5.8. Układanie elementów w poziomie 00:10:24
- 5.9. Układanie treści komórek w pionie 00:06:30
- 5.10. Skrócony zapis na układanie treści w pionie i poziomie 00:00:53
- 5.11. Gdzie szukać więcej informacji o grid 00:10:34
-
6. Ciąg dalszy strony 02:29:00
- 6.1. Kontynuujemy pracę po przerwie 00:17:00
- 6.2. Czym jest reset.css? 00:12:12
- 6.3. Landing section - ciąg dalszy 00:14:57
- 6.4. Landing section - ostatnie szlify 00:13:34
- 6.5. Lista brandów 00:09:36
- 6.6. Ozdobniki 00:06:22
- 6.7. Koniec wspólnej pracy - skomplikowany Grid 00:02:55
- 6.8. Wskazówki do zadania z Gridem 00:03:41
- 6.9. Rozwiązania zadania z Gridem 00:15:38
- 6.10. Parę ciekawostek związanych z porządkowaniem kodu 00:05:32
- 6.11. @import vs link rel 00:03:05
- 6.12. Rozwiązanie drugiego zadania z Gridem 00:12:06
- 6.13. Sekcja Zara 00:12:49
- 6.14. Newsletter 00:15:08
- 6.15. Stopka 00:04:25
-
7. Co dalej, jaki jest Twój poziom? 00:06:17
Opis
kursu video
:
Ambitny Frontend: Zaawansowane techniki CSS i HTML. Kurs video. Projektuj nowoczesne layouty, które zachwycą
Czego się nauczysz?
- Poznasz zaawansowane techniki pozycjonowania elementów w CSS, w tym flexbox i grid layout
- Opanujesz komponentowe podejście do stylowania, tworząc i przenosząc style z narzędzi takich jak Figma, by móc ich wielokrotnie używać w swoich projektach
- Nauczysz się korzystać ze zmiennych w CSS, aby Twój kod był bardziej dynamiczny i łatwiejszy w utrzymaniu
- Zastosujesz CSS grid w kontekście zaawansowanej responsywności stron
- Zdobędziesz wiedzę na temat optymalizacji i wydajności kodu CSS
- Poszerzysz wiedzę o semantyce HTML i o rolach ARIA, co przyczyni się do lepszej dostępności tworzonych stron
- Zwiększysz swoją świadomość co do roli accessibility we współczesnym web developmencie
- Samodzielnie stworzysz system komponentów, bez użycia narzędzi takich jak Storybook
Obierz kurs na... zaawansowane techniki HTML i CSS
Bycie dobrym frontendowcem w dzisiejszych czasach to sztuka łączenia kreatywności z technologią. Nie wystarczy już tylko znać HTML i CSS – trzeba myśleć jak projektant, kodować jak inżynier i działać jak lider zespołu. Znajomość zaawansowanego HTML i CSS to oczywiście fundament, na którym opiera się nowoczesny web development. Współczesne strony internetowe muszą być nie tylko estetyczne, ale także responsywne i dostępne dla wszystkich użytkowników. Kluczem do sukcesu jest opanowanie zaawansowanych narzędzi, takich jak CSS grid, flexbox, i komponentów, które pozwalają budować nowoczesne, responsywne strony. Grid CSS, choć wprowadzony dopiero w 2017 roku, zrewolucjonizował tworzenie nowoczesnych układów, zastępując starsze metody jak float czy inline-block. Z kolei zrozumienie semantyki HTML i ról ARIA jest niezbędne, aby tworzyć strony dostępne dla użytkowników z różnymi niepełnosprawnościami – to coraz ważniejszy aspekt w web developmencie. Zaawansowane techniki pozwalają również na lepszą współpracę w zespołach – tu modularność i czytelność kodu są kluczowe (przykładowo umiejętność przenoszenia projektów z Figmy do kodu da Ci przewagę w pracy zespołowej). Przekonaj się, jak nieograniczone są możliwości web developmentu, gdy zaawansowane techniki stają się intuicyjne. To moment, w którym projektowanie stron przestaje być wyzwaniem, ponieważ zmienia się w czystą przyjemność!
Szkolenie Ambitny frontend: zaawansowane techniki CSS i HTML. Kurs video. Projektuj nowoczesne layouty, które zachwycą ukończysz na poziomie średnio zaawansowanym – z elementami z poziomu zaawansowanego. Doświadczysz kompleksowej pracy nad realnym projektem, z jakim możesz się spotkać w pracy web developera. Zrozumiesz, jak przekształcać design z Figmy na gotowe strony, pobierać grafiki i pracować z brand bookiem. Nauczysz się definiować fonty przy użyciu jednostek rem i em, a także tworzyć stronę z podglądem brand booka, aby się upewnić, że wszystko działa perfekcyjnie. Opanujesz sztukę zarządzania kolorami i zmiennymi w CSS, co pozwoli Ci na dynamiczne i efektywne stylowanie. Poznasz zaawansowane techniki CSS, takie jak flexbox i grid, i w praktyce nauczysz się tworzyć elastyczne, responsywne layouty, które świetnie wyglądają na każdym urządzeniu. Zrozumiesz, jak dynamicznie zarządzać stylami dzięki CSS variables, co znacznie ułatwi utrzymanie większych projektów. Będziesz sprawnie zarządzać wieloma plikami CSS, co pozwoli Ci na lepszą organizację pracy w dużych zespołach. Dogłębnie zrozumiesz semantykę HTML, co sprawi, że Twoje strony będą bardziej przyjazne i dostępne dla wszystkich użytkowników, w tym tych korzystających z technologii wspomagających. Przyswoisz zasady accessibility i roli ARIA, co pozwoli Ci tworzyć strony zgodne z najnowszymi standardami. Nauczysz się także optymalizować kod CSS, co zwiększy wydajność Twoich stron. Dzięki temu staniesz się frontend developerem, gotowym na większe wyzwania. Poznając tajniki CSS grid, dowiesz się, jak perfekcyjnie układać elementy w gridzie i rozwiązywać złożone wyzwania layoutowe. W efekcie Twoje strony będą responsywne, elastyczne i zaprojektowane zgodnie z najwyższymi standardami. Zakończysz kurs z umiejętnością tworzenia profesjonalnych, nowoczesnych stron internetowych z dbałością o każdy szczegół.
Wybrane bestsellery
Videopoint - inne kursy
Dzięki opcji "Druk na żądanie" do sprzedaży wracają tytuły Grupy Helion, które cieszyły sie dużym zainteresowaniem, a których nakład został wyprzedany.
Dla naszych Czytelników wydrukowaliśmy dodatkową pulę egzemplarzy w technice druku cyfrowego.
Co powinieneś wiedzieć o usłudze "Druk na żądanie":
- usługa obejmuje tylko widoczną poniżej listę tytułów, którą na bieżąco aktualizujemy;
- cena książki może być wyższa od początkowej ceny detalicznej, co jest spowodowane kosztami druku cyfrowego (wyższymi niż koszty tradycyjnego druku offsetowego). Obowiązująca cena jest zawsze podawana na stronie WWW książki;
- zawartość książki wraz z dodatkami (płyta CD, DVD) odpowiada jej pierwotnemu wydaniu i jest w pełni komplementarna;
- usługa nie obejmuje książek w kolorze.
Masz pytanie o konkretny tytuł? Napisz do nas: sklep@helion.pl
Książka drukowana
Oceny i opinie klientów: Ambitny Frontend: Zaawansowane techniki CSS i HTML. Kurs video. Projektuj nowoczesne layouty, które zachwycą Radosław Madecki (0) Weryfikacja opinii następuję na podstawie historii zamówień na koncie Użytkownika umieszczającego opinię. Użytkownik mógł otrzymać punkty za opublikowanie opinii uprawniające do uzyskania rabatu w ramach Programu Punktowego.