What the frontend?!
<?!>
CZEŚĆ!
Maciej Korsan
Frontend developer @ POLARBITS_
Maciek @ Korsan Studio
http://szkolenie.korsan.studio
Masz pytanie?
Nie bój się mi przerywać!
NIE MA GŁUPICH
PYTAŃ!
BĘDZIE INTENSYWNIE
(ALE SATYSFAKCJONUJĄCO)
frontend
ROZKŁAD
JAZDY
Instalacja oprogramowania
Zakładamy konto
Czym jest frontend?
😔
HTML
HyperText Markup Language
<!DOCTYPE html>
<html>
<head>
<title>Moja pierwsza strona</title>
</head>
<body>
<h1>Witaj Świecie!</h1>
</body>
</html>Witaj Świecie!
HTML
odpowiada za treść
CSS
Cascading Style Sheets
<!DOCTYPE html>
<html>
<head>
<title>Moja pierwsza strona</title>
<style type="text/css">
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Witaj Świecie!</h1>
</body>
</html>Witaj Świecie!
CSS
odpowiada za wygląd
ZAGADKA
KOT TO NIE KOTARA
JAVA TO NIE JAVASCRIPT
!
JavaScript
odpowiada za interakcje
*
*
*
*
git: wprowadzenie
Podstawowe znaczniki
PISZEMY KOD!
<!DOCTYPE html>
<html>
<head>
<title>Moja pierwsza strona</title>
</head>
<body>
<h1>Witaj Świecie!</h1>
</body>
</html>Witaj Świecie!
NAGŁÓWKI
h1-h6
BLOKI
div
LISTY
ul, ol
LINKI
a
OBRAZKI
img
TEKST
p, strong, em, span
ELEMENTY ZEWNĘTRZNE
iframe, audio, video
LOREM IPSUM
STYLUJEMY!
STYLUJEMY!
STYLUJEMY!
selektor {
atrybut-1: wartość;
atrybut-2: wartość;
}<!DOCTYPE html>
<html>
<head>
<title>Moja pierwsza strona</title>
<style type="text/css">
h2 {
color: red;
}
</style>
</head>
<body>
<h2>Witaj Świecie!</h2>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Moja pierwsza strona</title>
</head>
<body>
<h2 style="color:red;">Witaj Świecie!</h2>
<h2>Witaj Drugi Świecie!</h2>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Moja pierwsza strona</title>
</head>
<body>
<h2 style="color:red; font-size: 12px; font-weight:normal; float: left;">Witaj Świecie!</h2>
<h2>Witaj Drugi Świecie!</h2>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Moja pierwsza strona</title>
<link href="style.css" type="text/css"/>
</head>
<body>
<h2>Witaj Świecie!</h2>
<h2>Witaj Drugi Świecie!</h2>
</body>
</html>h2 {
color: red;
}index.html
style.css
.KLASA vs #ID
Który znacznik jest ważniejszy?
Fonty (nie czcionki!:))
krój, rozmiar, interlinia
Jednostki
piksele, procenty, vw, vh
Kolor tekstu & tła
Marginesy i paddingi
:hover
Display
Position
Obramowania
Media queries
dodajemy responsywność!
Narzędzia developerskie (F12)
PYTANIA?
OCEŃ MNIE!
Dzięki za uwagę!
@maciejkorsan
What the frontend?!
By Maciej Korsan
