by Freja Busby
På mattelektionerna i skolan tyckte jag bäst om problemlösning. Ni vet de där uppgifterna där man skulle lista ut varför Anna först hade 6 kakor och sedan, efter ett antal händelser, enbart hade 2 kakor kvar. Detta tror jag, såhär i efterhand, var ett första tecken på att jag skulle börja gilla kod – för jag gillar problemlösning!
Jag bestämde mig innan jul, efter flera års intresse för kod, för att satsa fullt ut och ansöka till Technigos Boot Camp. Tolv intensiva veckor, för att nå en dröm, att blir junior Frontend-utvecklare.
Första veckan, med fokus på HTML och CSS har nu nått sitt slut. Den har inneburit nervositet, skratt, stress, förvirring och glädje. Tolv personer med olika bakgrunder och erfarenheter har tillsammans tagit sig igenom tre individuella uppgifter och påbörjat sina team-projekt som nästa vecka ska presenteras för Google.
En av de individuella uppgifterna denna vecka innebar att skapa ett responsivt nyhetsflöde, det vill säga, ett nyhetsflöde anpassat för alla enheter. Detta genom att bland annat jobba med Media queries. En viktigt del var också att förstå hur man jobbar med positionering genom CSS. Uppgifterna är anpassade för olika nivåer, då det även finns så kallade streach goals – vilket är perfekt, då vissa av oss är helt nybörjare och andra har erfarenhet sedan tidigare.
Här ser ni ett exempel på hur man kan använda Media Queries:
Det denna kodsnutt gör är att ändra färgen på alla H1:or (titel-element) för olika enheter. Direktöversatt står det: Om enheten är mellan 600px och 900px bred (standard för plattor) så ska alla H1:or vara röda . Om bredden på enheten skulle vara större än 900px (desktop) ska alla H1:or vara gröna.
På den här videon ser ni mitt resultat av uppgiften!
Vill du lära dig mer om Media Queries?
Här kommer några lästips:
W3Schools – Responsive Web Design
CSS-tricks – Media Queries
MDN – Media Queries
Tjejer Kodar kurser inom HTML och CSS:
Bygg din första hemsida – online kurs
Fokus på frontend i Berlin
Vi hörs igen om en vecka!
