Śmiało wkrocz w świat internetu i zacznij tworzyć strony WWW!

• Poznaj technologie i standardy branżowe
• Naucz siÄ™ używać narzÄ™dzi do tworzenia stron
• Dowiedz siÄ™, jak budować i publikować serwisy

Stron internetowych jest w sieci bardzo dużo i z każdym dniem przybywa ich coraz wiÄ™cej. Obecnie każda firma i wiele prywatnych osób chce lub wrÄ™cz musi mieć w internecie przynajmniej prostÄ… wizytówkÄ™. Nic zatem dziwnego, że w portalach firm rekrutujÄ…cych pracowników aż roi siÄ™ od ofert dla ludzi tworzÄ…cych serwisy, a profesjonaliÅ›ci z doÅ›wiadczeniem w tej dziedzinie mogÄ… liczyć na naprawdÄ™ niezÅ‚e zarobki. Może i Ty chciaÅ‚byÅ› do nich doÅ‚Ä…czyć, ale nie masz odpowiedniej wiedzy? A może obawiasz siÄ™, że na przeszkodzie stanie Ci brak ukoÅ„czonych studiów informatycznych? O nic siÄ™ nie martw, po prostu zacznij lekturÄ™!

Książka Zawód front-end developer. 11 kroków do zostania webmasterem bezboleÅ›nie wprowadzi CiÄ™ w Å›wiat tworzenia stron WWW. DziÄ™ki niej szybko poznasz podstawowe pojÄ™cia branżowe i informacje niezbÄ™dne, aby rozpocząć przygodÄ™ z tÄ… branżą oraz doÅ‚Ä…czyć do elitarnego grona rozchwytywanych specjalistów - autorów stron WWW. Poznasz warsztat pracy zawodowca, nauczysz siÄ™ jÄ™zyka HTML5 i dowiesz siÄ™, jak tworzyć profesjonalne arkusze stylów CSS3. Odkryjesz możliwoÅ›ci, jakie oferujÄ… JavaScript i jQuery, a także poznasz podstawy jÄ™zyka PHP7. Dowiesz siÄ™ też, jak zaprojektować i zbudować atrakcyjny serwis WWW oraz umieÅ›cić go w internecie.

• Wyposażenie warsztatu pracy
• JÄ™zyk HTML i tworzenie kodu strony
• Najważniejsze znaczniki i konstrukcje jÄ™zyka HTML
• Osadzanie treÅ›ci multimedialnych na stronie
• Zastosowanie arkuszy stylów CSS3
• Formatowanie elementów graficznych i tekstowych
• Zasady tworzenia responsywnych stron WWW
• Projektowanie i budowanie stron oraz ich skÅ‚adników
• Korzystanie ze skryptów i bibliotek
• Zastosowanie jÄ™zyka PHP7
• Publikowanie strony w internecie

Tworzenie stron WWW? Z tą książką to nic trudnego!

Osoby które kupowały "Zawód front-end developer. 11 kroków do zostania webmasterem", wybierały także:

• HTML5. Kurs video. Poziom pierwszy. Programowanie dla poczÄ…tkujÄ…cych webmasterów 89,00 zÅ‚, (26,70 zÅ‚ -70%)
• Flask. Kurs video. Od pierwszej linijki kodu do praktycznego zastosowania 119,00 zÅ‚, (47,60 zÅ‚ -60%)
• Webflow. Kurs video. Projektowanie i tworzenie stron internetowych 159,00 zÅ‚, (71,55 zÅ‚ -55%)
• Node.js i TypeScript. Kurs video. Tworzenie skalowalnych mikroserwisów 169,00 zÅ‚, (76,05 zÅ‚ -55%)
• PHP 7.3. Kurs video. Tworzenie bezpiecznej strony typu e-commerce 119,00 zÅ‚, (53,55 zÅ‚ -55%)

Spis treści

Zawód front-end developer. 11 kroków do zostania webmasterem -- spis treści

Wstęp 13

CZĘŚĆ I. WPROWADZENIE 15

Krok 1. Zainstaluj potrzebne programy 17

• 1.1. PrzeglÄ…darki internetowe 17
• 1.2. Edytor kodu 17
• 1.3. Prezentacja kodu w książce 19

CZĘŚĆ II. HTML5 I CSS3 21

Krok 2. Poznaj język internetu 23

Krok 3. Poznaj HTML5 25

• 3.1. Dokument HTML (pierwsza strona WWW) 25
  
  • 3.1.1. Szkielet dokumentu HTML 25
  • 3.1.2. Kodowanie polskich znaków 28
  • 3.1.3. Meta tagi 30
  • 3.1.4. PodglÄ…d kodu w przeglÄ…darce 30
  • 3.1.5. BÅ‚Ä™dy w kodzie 31
  • 3.1.6. PrzeglÄ…darka poprawia bÅ‚Ä™dy 32
