Od zera do frontend-bohatera!

  • Jak stworzyć prostą stronę internetową
  • Jak dodać lepszy wygląd dla strony HTML
  • Jak korzystać z frameworków CSS
  •  Jak dodać dynamiczne elementy do strony HTML

Czego się nauczymy?

Mateusz Pokora

 

Od 5 lat zajmuje się frontend developmentem. Aktualnie pracuje w firmie Binar::Apps. Fan reacta i funkcyjnego programowania.

O mnie

Strona internetowa

Dokument HTML umieszczony w internecie.

Z czego składa się strona internetowa

  • HTML
  • CSS
  • JavaScript

http://bulbulcse.com/wp-content/uploads/2016/06/c.png

Czym jest HTML

 ang. HyperText Markup Language

HTML jest językiem znaczników. Umożliwia określenie wyglądu dokumentu w przeglądarce internetowej. Za pomocą specjalnych znaczników nadajemy znaczenie zawartemu tekstowi

Podstawowe elementy

  • elementy grupujące (<div>, <span>)
  • tabele (<table>, <tr>, <td>)
  • listy (<ul>, <ol>)
  • obrazki (<img>)
  • odnośniki (<a>)

Element HTML

https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png

Atrybuty

https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png

Struktura pliku HTML

<html lang="en">
  <head>
      <!-- META DANE STRONY -->
  </head>
  <body>
      <!-- TREŚĆ STRONY -->
  </body>
</html>

Head

<head>
    <!-- Tytuł strony -->
    <title>Portfolio</title>

    <!-- Meta dane - kodowanie, wyświetlanie na urządzeniach mobilnych -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <!-- Arkusze stylów -->
    <link rel="stylesheet" href="style.css">
    
    <!-- Skrypty -->
    <script src="app.js"></script>
</head>

Część strony niewidoczna w przeglądarce. Ustawiamy w niej dodatkowe informacje o stronie

Body

<body>
    <!-- TREŚĆ NASZEJ STRONY -->
    <header></header>
    <main>
        <h1>Moje koty</h1>
        <img src="koty.jpg">
    </main>
    <footer></footer>
</body>

Zawiera całą treść strony wyświetlaną dla użytkownika

Obrazki

Tabele

Listy

Odnośniki

<a href="http://google.com">link do google</a>
  • Pozwalają na przejście na inną stronę internetową
  • Muszą posiadać atrybut "href" który zawiera adres na który chcemy przejść
  • Atrybut target="_blank" pozwala na otworzenie strony w nowym oknie lub karcie

Typografia

Formularze

div

Element blokowy, głównie używamy go do grupowania pozostałych elementów

HTML5

Najnowszy standard języka z 2014

  • Duże usprawnienia multimedialne - tagi audio, video
  • Geolokalizacja
  • API do obsługi przycisku wstecz

 

  • Nowe semantyczne tagi - section, article, header, footer, nav

Dodatkowe podstrony

nasz_projekt/
    index.html
    projekty.html
    kontakt.html

// index.html

<a href="kontakt.html">Kontakt</a>

Inspektor

Narzędzie w przeglądarkach pozwalające na podgląd i modyfikacje elementów na naszej stronie

 

  • Podgląd wymiarów elementu
  • Modyfikacja tekstu w elemencie
  • Wstawianie nowych elementów

Workshop time!

Strona portfolio

  • 3 podstrony (O mnie, Projekty, Kontakt)
    • O mnie - Nasze CV, zainteresowanie, dotychczasowa praca, zdjęcie
    • Projekty - tabela projektów, galeria zdjęć każdego projektu
    • Kontakt - formularz do kontaktu
  • Navbar z linkami do podstron
  • Stopka z danymi do kontaktu

Przerwa

Javascript

Na co pozwala Javascript?

  • Zmiana wszystkich elementów HTML na stronie.
  • Zmiana wszystkich atrybutów HTML na stronie.
  • Zmiana wszystkich styli CSS na stronie.
  • Usuwanie wszystkich elementów i atrybutów HTML na stronie.
  • Dodawanie nowych elementów HTML na stronę.
  • Reagowanie na wszystkie zdarzenia występujące na stronie (kliknięcia, zmiana formularza).
  • Wywoływanie zdarzeń.

Skryptowy język przeglądarki.

Javascript

https://i.pinimg.com/originals/06/e6/c7/06e6c7dc72d44883a90366e0b0c6201c.jpg

Składnia

// Deklaracja zmiennych

let name = "Mateusz";
let score = 132;

// Operacje matematyczne
score + 8 // => 140

Deklaracja prostych zmiennych 

Tablice

// Stworzenie tablicy
let mentors = ["Kamil", "Daria", "Krzysiek"];

// Odczyt tablicy
mentors[1] // => "Daria"

mentors[2] // => "Krzysiek"

Za pomocą tablic przechowujemy zbiory wartości

Obiekty

// stworzenie obiektu

let workshop = {
   name: 'Od zera do frontend bohatera',
   date: '25.11.2017',
   time: '10:00'
}

// odczyt wartości obiektu

workshop.name // => 'Od zera do frontend bohatera'

workshop.time // => '10:00'

Za pomocą obiektów grupujemy powiązane ze sobą wartości

Funkcje

function printWorkshopName() {
    let workshop = {
        name: 'Od zera do frontend bohatera',
        date: '25.11.2017',
        time: '10:00'
    }
    console.log(workshop.name)
}

printWorkshopName() // => 'Od zera do frontend bohatera'

// ponowne wywołanie
printWorkshopName() // => 'Od zera do frontend bohatera'

Funkcje pozwalają nam na zapisanie i odtwarzanie pewnej sekwencji kodu.

Argumenty funkcji

function add(a, b) {
    return a + b;
}

let result = add(5, 10)

console.log(result) // => 15

Praca z HTML

let element = document.querySelector('.element')

element.innerText = "nowy tekst dla elementu"
  • Obiekt 'document' udostępnia nam połączenie z dokumentem HTML
  • Za pomocą funkcji 'getElementsByClassName' oraz 'querySelector' możemy mieć dostęp do elementów HTML

jQuery

// dodanie biblioteki w <head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>


// Operacje na elementach
$('.myElement').text('nowy tekst');

Biblioteka ułatwiająca pracę z elementami HTML.

  • Dostęp do elementów oraz obsługiwanie zdarzeń
  • Ułatwiona praca na wielu elementach
  • Ciekawe efekty, animacje - fadeIn, fadeOut

Obsługa zdarzeń

$('.myElement').click(function() {
    alert('Przycisk kliknięty!')
});

// funkcje obsługujące zdarzenia otrzymują obiekt jako argument
// W obiekcie mamy dostęp do wielu informacji na temat danego zdarzenia
// Np. element na którym zostało wywołane

$('.myInput').change(function (e) {
    $(this).text(e.target.value.toUpperCase())
});

DARIA TU ZACZNIJ

Made with Slides.com