VSC + HTML + CSS
Visual Studio Code
Založení nové stránky
New File
Nezapomeň napsat příponu (/html CSS,...) jinak budeš bez pomocníků vkládání
Vypsání hlavičky
[!] + [Enter]
Vypíše základní hlavičku a tělo /html stránky
Zavírací závorky - tagy
pravý [Alt] + [B] nebo pravý [Alt] a tagová závorka [˂]
pravý [Alt] + [N] nebo pravý [Alt] a tagová závorka [˃]
Středník ;
na české klávesnici je pod Esc, je na klávese uveden
Mřížka # ;
na české klávesnici
pravý [Alt] + [X]
Základní pracovní postupy
Hlavičku lze zadat příkazem [!] + [Enter]
V lang je nutné provést změnu na "cs-cz"
Poznámka:
U linkových odkazů se uvádí http: nezapomeň upravit na https:
Přepínání mezi okny
Při otevřeném projektu se dá přepínat mezi okny použitím zkratky [Ctrl] + [P]
Otevření dvou oken zároveň
View - Editor - Layout- Split Left
Vkládání vlastností /html
Při psaní /html napíši počáteční písmeno tagu a vyberu si z tabulky. Pokud se jedná o párový tag, vytvoří se i uzavírací tag.
Nalinkování CSS
Nalinkování css stačí zadat link. Link samozřejmě patrí do Header
Nalinkování JS
Nalinkování JS stačí zadat script:scr Skript umístíme do Body
Vkládání vlastností CSS
Při psaní CSS je nutné vložit tag (nebo class či ID) a po napsání apostrofů již funguje vkládání vlastností
Apostrof vytvořím kombinací pravý [Alt] + [B] potažmo [Alt] + [N] { }
Generovní lorem ipsum
V odstavci začnu psát lorem a potvrdím [Entrem]
Generování Class a ID
zadám tečka a jméno class a odentruji [.nadpis] + [Enter] tím vytvořím DIV s class="nadpis"
zadám p tečka a jméno class a odentruji [p.nadpis] + [Enter] tím vytvořím odstavec (p class="nadpis")
Poznámka:
Mřížku vytvořím pomocí kombinace kláves pravý [Alt] +[X] #
Zadám křížek nadpis a vytvořím tím DIV s ID nadpis div="nadpis"
Zadám p křížek a vytvořím tím odstavec s id="nadpis"
Generování
pokud napíši div hvězdička 3 tak to vytvoří tři div (div krát počet)
Pokud zapíši div>ul>li*5>a vytvořím pět divů s ul, seznamem li v kterém bude link a
napíši p tečka nadpis krát 3 a vytvořím tři odstavce s class="nadpis"
První odstavec s třídou nadpis
Druhý odstavec s třídou nadpis
Třetí odstavec s třídou nadpis
Jestliže v kódu najedu na class=nadpis" - rozkliknu kontextové menu, tak se mi otevře okno css s definicí k dané třídě.
Vstup do nápovědy
najedu si na element třeba h1
Otevře se kontextové menu v kterém je krátký popis elementu a odkaz na MDN.
Po rozkliknutí MDN se dostávám přímo do oficiální nápovědyon-line.
Základní zkratky
Ukázat všechny příkazy [Ctrl] + [Shift] + [P]
Otevřít soubor [Ctrl] + [O]
Otevřít adresář [Ctrl] + [K]
Otevřít nedávno otevřený soubor [Ctrl] + [R]
Odskok na nový řádek [Ctrl] + [Enter]
Základní zkratky
Otevřít explorer [Ctrl] + [Shift] + [E] otevření exploreru nám umožňuje otevření některých funkcí, které jinak nejsou přístupné (kontextové menu).
Visual Studio Code- jak psát rychle a efektivně
HTML kousky
width:calc()
Menu
Barvy u zátržítek a boxů
Accordion
Hodiny
Single page
Pricing card
Fluid Layout with Flex
Visual Studio Code
Založení nové stránky
New File
Nezapomeň napsat příponu (/html CSS,...) jinak budeš bez pomocníků vkládání
Vypsání hlavičky
[!] + [Enter]
Vypíše základní hlavičku a tělo /html stránky
Zavírací závorky - tagy
pravý [Alt] + [B] nebo pravý [Alt] a tagová závorka [˂]
pravý [Alt] + [N] nebo pravý [Alt] a tagová závorka [˃]
Středník ;
na české klávesnici je pod Esc, je na klávese uveden
Mřížka # ;
na české klávesnici
pravý [Alt] + [X]
Základní pracovní postupy
Hlavičku lze zadat příkazem [!] + [Enter]
V lang je nutné provést změnu na "cs-cz"
Poznámka:
U linkových odkazů se uvádí http: nezapomeň upravit na https:
Přepínání mezi okny
Při otevřeném projektu se dá přepínat mezi okny použitím zkratky [Ctrl] + [P]
Otevření dvou oken zároveň
View - Editor - Layout- Split Left
Vkládání vlastností /html
Při psaní /html napíši počáteční písmeno tagu a vyberu si z tabulky. Pokud se jedná o párový tag, vytvoří se i uzavírací tag.
Nalinkování CSS
Nalinkování css stačí zadat link. Link samozřejmě patrí do Header
Nalinkování JS
Nalinkování JS stačí zadat script:scr Skript umístíme do Body
Vkládání vlastností CSS
Při psaní CSS je nutné vložit tag (nebo class či ID) a po napsání apostrofů již funguje vkládání vlastností
Apostrof vytvořím kombinací pravý [Alt] + [B] potažmo [Alt] + [N] { }
Generovní lorem ipsum
V odstavci začnu psát lorem a potvrdím [Entrem]
Generování Class a ID
zadám tečka a jméno class a odentruji [.nadpis] + [Enter] tím vytvořím DIV s class="nadpis"
zadám p tečka a jméno class a odentruji [p.nadpis] + [Enter] tím vytvořím odstavec (p class="nadpis")
Poznámka:
Mřížku vytvořím pomocí kombinace kláves pravý [Alt] +[X] #
Zadám křížek nadpis a vytvořím tím DIV s ID nadpis div="nadpis"
Zadám p křížek a vytvořím tím odstavec s id="nadpis"
Generování
pokud napíši div hvězdička 3 tak to vytvoří tři div (div krát počet)
Pokud zapíši div>ul>li*5>a vytvořím pět divů s ul, seznamem li v kterém bude link a
napíši p tečka nadpis krát 3 a vytvořím tři odstavce s class="nadpis"
První odstavec s třídou nadpis
Druhý odstavec s třídou nadpis
Třetí odstavec s třídou nadpis
Jestliže v kódu najedu na class=nadpis" - rozkliknu kontextové menu, tak se mi otevře okno css s definicí k dané třídě.
Vstup do nápovědy
najedu si na element třeba h1
Otevře se kontextové menu v kterém je krátký popis elementu a odkaz na MDN.
Po rozkliknutí MDN se dostávám přímo do oficiální nápovědyon-line.
Základní zkratky
Ukázat všechny příkazy [Ctrl] + [Shift] + [P]
Otevřít soubor [Ctrl] + [O]
Otevřít adresář [Ctrl] + [K]
Otevřít nedávno otevřený soubor [Ctrl] + [R]
Odskok na nový řádek [Ctrl] + [Enter]
Základní zkratky
Otevřít explorer [Ctrl] + [Shift] + [E] otevření exploreru nám umožňuje otevření některých funkcí, které jinak nejsou přístupné (kontextové menu).
Visual Studio Code- jak psát rychle a efektivně