⭐ README to coś więcej niż opis. Poprzez nie pokazujesz swoje mocne strony – swoją dokładność, sposób myślenia i podejście do rozwiązywania problemów. Niech Twoje README pokaże, że masz świetne predyspozycje do rozwoju!
🎁 Zacznij od razu. Skorzystaj z szablonu README i wskazówek.
Najwyższy czas zakodować prawdziwą stronę internetową!
Będziemy się wzorować na projekcie od Webscope, który wygląda tak:
Wszystkie niezbędne grafiki masz przygotowane w katalogu images. Znajdziesz tam m.in. pliki SVG. W VS Code ich podgląd uzyskasz dzięki rozszerzeniu SVG.
Font, który jest używany w projekcie, to Montserrat.
Tło w górnej części strony to gradient:
background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235));
Jeśli chcesz dokładnie odwzorować położenie poszczególnych elementów, możesz użyć rozszerzenia do Chrome o nazwie PerfectPixel. Pozwoli Ci ono osadzić przedstawiony wyżej plik poglądowy (lokalizacja: ./assets/demo.png) jako tło dla tworzonej strony.
Uwaga! Możliwe, że w powyższym rozszerzeniu będziesz musiał użyć odpowiedniej skali obrazu wykorzystywanego jako podgląd. Jest to zależne od ustawień systemowych. Zazwyczaj jednak domyślne ustwienia wtyczki dobrze się sprawdzają i poza jej instalacją nie musisz nic robić.
Strona nie musi być wykonana zgodnie z pierwowzorem 1:1. Ważne, aby na pierwszy rzut oka było widać, że jest to ten sam projekt.
Pamiętaj, że przedstawiona grafika to element statyczny, a strona internetowa to element dynamiczny, który powinien dobrze wyglądać w różnych rozdzielczościach / na różnej wielkości monitorach. Część z nich może mieć szerokość ekranu 1280px, a inna 1440px itp. Na razie jednak skup się na odwzorowaniu zamieszczonego w zadaniu widoku. Innymi rozdzielczościami zajmiemy się w kolejnym module.
Poniżej zamieszczam propozycję podziału strony na poszczególne grupy:
- wiersz (
width: 100%) – kolor zielony - wyśrodkowanie (
max-width: 1150px) – kolor niebieski - komórka (wiele elementów w jednej linii) – kolor pomarańczowy.
Nie musisz się od tego stosować – to jedynie moja koncepcja, która ma Ci pomóc w utworzeniu odpowiedniej struktury.
⚠️ Jeśli nie posiadasz materiałów do tego zadania, to znajdziesz je na stronie devmentor.pl.
⭐ README to coś więcej niż opis. Poprzez nie pokazujesz swoje mocne strony – swoją dokładność, sposób myślenia i podejście do rozwiązywania problemów. Niech Twoje README pokaże, że masz świetne predyspozycje do rozwoju!
🎁 Zacznij od razu. Skorzystaj z szablonu README i wskazówek.