FRONTEND: SOLIDNE PODSTAWY
Maciej Korsan
CZEŚĆ!
Maciek Korsan
Frontend developer @ POLARBITS
Maciek @ Korsan Studio
Wykładowca @ Studia Podyplomowe WI PB
Instalacja oprogramowania
Co dziś będziemy robić?
Plan działania
- Co to jest frontend?
- Trochę teorii
- Praktyka
- Praktyka
- Lunch
- Praktyka
- Podsumowanie
Masz pytanie?
Nie bój się mi przerywać!
BĘDZIE INTENSYWNIE
(ALE SATYSFAKCJONUJĄCO)
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
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)
Tworzymy własną wizytówkę!
Publikujemy!
Co dalej?
PYTANIA?
ANKIETA
DZIĘKI I DO ZOBACZENIA!
Frontend: solidne podstawy
By Maciej Korsan
