The course has two main components: (1) lab assignments and (2) a course project. In the lab assignments you will learn and practice techniques used to plan and implement dynamic web layouts. For the project, you will plan and design the dynamic layout of a web site and then apply the techniques you have learned and implement your web site design. ## Course litterature There is no required course litterature for this course. We do however have one recommendation of you want a reference book: - [Andrew, Rachel. (2017). The New CSS Layout. A Book Apart](https://abookapart.com/products/the-new-css-layout) ### Online references: - [MDN. CSS reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) - [MDN. Learn to style HTML using CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS) - [MDN. Learning HTML: Guides and Tutorials](https://developer.mozilla.org/en-US/docs/Learn/HTML) - [Responsive Web Design (Google Web Fundamentals)](https://developers.google.com/web/fundamentals/design-and-ux/responsive/) - [CSS Specifishity](https://specifishity.com/) - [A Complete Guide to Flexbox. CSS-Tricks. (Last update Jan 25 2019).](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - [A Complete Guide to Grid. CSS-Tricks. (Last update Jan 22).](https://css-tricks.com/snippets/css/complete-guide-grid/) - [Learn CSS Layout](http://learnlayout.com/) ### Online articles etc: - [Andrew, Rachel. (2016). The New Layout Standard For The Web: CSS Grid, Flexbox And Box Alignment. Smashing Magazine](https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/) - [Babich, Nick. (2017). Building Better UI Designs With Layout Grids. Smashing Magazine](https://www.smashingmagazine.com/2017/12/building-better-ui-designs-layout-grids/) - [Babich, Nick. (2020). Layout Grids for Wireframes. Xd Idead - Process / Wireframing](https://xd.adobe.com/ideas/process/wireframing/layout-grids-for-wireframes/) - [Chen, Hui Jing. (2019). Understanding positioning in CSS](https://dev.to/huijing/understanding-positioning-in-css-7mn) - [Gremillion, Ben. (2018). A Hands-On Guide to Mobile First Responsive Design. UXPin.](https://www.uxpin.com/studio/blog/a-hands-on-guide-to-mobile-first-design/) - [Hacq, Audrey. (2018). Everything you need to know about Design Systems. UX Collective](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969) - [McCammon, Emily. (2016). Designing a Responsive Grid in 2016](https://medium.com/re-write/designing-a-responsive-grid-in-2016-58e4db6db786) - [Wasserman, Ed. (2016). A Comprehensive Introduction to Grids in Web Design](https://webdesign.tutsplus.com/articles/a-comprehensive-introduction-to-grids-in-web-design--cms-26521) ### Inspiration - https://responsivedesign.is/ - https://www.awwwards.com/ ### Videos - [Inspecting the CSS Cascade using Firefox DevTools](https://www.youtube.com/watch?v=Sp9ZfSvpf7A) - [Using DevTools To Understand Modern CSS Layouts. Chen Hui Jing at CSSconf EU 2019](https://youtu.be/ZRtzk0371tk?t=510) (Firefox Flexbox inspector at 8:30) ### Learning Grid and Flexbox - [CSS Grid Garden](https://cssgridgarden.com/) - [Flexbox Froggy](https://flexboxfroggy.com/) ### Printables - [Sneakpeekit. Printable Grids for Design Wireframeing](http://sneakpeekit.com/)