Ni ska skapa en ny, modern och komplett hemsida åt SciFiWorld.se efter egen design/layout. Kravspecifikation Sajten ska vara responsiv och utvecklad med Mobile-First strategi använda moderna layout-modeller som flexbox eller CSS grid använda moderna CSS sizing units (a.k.a. undvika hårdkodning av pixelvärden i annat än t.ex. container-bredd) vara uppbyggd med Läs mer…
Vi gick igenom advancerad positionering med hjälp av CSS. För en sammanfattning, läs https://internetingishard.com/html-and-css/advanced-positioning/ till och med ”Fixed positioning”, samt avsnittet ”Z-index”. Filer 01-advanced-positioning HTML och CSS för det vi gjorde i förmiddags (baserat på exempelkod från Interneting is Hard-länken ovan). 02-advanced-positioning-in-real-life HTML och CSS för exempel-sajten vi byggde där Läs mer…
Vi gick genom idag hur man kan använda Bootstrap för att snabbt göra en layout. Man lägger en länk till deras css i head taggen. Och för att det ska fungera måste man även referera till lite JavaScript.jQuery, Popper.js och Bootstraps eget JavaScript, villket man lägger längst ned i body, Läs mer…
Vi gick bland annat igenom lösningsförslag flexbox-övningen med Doge Kingdom CSS child selector media queries Doge Kingdom HTML och CSS för den varianten av sajten vi skapade i morse. HTML och CSS för den varianten av sajten jag hade förberett. CSS child selector För att skriva CSS-regler som bara gäller Läs mer…
Vi gick bland annat igenom size-units CSS backgrounds pseudo-classes samt att vi kombinerade allting vi lärt oss hittils (inkl. flexbox) för att göra en komplett sajt-layout. Missa inte vad ni ska läsa på till på torsdag längst ner! Size-units px Pixels, alltid samma oavsett webbläsarens inställningar % Procent bredd/höjd av närmsta element som definierat en Läs mer…
Vi gick bland annat igenom Lösningsförslag för dag 3’s workshop Flexboxes Lösningsförslag för dag 3’s workshop Grundfiler för flexbox-genomgången Screencasts från flexbox-delen Mina screencasts om flexbox från dagens lektion. Länkar A Complete Guide to Flexbox CSS Flexbox Tutorial Tutorial för flexbox i video-form. Flexbox Tutorial Kan du inte få nog Läs mer…
Vi gick bland annat igenom Specificitet i CSS Selectors Google Fonts (länka in typsnitt) CSS-funktionen calc() box-sizing: border-box nya semantiska element i HTML5 Till på fredag Till på fredag vill jag ni har läst igenom https://internetingishard.com/html-and-css/floats/ (jag lovar, den är kort!) samt https://internetingishard.com/html-and-css/css-box-model/ (repetition av det vi sysslat med de senaste två Läs mer…
Vi har gått igenom klasser i CSS specificity Länkar CSS Selectors https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors CSS Specificity (för att kunna sova gott om natten 😴) https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#Specificity_2 Classes, Selectors & the Cascade Workshop Omvandla dina CSS-regler till att vara klass-baserade där det är vettigt. Skapa en osorterad lista med länkar och ändra så att Läs mer…
Vi har gått igenom grundläggande CSS-regler hur CSS-regler ärvs (cascade:ar ner till barn och barnbarn etc.) hur man länkar in en CSS-fil med hjälp av <link rel=”stylesheet” href=”style.css”> i <head>-taggen i ett HTML-dokument CSS-regler som vi kikat närmre på är (bland andra) background-color border, border-left, border-width/style/color color font-family font-style font-weight Läs mer…
Ladda hem och installera Visual Studio Code och AMPPS. Länkar från idag Dealing with files https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files HTML Basics https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics How The Internet Works in 5 minutes Sammanfattningar Om ni vill repetera det vi gått igenom idag och video är mer er grej än artiklarna ovan så är de här två Läs mer…