devmentor-pl / task-html-and-css-basics

⭐ 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.

 

HTML & CSS: Podstawy

Najwyższy czas zakodować prawdziwą stronę internetową!

Będziemy się wzorować na projekcie od Webscope, który wygląda tak:

 

Opis projektu

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.

Propozycja podziału

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.