• 3.2. NagÅ‚ówki/treść 32
  
  • 3.2.1. NagÅ‚ówek nad tekstem 32
  • 3.2.2. Treść na stronie internetowej 33
  • 3.2.3. WyÅ›wietlanie znaków specjalnych 34
  • 3.2.4. Pogrubienie, pochylenie, podkreÅ›lenie tekstu 37
  • 3.2.5. Kolejność otwierania i zamykania znaczników 38
• 3.3. Listy uporzÄ…dkowane oraz nieuporzÄ…dkowane 39
  
  • 3.3.1. Lista uporzÄ…dkowana 39
  • 3.3.2. Lista nieuporzÄ…dkowana 40
  • 3.3.3. Zagnieżdżanie list 40
• 3.4. ZdjÄ™cia na stronie 42
  
  • 3.4.1. Wstawianie zdjÄ™cia 42
  • 3.4.2. Rozmiar zdjÄ™cia 43
  • 3.4.3. Tekst alternatywny 44
• 3.5. Znaczniki semantyczne 45
  
  • 3.5.1. nav 45
  • 3.5.2. header 46
  • 3.5.3. article 46
  • 3.5.4. aside 47
  • 3.5.5. section 47
  • 3.5.6. footer 48
  • 3.5.7. PozostaÅ‚e znaczniki semantyczne 49
  • 3.5.8. Podsumowanie 52
• 3.6. Kontener uniwersalny 53
• 3.7. Tabela 54
  
  • 3.7.1. Tworzenie tabeli 54
  • 3.7.2. PodziaÅ‚ tabeli 55
  • 3.7.3. TytuÅ‚ tabeli 57
  • 3.7.4. Scalanie komórek 57
• 3.8. OdsyÅ‚acze 60
  
  • 3.8.1. OdsyÅ‚acz do innej strony 60
  • 3.8.2. OdsyÅ‚acz do podstrony 61
  • 3.8.3. Kotwica 64
• 3.9. Elementy formularza 67
  
  • 3.9.1. Tworzenie formularza 67
  • 3.9.2. Pole wieloliniowe 68
  • 3.9.3. Pole danych 70
  • 3.9.4. Pole hasÅ‚a 71
  • 3.9.5. PozostaÅ‚e pola input - wprowadzanie danych 72
  • 3.9.6. Pola wielokrotnego wyboru 74
  • 3.9.7. Pole jednokrotnego wyboru 76
  • 3.9.8. Listy rozwijane 77
  • 3.9.9. Przyciski 78
  • 3.9.10. Atrybuty elementów formularza 79
  • 3.9.11. PrzesyÅ‚anie danych z formularza 83
• 3.10. Multimedia 84
  
  • 3.10.1. Odtwarzacz audio 84
  • 3.10.2. Odtwarzacz wideo w HTML5 85
  • 3.10.3. Dodawanie filmu z serwisu YouTube 86
• 3.11. Elementy blokowe i liniowe 88

Krok 4. Poznaj CSS3 89

• 4.1. Styl w dokumencie HTML 89
  
  • 4.1.1. Styl w znacznikach HTML 89
  • 4.1.2. Styl w części HEAD 90
• 4.2. Styl w pliku CSS 92
  
  • 4.2.1. Utworzenie i dodanie pliku CSS 92
  • 4.2.2. Dodanie stylów do pliku CSS 93
  • 4.2.3. Deklaracja stylu wedÅ‚ug znacznika 95
  • 4.2.4. Deklaracja stylu wedÅ‚ug atrybutu id 96
  • 4.2.5. Deklaracja stylu wedÅ‚ug atrybutu class 97
  • 4.2.6. Komentarze w kodzie CSS 98
  • 4.2.7. PodglÄ…d kodu w przeglÄ…darce 99
• 4.3. Podstawowe wÅ‚aÅ›ciwoÅ›ci elementów 99
  
  • 4.3.1. Kolory w CSS 99
  • 4.3.2. Obramowanie 102
  • 4.3.3. TÅ‚o kolorowe 106
  • 4.3.4. TÅ‚o obrazkowe 110
  • 4.3.5. Rozmiar elementu 115
  • 4.3.6. Marginesy 120
  • 4.3.7. CieÅ„ elementu 124
• 4.4. Rozmieszczanie elementów blokowych 126
  
  • 4.4.1. WyÅ›wietlanie 126
  • 4.4.2. Sposoby wyÅ›wietlania 128
  • 4.4.3. Ustawienie 129
  • 4.4.4. Rodzaj pozycjonowania 130
