Å bygge et nettsted med HTML, CSS og Javascript

[Zenobia]

proghodet skrev (Akkurat nå):

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

Takk! Da prøver jeg det ved neste synkronisering

[Zenobia]

Bittelitt innom:

HUSKE at når jeg vil bruke margin: auto for å sentrere et element, virker det ikke på inline-elementer. Men!

display: block

På inline-elementer virker text-align: center (ikke bare på tekst!)

Flex/grid? vetikke.

- - -

https://userway.org/contrast/?fg=000000&bg=ffffff

Lenke til kontrast-sjekker. Kjekt å ha. Verdien bør ligge på 4 eller over.

- - -

flexbox består alltid av en container (parent) og dens children

<div> er et blokk-element

display: flex TVINGER blokk-elementer sammen på samme linje.

Forteller hvordan jeg vil plassere disse tvungne blokk-elementene med

justify-content: center/space-around/space-between osv

Endret 8. september 2022 av Zenobia

[Zenobia]

Fortsetter med grunnkurset i dag, og vi har allerede touchet borti flexbox

Med child og containers!

Her paddes det med px, og KP sier IKKE!   Fordi der gjelder det det rem og em. Jeg har det i bakhodet, og sier 'em' eller 'rem' lavt for meg selv.

1rem =16px. Viser alltid tilbake til, hm ... var det head eller body? Tror head? Standard 16px.

em: forholder seg til forelderen (parent).

Bare litt repetisjon for meg selv.

Ressurstips: coolors.co farvepaletter

Da er jeg ferdig med 3 av 6 bolker av grunnkurset. Neste bolk heter "Build a space exploration site"   Hmmm ... tror jeg nok må snuse litt på den, gitt!

Har responsivkursfanen oppe, men har satt den litt på vent.

Ressurs/bilder: unsplash.com

background-image: url("adresse.jpg")
background-size: cover

Google fonts: fonts.google.com

For elementer som ikke arver skrifttype:

font-family: inherit

Hvorfor ikke bare kopiere? For hvis du endrer den ene, vil du samtidig endre den andre.

Skrifttype-ressurs: 1001fonts.com

Stopper her. Neste leksjon er om <span>

Endret 12. september 2022 av Zenobia

[Zenobia]

Ooookay, så hopper jeg litt av kurskarusellen og inn i vscode fordi jeg fikk en idé fra kurset om hvordan personkortene kan utformes og kodes.

Kunne trenge litt farvehjelp til å utvide paletten, så jeg testet ut coolors. Virker enten ubrukelig i gratis-versjonen, eller så er det noe jeg ikke har skjønt. Tenkte å ta utgangspunkt i farvepaletten jeg allerede bruker, men jeg fant ikke ut av det. Prøvde å lagre #0e496a, men fant den ikke igjen noe sted. Har ikke tilgang til 'Dashboard' uten betaling, så det ligger vel der.

Da får jeg bare teste litt på egen hånd. En lysere blåhvit er det jeg trenger. Lysere enn #9fd3e8.

Jeg tutler videre.

Fant canva.com

Virker som et enklere opplegg, men var det jeg trengte. Og farven blir mørkere, men jaja

Men a:hover ble lysere

Nei, da blir det mere kurs. Men nå har jeg en klarere formening om personkortmalen.

- - -

class="eksempel" refereres til i css med .eksempel

id="eksempel" referers til i css med #eksempel

class er ment for å brukes om igjen.

id er ment for unik bruk? Hva med hierarki?

Skal fortsette på text shadow, men da var det bra for i aften. Nå: kanskje litt fjas?

Endret 16. september 2022 av Zenobia

[Zenobia]

Zenobia skrev (På 7.9.2022 den 21.54):

Takk! Da prøver jeg det ved neste synkronisering

Utført (Altså skrive rett i Message-feltet før vscode synkroniseres med github). Det sparte meg et trinn i prosessen, men jeg lurer på om jeg kan effektivisere ytterligere. Stod noe om Ctrl + Enter også, men det prøvde jeg ikke.

- - -

Jeg er litt i tenkeboksen.

