Zamierzałam napisać dziś o CSS-e jako takim, o jego regułach i selektorach. Jednak, kiedy stwierdziłam, że czegoś innego mi brak to musiałam to opisać. O co chodzi?

Zakodowałam już kilka stron z plików psd. I co? Okazuje się, że robię to bardzo chaotycznie. Niby mam kilka stałych dużych „kroków” i … tak czasami wiele razy wracałam i poprawiałam coś, bo zapomniałam/ błędnie założyłam.

Dlatego będzie dziś lista. Po kolei co robić mając projekt psd. Jeśli chcesz jeszcze dodatkowo sam zaprojektować stronę, to raczej tu nie pomogę. Absolutnie nie mam zdolności graficznych.

I znalazłam coś zamiast Avocode – PSD Viewer dla Windows. Jest darmowy. Jak na razie testuję, ale podstawowe funkcje wystarczają jak najbardziej. Link do ściągnięcia programu.

Projekt

Skąd wziąć projekt? Już pisałam o stronie z darmowymi projektami o tu, ale bezpośrednio ja ściągam ze strony SYMO.co. Znalazłam też freebiesbug.com.

Z projektu musimy wyciągnąć:
– zdjęcia;
– teksty;
– fonty;
– kolory… itd.

Warto to zrobić, zanim przystąpmy do pisania kodu. Również ustalenie poszczególnych folderów będzie pomocne. Folder na zdjęcia, plik .css itd.
Minimalna struktura folderów to:

• CSS – zapisujemy w nim plik style.css, grid.css;
• IMG – zapisujemy wszystkie potrzebne zdjęcia do projektu;
• JS – pliki javascript
• index.html – plik ze stroną główną;
• później pojawią się plik README.md oraz .gitignore, foldery .git oraz folder z plikami po kompilacji Sass.

Kiedy robimy stronę z kilkoma zakładkami, każda zakładka ma osobny plik .css. Dodatkowo, jeśli strona jest mocno rozbudowana i skomplikowana można każdą sekcję zapisać w osobnym pliku .css. Wszystko jest kwestią prawidłowego podpięcia do pliku index.html.

Podpięcie

Linki do plików CSS wstawiamy w część <head>. Poniżej masz przykład:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Mache Free</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/grid.css" type="text/css">
        <link rel="stylesheet" href="css/styles.css" type="text/css">
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,900|Montserrat" rel="stylesheet">
    </head>
    <body>
   (
    .
    .
    .

Koncepcja

Na tym etapie warto zastanowić się nad projektem i rozrysować sobie wszystko. Przemyślenie układu pomaga nie błądzić w kodzie i w miarę sprawnie posuwać się na przód z realizacją projektu.
Na tym etapie rozrysowujemy sekcja po sekcji. Ile jest rzędów, kolumn? Jakie elementy użyjemy w danej sekcji? Nagłówki: h4 czy h2? (Najwyższy jest h1). Jeśli coś ewidentnie wygląda na zgrupowane, to wrzucamy w <div>.

Może to mało zajmujące zajęcia, ale takie przygotowanie „na sucho” doskonale pomaga napisać szkielet strony w html-u. Ale trzeba znać już podstawy i posiedzieć nad tym trochę czasu.

Kolejna ważna rzecz. Obecnie strony internetowe MUSZĄ być responsywne. Nie ma bata, trzeba to umieć robić dobrze. Strona musi dostosowywać się do rozmiaru ekranu. Dzieje się to za pomocą  media queries. Jeśli w ogóle nie rozpoznajesz tego zagadnienia, to koniecznie trzeba to nadrobić. Strona może wyglądać pięknie na komputerze, ale … jeśli rozchodzi się w szwach na telefonie … to klęska. Ja sama, szczerze, nie opanowałam tej sztuki perfekt. A raczej kwiczę na tym straszliwie. Dlatego to zagadnienie jest jednym z pierwszych w liście do nauczenia się w tym roku.

Gdzie szukać materiałów do nauki? Oczywiście internet to skarbnica wiedzy:

Tu możemy przejść do tworzenia pliku index.html. Po jego utworzeniu pozostaje jeszcze kilka rzeczy do ogarnięcia. Mianowicie zanim się rozpędzimy przechodzimy do GIT-a.

Kontrola wersji.

Tworzymy repozytorium lokalne i podpinamy do niego zdalne. Jak to zrobić piszę w tym poście. Pamiętaj zawsze pracować z GIT-em (lub innym systemem wersji). Uchroni Cię to przed stratą wielu godzin nad kodem, jeśli coś za bardzo zamieszasz. Ucząc się nowych rzeczy, często możemy zabłądzić, a sprawne obchodzenie się z GIT-em pomoże w sytuacjach pod bramkowych.

Mając już repo, przechodzimy do przyjemniejszych rzeczy. Do CSS-a. Importujemy fonty do pliku style.css. Jak to zrobić? Nie jest to bardzo skomplikowane. Przechodzimy na stronę Google Fonts. Przy wybranym foncie klikamy na na czerwony tle. Pokaże nam się okienko na dole ekranu.

Klikamy na zakładkę @import i kopiujemy kod pomiędzy znacznikami <style>. Wklejamy na samej górze w pliku style.css. Gotowe! Mamy fonty.
Można również zdefiniować zmienne w CSS-e. Jeśli to kolejny temat, który nic Ci nie mówi to nic straconego – poczytasz o tym tu, na stronie DMN. I jeszcze wrzucam filmik Strefy kursów z YT.

I co jeszcze?

Tu już możemy dopieszczać wygląd strony. Robimy animacje, przekształcenia, używamy pseudoklas oraz pseudoelementów. To bardzo przyjemna część, przynajmniej dla mnie.
Kiedy już pobawimy się do woli CSS-em możemy stwierdzić, że strona jest gotowa.

Ale warto jeszcze zrobić dwie rzeczy.

1. Testowanie strony, czyli strona wyświetla się na wszystkich przeglądarkach? Jak wygląda na różnych rozdzielnościach ekranu?
2. Sprawdzanie samego kodu. Na stronie Validator.w3.org sprawdzimy kod html, a na stronie Css-validator.org kod css..

To już koniec? W sumie tak. Wystarczy opublikować stronę. Wybieramy własną domenę lub GitHub Pages. Pisałam o tym w tym wpisie.

Zamieszczam tu moją prywatną listę, która pomaga mi ogarnąć najważniejsze sprawy przy kodowaniu stron. Jest ona mocno okrojona. Może Cię zainspiruje do stworzenia własnej?

Na koniec proponuję posłuchać, na co warto zwrócić uwagę w tym roku.

Miłego kodzenia.

Artykuł Na początek-lista. pochodzi z serwisu To co najważniejsze.