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:

  • 38.5 hours on-demand video
  • 100 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
Development Web Development Front End Web Development

Front-end zaawansowany w 15 dni

Naucz się tworzyć atrakcyjne strony internetowe z wykorzystaniem bardziej zaawansowanych technik CSS i JavaScript
Rating: 4.8 out of 54.8 (3,661 ratings)
8,466 students
Created by Samuraj Programowania
Last updated 7/2020
Polish
30-Day Money-Back Guarantee

What you'll learn

  • Tworzyć atrakcyjne strony internetowe z wykorzystaniem bardziej zaawansowanych technik CSS
  • Wykorzystywać JavaScript i jQuery do tworzenia layoutów i efektów na stronie
  • Tworzyć layouty w oparciu o Flexbox i CSS Grid
  • Biegle posługiwać się kluczowymi właściwościami CSS

Course content

17 sections • 108 lectures • 38h 40m total length

  • Preview02:51
  • Preview03:27
  • Preview01:36
  • Preview00:52
  • Aktualizacje 2020
    00:50
  • Przygotowanie do pracy: konfiguracja edytora kodu - Visual Studio Code
    16:37

  • Wprowadzenie - kaskadowość, właściwości inicjalizujące, dziedziczenie, ważność
    23:17
  • Kaskadowość stylów w pigułce – podsumowanie
    17:46
  • Selektory, pseudoelementy i pseudoklasy
    29:46
  • Fonty w CSS
    41:08
  • Jednostki w CSS
    33:22

  • Właściwości background
    27:22
  • Model pudełkowy i box-sizing
    13:49
  • Właściwości position
    27:57
  • Właściwości display
    29:40
  • Normalizacja i reset CSS
    11:03
  • Funkcja calc w CSS
    16:16
  • Zmienne w CSS
    13:56
  • Projekt podsumowujący - header i nawigacja "przyklejone" do okna przeglądarki
    21:15

  • Zadanie 1: obrazek w stylu japońskim
    32:55
  • Preview16:41
  • Preview19:39
  • Preview20:45
  • Projekt menu z ikonkami z użyciem Font Awesome i Media Queries
    42:07

  • Preview24:23
  • Zadanie1: zmiana koloru tła i wyświetlenie tekstu po najechaniu na przycisk
    22:17
  • Zadanie2: Kwadrat zmieniający rozmiar i pozycję po najechaniu na przycisk
    16:37
  • Właściwości transform - wprowadzenie
    22:13
  • Teoria: właściwości transform
    08:17
  • Zadanie 3: wyśrodkowanie elementu w innym elemencie
    05:05
  • Zadanie4: linia z kwadratem przesuwająca się przy scrollowaniu w obrębie okna
    15:40
  • Zadanie 5: domek pojawiający się po kliknięciu przycisku
    22:24

  • Projekt 1: zegar w CSS ze wskazówką obracająca się po najechaniu na tarczę
    17:40
  • Projekt 2a: przycisk z animacją - podkreślenie po najechaniu (wersja ze spanem)
    06:26
  • Projekt 2b: przycisk z animacją - podkreślenie po najechaniu (wersja bez spana)
    07:01
  • Projekt 2c: przycisk z animacją - zmiana koloru wypełnienia i tekstu
    09:53
  • Zadanie 1: Przycisk z animacją dwuetapową
    07:29
  • Projekt 3: przycisk z trójkątem pojawiającym się po najechaniu
    09:23
  • Zadanie 2: zmiana rozmiaru tekstu i dodanie bordera po najechaniu na przycisk
    07:42
  • Projekt 4: zmiana rozmiaru tekstu po kliknięciu przycisku z użyciem jQuery
    22:57

  • Projekt 1: wschodzące i zachodzące słońce - animacja z użyciem klatek kluczowych
    29:53
  • Projekt 2: kwadrat zmieniający pozycję i kolor
    22:12
  • Preview26:34
  • Projekt 3: trzęsący się przycisk z użyciem animation
    04:45
  • Projekt 4: przycisk ze zmieniającym się tekstem z użyciem transition
    06:04
  • Zadanie 1: przycisk ze zmieniającym się tekstem - wjazd z boku
    06:03
  • Projekt 5: Napisy zmieniające się (przesuwające się) w obrębie sekcji
    18:56
  • Zadanie 2: Disco
    12:59

  • Projekt 1a: animowane 3 kropki z użyciem pseudoelementu
    09:16
  • Projekt 1b: animowane 3 kropki z użyciem spanów
    08:24
  • Zadanie 1: baner ze zmieniającymi się zdjęciami
    13:42
  • Projekt 2: baner ze zmieniającymi się zdjęciami i napisami
    23:13
  • Zadanie 2: symulacja gry typu Pong
    46:00
  • Projekt 3: chodząca postać
    18:17
  • Projekt 4: poruszający się dzwonek z dodatkowym efektem po najechaniu
    11:17
  • Zadanie 3: przycisk z przesuwającymi się strzałkami
    15:37

  • Jak działa Flexbox na przykładzie kontenera zawierającego 3 elementy
    28:19
  • Kluczowe właściwości Flexboxa w praktyce na kolejnych przykładach
    27:46
  • Teoria: właściwości kontenera we Flexbox
    37:41
  • Właściwości elementów elastycznych w praktyce
    22:03
  • Model pudełkowy we Flexbox
    09:49
  • Teoria: właściwości elementów elastycznych we Flexbox
    21:06

  • Projekt 1: layout kalkulatora z użyciem Flexboxa
    14:47
  • Zadanie 1: layout kalkulatora z odstępami między przyciskami
    21:49
  • Tworzenie stron responsywnych przy pomocy media queries - przypomnienie
    25:50
  • Galeria z użyciem Flexboxa i media queries
    14:44
  • Projekt 2: proste menu responsywne z użyciem Flexboxa
    12:10
  • Projekt 3a: layout z użyciem Flexboxa
    24:56
  • Projekt 3b: layout responsywny z użyciem Flexboxa i media queries
    08:57
  • Projekt 4: layout strony z użyciem Grida
    30:19
  • Zadanie 2: Cennik z użyciem Grida
    27:49

