HTML-owy szkielet😉
Zaczynamy pracę nad stroną wizytówką. Naszym pierwszym krokiem w budowie strony będzie stworzenie struktury dokumentu HTML.
Stworzymy dwa główne kontenery oraz wypełnimy je potrzebnymi tagami. Pierwszy będzie służył jako miejsce na tekst, nagłówek i przycisk, a drugi będzie zawierał treść strony. Dodamy do zawartości strony treść składającą się z nagłówków, ikon i tekstu opisującego wybrane przez nas tematy oraz stworzymy ikony dzęki Font Awesome.
Ćwiczenie – część 1
- Uruchom codesandboxa.
- Stwórz nowy projekt. Wykonaj deklarację strony.
- W ciele dokumentu dodaj dwa divy. W pierwszym dodaj klasę “hero“, natomiast drugiemu dodaj “content” oraz id=”content”. Od razu oby dwa pozamykaj.
- W pierwszym divie, dodaj diva z klasą “hero-content“. W środku dodaj nagłówek h1 w którym umieść swoje imię i nazwisko.
- Pod nim dodaj przykładowy akapit, np. “Zapraszam do przejrzenia mojej strony!”.
- Pod tekstem umieść link z odnośnikiem “#content” sugerujący, np. “Zobacz szczegóły!”.
- W elemencie z klasą “content” umieść grupę tagów: ““,”
” oraz “
“.
- Skopiuj powyższą grupę i wklej ją dwa razy, by uzyskać łącznie trzy takie same segmenty.
- W nagłówkach h2 umieść następujące tytuły: “Kim jestem?”, “Co robię?”, “Moje hobby”. W paragrafach umieść przykładowe teksty.
- Tagom “<i>” nadaj następujące klasy: Dla pierwszego – “fa fa-user”, drugiego – “fa fa-suitcase”, trzeciego – “fa fa-futbol-o”.
Style dla nagłówków i hero
Ćwiczenie – część 2
- Do selektora body dodaj właściwość ustalająca kolor tła. Wybierz przykładowy kolor. Ustaw zerowy margines oraz padding. Na koniec reguły dodaj font-family: ‘Open Sans’, sans-serif;
- Dodaj selektor grupowy h1 i h2 oraz nadaj mu następujące właściwości: margines 10px 0, rodzaj czcionki font-family: ‘Lora’, serif; oraz przekształcić tekst na duże litery.
- Stwórz regułę dla klasy hero, która będzie zawierała padding 100px 0 oraz tekst wyśrodkowany.
- Na koniec tej części dodaj powyższej klasie grafikę i ustal jej pozycję background: url(“przykładowy obrazek z internetu”) center; oraz background-size: cover; dodaj również wysokość na całą wysokość ekranu height: 100vh;
Stylowanie hero-content
Kolejnym krokiem będzie ostylowanie elementu hero-content. Należy mu nadać odpowiednie właściwości, dzięki którym będzie wyglądać o niebo lepiej!😉
Ćwiczenie – część 3
- Utwórz nową regułę hero-content. W niej dodaj maksymalną szerokość na 500px oraz kolor tła rgba(0, 0, 0, 0.5);
- Wyśrodkuj powyższą regułę dzięki zastosowaniu margin: auto;
- Dla dodatkowego uroku dodaj mu cień box-shadow: 2px 2px 10px #000; (dla przypomnienia – pierwsze dwie wartości odpowiadają za przesunięcie a trzecia za jego rozmycie).
- Ostatnim krokiem w tej regule będzie nadanie zaokrąglenia naszemu obszarowi dzięki zastosowaniu border-radius: 4px; Nadaj mu biały kolor czcionki. Dodaj następujący padding: 5px 0 15px 0; oraz dodaj wysokość obszaru od górnej belki: margin-top: 25vh;
Stylowanie linków hero-content
Ostatnim krokiem związanym z hero-content, który zostanie zostanie obdarowany kodem jest link. Naszym celem jest aby wyglądał ładniej i będzie zachęcał użytkowników do kliknięcia w niego. Oczywiście nie obejdzie się bez efektu najechania kursorem, :hover.
Ćwiczenie – część 4
- Stwórz regułę dla linka. Ustaw elementowi wyłączenie dekoracji tekstu, kolor tła, padding 15px 40px, border-radius na 5px;
- Zmień tekst na linku- color: przykładowy kolor; font-weight: 700; tekst pisany drukowanymi leterami – text-transform: uppercase; oraz przemiana linka na elemet blokowy: display: inline-block;
- Ostatnim krokiem który Ci został jest ustawienie stanu linka po najechaniu na niego. Stwórz regułę dla linku wykorzystującą :hover i nadaj jej właściwość background-color: przykładowy kolor;
Stylowanie contentu
Ostatnim zadaniem w dzisiejszym materiale będzie ostylowanie contentu razem z elementami. Dodatkowo dodamy zachowanie ikony po najechaniu na nią. Zaczynamy!
Ćwiczenie – część 5
- Stwórz regułę content. Dodaj do niej właściwości: szerokość na 80%, maksymalną szerokość na 700px, bordere-radius: 4px; padding: 50px; i margin: 50px auto; wyśrodkuj tekst, zmień kolor czcionki, ustaw błały kolor tła i dodaj do niego cień: box-shadow: 2px 2px 5px #000;
- Wszystkie elementy “
“
zawarte w content powinny posiadać margin: 0 0 35px; zablokowane zawijanie wierszy, ukryty tekst wychodzący poza wyznaczony obszar (overflow: hidden;) i dodane “…” w jego miejsce. - Utwórz selektor content i – nadaj mu właściwość font-size: 50px; box-shadow: 2px 2px 5px #000; padding: 10px; i border-radius: 5px;
heuristic-sound-yf8xx
heuristic-sound-yf8xx by danielminschinski
To by było na tyle z tematem “Zabawa z CSS”. Fajnie jak się Wam materiał podobał, składający się z tych kilku postów. Może komuś się przydało:) Dajcie znać w komentarzu, czy trafia do Was to co piszę? A może macie jakieś sugestie? Każdą opcję rozważę😉
Teraz czeka mnie stworzenie kontynuacji dalszego “Plan nauki Frontend Developera”
Daję sobie czas do środy z planem‼
Mam zamiar wprowadzić systematyczną publikację materiałów. Na dzień dzisiejszy umawiam się z Wami w każdą sobotę – do godziny 15:00🕒😉
Dzięki że jesteście i poznajecie świat Frontendu 😉👍 – zapraszam do subskrypcji 🔽 i polubienia mojego blogowo/usługowego ▶ fb
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA