Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Personal Transformation Meditation Life Purpose Coaching Emotional Intelligence
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Data Cleaning
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee

This course includes:

  • 49.5 hours on-demand video
  • 7 articles
  • 46 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
Development Web Development

Zaawansowane projekty w CSS i JavaScript

7 projektów + BEM + Sass + Node.js + npm + JavaScript + webpack + Bootstrap + animacje + responsywność i optymalizacja
Rating: 4.7 out of 54.7 (668 ratings)
3,721 students
Created by Samuraj Programowania
Last updated 2/2020
Polish
30-Day Money-Back Guarantee

What you'll learn

  • Preprocesor Sass
  • Metodologia BEM
  • Flexbox i CSS Grid
  • Node i NPM
  • JS i DOM
  • Webpack
  • tworzenie animacji w CSS i JS
  • Bootstrap
  • tworzenie zaawansowanych projektów w CSS i JavaScript
  • tworzenie stron wydajnych, zoptymalizowanych i dostępnych na wielu urządzeniach i rozdzielczościach

Course content

26 sections • 277 lectures • 49h 38m total length

  • Preview02:36
  • Preview06:58
  • Preview01:59
  • Preview03:05

  • Preview22:39
  • Preview23:58
  • Preview41:34
  • Preview02:30
  • Preview24:19

  • Preview07:31
  • Preview05:46
  • Preview07:17
  • Preview10:19
  • Dodatek Sass - aktualizacja
    00:22
  • Preview13:14
  • Preview06:26
  • Preview10:09

  • Wprowadzenie do sekcji
    05:58
  • Zagnieżdżenia w Sass
    17:01
  • Zagnieżdżenia i BEM
    10:34
  • Zmienne w Sass
    22:48
  • Typy wartości w Sass
    12:21
  • Komentarze w Sass
    03:54
  • Architektura i @import w projekcie Sass
    14:22
  • Domieszki (@mixin @include)
    29:07
  • Rozszerzenia (@extend) i selektory zastępcze
    20:43
  • Operacje matematyczne
    05:26
  • Interpolacja
    02:11
  • funkcje kolorów w Sass
    05:48
  • Instrukcje warunkowe w Sass
    12:30
  • Własne funkcje w Sass
    11:31
  • Media Queries i Sass
    20:37
  • Co dalej
    02:22

  • Wprowadzenie do sekcji
    03:26
  • Krótka prezentacja o Flexboxie - właściwości elementów elastycznych i kontenera
    12:38
  • Ustawienia i narzędzia dla projektu
    05:20
  • Preview00:12
  • Podstawowa struktura projektu
    16:56
  • Layout strony tworzony za pomocą Flexboxa
    14:44
  • Sekcje "Logo" i "Wyszukiwarka"
    13:24
  • Sekcja "Settings"
    08:51
  • Sekcja "Menu"
    13:55
  • Sekcja "Artykuły główne"
    20:26
  • Sekcja "Lista artykułów"
    24:52
  • Sekcja "Stopka"
    12:47
  • Media Queries i Flexbox
    12:55

  • Preview00:42
  • Wprowadzenie
    05:50
  • CSS Grid a Flexbox
    05:46
  • Kontener, elementy, linie, ścieżki, komórka, obszar siatki i przerwy w siatce
    21:03
  • Struktura siatki i rozmieszczenie elementów
    05:06
  • Jak generowana jest struktura siatki
    10:34
  • Sposoby na rozmieszczenie elementów siatki w siatce
    20:49
  • Przykłady - automatyczne rozmieszczanie elementów
    23:13
  • Przykłady - jawne deklarowanie pozycji elementów
    21:50
  • Przykłady - jawne deklarowanie siatki
    34:05
  • Przykłady - właściwości kontenera
    11:55
  • Przykłady - właściwości elementu siatki
    10:14
  • Przykłady - wartości i funkcje w CSS Grid
    14:25
  • Projekt cz.1 - layout
    21:23
  • Projekt cz.2 - galeria
    08:24
  • Projekt cz.3 - responsywność
    08:30

  • Wprowadzenie do DOM (przypomnienie)
    18:19
  • Projekt - struktura HTML
    09:32
  • Projekt - CSS (flexbox)
    13:02
  • Projekt - dodawanie elementów do DOM (JavaScript)
    22:11
  • Projekt - wyszukiwanie elementów (JavaScript)
    15:08
  • Projekt - wyświetlanie informacji o elemencie (JavaScript)
    13:11
  • Projekt - wyświetlanie elementów (CSS Grid)
    06:56

  • AJAX, budowa URL, asynchroniczność, JSON, Web serwer i API
    26:50
  • Publiczne API z którym w tej sekcji pracujemy
    09:27
  • Metoda Fetch - pierwsze starcie
    24:03
  • Formularz i tworzenie parametrów zgodnie z API
    13:00
  • Odpowiedź serwera i modyfikacja DOM
    13:34

  • Preview01:46
  • Wprowadzenie i struktura HTML projektu
    09:37
  • Rozpoczynamy pracę z JavaScript i podstawowe style w CSS (w tym normalize.css)
    20:41
  • Funkcja obsługująca skrolowanie - określenie kierunku skrola
    07:14
  • Metoda scrollIntoView() i zabezpieczenie przed kilkukrotnym skrolowaniem naraz
    08:35
  • Refaktoryzacja kodu JavaScript
    05:21
  • Kod bardziej obiektowy - klasy i this
    38:47
  • Nawigacja
    25:08
  • Dostępność projektu na różnych przeglądarkach
    08:54
  • Obsługa urządzeń dotykowych
    25:02
  • Obsługa z poziomu klawiatury
    04:10

  • Preview00:40
  • Projekt "Balloon" - wersja kompletna
    25:07
  • Przerabiamy projekt na wersję bardziej obiektową (OOP)
    09:11
  • Bonus - projekt zbudowany w React
    17:55