Merker at jeg blir litt demotivert av grunnkurset, fordi 1) Det føles som om jeg lærer ting jeg skal avlæres senere. 2) Jeg vil kode sider til eget nettsted, ikke eksemplene i kurset. Men det kan jeg kanskje faktisk få til å kombinere ...

Men da må jeg bestemme meg for hvilken side jeg skal lage først, og så tegne den.

Og så kommer jeg på at det er noen sider som allerede er nesten ferdige, men de ser ikke bra ut på nettbrett og mobil. Da burde jeg egentlig fortsette på 'Conquering responsive layouts'  ...

En liten mental runddans, mao.

Men så ser jeg at det bare gjenstår to leksjoner av modul 4, så i dag går jeg ihvertfall for grunnkurset.

Titter på manus-sidene etterpå ...

- - -

text-shadow 0 0 20px farve -> hvis bakgrunn og tekstfarve mangler kontrast, bruk skygge?

Må testes ...

  Jupp! Tøft

 

background-image: url("adresse"); formatet kan være webp (eller gif?) for animerte bilder, f.eks lastet ned fra giphy? Vil det gjøre lasting saaaaaktere på mobil? For store filer? webp er et mindre format. Kan jeg konvertere fra gif til webp?

background-size: cover;

google-fonts, importere stilig skrifttype.

- - -

Da ser jeg videre på KP-kurset, og håper jeg plukker opp noen tips til å få denne siden:

https://tronora.github.io/001-prolog.html til å se bra ut på mobil og nettbrett.

40% vidde på et midtstilt tekstfelt ser stilig ut på PC, men 40% av en smal skjerm funker ikke.

Jeg håper å løse det uten @media, trur eg.

Eller ... er det så enkelt at jeg kan bare kan bestemme container-width ... hm

Utseendet er formelen til alle manus-sidene. Ulikt bakgrunnsbilde for hver sending (tidl. kalt episode).

Trooor det kanskje gikk med én @media (max-width 768px) og bare endre width: 70%

Ser vel for alvor (på eget nettbrett og egen mobil) når jeg har synket med github, men Firefox' virtuelle fremstilling av disse ser lovende ut.

Blokkjustere tekst:

Lager en klasse jeg kaller blokk

<p class="blokk">Manuset her tekst ....</p>

I styles.css:

.blokk {
text-align: justify;
text-justify: inter-word;
}

Jepp, jeg brukte søkemotor. Havner ofte på w3schools

Såeh, blir det spennende hvordan orddelingen blir på nettbrett og mobil ...

På nettbrettet mitt ser (bakgrunns)bildet (img src osv) ut til å komme inni containeren   Er det noe apple-greier? Ser jo grei ut i FF-virtuell-nettbrett.

 

 

Endret 15. september 2022 av Zenobia

[Zenobia]

Forsøker samme oppskrift på engelsk-sending som på norsk. Har alliert meg med nettbrett-eier, for å utelukke at det er mitt nettbrett som er sært.

__________

Oppdatering: Det er ikke mitt nettbrett som er rart; det ser heller ikke bra ut på andres nettbrett. Bildet som ligger bak, legger seg i en stripe bak teksten. Skal fikses.
__________

Mulig jeg blokkjusterer prologen også. Det blir muligens en smakssak, og haster ikke.

Husk! Engelsk Ooops-side. Samme oppskrift som norsk, bare ny tekst. Trur eg. Eller skal jeg eksperimentere med en webp?   Bare for øvelsens skyld.   Nei, ikke nå. Ting tar MYE lengre tid enn antatt, og jeg SKAL gå ferdig krasj-kurset. Modul 5 i dag?

Lett å bli lite systematisk og strukturert.

- - -

Da fant jeg ezgif.com som kan konvertere gif til webp. Trur eg. For jeg prøvde, og filen kom nedlastet som et edge html dokument ? Jeg gjorde det for å se hvor lite det potensielle animerte bakgrunnsbildet kunne bli. 6,5 MB gif -> 1,6 MB webp. Tror det blir for stort for mobil.

NÅ blir det engelsk.

