Merge pull request #109 from Birkbeck2/css24

grids css updated files

lectures/grids-other-css-concepts.md

@@ -0,0 +1,31 @@
+# Grids and other CSS concepts: Prep
+
+In this session we will learn about grids, positioning, pseudo elements and pseudo classes. Also we will be using CSS to create navigation features and some basic layouts.
+
+## Learning outcomes
+
+* Grids
+* Positioning, z-index
+* Pseudo class, pseudo elements
+* Attribute selectors
+* Navigation
+
+## Pre-sessional activities
+
+### Priority
+
+Frain, Ben; "[Chapter 5: Layout with CSS Grid](https://ebookcentral.proquest.com/lib/bbk/reader.action?docID=6192013&ppg=144)"; Responsive Web Design with HTML5 and CSS : Develop Future-Proof Responsive Websites Using the Latest HTML5 and CSS Techniques, 3rd Edition
+
+Learndev, "[Learn CSS Grids the Easy Way](https://youtu.be/eHaZlFcGl6k)", 8 mins 59 seconds, 16 July 2024
+
+Bro Code, "[Learn CSS positions in 6 minutes!](https://www.youtube.com/watch?v=G4AWXOr4W-k)", 6 mins 23 seconds, 21 September 2023
+
+Bro Code, "[Learn CSS pseudo-classes in 7 minutes](https://www.youtube.com/watch?v=Nrsy_2ogRfQ)", 7 mins 37 seconds, 21 September 2023
+
+Bro Code, "[Learn pseudo-elements in 4 minutes](https://www.youtube.com/watch?v=tb1ou6W5M5s)", 4 mins 48 seconds, 7 September 2021
+
+CodemanAcademy, "[z-index CSS tutorial](https://youtu.be/gobFv-JCTiU)", 37 seconds, 22 October 2023
+
+### Also recommended
+
+Robbins, Jennifer; "[CSS Layout with Flexbox and Grid](https://ebookcentral.proquest.com/lib/bbk/reader.action?docID=5412749&ppg=439)"; Learning Web Design : A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics.

outline.js

@@ -62,7 +62,7 @@ export const outline = [
   },
   {
     text: 'Responsive CSS and flexbox',
-    // collapsed: true,
+    collapsed: true,
     lecturer: 'Helena Wee',
     // concepts: 'responsive design, media queries, flexible layouts, grid layouts',
     // code: 'media flex grid'
@@ -79,7 +79,7 @@ export const outline = [
   },
   {
     text: 'Accessibility in HTML and CSS',
-    collapsed: false,
+    collapsed: true,
     lecturer: 'Joseph Muller',
     items: [
       {
@@ -113,19 +113,24 @@ export const outline = [
       }
     ]
   },
-  // {
-  //   text: 'Advanced CSS',
-  //   collapsed: true,
-  //   // concepts: 'positioning, z-index, float, navigation bar, dropdown menu, breadcumb menu',
-  //   // code: 'positioning navigation dropdown'
-  //   items: [
+  {
+  text: 'Grids and other CSS concepts',
+  collapsed: false,
+  lecturer: 'Helena Wee',
+  //   // concepts: 'grids, positioning, z-index, navigation',
+  //   // code: 'grids positioning navigation'
+  items: [
+    {
+      text: 'Prep',
+      link: '/lectures/grids-other-css-concepts.html',
+    }
   //     {
-  //       text: 'Workshop: Advanced CSS',
-  //       link: '/workshops/advanced/index.html',
-  //       lecturer: 'Helena Wee',
+  //       text: 'Workshop: Grids and other CSS concepts',
+  //       link: '/workshops/grids/index.html',
+  //       
   //     }
-  //   ]
-  // },
+    ]
+  },
   // {
   //   text: 'Command line, Git and GitHub',
   //   collapsed: true,