Requirements

  • dobra znajomość HTML, CSS oraz podstawowa JavaScript

Description

Dzień dobry! Dziękuję za zainteresowanie kursem "Zaawansowane projekty w CSS i JavaScript". Ten kurs to nie tylko ciekawe projekty, ale także technologie i umiejętności wychodzące znacznie poza podstawy HTML, CSS i JavaScript. Poniżej znajdziesz najważniejsze informacje o kursie. Zapraszam do wspólnej nauki!


CZEGO UCZYSZ SIĘ W TYM KURSIE

- BEM - bardzo popularna metodologia, w której części naszego interfejsu dzielimy na bloki i elementy a wariacje obu definiujemy za pomocą modyfikatorów. BEM może sprawiać na początku wiele problemów a dla części osób może być nieintuicyjny. Pokażę Ci, że to naprawdę ciekawy sposób myślenia o UI oparty na oryginalnym podejściu do tworzenia klas i selektorów. Jestem przekonany, że w swojej karierze front-end developera spotkasz się i będzie musiał(a) - mam nadzieję, że także chciał(a) - korzystać z BEM. Dlatego warto już dziś go poznać :)

- Sass - najpopularniejszy (A.D. 2020) preprocesor CSS. Preprocesor rozszerza możliwości CSS-a i jest technologią "must know" dla front-end developera. Korzystanie z Sass wymaga od Ciebie poznania składni nowego metajęzyka - języka będącego rozszerzeniem CSS. Oczywiście CSS jest procesem końcowym pracy z Sass a ostatnim etapem tej pracy jest kompilacja Sass na CSS (zobaczysz też różne jej sposoby). W tym kursie poznasz najważniejsze koncepcje Sass oraz korzyści z ich używania. Będzie teoria oraz praktyka. Zobaczysz też, że Sass bardzo fajnie komponuje się z wcześniej poznanym BEM.

- Flexbox i CSS Grid - najnowsze i najpopularniejsze obecnie techniki CSS pozwalające tworzyć layout strony i rozmieszczać elementy w kontenerach. W kursie skupiamy się przede wszystkim na CSS Grid, zakładam bowiem, że Flexbox udało Ci się już poznać (choćby z jednego z moich wcześniejszych kursów). Jeśli potrzebujesz dobre powtórki Flexboxa i dobrego opracowania CSS Grid z przykładami, to trafiłeś/-aś idealnie :)

- JS i DOM - Zakładam, że JavaScript znasz co najmniej w stopniu podstawowym.  W tej części będzie przede wszystkim o korzystaniu z JavaScript w pracy z DOM oraz o korzystaniu z API (AJAX). Znajdzie się też czas na wyjaśnienie relacji między przeglądarką a serwerem. Ten kurs to także wyjaśnienie modułów w Javascript i to zarówno w specyfikacji CommonJS jak i ES Modules - od tego się nie ucieknie w bardziej zaawansowanych projektach.