• 4.5. Stylizacja tekstu 141
  
  • 4.5.1. Kolor tekstu 141
  • 4.5.2. Rozmiar fontu 141
  • 4.5.3. Wysokość wiersza 142
  • 4.5.4. OdstÄ™p miÄ™dzy znakami 142
  • 4.5.5. Wyrównanie tekstu 143
  • 4.5.6. Dekoracja tekstu 143
  • 4.5.7. Waga fontu 145
  • 4.5.8. Styl fontu 145
  • 4.5.9. Krój pisma 146
  • 4.5.10. Fonty niestandardowe 147
  • 4.5.11. Fonty niestandardowe od Google 148
  • 4.5.12. CieÅ„ tekstu 151
  • 4.5.13. Stylizacja fragmentu tekstu 152
• 4.6. Stylizacja linków 153
  
  • 4.6.1. Stan linku 153
  • 4.6.2. Efekt przejÅ›cia 155
• 4.7. Stylizacja list 159
  
  • 4.7.1. Lista uporzÄ…dkowana 159
  • 4.7.2. Lista nieuporzÄ…dkowana 160
  • 4.7.3. Zwijanie tekstu 161
  • 4.7.4. Elementy listy w poziomie 162
  • 4.7.5. Margines wewnÄ™trzny 163
• 4.8. Styl w wybranych elementach 163
  
  • 4.8.1. Nazwa elementu, klasa, identyfikator 163
  • 4.8.2. Grupowanie selektorów 164
  • 4.8.3. Selektor potomka 164
  • 4.8.4. Selektor dziecka 165
  • 4.8.5. Selektor rodzeÅ„stwa 165
  • 4.8.6. Selektor atrybutu 166
  • 4.8.7. Selektor wybranego elementu 168
• 4.9. Stylizacja elementów formularza 175
  
  • 4.9.1. Pole wieloliniowe 175
  • 4.9.2. Pola input 176
  • 4.9.3. Pole wyboru 177
  • 4.9.4. Lista rozwijana 185
  • 4.9.5. Przycisk formularza 185
  • 4.9.6. Zmiana stylu po atrybucie 185
  • 4.9.7. Pseudoklasa focus 186
• 4.10. Animacje w CSS3 187
  
  • 4.10.1. Klatki animacji 187
  • 4.10.2. Nazwa animacji 189
  • 4.10.3. Czas trwania animacji 189
  • 4.10.4. Tempo animacji 190
  • 4.10.5. Powtarzanie animacji 191
  • 4.10.6. Opóźnienie animacji 191
  • 4.10.7. Zapis skrócony 192
• 4.11. Strona responsywna 192
  
  • 4.11.1. Czym jest strona responsywna? 192
  • 4.11.2. Meta viewport 194
  • 4.11.3. Zapytania medialne 195
  • 4.11.4. Praktyczny przykÅ‚ad media queries 198
• 4.12. WiÄ™cej informacji o CSS3 203
  
  • 4.12.1. Reset stylów przeglÄ…darki 203
  • 4.12.2. Nadpisywanie stylów 206
  • 4.12.3. PierwszeÅ„stwo stylów 206
  • 4.12.4. Dziedziczenie stylów 207
  • 4.12.5. Przedrostki przeglÄ…darek 209

CZĘŚĆ III. BUDOWA STRONY INTERNETOWEJ 211

Krok 5. Poznaj Å›wiat profesjonalistów 213

• 5.1. Kto ustala zasady? 213
• 5.2. PrzeglÄ…darki internetowe 213
• 5.3. HTML5 i CSS3 213
• 5.4. Web design 214

Krok 6. Zbuduj stronÄ™ internetowÄ… 215

• 6.1. Moje zasady 215
• 6.2. Projekt 215
• 6.3. Przygotowanie plików do pracy 216
• 6.4. Top strony 217
  
  • 6.4.1. Co chcemy osiÄ…gnąć? 217
  • 6.4.2. Utworzenie sekcji strony 218
  • 6.4.3. Dodanie nagÅ‚ówków 220
  • 6.4.4. Tworzenie przycisku 229
  • 6.4.5. Top strony w wersji mobilnej 232
• 6.5. Menu nawigacyjne 239
  
  • 6.5.1. Co chcemy osiÄ…gnąć? 239
  • 6.5.2. Utworzenie miejsca na nawigacjÄ™ 239
  • 6.5.3. Utworzenie linków dla nawigacji 241
  • 6.5.4. Åšrodkowanie nawigacji 242
  • 6.5.5. Stylizacja linków 244
  • 6.5.6. Menu nawigacyjne w wersji mobilnej 249
