Planowanie CSS

Globalna struktura

/**
 * ZAWARTOSC
 *
 * USTAWIENIA
 * Global...............Glabalne zmienne i konfiguracja.
 *
 * NARZEDZIA
 * Mixins...............Uzywane wielokrotnie mixin'y.
 *
 * GENERIC
 * Normalize.css
 * Box-sizing
 *
 * BASE
 * Headings.............h1 – h6, .h1 - .h6
 *
 * OBIEKTY
 * Wrappers.............Grid, cards, 
 *
 * SKLADNIKI
 * Page-head............The main page header.
 * Page-foot............The main page footer.
 * Buttons..............Button elements.
 *
 * OZDOBNIKI
 * Text.................Text helpers (np. .left-align, .right-align)
 */

Kolejność deklaracji

  1. Położenie (np. position:absolute; top: 1em;)
  2. Box model (np. dispay: block; float: right; width: 50%;)
  3. Typografia (font-family, line-height, font-weight, )
  4. Wizualizacja (background; color; padding; border; )
.card{
  display: block;
  margin-bottom: 1em;
  
  font-size: 0.75em;
  
  padding: 0.166666em 1.33333em;
  background: #eee;
  color: #111;
  border: 1px solid #aaa;
}

Nazwy klas

<header id="main-header">
<h1>Anna Kowalska </h1>
<div class="subheader">Moj naukowy blog</div>
</header>

#main-header {}
#main-header h1 {}
#main-header .subheader {} 

<section class="card">
<header class="card-title">Złe użycie</header>
<div class="card-info warning">
Nie należy stosować tego rozwiązania.
</div>
</section>

.warning {background: #900; color: #fff; ...}
.card {}
.card-title {}
.card-info {} 
.card > img {}

Zapoznaj się (niekoniecznie stosuj ją) z konwencją BEM: Block, Element, Modifier.

Projekty

  1. Zrób witrynę dla dzieci
  2. Zrób witryną z blogiem naukowym, blogiem sportowym
  3. Zrób witrynę dla sklepu z eksluzywną odzieżą (inspiracje Chanel, Burberry, Hermes, Prada, Gucci, Dior, Dolce And Gabbana, Ralph Lauren, Versace, Giorgio Armani)

Co warto zrobić przed projektem ?

CZEGO UNIKAĆ: przykład "styl Brazylijska telenowela"

Przykład FATALNEGO STYLU (styl graficzny "dla idiotów"):
Alfredo miał wrócić do domu trzy godziny temu. Ale nadal go nie było. Isaura zaczęła się niepokoić. Niecierpliwie spoglądała przez okno. Nadal było jasno, ale wiedziała, że za chwilę zacznie się szybko ściemniać. Niepokoiła się o Alfredo ale również bała się przebywać w nocy w tym domu sama.
Nagle zadzwonił telefon. Isaura się przestraszyła. Ten telefon mógł zwiastować coś strasznego. Przecież Alfredo niegdy nie spóźniał się tak długo. Zaczęła rozglądać się za telefonem. Słyszała go, ale dźwięk dobiegał z innego pokoju. Przypomniała sobie - zostawiła go w salonie.
Isaura pobiegła do salonu i z drżącym sercem nacisnęła przycisk "odbierz". W telefonie usłyszała glos zapłakanej Luciany. Luciana zdołała z trudem przez łzy wyszeptać: Rosalinda jest poważnie chora. ...

KONKRETNY PRZYKŁAD: niestety, ze stron WPPT

Oferujemy studia

I stopnia

stacjonarne inżynierskie: 7 semestrów w specjalnościach: Informatyka

II stopnia

stacjonarne magisterskie: 3 semestry w specjalnościach: Algorytmika, Computer Security (studia po angielsku)

Moje sugestie

  1. Wybierz się do muzeum. Przed wizytą dowiedz się co jest tam najlepszego. Wybierz kilka tych elementów i udaj się do muzeum tylko w celu przyjrzenia się tym obiektom. Nie oceniaj: ucz się.
    Muzeum Narodowe we Wrocławiu: Pieter Breughel Młodszy - Pejzaż zimowy z łyżwiarzami i pułapką na ptaki; Lucas Cranach Starszy - Ewa; Johann Glöckler - Alegoria zmysłu smaku
  2. Używanie powiedzenia "De gustibus non est disputandum" świadczy o kiepskim wykształceniu.

KOLEJNY PRZYKŁAD ze stron WPPT


TO JEST SZLACZEK ze szkoły podstawowej !!!
"Waży" on ok. 600 kB - to jest zbrodnia z punktu widzenia aplikacji mobilnych. A estetyka: na poziomie szkoły podstawowej.

JavaScript

JS jest językiem mocno różniącym się standardowych języków programowania.
  1. Poczytaj i zrób przykłady na compiler closure - przyda to Ci się do zrozumienia nowych języków programowania za kilka lat
  2. Popracuj nad dobrym zrozumieniem Promisse
  3. Naucz się rozsądnie korzystać z Local Storage
  4. Przetrenuj przerobienie swojej aplikacji na PWA
  5. Pobaw się jQuery: postaraj się samodzielnie oprogramować każdą z jej funkcji w Vanilla JS; jQuery jest powszechnie używany w "przemyśle" IT
  6. ???? ReactJS ???? : jeśli dopiero zaczynasz z JS, to poczekaj z pół roku; ucz się tak długo js, aż będzie czuł, że dobrze rozumiesz ten język (test: sprawdź, czy potrafisz przewidzieć wartość this w funkcjach związanych z elementami umieszczonymi na stronie.

To już koniec !!!

Dzięki za wspólnie spędzonych 30 godzin.