Это видео недоступно.
Сожалеем об этом.
CSS potrzebny do egzaminu. Technik informatyk. Egzamin EE.09 / E.14
HTML-код
- Опубликовано: 30 май 2017
- Jeżeli masz ochotę zobaczyć więcej naszych filmów, podcastów i artykułów w coraz lepszej jakości, to zachęcamy do pozostawienia subskrypcji, a także do odwiedzenia prowadzonych przez nas witryn oraz do polubienia fanpage'u Pasji informatyki na Facebooku.
🔔 Subskrybuj - bit.ly/pasja-sub
Jeśli masz ochotę wesprzeć to co robimy, to możesz:
🖐 Zostać Patronem - patronite.pl/pasja-informatyki
☕️ Ufundować nam wirtualną kawę - buycoffee.to/pasja-informatyki
👉 Fanpage na Facebooku - bit.ly/pasja-fb
👉 Profil Patronite - patronite.pl/pasja-informatyki
👉 Lista Patronów - pasja-informatyki.pl/patroni
👉 Donacje na blogu - miroslawzelent.pl/donate
👉 Harmonogram publikacji - bit.ly/pasja-harmonogram
👉 Kontakt z nami - pasja-informatyki.pl/kontakt/
👉 Współpraca reklamowa - bit.ly/pasja-wspolpraca
👉 Kursy video dla technikum - pasja-informatyki.pl
👉 Blog informatyczny - miroslawzelent.pl
👉 Trenażer egzaminacyjny - egzamin-informatyk.pl
👉 Egzamin-E13.pl - egzamin-e13.pl
👉 Forum dyskusyjne - forum.pasja-informatyki.pl/
👉 Witryna podcastowa - podcast.pasja-informatyki.pl/
👉 Twitter MZ - / miroslawzelent
👉 Twitter DS - / stelmach_damian
🕐 TIMESTAMPS (CHWILE CZASOWE):
[ 00:00:13 ] Tytułem wstępu
[ 00:02:34 ] Omówienie plików projektu
[ 00:03:49 ] Jaką witrynę wykonamy?
FUNDAMENTY CSS
[ 00:04:14 ] CSS = kaskadowe arkusze stylów
[ 00:04:31 ] Selektory, atrybuty, wartości
[ 00:06:17 ] Identyfikator ID i klasa CLASS
[ 00:08:01 ] Kiedy użyć klasy a kiedy identyfikatora?
[ 00:11:20 ] Podstawowe rodzaje selektorów
[ 00:12:00 ] Różne metody dołączenia stylów CSS do HTML
[ 00:16:08 ] Klauzula !important
PRZEGLĄD WŁAŚCIWOŚCI
[ 00:18:06 ] Wyśrodkowanie elementu, automatyczne marginesy
[ 00:19:38 ] Operator myślnika "-", hierarchia atrybutów
[ 00:20:29 ] Tło elementu: background
[ 00:21:27 ] Ścieżka do pliku zewnętrznego: url, background-image
[ 00:23:05 ] Powtarzanie tła: background-repeat
[ 00:24:59 ] Pozycja tła: background-position
[ 00:27:22 ] Tworzenie struktury witryny
[ 00:30:29 ] Krój czcionki: font-family
[ 00:31:21 ] Rozmiar czcionki: font-size
[ 00:32:10 ] Waga czcionki: font-weight
[ 00:32:46 ] Styl czcionki: font-style
[ 00:33:20 ] Wyrównanie tekstu: text-align
[ 00:33:54 ] Zmiana wielkości liter: text-transform
[ 00:34:41 ] Odstęp pomiędzy znakami: letter-spacing
[ 00:38:44 ] Wysokość linii tekstu: line-height
[ 00:39:17 ] Nadawanie odstępów: margin, padding
[ 00:39:48 ] Nakładanie się (collapse) pionowych marginesów
[ 00:40:37 ] Przykłady koniecznego użycia paddingu
[ 00:41:24 ] Możliwe zapisy marginesów w CSS
[ 00:45:32 ] Obramowanie: border
[ 00:47:25 ] Stylizowanie list (ul, ol)
[ 00:49:38 ] Uchwycenie kilku list z użyciem klas
[ 00:51:41 ] Wygląd markera listy: list-style-type
[ 00:53:18 ] Obraz jako marker listy: list-style-image
[ 00:54:08 ] Pozycja markera listy: list-style-position
[ 00:55:34 ] Zapis złożony (potrójny): list-style
[ 00:56:20 ] Uchwycenie elementu listy (li)
[ 00:58:00 ] Stylizowanie hiperłączy (a href)
[ 00:59:33 ] Wyróżnienie tekstu: text-decoration
[ 01:00:12 ] Stylizowanie hiperłączy z użyciem pseudoklas
[ 01:03:11 ] Stworzenie kilku rodzajów linków w podstronie
[ 01:05:32 ] Zapis kolorów w CSS, zapis szesnastkowy
[ 01:06:37 ] Zapis dziesiętny koloru - z użyciem rgb()
[ 01:08:23 ] Skrócony, trzyznakowy zapis szesnastkowy koloru
[ 01:08:51 ] Color pickery, trening interpetowania barw
[ 01:09:13 ] Nieprzezroczystość: opacity
[ 01:10:17 ] Nadawanie przezroczystego koloru: rgba()
[ 01:11:08 ] Położenie elementu: position
[ 01:11:46 ] Pozycja statyczna - position:static
[ 01:13:49 ] Pozycja relatywna - position:relative
[ 01:15:05 ] Pozycja absolutna - position:absolute
[ 01:16:17 ] Pozycja ustalona - position:fixed
[ 01:17:37 ] Słowo końcowe
[ 01:18:15 ] Podsumowanie odcinka na slajdach
📁 OBUDOWA DYDAKTYCZNA, TEST, WERSJA MP3:
pasja-informatyki.pl/programow...
🎵 MUZYKA:
Enzalla - Cobalt (Broken Elegance remix)
/ brokenelegancee
/ brokenelegance
/ brokenelegance
A Creative Commons Attribution License (CC BY) states that the material can be shared, remixed and used commercially: bit.ly/CCAttribution
#pasjainformatyki #programowanie #technikinformatyk
Nie programuje w CSS ale lajkuje i doceniam Pana pracę. Daje Pan nadzieje że YT może być świetną platformą do pokazywania wartościowych rzeczy a nie tylko filmików z patologią. Dziękuje.
Niech Pan nagrywa filmy do końca życia, nigdy nie przestane ich oglądać. I bardzo pana proszę, żeby powstawały filmy o różnych ciekawostkach matematycznych typu ciąg fibonnacciego, może coś na temat hipotezy rimana. Bardzo Panu dziękuje za wszystkie filmy jakie pan wrzuca.
Dziękuje panie Mirku! Tutaj więcej sie nauczyłem, niż przez całe 3 lata...
ja jestem ciągle zdumiony jak profesjonalne są te wykłady na tym kanale i w dodatku te pdf jeszcze w bonusie.
Dziękuję Panu :) Wszystkiego dobrego!
Panie Mirku, dzięki za wspaniały kolejny odcinek. Świetny, jak zwykle i dający dużo super wiedzy jak upiększyć nasze strony :-)
Mam książkę Ł. Pasternaka, ale zawsze milej jest zobaczyć to w akcji na żywo w Pana przykładach. Pozdrawiam.
Świetny materiał,dziekuje Mirku.
Zawsze na propsie!
Pana materiały to miód dla moich oczu i uszu !
najlepszy poradnik/kurs!
Miałem przyjemność obejrzenia i przepracowania większości materiałów z tego kanału i zastanawiam się czy to jest perfekcyjny przepis dla adeptów "od zera do programisty", czy raczej przepis na perfekcyjnego nauczyciela programowania, a przy okazji znakomity kurs. Wspaniały i inspirujący człowiek, życzę sobie i każdemu, żeby mieć kiedyś okazję do współpracy z kimś tak ogarniętym :)
Dzięki :)
super kurs@ polecam!
swietny odcinek
Super! Czekałem na to
nareszcie :D
bardzo dobrze wytłumaczone, aż chce się słuchać :D
Dzięki, miło słyszeć - starałem się to logicznie poukładać - wbrew pozorom przedstawienie CSSa potrzebnego do egzaminu w nieco ponad godzinę, w taki sposób aby było to strawne, stanowiło dla mnie spore wyzwanie. Pozdrawiam, MZ
zdaję go za rok dzieki
fajnie ze egzamin z e14 był w styczniu :D
Good JOB
Pan to najlepiej tłumaczy.
Boże ale mi pomagasz w życiu
Nie przesadzajmy, to tylko proste filmiki na YT. Ale fajnie, że gdzieś tam pomogłem ruszyć z programowaniem. Pozdrawiam, MZ
Pasja informatyki Widać ,że robisz to z pasji i to się ceni :)
Co racja, to racja. To prawdziwa pasja. Super kanał. Niech rozwija się dalej!
Awesome
świetny odcinek ! :)))
Przecież on go dodał 20 min temu a trwa ponad godzinę, więc skąd mogłeś wiedzieć, że jest świetny i go podsumować?
Po tych 20 minutach, poza tym każdy jego odcinek jest świetny.
Sześć zer, chciałbym kiedyś skodzić sześć zer. Klient prosi o to mówię bardzo proszę oh xd
:)
daje lajka w ciemno :D
filmy M.Z. można lajkować bez oglądania
z wizualizacją będzie problem. Zamykam oczy i widzę tylko dziewczynę mojej miłości :D
Taki drobny szczegół od strony SEO. Na każdej podstronie naszej witryny, powinien znajdować się tylko jeden nagłówek h1. Teraz wrzućmy sobie przykładową stronę z filmiku na serwer, przepuśćmy przez jakiś walidator SEO. Zobaczycie, że narzędzie z którego skorzystaliśmy będzie się pluło o dwa nagłówki h1 na jednej podstronie. Być może od strony programistycznej, nie jest to błąd, ale od strony SEO już na pewno.
Pomijając powyższe, niniejszy kanał to niezły pożeracz czasu, który właśnie pożera mi urlop ;-)
Nie miałem jeszcze szansy obejrzeć oczywiście ^^, ale już pozostawiam kciuka i zabieram się za materiał. Keep up the good work Panowie. Long run is good :D
Piotr Szadkowski good job powinno być 😉👍
Dlaczego? Możesz użyć zarówno job jak i work w tym powiedzeniu. Sens zdania się nie zmienia.
Piotr Szadkowski Nigdy się nie spotkałem z "good work" zawsze jak słyszę, to mówią "good job"
Jest tak jak mowi Piotr Szadkowski. Wyrażenie "keep up the good work" jest powszechnie używane, tak samo jak i solowe wyrażenie "good job", ale oba mają nieco inne znaczenie. Natomiast juz taka hybryda "keep up the good job" nie brzmi do końca naturalnie, po prostu coś w nim nie gra, nie brzmi :)
Osobiście bym to podsumował w taki sposób:
-good job - dobra robota
-keep up the good work - pracuj tak dalej (mniej więcej, ciężko mi tu odnaleźć dokładne polskie odwzorowanie).
Witaj Mirku! Mam mały problem, ponieważ jak ustawiam na swojej stronie obrazek to nie generuje mi się i jest tylko ikona, że coś tam w ogóle miało być. Co w takiej sytuacji mam zrobić?
Na kiedy przewiduje Pan jakiś odcinek z JS'em? Super by było gdyby był omówiony jak te z CSS'em i HTML'em, bo jestem początkujący i ciężko mi go ogarnąć.
Świetne odcinki Panie Mirosławie, chciałbym tylko zaznaczyć iż link z obudowy dydaktycznej nie działa i jest mi niezmiernie smutnoo z tego powodu.
Dla opacity, zamiast nieprzeźroczystość, co trochę ryje mózg, powiedziałbym KRYCIE. Kojarzy się np. z tym, jak farba kryje malowaną ścianę.
Można, pewnie - zawsze najlepiej używać tych słów które wywołują w nas skojarzenia, to ułatwia zapamiętywanie. Pozdrawiam, MZ
Dlatego podsuwam słówko Krycie, bo może wykorzystasz w przyszłych filmach. W Inkscape też Opacity jest tłumaczone jako krycie.
ATPO: Dostałeś mojego mejla o problemie z Twoimi filmami na rzutniku?
Z mailami od Widzów mam ostatnio zaległości - jest ich dużo, więc często nie jestem w stanie czasowo odpowiedzieć, bo istnieje jeszcze wiele wiadomości związanych z moją pracą czy gronem znajomych (i one mają pierwszeństwo). Przypuszczam, że jeżeli nie było z Twojej strony raportu o niedoręczeniu, to zapewne dotarł (proszę o wyrozumiałość). Pozdrawiam, MZ
Wiem, rozumiem, pytam tylko, bo może trafiło do spamu.
W skrócie: jest problem z Twoimi filmami na rzutniku, nic nie widać :( Ciemne kolory na czarnym tle się zlewają, bo rzutnik spłaszcza kolory i nie ma takiej palety barw, jak ekran. Prośba jest o bardziej kontrastowe kolory na filmach.
No tak, tutaj ciężko o kompromis - swego czasu eksperymentowałem z tym. Kolory białe i kontrastowe męczą oczy przy oglądaniu samemu, a te ciemne mogą bardzo utrudniać oglądanie na rzutniku. W moich filmach stawiam jednak na ciemne barwy, jako że większość osób przepracowuje filmy na komputerach czy urządzeniach mobilnych, a nie na rzutnikach. Poza tym ciemna stylistyka nadaje treści (imho) spokojniejszy, stonowany klimat. W przypadku rzutnika pozostaje pobrać film i otworzyć go np. w VLC, po czym wybrać Narzędzia - Efekty i filtry - Efekty wideo. Tam można tak przejaskrawić film, aby był widoczny z orbity okołoziemskiej :) Pozdrawiam, MZ
Co sądzi pan o programie Dreamweaver?
lajk w ciemno również z mojej strony, ale jestem pewien że nie pożałuje :P
Dawno nic w CSSie nie pisałem, posłucham sobie jak pójdę spać za chwilę :p
Drobna literówka w slajdzie o nazewnictwie ID. jest "... w naszym kozie..." zamiast "kodzie" :)
To się nazywa prawdziwa pasja. ale myśleliście o dodaniu kursu przygotowawczego z kwalifikacji E.12?
A nie miałem planów na weekend :)
szkoda że nie ma JS :) lecę dalej z tematem
Może zamiast "Zadanie domowe" to "Zadanie poza odcinkowe" :-)
Tak, zdaję sobie sprawę, że 'zadanie domowe' może mieć pejoratywny wydźwięk :) Jak w tym sucharze = Trwa lekcja, pani pyta dzieci: Co daje nam krówka? Dzieci: Mleczko! Pani: Dobrze. A kurka? Dzieci: Jajko Pani: No pięknie! A świnia? Dzieci: Zadania domowe! :) Pozdrawiam, MZ
Witam, gdzie znalezc tego pdf'a bo nie moge znalezc nigdzie. Pozdrawiam
Jesr różnica między opacity i rgba
Opacity sets the opacity value for an element and all of its children; While RGBA sets the opacity value only for a single declaration.
i dodatkowo
Opacity : The opacity property sets the opacity level for an element.(Setting opacity for an elements makes the whole element transparent including its content.)
Alpha Channel RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the object. Background : rgba (Red,Green,Blue,Opacity) (Setting rgba of an element only makes the element background transparent leaving its content as it is.)
Gdzie ten odcinek o multimediach? Przydałby się na teorie E14.
Łapa za taco hemingway'a
:)
znacznik h1 możemy ustawić tylko raz! to jest duży błąd ! brakuje w tych odcinkach semantyki.
10 łapek w dół.
A ja myślałęm żę już nikt nie używa myszy kulkowych :)
48:50
overflow:scroll
0 unlike-ów coś jest na rzeczy ;p, kiedy pan mirosław nie ma hejterów.... wiedz... że coś sie dzieje... :)
ten dislike to od ciebie? Bo zaraz po twoim komencie się pojawiły jakieś :P
Mario nie, nie ode mnie xd.
KDS
Czy? cpp duzo rozni sie od css?
haha to całkiem inna sprawa, nie ma nic wspólnego
No tak jakby różnią się wszystkim :v
Dwoma literkami, na trzy w sumie, więc o 66,(6)%. Z drugiej strony, można by uwzględnić to, że w alfabecie mamy p-r-s, więc nie są to odległe literki, więc na pewno css i cpp są bliższe sobie niż css i CBA. Więc to moje szacowanie, że o 66,(6)% jest tylko zgrubne i wymaga dokładniejszych badań i obliczeń.
super filmy, najlepszy na polskim YT
kto kliknął łapkę w dół, przyznawać się i wystąp, będzie kara. Zelent jako mentor rządzi.
Trochę za mało skondensowane. Za dużo afirmacji, trochę przemyconej, obszernej wiedzy, ale faktycznie za dużo gadania, za mało konkretów :-)