Miten CSS ja HTML yhdistetään?

Anonyymi

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.

22

163

Äänestä

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • 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
        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
      • 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ä.

    Takaisin ylös

    Luetuimmat keskustelut

    1. Naiset miltä kiihottuminen teissä tuntuu

      Kun miehellä tulee seisokki ja ja sellainen kihmelöinti sinne niin mitä naisessa köy? :)
      Sinkut
      28
      1828

    2. Haistoin ensin tuoksusi

      Käännyin katsomaan oletko se todellakin sinä , otin askeleen taakse ja jähmetyin. Moikattiin naamat peruslukemilla. Tu
      Ikävä
      6
      1772

    3. Olet sä kyllä

      ihme nainen. Mikä on tuo sun viehätysvoiman salaisuus?
      Ikävä
      15
      1261

    4. Hiljaiset hyvästit?

      Vai mikä on :( oonko sanonut jotain vai mitä?
      Ikävä
      7
      1174

    5. Tähdet, tähdet -tippuja Kake Randelin tilittää avoimena: "Tämä on viihdyttämistä, eikä sitä..."

      ISO kiitos Kake lauluistasi!Nyt ei vaan studioyleisö lämmennyt. Olet legenda! Lue Kake Randelinin mietteet: https://w
      Tv-sarjat
      20
      1142

    6. Teuvo Hakkaraisesta tulee eurovaalien ääniharava

      Persuissa harmitellaan omaa tyhmyyttä
      Maailman menoa
      9
      1077

    7. Miksi kohtelit minua kuin tyhmää koiraa?

      Rakastin sinua mutta kohtelit huonosti. Tuntuu ala-arvoiselta. Miksi kuvittelin että joku kohtelisi minua reilusti. Hais
      Särkynyt sydän
      5
      1031

    8. Näkymätöntä porukkaa vai ei

      Mon asuu yksin. Mitas mieltä ootte ?
      Ikävä
      6
      1004

    9. Turha mun on yrittää saada yhteyttä

      Oot mikä oot ja se siitä
      Suhteet
      7
      995

    10. SOSIALI DEMOKRATIA

      AATE , JOKA ETENEE.
      Suomen sosialidemokraattinen puolue
      10
      980
    Aihe
    TietosuojaselosteKäyttöehdotEvästeasetuksetSäännöt