Å bygge et nettsted med HTML, CSS og Javascript

[Zenobia]

Og her er en video jeg sikkert skulle ha sett før jeg begynte med Integra-prosjektet.

Joda, jeg skal se denne ... snart.

[Zenobia]

Men tilbake til kursdag 7 og video om box-sizing: border-box.

Notater kommer ...

[proghodet]

3 minutter siden, Zenobia said:

Har du sett Ooops-siden min?   Den skal være responsiv!

 

Enig i at BEM og SASS sikkert har noe for seg når man kjenner systemet. Kan man bruke BEM i vscode uten videre? Tenker på planetsiden min.

Har ikke sett, men skal sjekke ut!

BEM er nok lurt å bruke helt fra starten, slik at man får gjennomgående lik struktur i prosjektet uten å måtte skrive om masse greier BEM er jo bare en metode for hvordan man navngir css-klassene sine, så du kan bruke det i vscode uten videre, ja

[Zenobia]

proghodet skrev (57 minutter siden):

BEM er jo bare en metode for hvordan man navngir css-klassene sine

Jepp, men -- (dobbel bindestrek) så litt "kodete" ut, så ble usikker. Takk for bekreftelsen.

Ser at KP har a) crash-course in HTML & CSS og b)'Build a space travel website'. Kurs i SASS lenkes det til nedenfor border-box-videoen, men der finner jeg ikke noe. Kanskje jeg skulle hoppe av responsive layout før dag 8, og hoppe på b) (Neida, har bare godt av litt mental fjellklatring).

PS. Den T-skjorten bør komme i grønt!

Okei, tilbake til kursvideo ...

Såeh, box-sizing burde alltid vært border-box? Istedenfor er box-sizing satt til content-box som standard.

Ferdig med dag 7

Endret 6. september 2022 av Zenobia

[proghodet]

16 minutter siden, Zenobia said:

Såeh, box-sizing burde alltid vært border-box? Istedenfor er box-sizing satt til content-box som standard.

Kjekt, ikke sant? 😅 Det er rett og slett for bakoverkompatibilitet; en gammel nettside skal fortsatt fungere selvom de videreutvikler html og css, derfor må standardverdien være det den var i hine hårde dage..

[Zenobia]

proghodet skrev (3 minutter siden):

Kjekt, ikke sant? 😅 Det er rett og slett for bakoverkompatibilitet; en gammel nettside skal fortsatt fungere selvom de videreutvikler html og css, derfor må standardverdien være det den var i hine hårde dage..

Bakoverkompatibilitet   Nesten like bra som responsiv layout

Jeg hopper nå rett inn i crash-kurset KP reklamerte for, og som er laget av en norsk dude som heter Per, bruker caps og poserer foran biler. Men snakker engelsk. Plattform: scrimba. Hørt om?

[Zenobia]

Crash-kurset: Konsept jeg har snublet i, forklart: Nesting. Her brukes <div>

Likedan parent/child.

HTML Dokument-tre. Noe å tenke på Har et site-map. Det er kanskje ikke helt det samme.

Endret 6. september 2022 av Zenobia

[proghodet]

7 minutter siden, Zenobia said:

HTML Dokument-tre. Noe å tenke på Har et site-map. Det er kanskje ikke helt det samme.

Dokumenttreet er for en gitt underside du er inne på (det du ser når du høyreklikker bakgrunnen og velger "se kildekode"), mens site-map beskriver hierarkiet av alle sider man har på et nettsted Man bruker dokumenttreet masse når man jobber med JavaScript. Du har også hatt en liten forsmak på det, ved å bruke pseudo-klasser (:nth-child / :nth-of-type).

31 minutter siden, Zenobia said:

Plattform: scrimba. Hørt om?

Såvidt, men aldri brukt. Norskutviklet, tror jeg? Jeg brukte codecademy i starten, og det er vel litt av samme prinsippet.

32 minutter siden, Zenobia said:

bruker caps og poserer foran biler

... Ingen kommentar.

[Zenobia]

proghodet skrev (4 minutter siden):

