Å bygge et nettsted med HTML, CSS og Javascript

[proghodet]

18 minutter siden, Zenobia said:

Er animasjon noe man kan få til med javascript, forresten?

*fyller opp romskips-tabellen mens jeg funderer over utseendet*

Ja, javascript kan absolutt brukes til det Det gjør at man kan bruke logikk (hvis dette, så dette) og litt mer fancy greier. Jeg grabber det hvis ikke jeg får til å løse det jeg vil med CSS.

CSS Transition > CSS Animation > JavaScript

[Zenobia]

proghodet skrev (1 minutt siden):

Jeg gir deg flere svar, så ser du hvem som stemmer, hvis noen 🤣

1. Å ja, du tenker selvsagt på rekkefølgen i stilarket?

  Vis skjult innhold

Jeg pleier å legge de mest overordnede tingene øverst, og så mer konkret jo lenger ned jeg kommer. Siden det er "cascading stylesheets", så vil det som står i toppen bli overskrivet av det du har lenger ned:

<p class="minKlasse klasseTil">Dette er en tekst</p>

.minKlasse {
  color: blue;
}

.klasseTil {
  color: red;
}

I dette tilfellet vil teksten bli rød, fordi klasseTil blir definert etter minKlasse. Det kommer inn en annen ting som roter til det systemet, som heter spesifisitet. Jo mer spesifikk en selector (.klasseTil) er, jo mer blir den prioritert:

p.minKlasse {
  color: blue
}

.klasseTil {
  color: red;
}

så i dette eksemplet blir teksten heller blå, fordi tagselector (p) + klasseselector (.minKlasse)  har større "spesifisitet" enn bare en klasseselector (.klasseTil). Forvirret enda? Supert! Det er litt mye greier, og greit å være klar over at det er sånn det fungerer i bakkant, men det er ikke noe du trenger å forholde deg til i særlig grad enda, håper jeg. Dette er den delen av css som kan være litt tricky å få hodet rundt, hvertfall i starten.

2. Å ja, du tenker naturligvis på rekkefølgen av regler i et css-regelsett?

  Vis skjult innhold

La oss bare ta et eksempel:

.minKlasse {
  background-color: blue;
  color: red;
  font-size: 18px;
  border-radius: 15px;
}

Saken her, er at rekkefølgen på reglene ikke spiller noen som helst rolle, med mindre du har to like regler. Da vil, i kaskadens ekte natur, den nederste overskrive den øverste:

.minKlasse {
  background-color: blue; /* <== Denne blir ignorert */
  color: red;
  font-size: 18px;
  border-radius: 15px;
  background-color: red; /* <== Denne blir gjeldende */
}

3. Å ja, du tenker selvfølgelig på hvorfor man setter flex på ul, og ikke på hver link, for eksempel?

  Vis skjult innhold

Når vi snakker layout med flexbox og grid, så er de avhengige av et element som omkranser sine underelementer. Det blir gjerne kalt et parent-element, mens de som ligger inni kalles child-elements.

Det kan illustreres med en ul og sine li-elementer:
<ul class="parent">
  <li class="child">Child 1</li>
  <li class="child">Child 2</li>
  <li class="child">Child 3</li>
</ul>

men det trenger på ingen måte å være ul med li. Det kan like gjerne bare være div elementer alt sammen, eller en div på utsida med anchors inni.

På css-sida vil man da stort sett legge hovedreglene på parent-elementet, og gjøre justeringer på child-elementene ved behov:

.parent {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  list-style: none;
  height: 100px;
}

.child:nth-child(2) {
  align-self: flex-start;  /* I'm special */
}

Du kan alltids legge det inn i codepen for å se hva resultatet blir

Eh, nei Jeg mener på skjermen, altså hvor innholdet kommer. Kanskje det ikke har noe med anker å gjøre i det hele tatt.

Hvorfor dukket ul (eller blokk-elementet?) der den/det dukket opp?   Hvilke usynlige regler er det som bestemmer at en ul kan komme ved siden av h1??? Jeg var sikker på at den ville komme under, og så gjorde den ikke det!

[Zenobia]

Uansett, den redegjørelsen var jo nyttig – men vanskelig. Enda verre på engelsk. Så fint å ha på norsk. Skal nok finlese (og teste ut) hvordan det er. Og finne kaskadens sanne natur

