Content : HTML CSS Week 1

content/blocks/retro/index.md

@@ -5,8 +5,16 @@ headless="true"
 time= 25
 +++
 
+{{<tabs name="Run a retro">}}
+{{<tab name="Video">}}
+{{<youtube>}}
+https://www.youtube.com/watch?v=dY6yFsgLrBA
+{{</youtube>}}
+{{</tab>}}
+{{<tab name="Text">}}
+
 {{<note title="Retro (20 minutes)" type="activity">}}
-Retro is a chance to reflect on this past sprint. You can do this on [a Jamboard](https://jamboard.google.com/d/1u7oF-r7AKtkNu_OIW_K1ai0SNQfT_YuCCsiNo3MOwUc/edit?usp=sharing) (make sure someone clicks "Make a copy" before you start, and you work on that together) or on sticky notes on a wall.
+A retro is a chance to reflect on this past sprint. You can do this on [a Jamboard](https://jamboard.google.com/d/1u7oF-r7AKtkNu_OIW_K1ai0SNQfT_YuCCsiNo3MOwUc/edit?usp=sharing) (make sure someone clicks "Make a copy" before you start, and you work on that together) or on sticky notes on a wall.
 
 1. Set a [timer for 5 minutes](https://www.google.com/search?q=timer+5+minutes).
 1. Write down as many things as you can think of that you'd like to _start_, _stop_, and _continue_ doing next sprint.
@@ -16,6 +24,6 @@ Retro is a chance to reflect on this past sprint. You can do this on [a Jamboard
 1. Finally, set a [timer for 8 minutes](https://www.google.com/search?q=timer+8+minutes) and all discuss the top three themes.
 
 {{</note>}}
-{{<youtube>}}
-https://www.youtube.com/watch?v=dY6yFsgLrBA
-{{</youtube>}}
+{{</tab>}}
+
+{{</tabs>}}

content/blocks/spaced-repetition/index.md

@@ -0,0 +1,43 @@
++++
+title="Spaced Repetition"
+headless="true"
+time= 10
++++
+
+{{<tabs name="Scheduled check-ins">}}
+{{<tab name="Text">}}
+
+## What are we doing now?
+
+You're going to use this prep time to answer some questions _and schedule in times to review your understanding_. In your planner or calendar, schedule a short (10 minute) review of your answers:
+
+{{<note type="tip" title="Space at increasing intervals">}}
+
+- One week from today
+- One month from today
+- Three months from today
+- Six months from today
+- One year from today
+
+{{</note>}}
+
+Do this now. Then move forward to working through as many of these questions as you can. (You may not complete them all, and that is ok.)
+
+_Write down your answers first_ and then update them after looking at the sample answers, if it's useful to do so. Use all available tools to help you answer, and remember:
+
+> the point _is not_ to complete the exercises
+> the point is for you to secure your own understanding
+
+### Examples of tools you might use
+
+- [MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS)
+- [A large language model like ChatGPT](https://chat.openai.com/)
+- [Devtools](https://developer.chrome.com/docs/devtools/)
+  {{</tab>}}
+
+{{<tab name="Video">}}
+{{<youtube>}}
+https://youtu.be/U1QWx8xbbt4
+{{</youtube>}}
+{{</tab>}}
+{{</tabs>}}

content/blocks/study-60/index.md

@@ -0,0 +1,26 @@
++++
+title="Independent Study"
+headless="true"
+time= 60
++++
+
+## What are we doing now?
+
+You're going to use this time to work through coursework. Your cohort will collectively self-organise to work through the coursework together in your own way. Sort yourselves into groups that work for you; you might do this by:
+
+- logging topics on Slack
+- setting up a Jamboard and adding blockers throughout the week
+- randomly assigning teams
+- and so on
+
+During study time you can ask questions of your peers and your mentors, and you can work together to solve problems.
+
+## Use this time well
+
+You will have study time in almost every class day. Don't waste it. Use it to:
+
+- work through the coursework
+- ask questions and get unblocked
+- give and receive code review
+- work on your portfolio
+- develop your own projects

content/blocks/study-90/index.md

@@ -0,0 +1,19 @@
++++
+title="Study Group"
+headless="true"
+time=60
++++
+
+## What are we doing now?
+
+You're going to use this time to work through coursework. Your cohort will collectively self-organise to work through the coursework together in your own way. Sort yourselves into groups that work for you.
+
+## Use this time wisely
+
+You will have study time in almost every class day. Don't waste it. Use it to:
+
+- work through the coursework
+- ask questions and get unblocked
+- give and receive code review
+- work on your portfolio
+- develop your own projects

content/html-css/blocks/what-is-html/index.md

@@ -0,0 +1,134 @@
++++
+title = 'What is HTML?'
+headless = true
+time = 45
+facilitation = false
+emoji= '🧩'
+[objectives]
+    1='Define HTML, tags, and nesting'
+    2='Explore the semantics of HTML'
+    3='Analyse the role of HTML in the browser'
++++
+
+{{<note type="question" title="10 Things About HTML">}}
+
+<details>
+   <summary>What is HTML?</summary>
+
+HTML stands for Hypertext Markup Language. Markup means tags that go around content like text, pictures, videos, to "mark up" or describe what they are.
+
+HTML tags look like this: `<p>This is a paragraph.</p>`. They typically surround a piece of content, like a block of text, and describe it as such. In this case, the `<p>` tag describes the content as a paragraph.
+
+</details>
+
+<details>
+<summary>What are some examples of HTML tags?</summary>
+
+Examples of HTML tags include `<mark>`, `<section>`, `<header>`, and `<button>`.
+
+</details>
+
+<details>
+<summary>What does it mean to nest HTML tags?</summary>
+
+Nesting is like Russian dolls - or tupperware - a box in a box in a box. We _nest_ tags _inside_ each other. That's how we write HTML. For example:
+
+```html
+<article>
+  <header>
+    <h1>Title</h1>
+  </header>
+</article>
+```
+
+Here the `<header>` tag is nested inside the `<article>` tag, and the `<h1>` tag is inside the `<header>` tag.
+
+Not all tags are nested, in this example:
+
+```html
+<article>
+  <header>
+    <h1>Title</h1>
+  </header>
+  <p>Some content</p>
+</article>
+```
+
+Both the `<header>` and `<p>` tags are nested inside the `<article>` tag, but the `<header>` and `<p>` tags are not nested inside each other - they are siblings.
+
+</details>
+<details>
+<summary>What are some examples of web browsers?</summary>
+
+Chrome, Firefox, Safari, Lynx, JAWS, Brave, Edge, Vivaldi, Opera...
+
+</details>
+<details>
+<summary>Here’s an interesting question: what does HTML produce in the browser?</summary>
+
+It produces what we see - it produces a visual representation of the document. But in a little more detail: the browser **parses** the HTML we write, executes the linked Javascript, loads the CSS, media, and other resources, and produces a _model_ of our document, called the document object model. It produces an **API** called the **DOM**.
+
+It uses all of this information to decide what to show us.
+
+</details>
+
+<details>
+<summary>What is parsing?</summary>
+
+Make sense of. Analyse **syntactically**.
+
+</details>
+
+<details>
+<summary>What is syntax?</summary>
+
+The rules that structure language, so it can be understood by someone else. I put words in an order, according to rules, I _structure meaning_ and you can get that meaning back out if you know the same rules. Programming languages are the same - they each have a set of rules, they each have a _syntax_.
+
+Think about HTML and CSS. They use different syntaxes.
+
+For instance, when grouping together the information about an HTML tag, you may write: `<h1 class="main-title">This is a title</h1>` - there are several pieces of syntax here, and one is that the tag is opened by `<h1>` and its contents are done when you see `</h1>`.
+
+In CSS, on the other hand, you may have a rule like `h1 { color: red; }` - we group together declarations applying to the selector between `{}`s.
+
+HTML and CSS use different syntaxes, even though some of the concepts are similar.
+
+</details>
+
+<details>
+<summary>What is an API?</summary>
+
+API stands for Application Programming Interface.
+
+Imagine you want to know what the weather is going to be tomorrow. You may have an app in your phone which can tell the weather, but it doesn't _know_ the weather everywhere - it will ask some service on the internet.
+
+That service on the internet is an API. The service on the internet can be asked specific questions. Maybe it can be asked "What will the temperature be tomorrow in London?" or "Tell me the next week's temperatures for every city in the UK?" or "When will it next rain in Glasgow?".
+
+And when you ask a question, you need to know how to interpret the answer. If you ask "When will it next rain in Glasgow", and get back an answer of "5", what does that mean? In 5 minutes? In 5 hours? It's been raining for the last 5 days?
+
+The service may have a lot of knowledge, but it can only be asked specific questions. And the app on your phone needs to know how to interact with it. "What can I ask/tell the API?", "How do I ask/tell it those things?", and "How should I interpret the answers I get back?" are all good things to think about when thinking about an API.
+
+The DOM is an API. From our code, we can tell it things (like "All h1 tags should be blue"), and it will take action as a result. One of the ways we can interact with the DOM API is by giving it a CSS file - it will apply the CSS file when it's working out how to display a page. The CSS specification helps us understand how we can interact with the API - what we can tell it, and how we tell it those things.
+
+</details>
+
+<details>
+<summary>What is semantic HTML? What does semantic mean?</summary>
+
+Semantics means _meaning_. Semantic HTML is _meaningful code_: each piece of data marked up with correct, that is to say, descriptive tags. A heading has an h1 tag. A button has a button tag. There are only two html tags that deliberately have no meaning (div and span).
+
+These tags are then _interpreted_ by APIs to give functionality to the page. A button tag is interpreted by the browser as a button, and so it can be clicked, or triggered in many ways. A heading tag is interpreted by the browser as a heading, and so provides a traversible page outline to a screen reader.
+
+HTML tags are powerful because they are meaningful. They are meaningful because they are semantic. Semantic HTML is powerful HTML.
+
+</details>
+
+<details>
+<summary>Why is semantic HTML important?</summary>
+
+HTML tags are powerful because they are meaningful. They are meaningful because they are semantic. Semantic HTML is powerful HTML.
+
+The better structured your document, the more meaning you can pack into it, the more powerful your code is, the better it will work in more contexts, and more things will be able to interface with it. The more meaning you put in, the more meaning other readers can get out.
+
+</details>
+
+{{</note>}}

content/html-css/prep/index.md

@@ -6,6 +6,11 @@ emoji= '📝'
 menu_level = ['module']
 weight = 1
 backlog= 'Module-HTML-CSS'
+[[blocks]]
+name="spaced-repetition"
+[[blocks]]
+name="what-is-html"
+src="module"
 +++
 
 ## What should we do first?

content/html-css/sprints/1/day-plan/index.md

@@ -7,6 +7,19 @@ weight = 3
 backlog= 'Module-HTML-CSS'
 backlog_filter= 'Week 1'
 [[blocks]]
+name="energiser"
+[[blocks]]
+name="Devtools Workshop"
+src="https://github.com/CodeYourFuture/CYF-Workshops/tree/main/devtools"
+[[blocks]]
+name="lunch"
+[[blocks]]
+name="study-90"
+[[blocks]]
+name="afternoon-break"
+[[blocks]]
+name="study-60"
+[[blocks]]
 name="Transferable skills"
 src="https://cyf-pd.netlify.app/blocks/transferable-skills/readme/"
 [[blocks]]
@@ -15,6 +28,8 @@ src="https://cyf-pd.netlify.app/blocks/feedback/readme/"
 [[blocks]]
 name="Pairs for next week"
 src="https://cyf-pd.netlify.app/blocks/pairs-for-next-week/readme/"
+[[blocks]]
+name="retro"
 +++
 
 

content/html-css/sprints/1/prep/index.md

@@ -7,11 +7,40 @@ weight = 1
 backlog= 'Module-HTML-CSS'
 backlog_filter= 'Week 1'
 [[blocks]]
+name="spaced-repetition"
+[[blocks]]
+name="what-is-html"
+src="module"
+[[blocks]]
 name="Transferable skills"
 src="https://cyf-pd.netlify.app/blocks/prep-transferable-skills/readme/"
 [[blocks]]
 name="Feedback"
 src="https://cyf-pd.netlify.app/blocks/prep-for-feedback/readme/"
+[[blocks]]
+name="Playlist"
+src="https://www.youtube.com/watch?v=mBmX7944vd0&list=PLozA7cloMbPgk5gK8His2CeuJTKofypbV&index=7"
+[[blocks]]
+name="Bikes for Refugees"
+src="https://github.com/CodeYourFuture/bikes-for-refugees/readme"
+[[blocks]]
+name="Prepare for the Devtools workshop"
+src="https://github.com/CodeYourFuture/Module-HTML-CSS/issues/41"
+[[blocks]]
+name="backlog"
 +++
 
-
+{{<tabs name="HTML and CSS basics">}}
+{{<tab name="1. Intro to HTML">}}
+{{<youtube>}}https://www.youtube.com/watch?v=PqYud9dGW5s{{</youtube>}}
+{{</tab>}}
+{{<tab name="2. What is Semantic HTML">}}
+{{<youtube>}}https://youtu.be/9ZHOhKbNFsI{{</youtube>}}
+{{</tab>}}
+{{<tab name="3. Intro to CSS">}}
+{{<youtube>}}https://www.youtube.com/watch?v=pwMQcKFPOlo{{</youtube>}}
+{{</tab>}}
+{{<tab name="4. CSS Selectors">}}
+{{<youtube>}}https://www.youtube.com/watch?v=mBmX7944vd0{{</youtube>}}
+{{</tab>}}
+{{</tabs>}}