Å bygge et nettsted med HTML, CSS og Javascript

[proghodet]

1 minutt siden, Zenobia said:

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

-main kan fjernes, ja Det var vel noe vi satt opp i forbindelse med å få git opp og gå på maskinen din. Du må inn på github, klikke på repoet, velge settings, scrolle helt til bunn hvor du finner (passende nok) "Danger Zone". Trykk på "delete this repository" så får du opp en modalboks hvor du må skrive inn navnet på repo'et før du kan trykke delete på ordentlig

[Zenobia]

proghodet skrev (Akkurat nå):

-main kan fjernes, ja Det var vel noe vi satt opp i forbindelse med å få git opp og gå på maskinen din. Du må inn på github, klikke på repoet, velge settings, scrolle helt til bunn hvor du finner (passende nok) "Danger Zone". Trykk på "delete this repository" så får du opp en modalboks hvor du må skrive inn navnet på repo'et før du kan trykke delete på ordentlig

 

Da sletter jeg ikke noe uten å mene det, iallfall. Jeg skal se på det med tid og stunder, men jeg merker at det ikke haster å bevege meg ned i faresonen.

Takk for at du hadde tid til å svare på noen spørsmål

Jeg veksler ganske usystematisk mellom kurs og nettsted, merker jeg. Det skal jo være moro, dette her også   Mange distraksjoner å dette ned i. Jeg synes iallfall at jeg har fått de verktøyene jeg trenger nogenlunde på plass. Blender har jeg satt på venteliste; jeg har en ASUS-PC i huset jeg skal sjekke grafikk-kortet til for å se om det strekker til å få kjørt blender-render ordentlig. Var oppe senest I DAG, men tror du jeg husket det??!

[proghodet]

1 minutt siden, Zenobia said:

Jeg veksler ganske usystematisk mellom kurs og nettsted, merker jeg. Det skal jo være moro, dette her også  

Det er faktisk viktigere enn noe annet! Hvis ikke det er moro lenger er det på tide å ta en god pause unna pc'en i frisk luft 😁
 

2 minutter siden, Zenobia said:

Blender har jeg satt på venteliste; jeg har en ASUS-PC i huset jeg skal sjekke grafikk-kortet til for å se om det strekker til å få kjørt blender-render ordentlig. Var oppe senest I DAG, men tror du jeg husket det??!

Næ! 🤭

[Zenobia]

proghodet skrev (2 minutter siden):

Det er faktisk viktigere enn noe annet! Hvis ikke det er moro lenger er det på tide å ta en god pause unna pc'en i frisk luft 😁
 

Næ! 🤭

Det som har vært artig med krasj-kurset, er at mye var kjent. Men jeg får mer sammenheng med gjennomgangen. Og det har absolutt vært greit å øve på (selv om jeg øvde i vscode på endel, og ikke på selve scrimmen)

Neste kurs jeg tar, heter 'Space Tourism', og da er KP selv lærer. Er forhåpentligvis midt i blinken for mitt formål.

Nå blir det en meget sen middag

Ha en nydelig aften videre   og på gjensyn!

[Zenobia]

Starter på modul 6.

Kommentarer underveis:

0K, man skal lage en hjemby-hjemmeside. Da benytter jeg anledningen til å fyre opp vscode og lage en planetside

Scrimba-kurset henviser til Figma.

Har tidligere registrert meg på Figma (design-verktøy). Ser på youtube: Nei, den første var jo bare å tolke et ferdig design, ikke å lage noe selv.

Prøver denne: Med KP.

Er nok hakket mer avansert enn penn og papir.

Skal ikke se denne akkurat nå, over til vscode med det jeg allerede har. Men kommer tilbake til Figma.

Jupp, ble litt Figma allikevel ... har fått vekk den sorte borden rundt Sagior + lagt på farvefilter og eksportert bildet og skiftet det ut.

Så var det å få teksten inni "hero"-bildet ... check. Men farvene må endres. Og jeg må sjekke at bakgrunnsbildet faktisk befinner seg i Melkeveien. For den fiktive planeten Sagior er i vår galakse. Ikke sikker på om krabbetåken faktisk er det

- - -

