Å bygge et nettsted med HTML, CSS og Javascript

[Zenobia]

proghodet skrev (1 minutt siden):

Verdiene står for noe som heter flex-shrink, flex-grow, og flex-basis. Det er litt komplisert å forklare, men noen har garantert forklart det på nett, hvis du er nysgjerrig

0K, da skal jeg lese og bli klok

[Zenobia]

Meeeeen, pseudo-klassen trekkes med ned i PC-visningen, så da kommer English på feil sted der. Og når jeg prøver å sette nth-child tilbake til 9 i PC-css, overstyrer den mobil også (cascading!) Haha.

Så da kan jeg enten bare skrive English til slutt, og kutte pseudo-klassene. Lar det stå inntil videre. Synker nå ...

[Zenobia]

På min mobil ble teksten igjen veldig liten i vertikalmodus. Tror jeg skal bevege meg opp på 0 0 30.

Årner litt nå ...

Det ble bedre.

- - -

Er det bare øynene mine, eller

Nei, det var visst mobilen. Når jeg snur fra vertikalt til horisontalt, blir 1fr 1fr 1fr-kolonnene plutselig ikke like brede. Men når jeg står i horisontal-modus og veksler mellom norsk og engelsk side, faller den på plass, så det er nok mobilen. Jeg tror jeg blir tilfreds med å ha språkvalget på knappen nederst til høyre i horisontal/PC-modus Nå er den nederst i vertikal.

eller jeg tror det er øynene

Jeg skal gjøre noe annet nå

Endret 21. august 2022 av Zenobia

[Zenobia]

Da har jeg endelig fått til å starte på Kevin Powells kurs 'Conquering responsive layouts'.

Steg 1) Installere et tillegg til vscode   Det heter Live Server.

Såeh! Til selve kurset. Dag 1. Notater kommer.

Allerede: HTML er egentlig responsivt allerede. Eh?? Åkei?

Han er muligens ikke så glad i @media query? Hm.

Angi størrelser (width, height) i % -> responsivt.

UNNGÅ å angi høyde for å få bakgrunn. Bruk padding.

Standard skriftstørrelse for nettlesere er 16px. Angi padding i em: 5em = 16 x 5 "=80px"

em relaterer til containerens skriftstørrelse. Hvis ingen angitt: 16px

Da kom jeg til første utfordring, og den sparer jeg til i morgen. Må laste ned noen filer.

Endret 27. august 2022 av Zenobia
La til lenke, notater

[Zenobia]

Det ble andre ting noen dager, men nå er første utfordring løst. Jeg føler STERK fryd !!!

Det var litt skummelt å laste ned filene jeg skulle endre   Men jeg herdes! Lagde egen mappe og greier.

- - -

Jeg går rett på utfordring #2

Om em og rem

Em har bakgrunn i trykkeri-verden(?) Hvis du setter skriftstørrelse i em, vil den relatere til elementets foreldRE (parentS!!) skriftstørrelse. (Ikke margin/padding osv) Foretrekker norske uttrykk, så jeg oversetter.

Dvs. ikke cascading, men compounding. Em baller på seg. Hvis du setter body font-size i em, så font-size i nytt underelement i em, så enda ett ... -> blir større og større evt. Em setter en forholdsmessig skriftstørrelse til forrige element, som igjen setter en skriftstørrelse som forholder seg til forrige element osv, hvis alle disse skriftstørrelsene er i em.

- - -

Rem ble ifølge noen(?) utviklet for å fikse påballingsproblemet som kunne oppstå ved bruk av em.

Rem står for root-em.

Rem forholder seg til til html-elementets skriftstørrelse, og kun det – puh! Standard om ikke annet oppgitt: 16px. Dette gjelder også margin, padding, width osv.

- - -

Begge kan brukes til

margin: oppgitt i em forholder margin seg til dette(!) elementets skriftstørrelse, ikke andre 0Kay, things just got complicated. I et element hvor

font-size: 2.5em
margin-bottom: 1em

-> Hva er marginstørrelsen? Jo, 2.5em!!!!!!!!!   Aaaaaaaaarrrrrrgh. 0Kay. Fordøyer dette crazy systemet. Hm. em, liksom. Eeeehm. Andre em-størrelser enn em-skriftstørrelse ser på elementets skriftstørrelse. (Samme prinsipp for padding, width osv. em ser på elementets skriftstørrelse)

 

Fordel med padding i em: Justerer seg automatisk om du endrer skriftstørrelsen, f.eks på knapper. Bevarer proposjonene

Kan være en fordel å oppgi margin i rem, så avstanden mellom elementer (f.eks knapper) holder seg lik.

Endret 1. september 2022 av Zenobia

[Zenobia]

Jeg har allerede løst første oppgave i vscode, men han maser om "Gjør første oppgave!" i dag 2 også og foreslår at man kan dra oppgavefilene over i codepen rett i nettleseren. Det minte meg om codepen, og hvorfor jeg sluttet å bruke den. Jeg skal se om det går an å skru av SCSS.

- - -

Det står CSS preprocessor none, så da får jeg tro det ...

Da har jeg gjort meg litt mere kjent med codepen igjen. Ny pen klar til å fylles med neste utfordring.

Endret 1. september 2022 av Zenobia

[Zenobia]

Hm. Siste leksjon i dagens utfordring er en video med tittelen "Why you shouldn't set font-sizes using em"

Jaja, jeg får se den, da. Men da skal jeg spise is! Jeg som trodde jeg akkurat hadde skjønt det

Konklusjon: Oppgi skriftstørrelse i rem. Padding gjerne i em. Margin? Kommer litt an på.

Endret 1. september 2022 av Zenobia

[Zenobia]

Da er jeg på dag 3. I mellomtiden har jeg registrert meg på Discord, Kevin Powell community.

Notat: Ikke la setninger flyte over hele skjermen. Det hverken ser eller kjennes riktig. Så bruk max-width?

width: 80%
max-width: 750px

Dette betyr at elementet vil oppta 80% av skjermen, MEN ikke mer enn max 750px. Forstyrrer ikke responsiviteten mot mindre skjermvidder.

- - -

Da har jeg lastet ned filene, og plantet hhv. html og css i hvert sitt codepen-vindu. Så får jeg beskjed om at bare html som tilhører body skal inn dit. Okei, jeg leser ...

Sånn, da er overflødig html slettet fra codepen, og klar til min dyst i morgen(?) eller noe.

Endret 1. september 2022 av Zenobia

[Zenobia]

Dag 3

Angi elementets width i PROSENT, så holder du det responsivt.

Oi. Oppgave #2 var laaaangt over min hullete forståelse. Har sett på løsningen nå, og ser at jeg tenker for komplisert. Lærer en god rekkefølge av hva man skal fikse først, trur eg. Hvis tekst skal ha samme venstremarg, bør den være samlet i samme klasse. Bakgrunn kommer i underklasser.

Monkey see, monkey do.

Se bort fra pynten, identifisér grunnleggende enheter (som margin: auto) i et overordnet nivå. Å sette margin: auto på underelementer, gir midtstilt relativ til elementet jeg satte det på, selvsagt

