Cześć. Podsumujemy naszą wiedzę z tematyki budowy layoutu. Poniżej dodaję ćwiczenie do rozwiązania. Powodzenia
Ćwiczenie
- Stwórz nowy projekt w codesandbox.
- Stworzymy podstawowy szkielet strony HTML. Dodaj diva z klasą “hero”. W nim umieść nagłówek h1 z treścią”Witam!”. Zamknij diva.
- Kolejnego diva dodaj z klasą “container”. Zamknij diva.
- Pod nim dodaj diva z klasą “footer”. W środku utwórz paragraf z tekstem “©2020 All Rights Reserved”. Mamy utworzony szkielet
- Kolejnym krokiem będzie dodanie kilku elementów wewnątrz kontenera. Będzie to panel z ikonami społecznościowymi, główna treść strony oraz panel boczny.
- Aby dodać blok z social media należy wewnątrz kontenera dodać diva z klasą “social-media”. W nim dodaj trzy elementy . Następnie do pierwszego dopisz klasy “fa fa-facebook”, do drugiego “fa fa-twitter” a do trzeciego “fa fa-google-plus”.
- Koniecznie należy dodać w strukturze pliku html linka do ikon społecznościowych (dodaj pod linkiem do pliku css):
- Kolejnym krokiem do wykonania jest dodanie sidebara. Pod zamknięciem diva social-media dodaj diva z klasą “sidebar”. W środku dodaj nagłówek h2 z tekstem “Kategorie”. Następnie pod nim dodaj cztery elementy z pustym odnośnikiem i dowolnymi nazwami kategorii zdjęć. Możesz zamknąć diva sidebara.
- Główną część strony podzielimy na wiersze i kolumny. Struktura układu będzie przypominała tabele. W każdej kolumnie umieścimy po jednym elemencie
. Pod zamknięciem sidebara dodaj diva z klasą “main”. Następnie w środku diva dodaj nagłówek h2 z tekstem “Nasze zdjęcia”.
- Pod tytułem dodaj diva z klasą “row”. W wierszu dodaj trzy divy z klasą “col”. W każdym z nich dodaj zdjęcie z internetu za pomocą:
. Pozamykaj wszystkie divy.
Teraz zajmiemy się stylowaniem naszych elementów. Na początek zaczniemy od nadania styli elementowi z klasą “hero”. Dodamy tło oraz ostylujemy tekst znajdujący się wewnątrz elementu.
Dodaj clearfix do styli:
.clearfix:before,
.clearfix:after {
content: ” “;
clear: both;
display: block;
}- Ciało strony ostyluj następującymi właściwościami: color ciemno czerwony, font-family: ‘Source Sans Pro’, sans-serif; margines zerowy, box-sizing: border-box oraz padding zerowy.
- Zabierzemy się za nasz obrazek powitalny. Utwórz regułę .hero z następującymi właściwościami: wysokość 350px, dodaj przykładowy obrazek z internetu oraz go rozszerz na cały ekran czyli background-size: cover;
- Następnym element to ostylowania to nagłówek h1. Utwórz regułę dla selektora h1. Dodaj do niego następujące właściwości: padding górny na 100px, wyśrodkowanie tekstu, kolor tekstu na ciemną czerwień, rozmiar nagłówka na 40px, duże litery – text transform: uppercase oraz margines zerowy.
- Zaczynamy tworzyć layout strony korzystając z CSS. Chcemy nadać odpowiednią szerokość elementom i ustawiać ich właściwość float, aby stworzyć zadany układ strony. Ostylujemy też zdjęcia w elemencie z klasą main.
- Utwórz regułę dla klasy “container”. Ustaw w niej maksymalną szerokość strony na 700px oraz szerokość na 80%. Dodaj margines zerowy góra/dół, lewo/prawo – auto, aby kontener zawsze był wyśrodkowany.
- Utwórz selektor “.main, .sidebar i ustaw właściwość float: right;
- Dla selektora .main ustaw width: 80%, a dla .sidebar ustaw właściwość width: 20%.
- Aby utworzyć układ kolumnowy głównej części strony musisz dla selektora .col ustawić float: left oraz width: 25%;
- Dla selektora obrazków w elemencie z klasą “main” ustaw szerokość na 100%.
- W pliku index.html do elementu z klasą “container” oraz elementów z klasą “row” dodaj pomocniczą klasę “clearfix”.
- Następnie zajmiemy się ikonami społecznościowymi. Dodaliśmy już w strukturze html odpowiednie znaczniki. Aby załadować odpowiednie ikonki należy dodać w pliku css następujące odwołanie (w pierwszej linii pliku): @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,300,700,900&subset=latin,latin-ext);
- Dodaj nową regułę .social-media, ustaw w niej pozycję na fixed, wypozycjonuj go używając właściwości: top: calc(50vh – 65px), left: 10px; zmień szerokość elementu na 40px.
- Utwórz kolejną regułę: “.social-media i”, ustaw szerokość i wysokość na 40px, rozmiar czcionki na 20px, dla ikon zmień zaokrąglanie rogów na 50% oraz margines dolny na 5px. Ustaw także cursor: pointer; tło na kolor szary, wysokość linii (line-height) na 40px oraz wyśrodkowanie tekstu.
- Przejdźmy do stylowania stopki oraz paska bocznego. W panelu bocznym ustawimy wyświetlanie blokowe dla linków. Stopce nadamy kolor tła, ustawimy stałą wysokość elementu oraz wyśrodkujemy napis.
- Stwórz nową regułę: .sidebar a, ustaw w niej wyświetlanie blokowe (display: block).
- Na koniec zostało dodanie media queries, aby nasza strona była responsywna i dobrze wyglądała na urządzeniach mobilnych. Dla rozdzielczości poniżej 500px bloki będą wyświetlać się na całą szerokość ekranu, jeden pod drugim. Dodamy również odstępy od krawędzi strony.
- Na końcu pliku css dodaj: @media (max-width: 500px) {} aby dodawać właściwości dla ekranów poniżej 500px. Między klamerkami dodaj selektor .container i dodaj w nim właściwość width: 100%; oraz padding: 0 60px; następnie dodaj kolejny selektor .main, .sidebar i uzupełnij go o właściwości float: none, width: 100%.
cranky-pare-h7w6o
cranky-pare-h7w6o by danielminschinski
Powyższym ćwiczeniem kończę opowieści o layoucie na daną chwilę Mam nadzieje, że dotrwaliście do ostatniego punktu.🧐 W komentarzu możecie napisać co myślicie o zadaniu🙂 Kolejnym krokiem jest stworzenie kontynuacji przeze mnie “Planu nauki Frontend Developera”
Wejdziemy w temat CSS. Poznacie więcej szczegółów, sztuczek podczas stylowania naszej witryny…
Polecam zapisywać się do Newslettera oraz śledzenia Fb
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA