Jednym popularniejszych obecnie stosowanych układów stron internetowych jest oparty na wyśrodkowanej treści - dzięki temu treść strony nie rozjeżdża się na boki przy większych ekranach.

Taki układ można łatwo osiągnąć przy użyciu flexboxa, odpowiednio zagnieżdżonego div'a oraz przypisanej mu klasy określającej jego szerokość

Przyjmę, że będziemy operować na 3 częściach …

RWD - treść stara dopasować sie do wyświetlacza

alternatywnie istnieje jeszcze...

ADW - Adaptive Web Design -> desing w którym na sztywno tworzy się szerokość strony przypisaną do przedziałów szerokości ekranu (np. 600, 900, 1200px). To pod tą ograniczoną ilości szerokości tworzony jest layout, a ten jest wyświetlana dla zdefiniowanych przedziałów szerokości ekranu …

Reset

Każda z przeglądarek ma swoje domyślne style, celem resetu jest ich wyzbycie się i doprowadzenie do sytuacji, w której zadeklarowane style własne spowodują, możliwie jak najbliższe sobie zachowanie w różnego typu wyszukiwarkach internetowych. Normalizer zaczyna się od gwiazdki * wyznaczając, że deklaracja odnosi się do wszystkich elementów. Tu często …

Deklaracja clip-path: z przypisaną wartością polygon() pozwala na rysowanie poligonów o dowolnych kształtach. W ramach niej wpisane są pary procentów oddzielone przecinkami określającymi miejsce znajdowanie się węzła.

• 0% 0% - górny lewy róg
• 100% 0% - górny prawy róg
• 0% 100% - dolny lewy róg
• 100% 100% - dolny prawy róg

zatem:

• 50% 0 …

Właściwość calc() jest funkcją której mogą być przypisane wartości: length, angles, time, number, integer. Jest szczególnie przydatna w obliczaniu wartości relatywnych - ponieważ: pozwala na wykonywanie matematycznych wyrażeń dodawania, odejmowania, mnożenia, dzielenia (+,-,*,/)i wykorzystuje wynik jako wartość CSS, która przyjmuje wcześniej wspomniane wartości.

Przykładowe zastosowanie

50% rodzica dzielone przez 3

el …

Pseudo klasy pozwalają na wprowadzenie interaktywnego zachowania się strony przy pomocy CSS, przy pomocy tej deklaracji w zależności od zdefiniowanej sytuacji/stanu dany obiekt może przyjąć inny wygląd. Istotne jest to że deklaracja pseudoklasy poprzedzona jest dwukropkiem :

Przykładowy schemat zastosowania

selektor:pseudoklasa {
  właściwość: wartość;
}

W przypadku linków istniejącą pseudoklasy

a …

Pseudo elementy pozwalają na zadeklarowanie wyglądu odmiennego dla wybranego fragmentu tekstu lub wstawienie z pozycji CSS dodatkowego elementu. Pseudo elementy poprzedzone są podwójnym dwukropkiem :: np. ::first-line

Wzór zastosowania (za developer.mozzilla.org)

selector::pseudo-element {
  property: value;
}

selektor::pseudo-element {
  właściwość: wartość;
}

Innymi słowy pseudoelement jest słowem kluczowym, które w połączeniu z …

Box-sizing

Możliwe wartości do zastosowania przy tej właściwości

border-box - wielkość kontenera (div) jest dokładnie taka jak wskazano - definiuje wielkość kontenera po jego granicy

content-box- podstawowe, zachowanie się kontenera (div) od obszaru, w którym znajduje się jego zwartość /wskazana wartość wielkość pudełka odnosi się do jego zawartości, - oznaczo to że margines …

Schemat

Lista dyrektyw

selektor { 
właściwość - wartość właściwości; /* razem tworzą deklarację */
}

ang. rule set

Selector {
  property: property value; /* declaration */
}

Selektor znacznika np strong Selektor klasy poprzedzony jest kropką .

Selektor id poprzedzony jest haszem #

Selektor id nadaje priorytet regule ważniejszy od niż ten posiadający klasę, a selektor znacznika/typu ma najmniejszy priorytet …

