Omat sivut HTML:llä tehneenä opettelen nyt CSS gridiä ja responsiivisuutta. Oppimista helpottaisi, jos saisi nähdä rivi riviltä koodin johonkin esimerkkiin, josta kävisi ilmi kaikki perusjutut: grid-template-area, auto-fill, divit, jne jne. Olen kuunnellut hyviä videoita aiheesta ja jo tajuan jotakuinkin. Olisi hyvä (helppo) nähdä kaikki tämä yhdeltä opettajalta. CSS grid on mahtava juttu! Tein parikymmentä vuotta sitten sivut käyttäen table-layoutia, ja sehän oli toimiva silloin, mutta kännykällä aivan toivoton.
Miten CSS ja HTML yhdistetään?
Anonyymi
22
269
Vastaukset
- Anonyymi
Oletko kokeillut hakukonetta käyttää? Ohjeita löytyy netistä vaikka kuinka. Sinulla on jo hakusanatkin valmiina.
Et ole harkinnut jonkun CSS frameworkin käyttöä? Ovat suosittuja responsiivisia sivuja tehdessä. Bootstrap lienee yleisin, joskin vähän raskas, mutta myös monipuolinen ja sille löytyy runsaasti ohjeita. Skeleton on kevyimmästä päästä. http://getskeleton.com/- Anonyymi
En tiedä, mitä CSS framework tarkoittaa. Gridiä aion käyttää, sellaista, jossa on grid-template-areas, eri kokoja, ja muutama tyhjä solu siellä täällä, ja kaikki skaalautuu kännykästä isolle ruudulle asti, sarakemäärä sujuvasti kasvaa tai vähenee. Ainakin se olisi tarkoitus.
Onko tuo Skeleton verkkosivujen rakentamisohjelma vai tarjoaako se valmiita malleja? Minun olisi tarkoitus opetella peruskoodi ja suunnitella yksinkertaiset toimivat sivut itse. Uusia versioita sitten teen, kun ehdin. - Anonyymi
Tämä "Skeleton" kannattaa unohtaa, sillä linkkisi takana kerrotaan että sivusto on tehty juuri sillä, ja voit itse huomata että lomakkeiden tagit eivät toimi oikein.
Kun joku tagi tyylitellään uudestaan, sen tulisi toimia jokaisessa selaimessa samalla tavalla, tämän "Skeleton" kanssa ei ole näin. Tai jos se sinua miellyttää voi yrittää itse tyylitellä virheelliset tagit uudestaan tai poistaa ne kokonaan, jolloin ne tulee toimimaan selaimen oletuksilla. Eikä muutenkaan alussa ole hyvä opetella uudelleen tyyliteltyjä tageja, kun ei ole edes käsitystä, minkä näköinen se on oletus arvoillaan. Näitä frameworkkeja tarvitaan sitten myöhemmin jos tarvitaan. - Anonyymi
Anonyymi kirjoitti:
Tämä "Skeleton" kannattaa unohtaa, sillä linkkisi takana kerrotaan että sivusto on tehty juuri sillä, ja voit itse huomata että lomakkeiden tagit eivät toimi oikein.
Kun joku tagi tyylitellään uudestaan, sen tulisi toimia jokaisessa selaimessa samalla tavalla, tämän "Skeleton" kanssa ei ole näin. Tai jos se sinua miellyttää voi yrittää itse tyylitellä virheelliset tagit uudestaan tai poistaa ne kokonaan, jolloin ne tulee toimimaan selaimen oletuksilla. Eikä muutenkaan alussa ole hyvä opetella uudelleen tyyliteltyjä tageja, kun ei ole edes käsitystä, minkä näköinen se on oletus arvoillaan. Näitä frameworkkeja tarvitaan sitten myöhemmin jos tarvitaan.Skeleton on vain pari css-filua, joilla on tarkoitus helpottaa responsiivisten sivujen tekemistä. Kannattaa katsoa vaikka se demo selaimen responsisten sivujen suunnittelutyökalulla eri asetuksilla, niin selviää mistä on kyse.
- Anonyymi
Anonyymi kirjoitti:
Skeleton on vain pari css-filua, joilla on tarkoitus helpottaa responsiivisten sivujen tekemistä. Kannattaa katsoa vaikka se demo selaimen responsisten sivujen suunnittelutyökalulla eri asetuksilla, niin selviää mistä on kyse.
Ei tarvitse katsoa mitään demoja, kun jo antamasi sivu sisältää virheen, siinä on riittävästi näyttöä ilman demoja.
- Anonyymi
Anonyymi kirjoitti:
Ei tarvitse katsoa mitään demoja, kun jo antamasi sivu sisältää virheen, siinä on riittävästi näyttöä ilman demoja.
Mikä siinä on virhe?
- Anonyymi
Anonyymi kirjoitti:
Mikä siinä on virhe?
Esimerkkisivulla (netissä) on virheenä viittaus olemattomaan java-failiin, eli
https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js
pitäisi olla nykyään
https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.js
HUOM! Kyseistä virhettä ei ole siinä latausnapin takaa löytyvässä zipissä eli sillä voi hyvillä mielin harjoitella aihetta omaa localhostia käyttäen. - Anonyymi
Anonyymi kirjoitti:
Esimerkkisivulla (netissä) on virheenä viittaus olemattomaan java-failiin, eli
https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js
pitäisi olla nykyään
https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.js
HUOM! Kyseistä virhettä ei ole siinä latausnapin takaa löytyvässä zipissä eli sillä voi hyvillä mielin harjoitella aihetta omaa localhostia käyttäen.Vaikuttaisi joltain XSS-attakilta siirtää skriptit härösivuille.
- Anonyymi
Anonyymi kirjoitti:
Vaikuttaisi joltain XSS-attakilta siirtää skriptit härösivuille.
Ystävämme Google itse siirsi js-failit pois originaalista sijainnistaan.
- Anonyymi
Olen löytänyt Simmonsit ja Traversyt ja Simonit youtuben hauilla. Olen oppinut kaikenlaista, mutta edelleen minulta puuttuu se ihan perusjuttu, että olisi esimerkkinä muutama perusresponsiivinen grid ja näytettäisiin sen html ja css. On minulle jo jonkinlainen käsitys siitä asiasta, eli alkuperäisestä kysymyksestäni tullut, mutta vielä hatara. Yritin tiedoillani väsätä ensin ihan vaan nav_bar :ia, mutta jo siinä epäonnistuin responsiivisuuden suhteen.
Suomeksi en netistä ole löytänyt juuri muuta kuin huonosti puhuttuja huonosti äänitettyjä alkeisalkeisaapisia tai sitten jotain, joka menee yli hilseilevän nutturani. Englanniksi kyllä on vaikka mitä. Edelleen etsin helppoa tapaa kopioimalla oppia muutama sivu ja sitten alkaa siitä laajentaa.
Paikallinen kirjasto oli iloinen yllätys. Hyllyillä ei ollut muuta kuin yksi Korpelan HTML-opas (liian tekninen minulle, mutta selkeä ja kattava). He kuitenkin keksivät tilata naapurikaupungista lisää. Eli ensi viikolla minulla on lukemista. Sen lisäksi yritän edelleen oppia kuuntelemalla. Se käy kätevästi, ainakin teoriassa, koska siinä samalla voi tehdä tiskaukset ja siivoukset ja mitä nyt onkaan. Eikä pakota silmiä tihrustelu, kun korvat vielä toimivat erittäin hyvin.
Sen olen ollut oppivinani, että nykyään tehdään html-koodista mahdollisimman yksinkertainen ja kaikki muotoilut pyritään tekemään css:llä. Se on hyvä käytäntö, ymmärrän. Itse tein 2000-luvun alussa sivuni FrontPagella, juuri opittuani ihan alkeet html:stä. Laitoin kullekin tekstinpätkälle määritteet erikseen, ja nyt tajuan, miten paljon turhaa työtä tein. Frames oli joidenkin mielestä hyvä, mutta kirja, jonka satuin lukemaan, ei suositellut sitä, vaan kirjoittaja 'ate tables for breakfast', ja minäkin tykästyin taulukoihin. Nythän se sivu on ihan onneton, ei näy kännyillä lainkaan, vaan kännykkä sieppaa etusivulle laittamani pdf-linkin, ja esittelee siitä kulman. Ei ihme, ettei ole ollut asiakkaita vuosiin;)
Ehkä päädyn tekemään ihan tylsän helpon sivun. Traversy ja Simon molemmat näyttävät sellaiset ihan koko koodin kanssa. Mieluummin kuitenkin tekisin gridin, jossa on eri kokoisia gird-template-areas, ja osa soluista tyhjiä. Se sitten sujuvasti muotoutuisi kunkin kuvaruudun kokoon ilman media queries. Ehkä sen vielä opin.
- Anonyymi
"CSS grid on mahtava juttu!"
Opettelu on tehokkaimmillaan, kun joutuu käymään jostakin syystä asiaa erittäin tarkkaan läpi.
OPETA MINULLE CSS grid. Sinä hyödyt, ja minä hyödyn. Kyselen tarvittaessa epäselviä kohtia.- Anonyymi
Olen samaa mieltä; opettamalla vasta oppii. Minun 'osaamiseni' CSS:n suhteen on vasta muutaman päivän vanha, joten opettajaksi en ryhdy, mutta etsin opettajia. Englanniksi löytyy paljon hyvää materiaalia youtubesta, ja olen kuunnellut tuntikausia ja tehnyt muistiinpanoja. Pikkuisen alkaa jo jäsentymään, miten nuo kaksi koodia toimivat yhdessä. Pieniä ahaa-elämyksiä tulee. Ei haittaa, vaikka en koko ajan kaikkea ymmärtäisi, ihan jo asiasta puhumisen kuuntelu vie sisälle siihen maailmaan. Jen Simmons on suosikkini. Hän on ilmeisesti graafinen suunnittelija ensin, ja osaa myös koodata verkkosivuja. Brad Traversy ja Gary Simon ovat myös erinomaisia opettajia. Ihmettelen, miten vähän videoita löytyy suomeksi. Jos tosiaan muka olisimme korkeatasoisen koulutuksen maa, niitä pitäisi löytyä valtavasti. Kiusaa kuunnella opetusta, jossa ei ole viitsitty opetella lausumaan perussanoja kuten title, viewport, header, break. Suomalainen aksentti on ok, mutta ei ole mitään syytä ääntää englantia ikään kuin se olisi suomea. Voi title vieköön, miten tyhmältä se kuulostaa.
Jos sinulla on jotain ihan alkeiskysymyksiä, niin joku, jos minä en osaa, saattaisi vaikka olla ystävällinen ja vastata tässä ketjussa. - Anonyymi
Anonyymi kirjoitti:
Olen samaa mieltä; opettamalla vasta oppii. Minun 'osaamiseni' CSS:n suhteen on vasta muutaman päivän vanha, joten opettajaksi en ryhdy, mutta etsin opettajia. Englanniksi löytyy paljon hyvää materiaalia youtubesta, ja olen kuunnellut tuntikausia ja tehnyt muistiinpanoja. Pikkuisen alkaa jo jäsentymään, miten nuo kaksi koodia toimivat yhdessä. Pieniä ahaa-elämyksiä tulee. Ei haittaa, vaikka en koko ajan kaikkea ymmärtäisi, ihan jo asiasta puhumisen kuuntelu vie sisälle siihen maailmaan. Jen Simmons on suosikkini. Hän on ilmeisesti graafinen suunnittelija ensin, ja osaa myös koodata verkkosivuja. Brad Traversy ja Gary Simon ovat myös erinomaisia opettajia. Ihmettelen, miten vähän videoita löytyy suomeksi. Jos tosiaan muka olisimme korkeatasoisen koulutuksen maa, niitä pitäisi löytyä valtavasti. Kiusaa kuunnella opetusta, jossa ei ole viitsitty opetella lausumaan perussanoja kuten title, viewport, header, break. Suomalainen aksentti on ok, mutta ei ole mitään syytä ääntää englantia ikään kuin se olisi suomea. Voi title vieköön, miten tyhmältä se kuulostaa.
Jos sinulla on jotain ihan alkeiskysymyksiä, niin joku, jos minä en osaa, saattaisi vaikka olla ystävällinen ja vastata tässä ketjussa.Jos muistat kouluajoilta, jolloin usein tultiin tilanteeseen että opettaja esitteli uuden asian käsiteltäväksi, ja lopuksi esitti kysymyksen; "Onko kenelläkään kysyttävää ?", tietenkään kenelläkään ei siinä vaiheessa vielä ollut, koska kukaan ei asiasta tiennyt kuin sen mitä kerrottiin, joten kaikki oli hiljaa. Niin minäkin nyt, mutta seuraan tilannetta tiiviisti.
- Anonyymi
Anonyymi kirjoitti:
Jos muistat kouluajoilta, jolloin usein tultiin tilanteeseen että opettaja esitteli uuden asian käsiteltäväksi, ja lopuksi esitti kysymyksen; "Onko kenelläkään kysyttävää ?", tietenkään kenelläkään ei siinä vaiheessa vielä ollut, koska kukaan ei asiasta tiennyt kuin sen mitä kerrottiin, joten kaikki oli hiljaa. Niin minäkin nyt, mutta seuraan tilannetta tiiviisti.
Jos sinulla on joutilasta aikaa, voisit viettää sen huonomminkin kuin kuuntelemalla vaikka noita Jen Simmonsia, Brad Traversyä tai Gary Simonia. Muitakin on, jokaiselle varmaan löytyy sopivia, siis jos osaa englantia. Suomeksi valikoima on kökkö. Tai youtube ei näytä niitä minulle. Vaikka kirjoitan haun suomeksi, saan enimmäkseen englanninkielisiä videoita listaan.
Oppimiselle on hyvä olla tavoite. Haluatko työpaikan koodaajana? Tarvitseeko yrityksesi nettisivut? Tarvitsevatko tuttusi verkkosivuja? Haluatko ihan muuten vain tulla hyväksi koodariksi, tai vaikka vain aloittelevaksi koodarioppilaaksi? Voihan Suomessa sitä opiskella ihan kouluissakin. Kuuntelin jotain lukion kursseja ja kismitytti se tankeroenklanti ja hirveän hidas eteneminen ja huono äänitys.
- Anonyymi
Nielsenin kirja nettiminimalismista on paras kirja mitä www-sivujen teosta on koskaan kirjoitettu ja tullaan koskaan kirjoittamaan.
- Anonyymi
Kiitos vinkistä, pitääpä etsiä kirjakaupasta. Tuo viimeinen lauseesi kyllä tuo mieleen sen, kun 1880 luvun lopulla joku ilmoitti, että nyt on keksitty kaikki, mitä koskaan tullaan keksimään;)
Minimalistinen rakenne on hyvä. Sisältöä on oltava riittävästi asiakkaiden kannalta.
- Anonyymi
Kuinka opinnot etenevät.
- Anonyymi
tuolta vaan opettelemaan... ja älä sitten sano ettet osaa englantia...
https://www.w3schools.com
:)- Anonyymi
Osaan englantia. Käytin tietokoneita 1994-2012 ihan englanniksi vaan. Nyt on hauskaa, kun voi opetella samoja ja uusia asioita suomeksikin.
Kiitos linkistä. Pitääpä katsoa. Näyttää lupaavalta! - Anonyymi
Anonyymi kirjoitti:
Osaan englantia. Käytin tietokoneita 1994-2012 ihan englanniksi vaan. Nyt on hauskaa, kun voi opetella samoja ja uusia asioita suomeksikin.
Kiitos linkistä. Pitääpä katsoa. Näyttää lupaavalta!Kiitos! Onpa hyvät sivut! Noiden pohjalta ehkä opin väsäämään sen gridinkin vielä. Nämä perusteet on hyvä osata joka tapauksessa. Jäänkin lukemaan noita.
- Anonyymi
Näin pitkä ketju, eikä vielä mitään asiaan liittyvää.
- Anonyymi
Johan tuossa ensimmäisessä viestissä tuli ohjeet kuinka edetä.
Vai luulitko tästä ketjusta tulevan yleispätevän oppaan? Viesteistiä 9/10 poistuu välittömästi bittitaivaaseen. Maksaako vaivaa?
Ketjusta on poistettu 0 sääntöjenvastaista viestiä.
Luetuimmat keskustelut
Mies kateissa Lapualla
Voi ei taas! Toivottavasti tällä on onnellinen loppu. https://poliisi.fi/-/mies-kateissa-lapualla1115785Poliisi tutkii murhaa Paltamossa
Poliisi tutkii Kainuussa sijaitsevassa Paltamon kunnassa epäiltyä henkirikosta, joka on tapahtunut viime viikon perjanta323877- 823322
Jos me voitais puhua
Jos me voitais puhua tästä, mä sanoisin, että se on vaan tunne ja se menee ohi. Sun ei tarvitse jännittää mua. Mä kyllä182936Jenna meni seksilakkoon
"Olen oppinut ja elän itse siinä uskossa, että feministiset arvot omaava mies on tosi marginaali. Todennäköisyys, että t2481980Joo nyt mä sen tajuan
Kaipaan sua, ei sitä mikään muuta ja olet oikea❤️ miksi tämän pitää olla niin vaikeaa?871953- 1411758
Olipa ihana rakas
❤️🤗😚 Toivottavasti jatkat samalla linjalla ja höpsöttelykin on sallittua, kunhan ei oo loukkaavaa 😉 suloisia unia kau81676Jere, 23, ja Aliisa, 20, aloittavat aamunsa Subutexilla tai rauhoittavilla: "Vaikka mä käytän..."
Jere, 23, ja Aliisa, 20, ovat pariskunta, joka aloittaa aamunsa Subutexilla tai rauhoittavilla. Jere on ollut koko aikui381665Vain yksi elämä
Jonka haluaisin jakaa sinun kanssasi. Universumi heitti noppaa ja teki huonon pilan, antoi minun tavata sinut ja rakastu861513