Dokumenttreet er for en gitt underside

  Ja, var jo piler fra div til p osv. der, haha. Er det utbredt å tegne opp dokumenttre for kompliserte dokumenter? På hvilket stadium i så fall?

Selv om jeg har anvendt pseudo-klasser, har jeg nok endel huller i forståelsen av hvordan ting henger sammen. Dog allikevel! Jeg er glad jeg ikke kommer helt uforberedt til dette crash-kurset. (Per Harald Borgen heter han. Ingenting gæli med bilene, forresten). Siden KP-kurset m/responsivt design er så bratt, er det fint å balansere det med kurs der ting er mer kjent.

proghodet skrev (11 minutter siden):

... Ingen kommentar.

[Zenobia]

proghodet skrev (23 minutter siden):

Jeg brukte codecademy i starten

Glemte å kommentere denne: KP/Per/scrimba-kurset var GRATIS

Lenke til KP-kursside: https://www.kevinpowell.co/courses/

Lenke til crash-kurset: Kommer ...

 

Endret 6. september 2022 av Zenobia

[bustelise]

Så kult å se denne "kompetansereisen" din, fra første side til i dag. 🙂 Stå på!

[Zenobia]

bustelise skrev (1 minutt siden):

Så kult å se denne "kompetansereisen" din, fra første side til i dag. 🙂 Stå på!

Å, TUUUUUSEN takk  

Fikk jo en FLYING start med @proghodets assistanse.

Jeg prøver å samle triks, ressurser og verktøy i denne tråden, og må nok kjemme gjennom den flere ganger. Kodesnutter som gikk LANGT over hodet mitt dengang de ble skrevet her, kommer til nytte senere.

[Zenobia]

Artig at crash-kurset tar for seg <button/>

Nå <input> Den var ny ...

<input type="date" placeholder="Dato å konvertere fra"> Hm. Den kan nok komme til nytte på tidsregningssiden.

Endret 6. september 2022 av Zenobia

[Zenobia]

 Pause i crash-kurset nå.

Vedr- Ooops-siden, skulle jeg eeeegentlig ha et bakgrunnsbilde, kom jeg på. Til slutt. Men da var jeg littebittegranne lei. Men jeg har nå lastet det opp, bare ikke lenket til det. Må lære mer om responsivt og bilder først, trur eg.

Bildet vises muligens(? ) tidligere i tråden. Av en galakse.

Selv om jeg i dag har lært et røvertriks   om å sette width="100%" på img!

Jepp, det var dén pausen ... nå har jeg ihvertfall et bakgrunnsbilde i vscode-filen. Med no-repeat og en bakgrunnsfarve å falle tilbake på.

Meeeeen, nå vil jeg egentlig at Ooops-teksten skal være et annet sted på bildet (PC)

Og sånn går no dagan ...

Mere kurs (nei, jeg synker med github først, barefordiatte)

- - -

href betyr hypertext reference. Tror ikke jeg har dekodet den forkortelsen før, haha. Brukes i anchor-tag <a href="lenke her">Blabla</a> Blabla-teksten klikkes -> til lenkestedet

Åååå, jeg skal huske target="_blank"!!!! For å åpne lenken i en ny fane.

- - -

First make it work, then make it better. Skal se på ordentlig dokumentstruktur nå.

Funke først, forbedring kommer.

<head> Metadata

 

Endret 6. september 2022 av Zenobia

[proghodet]

10 hours ago, Zenobia said:

Vedr- Ooops-siden, skulle jeg eeeegentlig ha et bakgrunnsbilde, kom jeg på. Til slutt. Men da var jeg littebittegranne lei. Men jeg har nå lastet det opp, bare ikke lenket til det. Må lære mer om responsivt og bilder først, trur eg.

Jeg gjorde et forsøk her: https://codepen.io/jarnalyrkar/pen/MWGaoMz

(Jeg gikk all-in med BEM og SCSS, men tror du skal klare å dekode det :D)