(Jeg forsøkte å lage en .more-content-klasse, men da fikk jeg problemer med venstremargen (veldig bred med 25% når nedskalert, selv om det så riktig ut på PC)

max-width alltid i px.

KPs .container-oppskrift:

width
max-width
margin 0 auto

- - -

Gikk løs på oppgaven i codepen først, men endte opp i vscode.

Endret 2. september 2022 av Zenobia

[Zenobia]

Notater fra dag 4

vh =viewport height. Kan føre til problemer på mobil. vh kan også brukes til padding: 10vh Og brødtekst (Men bedre med em/rem)

vw = viewport width. Kan være praktisk å bruke på overskrifter -> forandrer seg med skjermstørrelsen.

vmin = viewport minimum? Vil være proposjonal med den minste av skjermdimensjonene, altså enten skjermhøyde eller skjermvidde.

vmax = viewport maximum? Vil være proposjonal med enten skjermhøyde eller skjermvidde, avhengig av hvilken som er størst. Vil være upraktisk å bruke på skriftstørrelse

Kan virke som om vh er den mest relevante av disse. Resten mer eksotisk?

Endret 2. september 2022 av Zenobia

[Zenobia]

Skal sjekke ut oppgave 3 på dag 5 nå ...

Gjør meg mere kjent med codepen. Har endret grensesnittet(?) så jeg har koden til venstre og "skjermen" til høyre. Men KP driver og endrer virtuell skjermstørrelse hele tiden, og dét hadde vært praktisk! Han har en egen innstilling kalt "responsiv" der jeg bare kan velge mellom diverse mobiler, nettbrett, PC-er osv. Hm.

Fant akkurat ut av hvordan jeg gjør det hihi! NÅ kan jeg forstå at det er praktisk med codepen,ja! (Tok tak i høyreveggen og strakk ut -> smalere virtuell skjermvidde. Trekkspill.

- - -

Oppgave #3 er absolutt vokse(n)mat for meg. Har lastet ned spesifikasjonene i pdf-format, og satt alle pdf-filer til å åpnes i Firefox 👍

Standard var Edge.

Mulig jeg ser på den i helgen, men nå er det PAUSE!

Endret 2. september 2022 av Zenobia

[Zenobia]

Shift + ctrl + P i vscode -> emmet forkortelser.

Nyttig hvis man skal lage en ny klasse: Merk elementet du skal gi en klasse, søk etter Emmet: "Wrap with Abbreviation". Får spørsmål om hva man vil kalle elementet/klassen. F.eks div.intro skaper kode <div class=intro> før, og </div> etter markert kode.

 

[Zenobia]

Tenker å kombinere oppgave #3 med eget behov: En 'Beklager'-side til lenker som ikke går noe sted. Løse oppgaven først, tilpasse etterpå.

Tekst: Noe sånt som

 

BEKLAGER!

 

Signalene ble enten avbrutt, står fast i dekodingen eller overføringen er ufullstendig.

– PrIns

 

Tilbake

 

Men først skal jeg gå gjennom oppgave 2 igjen, og skjønne hvorfor klassene må være der de er.
 

[Zenobia]

Oppgave #3:

Overskrift, brødtekst og en knapp. Alt har samme marg og bakgrunnsfarve.

Verdier:
h1: 48px
Brødtekst og knapp: 21px
 

Bygger i vscode; sjekker responsivt i codepen

Knappen bør få egen klasse? Prøver ...

Jeg har lagd min først knapp!   <button/> Så var det det med å runde av hjørner ...

border-radius!

Da må jeg gjøre noe annet, men dette begynner å ligne noe

 

Endret 3. september 2022 av Zenobia

[Zenobia]

Har laget ferdig Ooops-siden, men ikke lastet opp. Skal lenke til den fra inaktive knapper på forsiden.

Det var meningen at jeg skulle starte på kursets 6. dag.

 

Endret 4. september 2022 av Zenobia

[Zenobia]

Da går jeg igang med dag 6. Jeg har gjort et ærlig forsøk på å løse oppgave 3 så godt jeg kan (for den avvek litt fra mitt behov for en Ooops!-side). Jeg har vekslet mellom vscode/Live server og codepen, fordi sistnevnte hadde en så kjekk responsiv-test. Fasiten på oppgave 3 kommer på dag 7. Jeg har tilgang, men leser først dag 6 nå

Jeg har det iallfall gøy!

- - -

Utdrag fra sammendrag:

1. Unngå bruk av høyde (height)
2. Angi width i PROSENT%%%!
3. Angi en max-width (i px?!) Hm
   
   Ifølge Kevin Powell, er de tre ovenstående punktene en nøkkel til å mestre responsivt webdesign (fritt oversatt).

 

Endret 5. september 2022 av Zenobia

[Zenobia]

Har kommet til dag 7. Ser løsningen nå. Plukker opp snasne forkortelser i vscode:

f.eks: p tab blir til <p></p>

og

a.btn tab blir til <a href="" class="btn"></a>

- - -

Kommentar til løsningen vs. mitt forsøk:

Spoiler

Jupp, paddingen gav meg et problem (stiv venstremarg), men jeg hadde laget to div!! Riktig tenkt. Løsningen på problemet med stiv venstremarg -> responsiv: sette width 80% (som gir fleksible marger) + max-width 750px. Margin 0 og auto!! (inni containeren)

Teksten opptar 80% av skjermvidden + er midtstilt, men max-width 750px.

Padding oppe og nede funket greit.

Meeen, så lager han enda en div! For at det skal se venstrejustert ut på PC 

Første setter padding, bakgrunn, skriftfarve.
Andre setter begrensning, så vi får fleksibel marg (UTEN å bruke padding)
Tredje begrenser teksten ytterligere til venstre (aktuelt for PC)

OBS! Satte i spoiler fordi jeg røper løsningen. (I tilfelle noen som tar kurset, kommer over tråden)

- - -

Okei, da har jeg besøkt google fonts for første gang ...

button:hover,

Konklusjon: Til å kunne så lite, synes jeg at jeg greide meg bra 👍

Såeh, er det visst over i flexbox. Men ikke i dag. Sjekker ut mer om google fonts.

Endret 5. september 2022 av Zenobia

[Zenobia]

Dag 7 forts.

Har lest om emmet (turister i Cornwall?   )  Har emmet-tillegget allerede aktivert i vscode 👍  Enda flere forkortelser som sikkert blir kjekt å ha når jeg er varmere i kodetrøya. (Hvor er T-skjorten, forresten?)

Da er neste video om BEM/CSS. Notater:

BEM=Block, Element, Modifyer.
SASS???!!  Syntactically Awsome Style Sheets

Måte å organisere og derved rasjonalisere stylingen.

Ser at eksempelet hans kan brukes som utgangspunkt for én av sidene mine (undersider til 'Kosmografi'-knappen)

Endret 6. september 2022 av Zenobia

[proghodet]

59 minutter siden, Zenobia said:

Hvor er T-skjorten, forresten?

Jeg synes også du har gjort deg fortjent til en!

 

1 hour ago, Zenobia said:

BEM=Block element modifyer. SASS???!!

Min foretrukne måte å jobbe med styles på

[Zenobia]

proghodet skrev (4 minutter siden):

Jeg synes også du har gjort deg fortjent til en!

 

Min foretrukne måte å jobbe med styles på

1) Takk

2) Jeg har nå sett BEM-videoen TRE ganger, og begynner å skjønne at han brukte tre forskjellige eksempler   Det er mange nye begreper. Til slutt forstod jeg hvorfor CSS-en endret seg, haha.

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.