Du må være registrert og logget inn for å kunne legge ut innlegg på freak.no
X
LOGG INN
... eller du kan registrere deg nå
Dette nettstedet er avhengig av annonseinntekter for å holde driften og videre utvikling igang. Vi liker ikke reklame heller, men alternativene er ikke mange. Vær snill å vurder å slå av annonseblokkering, eller å abonnere på en reklamefri utgave av nettstedet.
  21 2435
Ræva di lukter...
r0s3's Avatar
32 9
Jeg har jobbet med backend i noen del år nå, men har aldri fått noe godt grep rundt frontend utvikling bortsett fra Javascript.

Dvs. CSS og generelt setup av HTML for å få det til å bli fint. Of course, jeg kan bruke templates fra Themeforest og bygge ut de, men det å lage noe fra bunnen av med HTML og CSS har alltid vært et helvete.

Jeg tenker alltid at det er noe med krativiteten min som er feil, men kan like så godt være at jeg har for lite kunnskap i design.

Er det noen prinsipp som man burde følge, osv? Er i begynnelsen av å lære meg flex-box i CSS, og halter igjennom på et ganske ustabilt nivå.

Det som jeg lurer mest på, er hvordan man skal starte et prosjekt hvor man skal lage CSS-en fra bunnen av, samt all HTML som er følgende. Er det noen konkrete regler for HTML setup og CSS?

Takk på forhånd!
Usikker på om det er dette du lurte på men Codeacademy har jo mye kult.

Så har du denne
https://internetingishard.com/html-and-css/
Ræva di lukter...
r0s3's Avatar
Trådstarter
32 9
Sitat av Cloor Vis innlegg
Usikker på om det er dette du lurte på men Codeacademy har jo mye kult.

Så har du denne
https://internetingishard.com/html-and-css/
Vis hele sitatet...
Seems interesting!

Takk, skal bokmerke det for senere revision.
Lenge siden jeg har holdt på med css merker jeg

Rent generelt kan man vel si at om du ønsker kode som er uniform i den forstand at den virker på tvers av browsere best mulig så forsøk å skrive kode som validerer i feks xhtml 1.1. Vet ikke om xhtml er de facto lengre men det var det tidligere. Alt av stilsett går i css, så du skiller mellom html og stilsett.