Joa, krabbetåken er omlag 6500 lysår unna, men alle andre bilder jeg finner av krabbetåken ser helt annerledes ut, så hva er det jeg egentlig har bilde av?? Jeg har ikke endret tittelen på bildet, og det heter crabhubble??! Hmpf.

Sist jeg foretok et omvendt bildesøk, havnet jeg på en side som ga meg beskjed om at jeg har virus.   Venter litt, trur eg.

Noen som leser, som vet hvor i verdensrommet dette er?

Minner meg om Butterfly nebula ... sjekker ...

- - -

Det er ikke Krabbetåken, men The Southern Crab nebula. Så unøyaktig som several thousand lightyears unna Jorden, sier NASA. Passer jo fint 👍

Og med det blir det takk for i dag herfra

Endret 22. september 2022 av Zenobia

[Zenobia]

Kaster rundt meg med div og klasser.

Ser KP "Learn flexbox the easy way" (side 15 i denne tråden) enda en gang ...

Men nå er det MAT

- - -

Ikke rart det ikke funker, når jeg skriver klasse istedenfor class!    Sikkert greit med litt mat, ja.

- - -

Prøvde meg bittelitt med lorem ipsum-tekst ... Det ble for mye Møllers tran, og det var ingenting å få 'space-around'  

Gap hadde jeg helt glemt! Nå ser ting bedre ut. Display: block INNI en flex-container?! Okeida, om jeg får til å sentrere bildene.

Ny pause! Oppgave etterpå: Lage siste flex-forelderen, for i den familien skal det bare være to barn.

Huske at flex bare bryr seg om barn, ikke barnebarn 👍

Jeg er ikke i mål med designet, men en ny flex-familie har sett dagens lys. Hvorfor det ene barnet er mye større enn det andre, blir et mysterium jeg løser en annen aften. Skal uansett ha andre bilder der.

Endret 23. september 2022 av Zenobia

[Zenobia]

Tar en avstikker fra kursveien i aften. Skal finlese kode i styles, og forsøke å finne ut hvorfor bakgrunnen på manussidene blir så smal på nettbrett. Ser ut til å være fanget av tekstcontaineren    Ser jo fin ut på PC og mobil. Hva er det Safari driver med?

@proghodet

- - -

Ser på litt kurs nå (KP, Building a space travel web site), noe om nullstilling.

*,

i CSS-filen nullstiller alt, MEN IKKE pseudo-elementer.

Han begynner derfor css med:

*,
*::before,
*::after {
box-sizing: border-box;
}

samt

body,
h1,
h2,
h3,
h4,
h5,
p,
figure,
picture {
margin: 0;
}

- - -

Skrifttype smitter over utover nettsidene, men ikke her:

/* make form elements easier to work with */

input,button, textarea, select {font: inherit;}
Derfor spesifiserer han inherit her

Skal ikke begynne på dette kurset ennå, men ser delen der han bygger opp CSS-filen.

Endret 26. september 2022 av Zenobia

[Zenobia]

Ble så rart å skrive etter siste innliming, at jeg begynner på nytt innlegg. Kursmodul: The design system. Leksjon: Creating a general reset.

- - -

Jeg VET at jeg med tid og stunder skal inkorporere alle stilfilene i én. Nå har jeg FEM

- - -

I morgen blir det tilbake til responsive design-kurset.

 

Endret 26. september 2022 av Zenobia

[proghodet]

3 hours ago, Zenobia said:

Tar en avstikker fra kursveien i aften. Skal finlese kode i styles, og forsøke å finne ut hvorfor bakgrunnen på manussidene blir så smal på nettbrett. Ser ut til å være fanget av tekstcontaineren    Ser jo fin ut på PC og mobil. Hva er det Safari driver med?

Skal sjekke ut i morgen! Kan du legge igjen en URL til en manusside til meg?

[Zenobia]

proghodet skrev (1 time siden):

Skal sjekke ut i morgen! Kan du legge igjen en URL til en manusside til meg?

https://tronora.github.io/001-prolog.html

Tusen takk!

[proghodet]

6 hours ago, Zenobia said:

https://tronora.github.io/001-prolog.html