Den største forskjellen er at jeg legger bakgrunnsbildet som en img-tag, og bruker position: absolute på teksten for å legge den oppå bildet.
Du kan justere plasseringen ved å bytte left, top, right og left verdier i .header. Du kan jo prøve å bytte fra left til right, og top til bottom, og se hva som skjer

Jeg la på en gjennomsiktig bakgrunn med slik at den mørke tittelen skal være litt enklere å lese.

Jeg la merke til at du hadde lagt en button rundt en anchor-tag - det trenger du ikke! Bruk bare anchor hvis det er en link, og bruk bare button hvis den gjør noe interaktivt på nettsida, f.eks innsending av skjema, vise skjult innhold, åpne en meny etc. Hvis du vil ha en anhcor som ser ut som en knapp legger du bare til en klasse på anchor, og styler den så det ser ut som en knapp.

[Zenobia]

@proghodet JU-HUUUU!!!!

Har ikke tid nå, men i aften!

(Jeg har pause nå, og må gjøre noe "ikke-hode"-relatert. KG er så greit til sånt )

 

Tusen millioner galaktiske takk   (For nå ble ikke bildet "rart" i mobilvisning) Og mørk bakgrunn-kodingen skal jeg ta vare på. Den kommer til nytte senere også.

Det er bare å kjøre på med BEM og SCSS 👍

Endret 7. september 2022 av Zenobia

[Zenobia]

Da har jeg kopiert inn i vscode fra codepen, dekodet det jeg trooor var scss (&?), testet i Live Server, og det ser riktig ut!

Synker med github nå ...

Spørsmål om vscode (når du har tid) @proghodet: Når jeg skal "commit", står det med blek skrift

'Message (Ctrl+Enter to commit on ...

i feltet øverst. Jeg skriver ingenting der, og så får jeg pling-varsel, og så skriver jeg commit-notat. Kan jeg bare skrive det i 'Message-feltet?

Vet ikke om du skjønner hva jeg spør om nå

[Zenobia]

Iallefall, nå er det kurs igjen!

Måtte bare titte bittelitt på BEM-videoen, før jeg husket hvordan jeg dekoder &.

Kudos til meg 🎖️

Hvilket kurs?

Jeg fortsetter med scrimba (html + css for de med grønn T-skjorte. Har blitt forfremmet fra hjelmbærer)

- - -

Fullført HTML-seksjonen, men valgte å ikke registrere meg på Netlify.

Så var det CSS ...

Endret 7. september 2022 av Zenobia

[Zenobia]

CSS nomenklatur:

Selector
Property etterfølges alltid av kolon:
Value etterfølges alltid av semikolon;

<div/> Gjør styling enklere. Samler elementer.

Divs rule the world.

class for ulik styling

I HTML er class en attributt, f.eks <div class="jippi"> Attributtets navn er jippi

Finner igjen attributt-navnet i CSS

.jippi {property: value;}

Standard margin i nettlesere er 8px Såeh,

body {
margin: 0
}

Okidoki

OBS! Margin-kollaps. Den største marginen bestemmer, men det er unntak.

Margin gir avstand til andre elementer. Merker at å lære om display: block er litt forvirrende etter å ha blitt introdusert for flexbox og grid. To tanker (minst) i hodet samtidig. Og ikke blande kortene.

Padding skaper avstand (og tar med seg bakgrunn) mellom innholdet (content) og kantlinjen (border).

Box model: content-padding-border-margin. Joa, den sitter greit.

 

Endret 7. september 2022 av Zenobia

[proghodet]

8 minutter siden, Zenobia said:

Da har jeg kopiert inn i vscode fra codepen, dekodet det jeg trooor var scss (&?), testet i Live Server, og det ser riktig ut!

Synker med github nå ...

Spørsmål om vscode (når du har tid) @proghodet: Når jeg skal "commit", står det med blek skrift

'Message (Ctrl+Enter to commit on ...

i feltet øverst. Jeg skriver ingenting der, og så får jeg pling-varsel, og så skriver jeg commit-notat. Kan jeg bare skrive det i 'Message-feltet?

Vet ikke om du skjønner hva jeg spør om nå

Jeg er ganske sikker på at svaret på det du spør om er "ja" ^_^