Åkei, jeg måtte bare sjekke nedlastet fil, så jeg åpnet den. Animeres fint i Edge, og filendelsen der er webp, så da er vel alt såre vel.

- - -

Sånn, da ligger engelsk 002 ute.

Ja, jeg vet at tabellen er helt ute å sykle.

Det blir vel neste, da. Men ikke i dag. Nå blir det krasj-kurs, modul 5.

Endret 16. september 2022 av Zenobia

[Zenobia]

Har akkurat startet på modul 5, og velger å kode alt i vscode. Lage min side, tilpasset planeter, kanskje? Fant et uferdig html-dokument jeg kan bruke.

Live-server i vscode må lukkes og åpnes på nytt igjen når jeg vil vise en annen fil?

- - -

Såeh, da må jeg jo tenke og tegne litt   (fordi jeg kun har tenkt PC-skjerm fra før ... )

*sjekker gamle notater*

Fikk bruk for cssgradient.io igjen. Merker at jeg er varmere i den grønne kodetrøya. Funket helt fint!

Blir faktaside om planeten Sagior.

*blar tilbake i tråden for å se hva jeg har tenkt omkring filter* Tror den skal være uten ...

Men så kom jeg på at jeg kan bruke nettsøk: Sagior site:forum.kvinneguiden.no, og svaret kom kontant! Treff på side 17 i denne tråden.

Filter som gir litt lillaskjær, delvis blandet med gråblå

Jepp, her ble jeg sittende å blande

filter: hue-rotate (ndeg) [=antall grader i en farvesirkel jeg vil forskyve farven fra originalbildet)
mix-blend-mode: color-burn eller noe annet

MAAAAAAAT!

Jeg har fått den til å bli rosa, men LILLA??   Fra blågrønn til grålilla.

Mener å huske at jeg husket å bare bruke liten bokstav i filnavnet iallfall. Fremgang  

Nei, nå spise

- - -

Tror jeg bare lar bildet være. Farvefiksingen kan komme etter hvert. Tilbake til kurset

Multiple element selector i css! F.eks h2, h3, h4, p

Ikke . foran, og komma mellom.

- - -

Men der kommer det en leksjon som heter "We have a problem that flexbox can fix". Trooor det blir pianopause nå.

OG jeg må finne (på) saker å skrive om Sagior.

Og DER ble det helg, kjenner jeg!

Endret 16. september 2022 av Zenobia

[Zenobia]

ABC - Always Be Coding

https://www.100daysofcode.com/

 

Men muligens en modifisert en.

Anyways, med tilgang til DALL-E, kan Sagiorbildet komme derfra? Bedre, men prøver videre.

Nope, det ble bare fjernere og fjernere fra det jeg tenkte.

- - -

BEM =Block Element Modifyer

 

Endret 17. september 2022 av Zenobia

[Zenobia]

Skynder meg inn hit og noterer codesandbox.io. Lurer på hva det er.

*poff!*

[Zenobia]

Modul 5 fortsetter, leksjon 6 av 23:

display: flex
flex-direction: column -> Vil tvinge alle elementene inn i samme kolonne
align-items: center

flex-direction standardverdi: row
justify-content kontrollerer bortover
align-items kontrollerer nedover. Standardverdi: stretch!!

Sette margin: 0 på elementer under, så det ikke forstyrrer det over.

mix-blend-mode: color-dodge på Ekstasia - HUSK!!!

Løse stjernebakgrunn til Sagior i Paint? Stjernebakgrunn + Sagior i forgrunnen.

Med bildet fra DALL-E 2 ble Sagior-farvene bra med filter: grayscale (30%) hue-rotate (30deg); MEN! Bildet er firkantet, og selv om jeg setter border-radius til 50% (rund), kommer en sort ring rundt. Jeg vil ha Sagior foran dette bildet:

d

Kanskje jeg rett og slett skal sette det som bakgrunnsbilde. Jeg som hadde gradient og all ting.

Men, tilbake til kurset!

Gradient-bakgrunnen er altfor ... blå.

FRYYYYYYYD! Nei, det er ikke ferdig, men det er fremgang! Slutter mens leken er god.

Det er kurset. Jeg skal kurset. Jadamasa. Kurset nå.