Tusen takk!

To ting:

• Prøv å legge til position: relative, og top: 0; left; 0; på .container-klassen - dette vil fikse hovedproblemet i Safari.
• På samme klasse er det satt 40% width, og det blir nok i smaleste laget på iPad. Kanskje la den være en større prosent på mobil / ipad, og 40% fra desktop størrelse?

[Zenobia]

proghodet skrev (8 timer siden):

To ting:

• Prøv å legge til position: relative, og top: 0; left; 0; på .container-klassen - dette vil fikse hovedproblemet i Safari.
• På samme klasse er det satt 40% width, og det blir nok i smaleste laget på iPad. Kanskje la den være en større prosent på mobil / ipad, og 40% fra desktop størrelse?

Skal prøve dette 👍

*kommer tilbake etter synk med Github ...*

Takk for at du vil hjelpe  

Med koden forsvant bakgrunnsbildet helt   Dvs, jeg kan tvinge (kun) det frem når jeg "drar" øverst eller til slutt. Sånn var det før også, men da var bildet i tillegg skvist inn i containeren bak teksten. Det er som om bildet ligger helt underst, både før og etter tekstcontaineren.

Det ser kanskje smalt ut med 40% tekstsone på horisontal nettbrettvisning (i hvert fall på bildet jeg sendte), men med  bakgrunnsbildet tror jeg det blir bra. Tar uansett én endring ad gangen.

Annet spørsmål: Da du lagde forsiden, satte du box-sizing til border-box? Eller er det content-box? Har du noen preferanse?

Skjønner du blir opptatt litt fremover til > kl20. Jeg er her utover

Endret 27. september 2022 av Zenobia

[Zenobia]

Ja, jeg skulle ta mer responsiv-kurs i dag, men suller med flex-wrap, og hvorfor den virker så snålt på Sagior-siden. Prøver meg i codepen ...

- - -

Forenklet og eksperimenterte mens jeg gløttet bort på w3schools-koden.

Nå har jeg display: flex;
flex-wrap: wrap;

div i FLENG!!!

Og max-width: 360px; (På hver av flex-barna, så de er tre på linje på PC og pent nedover på mobil. Nettbrett? Wrap blir hmmm ... to øverst og én i midten under.)

Siden er IKKE ferdig, men jeg lærer iallfall mer om hvor mange div-er man må ha for å få flex / wrap til å funke som jeg vil. Satte omsider klassen på rette element.

Jeg synkroniserer Sagior med Github og ser om siden er like responsiv som Firefox påstår ...

- - -

Må lære mer om bakgrunnsbilder også, og hvordan de kan "stå fast", men vise mindre av seg på mindre skjermer. Overflow?

Men da kaster jeg inn håndkleet for i aften. Jeg ser at codepen.io kan være fiffig når jeg ikke skjønner hva jeg har gjort feil

Endret 27. september 2022 av Zenobia

[Zenobia]

Ja, her skulle det vært noe innsats, men det ble krim og likør istedenfor

[Zenobia]

Nå har jeg iallfall åpnet vscode

Plan: lage en ny .css-fil som skal gjelde for HELE nettstedet. Etter mønster av Kevin Powells scrimba-kurs: "Build a space travel website"

1. pri er manus-sidene.

1. modul: The design system
Leksjon 3: Creating a general reset

Akkurat. Så KP lenker til en annen fyr som har en enda bedre nullstilling.

https://piccalil.li/blog/a-modern-css-reset/

Såeh ... da blir det å bruke Andy Bells oppskrift for nullstilling av css (reset).

Jeg har /* kommentar*/ på line-height foreløpig. Andy Bell foreslår 1.5. Jeg ser det an.

Likedan, text-decoration-skip-ink (mest aktuelt for kinesisk osv), forandret jeg til text-decoration: none mht uklassifiserte a. Jeg vil ikke ha noen understreking for å vise at dette er en lenke noen steder på dette nettstedet. Trur eg.

Det var det jeg rakk nå.

Neste leksjon: Utility classes

Endret 5. oktober 2022 av Zenobia

[Zenobia]

Utility class. (Enkelt)funksjonsklasse. General utility classes. Generelle funksjonsklasser.

