INF.03.drill.1 – VS Code + html + css

Cel zadania: Jak najszybsze utworzenie HTML i CSS bez kopiowania kodu z AI.
Metoda: Użycie trików (Emmet: rozszerzenie wbudowane w VS Code)
Zadanie: Fragment zadania INF.03-08-24.01-SG (str. 3 i 4)
Potrzebne pliki z zadania: obraz1.jpg, obraz2.jpg

Plik index.html

1. Przeczytaj 3 i 4 stronę zadania
2. Utwórz pusty plik index.html i otwórz go w VS Code
3. Utwórz szablon pliku:
   • Wpisz znak „!” i wciśnij klawisz Tab
   • Ustaw kursor wewnątrz body i wpisz section#blok$*6 (i wciśnij klawisz Tab)
   • Jeśli chcesz – zmień nazwy bloków wg uznania
   • W pierwszym bloku wpisz h1>a (i wciśnij klawisz Tab)
   • W bloku dla tabelki wpisz h4>a (i wciśnij klawisz Tab)
     i dalej table>tr*5>td*2 (i wciśnij klawisz Tab)
   • W blokach dla obrazków wpisz img (i wciśnij klawisz Tab)
4. Jeśli to konieczne uporządkuj kod
5. Wypełnij szablon tekstami i obrazkami z zadania

Plik styl8.css

1. W pliku index.html ustaw kursor wewnątrz head, wpisz link:css (i wciśnij klawisz Tab)
2. Wpisz odpowiednią nazwę pliku, utwórz ten plik i otwórz w VS Code
3. Wpisz *{ i wciśnij klawisz Enter
4. Wpisz ff:Garmond (i wciśnij klawisz Tab)
5. Poniżej wpisz ta:c (i wciśnij klawisz Tab)
6. Poniżej za } wpisz body { i wciśnij klawisz Enter
7. Wpisz m:a (i wciśnij klawisz Tab)
8. Dalej pobaw się sam. Może przydadzą się:
   • m10
   • fl:l
   • cl:b
   • p20-10
   • pos:a
   • bg#f00
   • c#fff
   • w100p

Inne przydatne skróty Emmet dla HTML

• div.container>ul>li*5
• lorem10
• ul>li.item$*3
• h3+p
• script:src

Na kolejnych stronach porównuję 3 wersje rozwiązania. NIE IDŹ TAM OD RAZU!!! Czytanie gotowca nic Ci nie da!