- - -

Men hvis jeg sletter de sorte sidene av planetbildet i Paint ... men ikke nå. Kurset nå.
For da blir border-radius 50% helt kliss oppi planeten? -> Rund planet uten sort kant rundt.

Nå ser ikke spesielt responsivt ut. Jeg må bruke % istedenfor px, og kanskje en @media.

Nå hører jeg Vera rope på meg fra NRK. Takk for i aften,

 

Endret 19. september 2022 av Zenobia

[Zenobia]

Begynner på leksjon 12 av 23.

Pseudo-klasse, f.eks div:hover {stil-info} vil dominere .div {stilinfo}

Eller .klassenavn {stil her}

.klassenavn:hover {stil når peker er over}

Hoppet litt til w3schools for utdypning:

Notater om stil-hierarki: FIRE hovednivåer, men !important-regelen utklasser alle.

Element og pseudoelement, klasse, pseudoklasse, ID og inline. Men så kan de blandes.

Selektor	Verdi	Beregnet
p	1	1
p.test	11	1 + 10
p#demo	101	1 + 100
<p style="color: pink;">	1000	1000
#demo	100	100
.test	10	10
p.test1.test2	21	1 + 10 + 10
#navbar p#demo	201	100 + 1 + 100
*	0	0 (the universal selector is ignored)

Stilen til selektoren med høyest verdi sammenlagt vil velges!

- - -

linear-gradient(farve,farve) for eksempel. Flere her: Om gradienter w3schools

- - -

Fra kurs-sammendrag, modul 5: HUSK! Jeg kan velge flere selektorer og gi de samme stil, f.eks tekstskygge. Neste blir sjette og siste modul. En annen dag.

 

Endret 20. september 2022 av Zenobia

[proghodet]

2 hours ago, Zenobia said:

Begynner på leksjon 12 av 23.

Pseudo-klasse, f.eks div:hover {stil-info} vil dominere .div {stilinfo}

Eller .klassenavn {stil her}

.klassenavn:hover {stil når peker er over}

Hoppet litt til w3schools for utdypning:

Notater om stil-hierarki: FIRE hovednivåer, men !important-regelen utklasser alle.

Element og pseudoelement, klasse, pseudoklasse, ID og inline. Men så kan de blandes.

Selektor	Verdi	Beregnet
p	1	1
p.test	11	1 + 10
p#demo	101	1 + 100
<p style="color: pink;">	1000	1000
#demo	100	100
.test	10	10
p.test1.test2	21	1 + 10 + 10
#navbar p#demo	201	100 + 1 + 100
*	0	0 (the universal selector is ignored)

Stilen til selektoren med høyest verdi sammenlagt vil velges!

- - -

linear-gradient(farve,farve) for eksempel. Flere her: Om gradienter w3schools

- - -

Fra kurs-sammendrag, modul 5: HUSK! Jeg kan velge flere selektorer og gi de samme stil, f.eks tekstskygge. Neste blir sjette og siste modul. En annen dag.

 

CSS-spesifisitet er noe dritt 😄

Jeg bruker klasser på alt, så er det litt enklere å forholde seg til.. Bruker lite tag-selectorer, styrer helt unna ID'er i css, og bruker !important kun i helt spesielle tilfeller hvor jeg ikke kan øke spesifisitet på andre måter (f.eks kode som blir lagt inn av eksterne script som har medfølgende inline-styles)

[Zenobia]

proghodet skrev (1 minutt siden):

CSS-spesifisitet er noe dritt 😄

Jeg bruker klasser på alt, så er det litt enklere å forholde seg til.. Bruker lite tag-selectorer, styrer helt unna ID'er i css, og bruker !important kun i helt spesielle tilfeller hvor jeg ikke kan øke spesifisitet på andre måter (f.eks kode som blir lagt inn av eksterne script som har medfølgende inline-styles)

  Takk for kommentar! Noteres 👍

Spørsmål om vscode/Live server: Når jeg skal skifte fra ett HTML-dokument til et annet, må jeg avslutte Live server og så starte den opp igjen for at visningen skal skifte? Kan jeg jobbe med to HTML-dokument samtidig (der begge vises i nettleser/Live server)? Jeg så litt på Live server-innstillingene, og pilte så ut igjen uten å røre noe.