• 6.6. Oferta 259
  
  • 6.6.1. Co chcemy osiÄ…gnąć? 259
  • 6.6.2. Utworzenie sekcji strony 260
  • 6.6.3. Åšrodkowanie zawartoÅ›ci strony 261
  • 6.6.4. TytuÅ‚ dziaÅ‚u 265
  • 6.6.5. Okienka z ofertÄ… 268
  • 6.6.6. WypeÅ‚nienie boksów treÅ›ciÄ… 272
  • 6.6.7. Dodanie elementów fontu jako ikon 278
  • 6.6.8. Oferta w wersji mobilnej 291
• 6.7. Dietetyk Maria 303
  
  • 6.7.1. Co chcemy osiÄ…gnąć? 303
  • 6.7.2. Utworzenie sekcji strony 303
  • 6.7.3. Zmiana stylu nagÅ‚ówka oraz podpisu 305
  • 6.7.4. Utworzenie miejsca na treść 307
  • 6.7.5. Stylizacja treÅ›ci 311
  • 6.7.6. Responsywne obrazy 313
  • 6.7.7. "Dietetyk Maria" w wersji mobilnej 319
• 6.8. Mapa Google 325
  
  • 6.8.1. Co chcemy uzyskać? 325
  • 6.8.2. Utworzenie sekcji strony 325
  • 6.8.3. Klucz API 327
  • 6.8.4. WyÅ›wietlenie mapy 327
  • 6.8.5. Dodanie markera 333
  • 6.8.6. Zmiana stylu mapy 336
  • 6.8.7. Mapa Google w wersji mobilnej 339
• 6.9. Formularz kontaktowy 339
  
  • 6.9.1. Co chcemy uzyskać? 339
  • 6.9.2. Utworzenie sekcji strony 340
  • 6.9.3. Miejsce na pola formularza 342
  • 6.9.4. Dodanie pól formularza 345
  • 6.9.5. Przycisk formularza 353
  • 6.9.6. Naprawa menu górnego 357
  • 6.9.7. Formularz kontaktowy w wersji mobilnej 359
• 6.10. Stopka strony 363
  
  • 6.10.1. Co chcemy uzyskać? 363
  • 6.10.2. Utworzenie sekcji strony 364
  • 6.10.3. Stopka strony w wersji mobilnej 366
• 6.11. Prawie gotowe 367

CZĘŚĆ IV. DODATKOWE MOŻLIWOŚCI STRONY INTERNETOWEJ 369

Krok 7. Poznaj JavaScript i jQuery 371

• 7.1. Wprowadzenie do jÄ™zyka JavaScript 371
• 7.2. Biblioteki JavaScript 372
• 7.3. Praca z bibliotekÄ… jQuery 373
• 7.4. Dodanie biblioteki do strony 374
• 7.5. DziaÅ‚anie menu przy użyciu jQuery 376
• 7.6. Menu w wersji mobilnej 384
• 7.7. Oddzielenie kodu JavaScript od HTML 402
• 7.8. WiÄ™cej o jÄ™zyku JavaScript i jQuery 404

Krok 8. Poznaj PHP7 405

• 8.1. Wprowadzenie do PHP7 405
• 8.2. Instalowanie serwera XAMPP 405
• 8.3. Utworzenie pliku oraz skryptu PHP 409
• 8.4. Pobieranie danych z formularza 411
• 8.5. Różnica miÄ™dzy post a get 415
• 8.6. PrzesyÅ‚anie danych w tle 415
  
  • 8.6.1. Przygotowanie formularza 415
  • 8.6.2. Pobieranie danych za pomocÄ… jQuery 419
  • 8.6.3. Walidacja pól za pomocÄ… jQuery 420
  • 8.6.4. Wprowadzenie do Ajaxa 424
  • 8.6.5. Przygotowanie pliku PHP do odbioru danych 431
  • 8.6.6. Usuwanie znaczników HTML 435
  • 8.6.7. PrzesyÅ‚anie znaków specjalnych 437
  • 8.6.8. Informowanie użytkownika o przesyÅ‚aniu danych 438
• 8.7. WysyÅ‚anie danych z formularza na adres e-mail 454

CZĘŚĆ V. PUBLIKACJA STRONY W INTERNECIE 461

Krok 9. Poznaj potrzebne pojęcia 463

• 9.1. Domena 463
• 9.2. Serwer 463
• 9.3. Hosting 463
• 9.4. FTP 464

Krok 10. Opublikuj stronÄ™ w internecie 465

Krok 11. Rozpocznij własną przygodę 469

Skorowidz 471