- Node.js i NPM - niezbędne wprowadzenie dla front-end developera. Jeśli robiłeś/-aś już bardziej zaawansowane rzeczy po stronie frontu (np. korzystałeś/-aś z React.js) lub uczyłeś/-aś się back-endu, to znasz już Node.js i NPM. Jeśli tak jest, będzie to dla Ciebie w dużej części przypomnienie, jeśli nie, to dowiesz się istotnych rzeczy, z których z pewnością przyjdzie Ci korzystać, jeśli będziesz rozwijać karierę front-end developera. Znajomość Node i NPM profesjonalizuje i przyspiesza naszą pracę.

- Webpack - świetne i popularne środowisko developerskie. Dzięki webpackowi możliwy jest bundling (JS,CSS, grafiki, HTML) i automatyzacja zadań (np. kompilator Sass, transpilacja do ES5, minifikacja i optymalizacja) czy użycie serwera deweloperskiego. Będę starać się dobrze Ci wytłumaczyć działanie Webpacka, a nie tylko pokazać, jak go skonfigurować na zasadzie kopiuj - wklej.

- Animacje - strona bez animacji? Nawet w XX wieku były już gify :) A tak poważnie, animacje mają olbrzymi wpływ na estetykę strony, ale także na interfejs i bardzo pomagają uczynić stronę przyjazną (zrozumiałą) i atrakcyjną dla użytkownika. Skupimy się na animacjach w CSS, ale użyjemy też JavaScript.

- SVG i GSAP - grafika wektorowa w niektórych sytuacjach jest świetnym rozwiązaniem przy tworzeniu strony  Skalowalne (dobre na każdy wyświetlacz), małe, powszechnie wspierane w przeglądarkach, bardzo dobre do animacji i interakcji - nie dziwi więc, że takie grafiki są często spotykane. W kursie poznasz też podstawy pracy z jedną z najpopularniejszych bibliotek do animacji (także animacji SVG), którą jest GSAP (Green Sock Animation Platform).

- Responsywność - optymalizacja - dostępność - jak tworzyć strony, które są wydajne, mają zoptymalizowane zasoby, są szybkie i da się z nich korzystać na różnych urządzeniach, różnych rozdzielczościach i różnych przeglądarkach. To jest temat rzeka i nie ogranicza się tylko do Media Queries i podejścia mobile first. My się z tym zagadnieniem zmierzymy na poważnie.

- BONUS: Bootstrap (gość) - Bootstrap to framework do tworzenia interfejsów użytkownika. W praktyce Bootstrap pozwala tworzyć responsywne strony w oparciu o gotowe elementy interfejsu i zdefiniowane style - nie trzeba wszystkiego pisać od zera. Bootstrapa można kochać i używać albo i nie. Ale warto go poznać.


A oprócz tego aż 7 zaawansowanych projektów z wykorzystaniem CSS i JavaScript - jeden tworzony przez mnie i 6 tworzonych przez zaproszonych gości.


GOŚCIE W KURSIE

W tym kursie część materiałów została przygotowana przez gości. Zostało to zaznaczone w harmonogramie. Dzięki gościom poznasz styl pracy kilku front-end developerów, co stanowi wartość dodaną tego kursu.


Zapraszam!

Who this course is for:

  • każdego obecnego i przyszłego front-end developera, który naukę podstaw ma już za sobą i chciałby poznać technologie, narzędzia i koncepcje używane na co dzień w pracy wielu front-end developerów
  • dla osób szukających pierwszej pracy jako front-end developerzy, które chcą zyskać umiejętności i znajomość technologii/narzędzi, których oczekują pracodawcy

Instructor

Samuraj Programowania
Startupowiec, web developer i programista JavaScript
Samuraj Programowania
  • 4.8 Instructor Rating
  • 19,655 Reviews
  • 30,000 Students
  • 8 Courses

Nazywam się Bartłomiej Borowczyk, ale bardziej znany jestem jako Samuraj Programowania - od nazwy kanału, który prowadzę na YouTube. Jestem absolwentem Uniwersytetu Warszawskiego (politologii, niestety), ale także studiów podyplomowych związanych z programowaniem na Uniwersytecie Łódzkim (aplikacje internetowe) oraz w WSZiM w Sochaczewie (.NET, C# i MS SQL). Pierwszą stronę internetową stworzyłem w 2008 roku w systemie Joomla. Prowadzę kanały Samuraj Programowania oraz Websamuraj na YouTube zawierające materiały dotyczące nauki tworzenia stron internetowych i programowania w JavaScript.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.