Zawód front-end developer. 11 kroków do zostania webmasterem - ebook

Ś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!

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