Właściwość float wskazuje służy do pozycjonowani oraz formatowani treści wskazuje w jaki sposób element ma pływać (float)

left - znajduj się po lewej stronie right - znajduj się po prawej stronie none - nie pływaj inherit

Przykładowe zastosowanie

img {
  float: right;
}

Układ strony przy wykorzystaniu właściwości float

Clear

Właściwość clear definiuje po której …

Deklaracja place-items (podobnie jak align-items) odnosi się do pozycjonowania dzieci elementu, których układ jest zależny od układu Flexbox lub Grid.

Deklaracja place-items jest połączeniem align-items oraz justify-items i przyjmuje podwójne wartości w odpowiadające kolejno za align-items o następnie za justify-items. Wymaga wcześniejszej deklaracji floatbox lub grid

Przykładowe zastosowanie

.item {
  display …

Display odpowiada za sposób w jaki sposób dane elementy będą wyświetlane

Właściwości deklaracji display

inline - domyślna funkcja, elementy wyświetlane są w sposób liniowy / obok siebie

block - elementy wyświetlane są w sposób blokowy / jeden pod drugim

inline-block - charakterystyka bloku ale trzyma się linii / bloki jeden obok siebie

none - chowa element (usuwa …

Podstawowe właściwości position

static - wartość domyślna, pozycja zgodna z układem strony

relative - relatywnie do swojej domyślnej pozycji przesunięty o zdefiniowaną właściwość/wartość

• top, right, bottom, left

Przykładowe zastosowanie

  div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
    }

fixed - pozycja relatywna do wyświetlacza (viewport) - zawsze w tym samym …

Flexbox jest technologią odpowiedzialną za układ treści znajdujących się na stronie internetowej w dosłownym tłumaczeniu można by to nazwać elastycznym modelem pudełkowym. Faktycznie ten sposób organizacji tzw layoutu lub też interfejsu oparty jest na równorzędnych kontenerach zwierających treść, które mogą być organizowane w sposób poziomy (liniowy) lub pionowy (kolumnowy) i …

W ciągu dnia w Visual Studio Code korzystam jasnego motyw Github Light Theme - Gray. Uznałem jednak, że główny panel okna jest dla mnie za jasny, a różnica barwna pomiędzy panelem bocznym a głównym jest dla mnie za mała. Postanowiłem nadpisać wybrane przeze mnie zmienne w pliku przechowującym spersonalizowane ustawienia VSC …

Początkowo w Visual Studio Code korzystałem z fontu Monospace, który ze względu na domyślny odstęp pomiędzy literami oraz sam kształt fontu jest przystępny do nauki, z czasem jednak postanowiłem przejść na inny i przyjemniejszych dla oka Fira Code

Instalacja na Ubuntu jest bardzo prosta, wystarczy w terminal wpisać komendę

`sudo …

Lista wtyczek wartych polecenia (alfabetycznie)

Auto Close Tag - zamyka automatycznie tagi html

Auto Rename Tag - edycja pojedynczego taga zmieni od razu treść jego pary

Bracket Pair Colorizer (CoenraadS) - koloruje nawiasy należące do tej samej pary odpowiednim kolorem [podobnie działająca wtyczka Rainbow Brackets (2gua)]

Better comments (Aaron Bond) - pozwala na wprowadzanie …

Emmet jest zbiorem wtyczek, które pozwalają na szybkie kodowanie (html,xml,css) przy pomocy wykorzystania pojawiających się podpowiedzi rozpoznających wpisane skróty. Nazwa ma być nawiązaniem do brzmienia wyrazu mrówka w j. angielskim (Ant) - owada potrafiącego przenieść przedmioty ważące wielokrotnie więcej od niej samej.

Emmet jest "wbudowany" w Visual Studio Code …

Przydatne skróty klawiszowe o których warto pamiętać korzystając z Visual Studio Code

Przydatne skróty klawiszowe o których warto pamiętać korzystając z Ubuntu

Klawisz Super znajduje się pomiędzy lewym Ctrl a Alt - często z logiem Okienka