Velger (selector). Egenskap (property). Verdi (value).

F. eks body {font-size: 14px}

Klasser gis navn som innledes med punktum, f.eks

.flex {display: flex;}

Denne klassen kan settes på velgere. Den gjør én ting; den er en utility class.

Jeg har erfart at å sette ugjennomtenkte navn på klassene, gir hodebry

Det blir gjettekonkurranse: på hvilket element brukte jeg denne klassen? (hvis jeg står i css-fila), og hva gjør den? (hvis jeg står i html-fila)

 

 

 

 

Endret 6. oktober 2022 av Zenobia

[Zenobia]

Det ble noe merkelig da jeg skulle redigere forrige innlegg, så jeg får bare starte på et nytt ett.

Neste leksjon var reklame for Scrimbas Frontend developer career path. (Plattformen dette gratiskurset er på, heter Scrimba, og minner om et slags interaktiv vscode i redigerbart videoformat), så da har jeg kommet til leksjon 6:

Using our general utility classes.

Jeg tenkte riktig i øvelsen, men syntaksen sitter ikke ennå. Skulle ha flere klasser på samme velger, men satte anførselstegn på begge: class="container" "flex".

Riktig syntaks er class="container flex". Jeg er visst ikke helt ut av den grønne skjorta, nei.

- - -

Ny leksjon: Color utility classes part 1

Kevin Powell anbefaler å jobbe med RGB eller HSL. Jeg har stort sett holdt meg til #nnnnnn (heksadesimal farveverdi).

RGB og HSL har disse fordelene: lettere å manipulere alfa-verdi. Og så kommer han tilbake til noen triks.

Jeg bruker mine egne verdier.

Han setter custom properties i

:root

Ovenfor reset?!! Hmpf.

Neste leksjon heter Color challenge, så da blir det takk for i dag.

Endret 6. oktober 2022 av Zenobia

[Zenobia]

Det er fredag allerede!

I dag HUSKET jeg faktisk å sjekke grafikk-kortet på ASUS-PC-en, for å se om det hjelper å installere Blender konstruksjonsprogram på den. NVIDIA Geforce GTX 850m stod det på klistremerket.

Tilbake til kurset. Leksjon 8.

Kom ikke så langt. Jeg hadde prøvd meg på

<link rel="stilark" href="stil2.css">

Det er faktisk helt vesentlig at det står stylesheet!!

<link rel="stylesheet" href osv> og plutselig snakket css og html sammen

Neste leksjon (9) heter Color utility classes part 2

 

Endret 7. oktober 2022 av Zenobia

[Zenobia]

Konverterer mine farver fra hex til rgb og hsl. Lagrer dem i en custom property OG kun verdiene(!) i en utility class. Hvorfor?

Enklere å justere alfaverdien. Pluss andre ting KP skal komme tilbake til.

Heksadesimal: #9fd3e8 lyseblå
RGB: 159, 211, 232  (a 100) = verdiene for rød, grønn, blå (a = aksent?)
HSL: 197   61%    76% = Hue (farvetone), Saturation, Lightness. Første verdi går fra 0-360°; S og L går til 100.

Tar vare på denne: Helt enkelt farvekart + konverter: https://www.peko-step.com/en/tool/colorchart_en.html

Heksadesimal: #0e496a mørkeblå
HSL: 201 76% 23%

Heksadesimal: #1f2527 mørkegrå
HSL: 195 11% 13%

Jeg fortsetter å utarbeide stil2.css og kopierer inn det som passer fra kurset..

Neste leksjon er typografi. Men nå er det helg!

- - -

  Jeg hadde glemt lysegrå:

#364043 blir til
HSL 193 19% 26%

Endret 9. oktober 2022 av Zenobia

[Zenobia]

Fant en nyttig omregningsside: https://nekocalc.com/px-to-rem-converter

Ser på typografi-oppsett nå. Joa, det er helg.

Såeh, da henger jeg en stund på google fonts ... Den jeg bruker på nettstedet nå, er monospace(??) arvet fra WordPress, trur eg. Eller VT323, men den ser ikke pen ut når den blir større.