Jeg har heller ikke grepet på flex, div og parent/child ennå. Eller grid. Men jeg skal se den videoen i morgen, og forhåpentligvis bli klokere

 

[proghodet]

Just now, Zenobia said:

Eh, nei Jeg mener på skjermen, altså hvor innholdet kommer. Kanskje det ikke har noe med anker å gjøre i det hele tatt.

Hvorfor dukket ul (eller blokk-elementet?) der den/det dukket opp?   Hvilke usynlige regler er det som bestemmer at en ul kan komme ved siden av h1??? Jeg var sikker på at den ville komme under, og så gjorde den ikke det!

Æsj, hadde håpet på nominasjon for "post of the year award", men da røyk den. Håper likevel det var nyttig info!

Det er to ting som spiller inn: du la en header rundt begge elementene, og satte display: flex på parent-elementet (spoiler 3, for dere som leste posten 😂). display: flex tar alle elementene som er inni seg (h1 og ul) og setter de på rad. Man kan velge at den heller skal legge de under seg (slik som det så ut før med tittel over, linker under), ved å bruke flex-direction: column.

[proghodet]

2 minutter siden, Zenobia said:

Men jeg skal se den videoen i morgen, og forhåpentligvis bli klokere

Jeg la jo med en link til flexbox (css-tricks), men om du faller for Kevins nerdete sjarm, så kanskje en video på flexbox også er å foretrekke:

 

Endret 4. juni 2022 av proghodet

[Zenobia]

proghodet skrev (1 minutt siden):

Æsj, hadde håpet på nominasjon for "post of the year award", men da røyk den. Håper likevel det var nyttig info!

Det er to ting som spiller inn: du la en header rundt begge elementene, og satte display: flex på parent-elementet (spoiler 3, for dere som leste posten 😂). display: flex tar alle elementene som er inni seg (h1 og ul) og setter de på rad. Man kan velge at den heller skal legge de under seg (slik som det så ut før med tittel over, linker under), ved å bruke flex-direction: column.

