Frontend Developer

#43. Komponent – tabela

Tworzenie tabeli Przedstawienie niektórych danych wymaga użycia tabeli. Z pozoru łatwy komponent, ale potrafią niektórym narobić problemów z racji specyficznych zasad obsługi w CSS. Nie bez powodu omawiam tabele w tym rozdziale. Bootstrap jest w stanie nam pomóc ze swoimi rozwiązaniami dotyczącymi tabel. W materiale wcześniejszym, dotyczącym podstaw html, omawiałem strukturę oraz budowę tabel. W

Czytaj więcej

#42. Bootstrap – krótkie wyjaśnienie

Bootstrap – framework Bootstrap to popularny framework w internecie. Posiada on zestaw przydatnych narzędzi wspomagających tworzenie stron internetowych.  Bazuje głównie na gotowych rozwiązaniach HTML i CSS. Może być stosowany między innymi do stylizacji takich elementów jak teksty, formularze, przyciski , nawigacje, wykresy i wiele innych elementów które są niezbędne na naszych stronach. Do tej pory

Czytaj więcej

#41. Budowa strony internetowej

Struktura strony HTML Nadszedł czas na ćwiczenie, podsumowujące kilka poprzednich materiałów. Będzie to prosta strona internetowa. Zaczynajmy‼😉 Uruchom nowy projekt w codesandbox. Stwórz podstawowy szkielet strony www (deklarację). Nie zapomnij dodać linka do pliku style.css. W ciele dokumentu dodaj nawigacje z trzema odnośnikami – O mnie (#about), Oferta (#offer) i Kontakt (#contact). W nawiasie podaje

Czytaj więcej

#40. Selektory atrybutu

Selektor atrybutu [attribute] Selektory atrybutu dają nam bardzo szerokie możliwości. Selektor [attribute], który aplikuje regułę CSS dla elementów posiadających dany  atrybut. Selektor ten może współpracować zarówno na obecność konkretnej klasy, id, bądź href, jak i innych atrybutów. Przykładowo, [class=”shoes”] wybierze elementy z klasą shoes. Jednak [class] wybierze wszystkie elementy, które w ogóle mają wyznaczoną klasę. Spójrz

Czytaj więcej

#39. Pseudoselektory

Pseudoselektor ::first-letter Pseudoselektor ::first-letter daje możliwość ostylowania pierwszej litery w wybranym elemencie. Dotychczas do takich zadań potrzebowaliśmy tagów span wokół wybranej litery do której nadawano klasę i style. Powyższy pseudoselektor można stosować w przypadku, gdy prowadzimy stronę z tekstami i np. chcemy wyróżnić pierwszą literę artykułu. Spójrz na poniższy przykład w którym zastosowałem pseudoselektor powiększający

Czytaj więcej

#38. Pseudoklasy

Selektor :first-child oraz :last-child Selektor :first-child pozwala wybrać pierwszego potomka danego elementu. Natomiast selektor :last-child wybiera ostatnie dziecko elementu. Przykładowo, chcemy wybrać pierwszy element p zawarty w div. Możemy specjalnie nadać mu klasę i do niej dodawać właściwości, lub zrobić to bez ingerencji w plik HTM używając selektora :first:child. Potrzebna reguła wyglądałaby następująco: div >

Czytaj więcej

#37. Stany elementów

Stan :hover O tym stanie wspominałem już w materiałach pod kategorią “Zabawa z CSS”. Element HTML może przyjąć pewien stan, dla którego możemy za pomocą odpowiednich pseudoklas, określić jak w danym stanie ma wyglądać. Podczas najeżdżania na dany element HTML kursorem, jest on w stanie :hover. Gdy klikniemy na link, jest on w stanie :active.

Czytaj więcej

#36. Złożone kombinatory

Zagnieżdzony bezpośrednio We wcześniejszych postach przedstawiałem Wam podstawy CSS. Zapoznaliście się z podstawowymi selektorami, bez których praca w CSS byłaby niemożliwa. Teraz w najbliższych materiałach dowiecie się o nich znacznie więcej. Selektor CSS to rodzaj drogowskazu określający, którym elementom chcemy nadać lub zmieniać właściwości. CSS ciągle się rozwija, więc możemy tworzyć coraz bardziej złożone konstrukcje

Czytaj więcej

#35. Galeria z flexboxa

Szkielet HTML W tym materiale stworzymy własną galerię zdjęć opartą na flexboxie, który poznaliśmy wcześniej. Podstawową zaletą będzie dynamiczne dostosowywanie się do rozmiaru okna przeglądarki. Poniższe punkty dotyczą szkieletu strony www więc zaczynamy jak zwykle na spokojnie 😉 Uruchom codesandbox i stwórz nowy projekt.  Dodaj następujący tytuł strony “Galeria Flexi”. W ciele dokumentu dodaj nagłówek

Czytaj więcej

#34. Grid na flexie

Słowem wprowadzenia W jednym z wcześniejszych ▶ materiałów pokazywałem jak tworzyć grid – metoda tworzenia układu strony w podziale na kolumny. Trzeba było używać znanych Ci właściwości CSS: width i float. Niestety jest obarczony błędami treści wystających poza kontener. Poniżej zobaczysz przykładowy grid, który stworzyłem. Wspomaga on na zarządzaniu ułożeniem elementów na stronie. Książkowy grid

Czytaj więcej