Å bygge et nettsted med HTML, CSS og Javascript

[proghodet]

10 minutter siden, Zenobia said:

Er plassering noe man gjør i CSS eller HTML?

CSS! Noen ganger må man riktignok legge til noen elementer i HTML (div'er) for å få til den layouten man ønsker. Men det er mange måter å lage layout på. I gamle dager brukte man én tabell all layout, og etterhvert brukte man noe som heter floats.

I dag bruker vi gjerne flexbox (display: flex) eller grid (display: grid)
Denne forklarer visuelt om flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Og hvis du har 40min til rådighet kan du se alles favoritt css-guru forklare grid:

 

Endret 4. juni 2022 av proghodet

[proghodet]

14 minutter siden, Zenobia said:

Linux ... er ikke virus mindre interessert i den? Eller var det før? Og det skal vel ikke samle inn så mye persondata som Microsoft?

Angående virus, så er hovedgrunnen at rettigheter på linux er mer sammensatt enn på windows. På windows er det enklere å ta kontroll over hele systemet hvis man først har tilgang i det hele tatt. Men det finnes fortsatt sånt på linux. Men helt ærlig, utover noen drøye ransomware-greier er det lenge siden jeg har hørt prat om virus i det hele tatt. Windows defender tar unna det meste så lenge man ikke kjører (åpenbart) luguber software på maskinen.

Når det kommer til persondata er det ingen tvil om at Microsoft samler mest. I Linux-verdenen kommer det an på det konkrete OS'et man bruker. Jeg mener at Ubuntu skulle begynne å samle litt, og at det ble furore. Husker ikke helt detaljene der.

[Zenobia]

proghodet skrev (2 minutter siden):

CSS! Noen ganger må man riktignok legge til noen elementer i HTML (div'er) for å få til den layouten man ønsker. Men det er mange måter å lage layout på. I gamle dager brukte man én tabell all layout, og etterhvert brukte man noe som heter floats.

I dag bruker vi gjerne flexbox (display: flex) eller grid (display: grid)
Denne forklarer visuelt om flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Og hvis du har 40min til rådighet kan du se alles favoritt css-guru forklare grid:

 

CSS! Noen ganger må man riktignok legge til noen elementer i HTML (div'er)

Tror det var derfor det gikk litt i ball for meg. Man må være begge steder.

Da har jeg oppdatert CSS igjen ...

Skal se youtube-videoen! Tar det ved begynnelsen til en ny økt (ikke i aften) Setter pris på kvalitetssikret læringsinnhold. Jeg søker i liten grad på youtube etter kunnskap, for det er så mye ræl der. Noe med å skille mellom skitt og kanel.

 

[Zenobia]

proghodet skrev (3 minutter siden):

luguber software

🤣

Oppdatert igjen ... tatt vekk bakgrunnsfarven på listen. Har endret gap fra 1 til 5 rem.

Redigerer rett i github nå. Blir jo bare tull å laste opp fra vscode akkurat nå ...

[Gjest Optimo]

Zenobia skrev (1 time siden):

Så hyggelig at du spør! Neida, å lære å bygge nettsider gjør jeg som en dyd av nødvendighet. Men så var det så artig, også   Jeg ønsker å støtte hørespillet den dramatiserte opplesningen (det er ikke et fullblods hørespill) jeg holder på med, og som kan lyttes til her: Tre episoder, som blir fire etter hvert

Jeg liker science fiction, særlig den med romskip, og har laget min egen versjon. Hvis du heller vil lese, har jeg lagt ut manus til tre episoder her: Den første nettsiden  Prologen er flyttet (midlertidig); den er lenket til WP-forsøket jeg nå har forlatt.

I korte trekk: Den dramatiserte opplesningen dreier seg om livet ombord på romskip. Nede på planeter er ikke så interessant for meg å skrive om, men det må nok til, det også. Litt, i tilbakeblikk (før fusjonsdrift/IP-skip), er det dog.

Liker du science fiction?

Jeg liker litt science fiction, men "livet på romskip" (Star Trek?) er nok ikke helt min greie. Morsomt prosjekt du har, lykke til! 🙂

[proghodet]

@Zenobia Uavhengig forslag (skrevet før jeg så at du har fjernet bakgrunnsfargen på elementene 😅)

.spacecraft-ships {
  padding: 0; /* sett padding til 0 på containeren */
}

/* sett paddingen på anchors isteden, og gjør om til block-element */
.spacecraft-ships a {
  display: block;
  background-color: #0e496a;
  padding: 12px;
  /* Svart magi: */
  transition: background-color 300ms, color 300ms;
}

/* Legg på en enkel hover-effekt */
.spacecraft-ships a:hover {
  background-color: white;
  color: #0e496a;
}

Endret 4. juni 2022 av proghodet

[Zenobia]

proghodet skrev (6 minutter siden):

@Zenobia Uavhengig forslag (skrevet før jeg så at du har fjernet bakgrunnsfargen på elementene 😅)

.spacecraft-ships {
  padding: 0; /* sett padding til 0 på containeren */
}

/* sett paddingen på anchors isteden, og gjør om til block-element */
.spacecraft-ships a {
  display: block;
  background-color: #0e496a;
  padding: 12px;
  /* Svart magi: */
  transition: background-color 300ms, color 300ms;
}

/* Legg på en enkel hover-effekt */
.spacecraft-ships a:hover {
  background-color: white;
  color: #0e496a;
}

Jeg henger med på et halvt hjul i svingene  

Har satt padding i spacecraft-ship til null: check
Kopierte inn blokk-elementet MEN spacecraft-ship står ovenfor, ikke sant? Jeg sletter ikke noe? Spacecraft-ship a kommer i tillegg?

Lagt på oversveving

Venter på nettet ...

 

[proghodet]

2 minutter siden, Zenobia said:

Jeg henger med på et halvt hjul i svingene  

Har satt padding i spacecraft-ship til null: check
Kopierte inn blokk-elementet MEN spacecraft-ship står ovenfor, ikke sant? Jeg sletter ikke noe? Spacecraft-ship a kommer i tillegg?

Lagt på oversveving

Venter på nettet ...

 

De er oppe på nettet nå ser riktig ut, men lurer på om disse funket bedre uten gap'en du la på? Men det er opp til deg!

Endret 4. juni 2022 av proghodet

[Zenobia]

proghodet skrev (1 minutt siden):

De er oppe på nettet nå ser riktig ut, men lurer på om disse funket bedre uten gap'en du la på? Men det er opp til deg!

Jeg har akkurat gått fra at de skulle være en del av tabellen, til at de skulle være på linje med overskriften. Samler dem igjen, men hvordan var det med de runde kantene igjen? Linear-gradient?? Så det ikke ser så firkantet ut

[proghodet]

2 minutter siden, Zenobia said:

de runde kantene

border-radius: 15px, f.eks

[Zenobia]

proghodet skrev (8 minutter siden):

border-radius: 15px, f.eks

JAAA! Takk – og for farveskiftet. Det går ikke av seg selv, altså?   Hva er det den transition gjør?

Venteeeer

Jeg tror at 1) jeg la border-radius på feil sted først + 2) glemte ;

Nå ligger den på ankeret.

Spiller det noen rolle?

Endret 4. juni 2022 av Zenobia

[proghodet]

7 minutter siden, Zenobia said:

Hva er det den transition gjør?

Den lager en gradvis overgang fra en verdi til en annen

Så hvis du har
transition: background-color 300ms;

så bruker den 300 millisekunder på å gå fra den ene bakgrunnsfargen til den neste. I ditt eksempel har du èn bakgrunnsfarge på anchors (#0e496a), som blir endret til en annen (#ffffff) på :hover, så da får man den effekten. Du kan selvsagt sette tidsverdien til hva du vil, og du kan bruke sekunder hvis du foretrekker (feks. 1s).

De aller fleste egenskaper som har en px-verdi kan animeres på den måten. Man har mer robust / avansert animasjonsfunksjonalitet i css, men det trengs ikke for en sånn enkel greie.

 

7 minutter siden, Zenobia said:

Det går ikke av seg selv, altså?

Ska'kke få no' gratis i livet, nei! 😁

Endret 4. juni 2022 av proghodet

[Zenobia]

Nå har jeg flyttet border-radius tilbake til spacecraft-ship. Og lekt litt med transition.

Venteeeeer

Tok vekk gap.

Endret 4. juni 2022 av Zenobia

[Zenobia]

Er det en enkel måte å laste ned EN enkelt fil på fra github? Kanskje bare kopiere koden rett inn i  vscode.

[proghodet]

1 minutt siden, Zenobia said:

Kanskje bare kopiere koden rett inn i vscode.

🏆

 

[Zenobia]

proghodet skrev (7 minutter siden):

🏆

 

👍 Da gikk jeg for den løsningen.

Hmmmm ...

Hvordan styrer jeg et anker? Hvorfor kommer det der det kommer?

Eller er det ul som kommer der det kommer ... er ul et blokk-element nå? Var det inline? Var det derfor det kom der overskriften er?

Det ser ikke bra ut som det er nå, og jeg vet ikke helt hvordan jeg vil ha det Én blokk er bedre enn fire små. Har jeg vel kommet frem til.

Må fintenke på layout-en, men tar imot idéer med takk.

Endret 4. juni 2022 av Zenobia

[proghodet]

1 minutt siden, Zenobia said:

👍 Da gikk jeg for den løsningen.

Hmmmm ...

Hvordan styrer jeg et anker? Hvorfor kommer det der det kommer?

Den må jeg nesten ha med teskje 🤔 tenker du på href-attributtet?

[Zenobia]

proghodet skrev (2 minutter siden):

Den må jeg nesten ha med teskje 🤔 tenker du på href-attributtet?

Haha, nei, spacecraft-ship a {

Men det har kanskje ingenting med plasseringen å gjøre? Jeg prøver å forstå hvorfor ul(?) kommer der det kommer. Justify-content? Space-around?

Jeg tilføyde endel tanker rett før du postet (som vanlig) for at det ikke skal bli så mye posting

Endret 4. juni 2022 av Zenobia

[Zenobia]

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

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

[proghodet]

42 minutter siden, Zenobia said:

Haha, nei, spacecraft-ship a {

Men det har kanskje ingenting med plasseringen å gjøre? Jeg prøver å forstå hvorfor ul(?) kommer der det kommer. Justify-content? Space-around?

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

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

Spoiler

Jeg pleier å legge de mest overordnede tingene øverst, og så mer konkret jo lenger ned jeg kommer. Siden det er "cascading stylesheets" (altså CSS), 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;
}

I dette eksemplet blir teksten heller blå, fordi det første regelsettet som har tagselector (p) pluss klasseselector (.minKlasse), har større "spesifisitet" enn bare en klasseselector (.klasseTil).

Forvirret enda? Supert! Det er litt mye greier. Det er greit å være klar over at det er sånn det fungerer i bakgrunnen, 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 vanskelig å få hodet rundt, hvertfall i starten.

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

Spoiler

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?

Spoiler

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

Det kan illustreres med en ul og den sine li-elementer:
<ul class="forelder">
  <li class="barn">Barn 1</li>
  <li class="barn">Barn 2</li>
  <li class="barn">Barn 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 anker inni.

I CSS vil man da stort sett legge hovedreglene på forelder-elementet, og gjøre justeringer på barne-elementene ved behov:

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

.barn:nth-child(2) {
  align-self: flex-start;  /* Jeg er annerledes! */
}

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

Endret 4. juni 2022 av proghodet