Jeg leste inni alle spoilerne (hater det ordet), men har ikke taket på flex, så det ga ikke mening. Sånn i fullan farta. (Og ja, det var svært nyttig 👍 Til det uthevede: Aha!

[proghodet]

1 minutt siden, Zenobia said:

spoilerne (hater det ordet)

"hemmeligstemplet informasjon"

[Zenobia]

proghodet skrev (Akkurat nå):

"hemmeligstemplet informasjon"

Den må få en ekte ROFL 🤣

proghodet skrev (13 minutter siden):

Ja, javascript kan absolutt brukes til det Det gjør at man kan bruke logikk (hvis dette, så dette) og litt mer fancy greier. Jeg grabber det hvis ikke jeg får til å løse det jeg vil med CSS.

CSS Transition > CSS Animation > JavaScript

Takk for den ^

Og leste du post #283?   Jeg er takknemlig for post of the year, men innholdet i spoiler 3 ga ikke mening fordi jeg ikke visste hva flex gjorde. Nå vet jeg

[Zenobia]

🎖️🏅🥇 Her er forresten noen medaljer og sånn

[Zenobia]

proghodet skrev (10 minutter siden):

Jeg la jo med en link til flexbox (css-tricks), men om du faller for Kevins nerdete sjarm, så kanskje en video på flexbox også er å foretrekke:

 

Har ikke sjekket hverken lenker eller videoer i dag; nå er jeg inne i HTML og fyller opp tabellen. Men i morgen

[proghodet]

4 minutter siden, Zenobia said:

Har ikke sjekket hverken lenker eller videoer i dag; nå er jeg inne i HTML og fyller opp tabellen. Men i morgen

Videoene er vel så gode, for å være ærlig. Gå for dem, så kan du bare lene deg tilbake og slappe av 😄
 

19 minutter siden, Zenobia said:

Uansett, den redegjørelsen var jo nyttig – men vanskelig. Enda verre på engelsk. Så fint å ha på norsk. Skal nok finlese (og teste ut) hvordan det er. Og finne kaskadens sanne natur

Gikk tilbake og oversatte / begrenset engelskbruk etter beste evne på den tråden med mange hemmelighetsstemplinger
 

Endret 4. juni 2022 av proghodet

[Zenobia]

proghodet skrev (Akkurat nå):

Videoene er vel så gode, for å være ærlig. Gå for dem, så kan du bare lene deg tilbake og slappe av 😄
 

Gikk tilbake og oversatte / begrenset engelskbruk etter beste evne på den tråden med mange hemmeligstemplinger
 

Supert! Det er satt pris på (jfr. medaljer & sånn )

Lenker og video: jatakk, begge deler. Kan være utfyllende med begge medier. Repetisjon hjelper for å få ting til å sitte. Gjerne video først, så er ikke teksten heeeeelt ukjent når jeg leser.

[proghodet]

19 minutter siden, Zenobia said:

🎖️🏅🥇 Her er forresten noen medaljer og sånn

Weee! Muchas gracias!

[Zenobia]

Da møtte jeg en liten hump i fortellingsveien ... Romskipet Haquynz kan ikke både være laget i Hamburg OG på Ýztrion.

Sånn går det når man får geniale idéer underveis, og glemmer å oppdatere romskipstabellen (den i calc lokalt)

Må løse den for at den skal få riktig rang. Det samme gjelder Vingrunar.

Tar en liten pause der, gitt.

Takk for følget så langt, @proghodet

Jeg er ikke langt unna, bare i en annen fil på PC-en

[proghodet]

1 minutt siden, Zenobia said:

Romskipet Haquynz kan ikke både være laget i Hamburg OG på Ýztrion.

🤦‍♂️ Sier jo seg selv!

[Zenobia]

Oi, så er klokka der, ja ... Jeg kommer nok i morgen, men i dag blir det andre ting nå.

[proghodet]

Just now, Zenobia said:

Oi, så er klokka der, ja ... Jeg kommer nok i morgen, men i dag blir det andre ting nå.

[Zenobia]

Etter en litt mer omfattende opprydding i romskipene enn først antatt, har jeg fullført t.o.m ep#4 OG fjernet // i scriptet. Alt virker

Nå skal jeg se video om CSS. Er ikke så verst fornøyd.

Første video: ble for mange betegnelser jeg ikke har teket på ennå i samme setning. Venter med denne.

Prøver lenken med flexbox-guide ... Noterer ...

the flexbox layout is direction-agnostic as opposed to the regular layouts

Hahaha!

Nyttig: Flexbox layout is most appropriate to the components of ... small-scale layouts,

Grid layout bedre egnet for større skala. Hva da med responsivt design? Flex best?

Hva betyr: Flexbox is (aside from optional wrapping) a single-direction layout concept.  Resten av setningen skjønte jeg. By default, flex items will all try to fit onto one line.

Der det er hjerterom, er det plass i en flex-container

... wrapping: wrap: flex items will wrap onto multiple lines, from top to bottom.

Hmmm, okay ...

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children =items?? If one of the children has a value of 2, that child item would take up twice as much of the space either one of the others (or it will try, at least). flex-shrink også. Motsatt.

Jeg begynner å få et overblikk, men resten av betegnelsene vedr. flex må praktiseres. Lenken er bokmerket, og vil bli besøkt ved neste nettside-konstruksjon. Sannsynligvis fredag.

Sjekker ut video nr. 2 ... Learn flexbox the easy way ser ut til å holde hva den lover Jeg er nå over 4 minutter uti, og henger fortsatt med

Endret 6. juni 2022 av Zenobia

[proghodet]

1 hour ago, Zenobia said:

Hva betyr: Flexbox is (aside from optional wrapping) a single-direction layout concept.

Du kan sette en css-regel som heter flex-wrap: wrap. Den gjør at hvis det ikke er plass til alle child-elementene på ei linje, så bryter det ned på neste linje uten den regelen forsvinner bare child-elementene ut mot høyre (gitt at vi snakker om flex-direction: row og ikke column)

[Zenobia]

  @proghodet!

Takk for at du la inn kommentarer i scriptet, så det var greit å vite hva som skulle slettes.

Ser flex-videoen nå. Er det flex heller enn grid som skal brukes ved responsivt design? Tabellen er jo STOR på androiden min.

Grid ble litt for viderekomment for meg foreløpig. Konser om flex i dag.

Endret 6. juni 2022 av Zenobia