Requirements

  • Znajomość podstaw HTML i CSS

Description

Ten kurs pomoże Ci uzyskać biegłość w posługiwaniu się kluczowymi właściwościami CSS a także sprawnie wykorzystywać JavaScript i jQuery w celu uatrakcyjnienia (ożywienia) tworzonego projektu. Nauczysz się korzystać z nowoczesnych, bardziej zaawansowanych technik i rozwiązań CSS, takich jak Flexbox czy CSS Animation. Poznasz też preprocesor Sass. Podczas kursu zrobimy mnóstwo projektów, np. galeria, slajder, modal/popup, menu hamburger, animacje, efekty związane z kliknięciem, najechaniem czy skrolowaniem strony.

Kurs rekomendowany osobom, które uczyły się wcześniej same lub przeszły ze mną I etap nauki (kurs Web developer od podstaw w 15 dni), znają fundamenty HTML i CSS oraz są w stanie stworzyć samodzielnie prostą stronę internetową. Nie jest wymagana znajomość JavaScript.

Ten kurs jest niezależnym projektem edukacyjnym, ale jest to jednocześnie drugi z 6 etapów w projekcie "Od podstaw do pierwszej pracy jako front-end developer". Kolejnym krokiem będzie pogłębienie znajomości JavaScript. Kurs ten pozwoli Ci uzyskać biegłość w posługiwaniu się CSS-em i poznać JavaScript w zakresie budowania layoutu i tworzenia efektów na stronie.

Who this course is for:

  • osoby, które uczyły się już CSS i HTML, znają fundamenty tworzenia stron internetowych
  • osoby, które ukończyły mój kurs "Web developer w 15 dni" i chcą dalej rozwijać swoje umiejętności

Instructor

Samuraj Programowania
Startupowiec, web developer i programista JavaScript
Samuraj Programowania
  • 4.8 Instructor Rating
  • 19,655 Reviews
  • 30,022 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.