Tips til design fra bunnen av. Er det noe konkret du kan skisse opp for å komme igang? Om du tenker at du bygger designet på "bruk av bokser". En boks er en firkant. En firkant kan gå i en annen firkant, som kan gå i en annen firkant som kan gå......tidligere var det ofte snakk om feks 1, 2 el 3 eller multi columns design. I en 2 column layout kan du noe forenklet si at meny og navigasjon befinner seg i den "boksen" og innhold i den andre. Du stabler firkanter(div's) i, rundt, over og under hverandre. Gi hver <div> et så beskrivende navn som du klarer, for etter hvert som css fila vokser eller det har gått lang tid fra sist du jobbet så er det veldig tidsbesparende å ha gode beskrivelser.

Forsøk og kode korrekt html fra starten av. ingen åpne tagger eller annet slurv. Jo mer korrekt jo enklere vil det være å sikre at websiden vises og tegnes opp slik du ønsker på brukernes maskiner. Husk også at du må sette grensen en plass. Du trenger feks ikke kode kompatibelt med internet explorer 1.0, men kanskje med 5, 6 7 etc. Se på stat før du bestemmer deg. Også må du regne med å bruke noe tid på hacks. Css er fortsatt litt problematisk fordi noen browsere har valgt å ikke støtte CSS helt etter boken men har lagt inn egne tolkninger.

Personlig er jeg veldig fan av å skrive kode så minimalistisk som mulig. Når du er ferdig så forsøker du å se på hvordan du kan gjøre stilsettet mindre. Jo mer innsats du legger på slik jo raskere vil ting loade og brukerne vil spare datakvote og tid. Husk også at du kan vekte innhold ved hjelp av CSS. Måten du stacker divs har fortsatt betydning for hvordan søkemotorer leser siden. Husk de leser fra toppen og ned. Om du konsekvent blir vant til å kode slik at <div> med main content plasseres nærmest <body> tag så vil det spille inn positivt alt ellers likt. Det er også slik at interne linker fortsatt ruler, så den gode gamle site map feks er fortsatt smart, eller annet du kan bruke for å klinke til masse interne linker. Div'n til disse kan i html koden komme etter main content, så justerer du plasseringen i css.
Rammeverk som Bootstrap kan jo også evt. være en god ide?
Ræva di lukter...
r0s3's Avatar
Trådstarter
32 9
Sitat av lroedal Vis innlegg
Rammeverk som Bootstrap kan jo også evt. være en god ide?
Vis hele sitatet...
Har prøvd rammeverk som Bootstrap, Bulma osv; men jeg vil lage noe fra bunnen av, og om det er noen prinsipper eller regler man skal følge.

Rammeverk er enkle å bruke, men det å lage fra bunnen av er så sykt vanskelig
Sitat av r0s3 Vis innlegg

Rammeverk er enkle å bruke, men det å lage fra bunnen av er så sykt vanskelig
Vis hele sitatet...

Du lærer det på codeacademy til slutt, lærer ganske mye vis du følger med.
Start feks photoshop og lag et kjapt utkast for hva du ser for deg. Så kjapt over den linker fra cloor, ser ut som en veldig bra plass å starte. Oversiktlig og de har tatt med alt som er viktig. Tror du bør endre måten du tenker på. Html er ikke vanskelilg, css isolert sett er heller ikke vanskelig. Det med å bruke hacks gjør det mer komplisert med til å leve med. Før du går igang med koding, se på den delen om semantic. Det er viktig og mange ser helt fra den biten.
Ræva di lukter...
r0s3's Avatar
Trådstarter
32 9
Sitat av random67489 Vis innlegg
Start feks photoshop og lag et kjapt utkast for hva du ser for deg. Så kjapt over den linker fra cloor, ser ut som en veldig bra plass å starte. Oversiktlig og de har tatt med alt som er viktig. Tror du bør endre måten du tenker på. Html er ikke vanskelilg, css isolert sett er heller ikke vanskelig. Det med å bruke hacks gjør det mer komplisert med til å leve med. Før du går igang med koding, se på den delen om semantic. Det er viktig og mange ser helt fra den biten.
Vis hele sitatet...
Logisk programmering (som PHP, Javascript og C#) har vært min ting i mange år, samt jobber jeg med det hver dag.

Har bare vansker med å drive med markup og stylesheets. Men, liker tipsene dere gir!
Burde jo skjønt det på overskriften.....jaja. Flott det jo, da blir det jo enklere for å deg å ta konseptet helt ut. Ting som kommentarer i koden, fornuftige navn og slikt er jo da en selvfølge for deg og kommer helt naturlig.

Og så da er vi der at du er usikker på hvordan css flytter elementer og hvordan disse relaterer til hverandre regner jeg med? Da er det som ellers veldig greit å jobbe med noen konkrete eksempler.


Er det spesielle ting du ønsker som du er usikker på så er en god regel å søke opp det du ønsker, finne et godt eksempel også plukke det fra hverandre og gjenskape. Det blir nesten litt som "hello world". Vi må alle starte en plass, og det er helt greit å starte fra et godt design.
Sist endret av random67489; 18. juli 2018 kl. 13:38.
Ræva di lukter...
r0s3's Avatar
Trådstarter
32 9
Sitat av random67489 Vis innlegg

(snip)

Og så da er vi der at du er usikker på hvordan css flytter elementer og hvordan disse relaterer til hverandre regner jeg med? Da er det som ellers veldig greit å jobbe med noen konkrete eksempler.


Er det spesielle ting du ønsker som du er usikker på så er en god regel å søke opp det du ønsker, finne et godt eksempel også plukke det fra hverandre og gjenskape. Det blir nesten litt som "hello world". Vi må alle starte en plass, og det er helt greit å starte fra et godt design.
Vis hele sitatet...
Dette var det jeg var ute etter! Takk for den innlysende kommentaren; visste ikke helt hvor man skulle starte, så dette hjalp meg ganske greit.
Har ikke noe universelt råd å komme med her, men det som hjalp meg igang med css når jeg lærte det var rett og slett å kjøpe en bok, samt å jobbe meg gjennom forskjellige øvelser. Som mange starte jeg ut med design i absolutte mål, brukte px og tenkte at slik må det bli for å ha kontroll. Det stemte jo ikke og jeg skjønte etterhvert fordelen med % og em. Nå er det jo også rem.

Det er etterhvert kommet svært mange gode nettsteder rundt css. Så titt rundt, med din bakgrunn så trenger du sikkert bare litt hands-on erfaring før du skjønner gangen i det.

Aner jeg et egenutviklet rammeverk i emning her?
Ræva di lukter...
r0s3's Avatar
Trådstarter
32 9
Sitat av random67489 Vis innlegg

(snip)

Aner jeg et egenutviklet rammeverk i emning her?
Vis hele sitatet...
Tenkte å lage et rammeverk rundt flex-box. Det kommer ikke til å være mye styling i selve rammeverket, men skal være mulig å bruke Sass for å "extende" hele rammeverket til din egen smak. Dvs. at man kommer til å ha ting som containers, columns, sections osv. men ingenting kommer til å holde farge eller noe som er visuelt på den måten. Kommer rett og slett til å være et tegnebrett du kan gjøre hva enn du vil med.
Du skal ikke sjekke ut CSS grid, da? Hvis du først setter deg inn i det nå, hvorfor ikke lære seg det nyeste? Lagde nemlig en nettside fra scratch med flexbox, ser nå i etterkant at grid hadde gitt flere mulighter. Det med design og kreativitet osv... Skjønner hva du mener. Jeg brukte et år på å browse "alle" nettsider i samme kategori, prøvde å analysere osv. Deretter bare jobbet jeg med den i et år til med mange versjoner. Så har ikke noen andre tips enn at det er veldig krevende, bare på en helt annen måte enn logisk programmering.

Edit: Jo, også stjal jeg masse. Prøvde å gjenskape fine løsninger. Etterhvert skjønte jeg at det er jo egentlig ikke stjeling, mye på Internet er jo samme greia, CSS gir ikke så mange muligheter.
Sist endret av Chronic420; 19. juli 2018 kl. 22:58.
Ræva di lukter...
r0s3's Avatar
Trådstarter
32 9
Sitat av Chronic420 Vis innlegg
Du skal ikke sjekke ut CSS grid, da? Hvis du først setter deg inn i det nå, hvorfor ikke lære seg det nyeste?

(snip)
Vis hele sitatet...
Takk for den utfyldene kommentaren! Har sett litt på grid også, men føler meg bare litt mer komfortabel med flexbox, siden jeg har brukt Bulma i ganske lang tid nå. (Har lagd et custom build av Bulma som jeg bruker for intranett løsninger jeg lagger @ work)

CSS ser enklere ut enn det virkelig er, så jeg får egentlig bare sette av noen dager til å lære meg mer CSS / Sass og HTML setup. Trudde jeg skulle ha det inne etter så mange år med logisk programmering, men der tokk jeg utrolig feil. ^^

Grid er en utvidelse i tillegg til flexbox. Enkelt sagt så kan du se på grid som at den også har dynamiske tabeller som justerer seg dynamisk ihht til skjermstørrelse. Det er ikke så mye enten eller grid el flexbox det er mer både og. Grid gir deg mer kontroll over 2 akser vs 1 akse i flexbox. Du kan helt fint starte med flexbox som planlagt også bruker du grid om det er noe du merker du sliter med å få plassert korrekt. Det er ikke slik at grid erstatter flexbox, den gjør bare noen ting flexbox ikke gjør. Kombinert har du et veldig godt utgangspunkt som brukerne vil sette stor pris på uansett enhet og skjermstørrelse som benyttes.
Design er ikke lett. Det er en grunn til at designere er så ettersøkt som de er.

Man kan lage noe man synes ser fint ut, som man ser på et par dager senere og ikke liker i det hele tatt. (Etter du har vist det til masse folk selvfølgelig). Design er sånn at når man først ser det er riktig så ser man at der riktig uten å helt vite hvorfor.

Jeg har det jeg vil kalle en ørliten designutdanning - egentlig ikke relevant til web, men forstår bittelitt av grunnmuren i det hele. Dette har jeg tatt med meg inn i jobben hvor jeg også er backend utvikler, men må stadig lage front og. Det kan gå så alt for mange timer på å justere designet og prøve seg frem, men plutselig treffer man en åre og ser at det er riktig. Anbefaler å søke på "Webdesign inspiration 2018" og slikt for å se hva folk gjør som er bra. Kopier etter beste evne det du synes er fint. Jeg og liker å lage alt selv. Nekter å bruke et ferdig rammeverk eller ferdig design - så vi er jo ganske like sånn sett.

Man tenker og at CSS er så lett, og det er jo egentlig det - sånn kode-messsig, men det er noe med det som gjør at det er vanskelig selv som en hardcore programmerer.
Ræva di lukter...
r0s3's Avatar
Trådstarter
32 9
Sitat av Source Vis innlegg
Design er ikke lett. Det er en grunn til at designere er så ettersøkt som de er.

(snip)
Vis hele sitatet...
I like you.

Som backend utvikler, så bare syntes jeg design i seg selv er jævlig vanskelig. Ihvertfall den kreative biten hvor du må lage noe som ser OG ut, men ender opp med gamle maler og dårlige rammeverk for å få det ferdig til deadline.

Jeg er mye på Dribbble for inspirasjon, siden der så har de fulle vedlegg av hvordan designere syntes nettsider bør se ut. Må si at mye av ideene jeg har kommer der fra.

Har jo også funnet noen par kule hjelpemidler som Sass og Webkit. Dette gjør jo mye av jobben mye enklere. Som en langtids PHP utvikler, så må jeg si meg enig i at CSS er vanskelig på sin egen måte. Syntaxen er jo ganske enkel, alt minnes om et Javascript objekt.

HTML-kode

<style>
.is-primary {
  
   background: blue;
   border: 1px solid blue;
   border-radius: 50%;

}
</style>

<script>
let myObject = {

    'url': 'https://google.com',
    'method': 'GET'

};
</script>
Det som jeg slet mest med i førsten er alt sånne "usynlige" verdier, som overflow, box-sizing, flex osv... Det er vel det mesteparten også sliter med til tider. Har også en dårlig uvane med å bruke negative verdier i margin, for eksempel.

Får vel håpe at det går bra til slutt.
Sist endret av r0s3; 20. juli 2018 kl. 23:08.
css er noe forbanna drit! Det er lett å komme i gang, og css følger et deklarativt design. dvs. at du setter "regler" for klasser som skal oppføre seg etter kriteriene du setter i css stilene.

Alt går bra, frem til man skal begynne å kontrollere posisjon. Hvis man aktivt tester designet sitt i chrome, eller en annen nettleser, ser det helt greit ut for deg, men så får man lyst til å prøve det i en annen nettleser. Da innser man hvor hacky hele frontend miljøet er. Ikke alle nettlesere tolker css regelsettet ditt helt likt, så man ender opp med å måtte teste nettsiden din på utallige antall forskjellige nettlesere og helst forskjellige duppedingser som android/iphone/ipad.

Til slutt innser man at etablerte css rammeverk er ganske bloated nettopp fordi de har bygget støtte for det store markedet vi har av nettlesere der ute. Det er også litt bloated fordi css er ganske vanskelig å gjøre endringer på uten at det skaper merkelige issues, så normen er at man ikke endrer på css, men legger heller til en ny regel som gjelder spesifikt for html komponenten du forsøker å gjøre endringer på.

Fysjamei.
Ræva di lukter...
r0s3's Avatar
Trådstarter
32 9
Sitat av Patrick Vis innlegg
css er noe forbanna drit!
Vis hele sitatet...
Det er helt sant! Du har ikke møtt helvete før du har prøvd å få nettsider til å se fint ut på IE. Fyfaen så drit at IE brått skal være en special snowflake.

Og ikke få meg startet en gang på CSS for mobil versjoner. Skjønner hvorfor folk lager nettsiden på nytt under et subdomene for mobil. (m.eksempel.com)
Det var ikke noe enklere å lage nettsider for IE før CSS kom på banen heller
Sitat av Patrick Vis innlegg
css er noe forbanna drit! Det er lett å komme i gang, og css følger et deklarativt design. dvs. at du setter "regler" for klasser som skal oppføre seg etter kriteriene du setter i css stilene.


Fysjamei.
Vis hele sitatet...

Nei css er unikt bra. Bloat? Nei det fult mulig å skrive god css uten at det blir store saken. Fjern redundans feks.

Er jo ikke css som er problemet. Det er måten browserne leser stilsettet som skaper litt hodebry noen ganger.

Men ja skal du drive med css så må du teste i alle browsere. Det er helt rett. Også får du sette listen en plass. Er det feks nødvendig at alt vises 100% slik du som designer har skissert? Er det akseptabelt at feks 10% av brukerne får et litt annet design? Du ser jo underveis hva som ikke er helt cross browser. Noen ganger er det bedre å leve med det, andre ganger løses det med hack.