[proghodet]

1 minutt siden, Zenobia said:

Spørsmål om vscode/Live server: Når jeg skal skifte fra ett HTML-dokument til et annet, må jeg avslutte Live server og så starte den opp igjen for at visningen skal skifte? Kan jeg jobbe med to HTML-dokument samtidig (der begge vises i nettleser/Live server)? Jeg så litt på Live server-innstillingene, og pilte så ut igjen uten å røre noe.

Jeg bruker litt andre verktøy for å oppnå det samme som du gjøre med Live Server, så det vet jeg faktisk ikke 🤔

Hvis du går til Extensions (ikon med 3+1 bokser, i den vertikale menyen til venstre i vscode), og så søker på Live Server, så kanskje det er noe nyttig der?

[Zenobia]

proghodet skrev (2 minutter siden):

Jeg bruker litt andre verktøy for å oppnå det samme som du gjøre med Live Server, så det vet jeg faktisk ikke 🤔

Hvis du går til Extensions (ikon med 3+1 bokser, i den vertikale menyen til venstre i vscode), og så søker på Live Server, så kanskje det er noe nyttig der?

Bare at det er installert, men 0K, jeg finner det ut. Hyggelig at du titter innom!

[Zenobia]

Har tenkt på en bakgrunn til kosmografi-siden, men en .webp på 1,6 er for tung for en mobil? Hva slags størrelse bør jeg holde meg under for at siden ikke skal lastes for tregt?

[proghodet]

Just now, Zenobia said:

Har tenkt på en bakgrunn til kosmografi-siden, men en .webp på 1,6 er for tung for en mobil? Hva slags størrelse bør jeg holde meg under for at siden ikke skal lastes for tregt?

Dette var en animasjon? gif-aktig? Isåfall synes jeg 1.6mb er innafor. Videoer som vises i toppen av nettsteder kan fort være ~20mb. Men man vil selvsagt absolutt helst holdet det så smått som mulig, og enkeltbilder kan glatt komprimeres til < 1mb, selvom de kan ha en høy oppløsning. Og gå alltid for webp, jpeg eller svg, med mindre du har gode grunner til å velge png eller andre format

[Zenobia]

Jepp, en animasjon jeg lastet ned som gif, fant et nettsted som konverterte, lastet opp, konverterte og lastet ned igjen! Men siden den var 1,6MB, var jeg i tvil. Takk for svar!

Synes jeg har blitt flink  

Nytt spørsmål: Av og til funker emmet i vscode (Med ! og så kommer hele røkla), men av og til ikke. Noen anelse om hva jeg gjør feil??? Har ikke sett noe systematikk i når det funker og ikke.

Og DER fant jeg ut av Live server-problematikken. Velg fil, høyreklikk og velg 'Open with Live server'.

  Så enkelt at mor til slutt klarte å finne løsningen, haha.

Endret 20. september 2022 av Zenobia

[proghodet]

Just now, Zenobia said:

Nytt spørsmål: Av og til funker emmet i vscode (Med ! og så kommer hele røkla), men av og til ikke. Noen anelse om hva jeg gjør feil??? Har ikke sett noe systematikk i når det funker og ikke.

Jeg bruker ikke emmet allverden, men lignende ting skjer med andre autocomplete-funksjoner i vscode for meg også innimellom. Aner ikke hvorfor, dessverre!

[Zenobia]

proghodet skrev (5 minutter siden):

Jeg bruker ikke emmet allverden, men lignende ting skjer med andre autocomplete-funksjoner i vscode for meg også innimellom. Aner ikke hvorfor, dessverre!

Åkei, men da er det ikke meg, iallfall   Godt å vite det.

Ang. tronora.github.io finnes jo også tronora.githug.io - main. Kan ikke den siste slettes/ryddes eller noe? Eller er den tom? Jeg har ikke turt å gå inn i den

Altså, jeg har et repository for mye på github. Trur eg.

Endret 20. september 2022 av Zenobia