Adds tasks and designs, and splits these into folders

[LucyMac]

Attempting to solve

• Students have been getting confused about whether to make the page responsive from the beginning, because the mobile design file is visible in the root folder
• We need to make this project a little more complex so it can be a running thread throughout the module

Solution

• Splits out anything that is not the initial homepage design for desktop, into other folders called 'level 2' and 'level 3'
• Happy to take suggestions on this 'level' wording, but wanting to avoid using the term "week 2" and "week 3" because it restricts how and when this can be taught / done.
• Adds a whole new page for ordering a Karma device, to practise making and styling forms
• Provides updated mobile designs for both homepage and order page inside 'level-3' folder

---

View rendered HOW_TO_MARK.md
View rendered README.md
[View rendered level 2/README.md](https://github.com/CodeYourFuture/HTML-CSS-Coursework-Week2/blob/syllabus/instructions-clarifications/level 2/README.md)
[View rendered level 3/README.md](https://github.com/CodeYourFuture/HTML-CSS-Coursework-Week2/blob/syllabus/instructions-clarifications/level 3/README.md)

[bonboh]

@LucyMac This is great, thanks for these changes! I love the tasks of adding a whole new page and creating a form. What are your ideas on how this will impact other homework? Are you thinking of keeping or removing week 1 and week 3 homework?

I'm wondering how you made the radio and checkbox inputs orange though—are you hiding the browser inputs and creating pseudo elements?

I've seen UX tips where form labels don't indicate which inputs are required but instead indicate which are optional. Since there are usually not many optional inputs, we get less visual noise. If it's not too much hassle updating the screenshots, WDYT about removing the * and adding (optional) to Address 2?

[LucyMac]

Hey @bonboh, thanks so much for reviewing this so thoroughly.
So this is part of an experimental re-shuffle of the syllabus whereby we teach HTML & CSS over 4 weeks instead of 3 (and have a 1h30 PD session each week). This means the whole module would be spread out differently. We're just trialling this in London this month, and I'd expect for us Gardeners + Sally to have a chat afterwards to see what worked / what didn't.

All that to say that the usual spread of work and homework over 3 weeks doesn't apply in this case - though I think it's safe to say the week1 homework should be scrapped as it's really not challenging enough I don't think. We started with Karma in week 1, and 'level-2' would be week 2 homework, etc.

I think we could consider this a trial for now and decide what's what at the end of the London module (post 4th Dec)?

Re pseudo elements for radio and checkboxes - yes. Unless we think this is a terrible idea, I feel like this is a nice challenge for them. It's also very rare not to get custom designs for these elements in real life.

Re adding (optional) instead of * - that's fine, though I won't be able to update all this before class tomorrow 😆

[bonboh]

@LucyMac Thanks for the changes! I've left just a couple of minor comments about updating text.

Thanks for the context, it makes better sense why we're talking about levels instead of weeks. I'm in agreement with the week 1 homework and would be fine with it being scrapped too. Will be interesting to hear about the results of the trial/experiment.

Personally I'm not in favour on getting students to make custom radio and checkbox styles. The only solution to this task imo is really just copy-and-pasting code from a tutorial that describes how to create accessible custom styles, and that's something that doesn't seem valuable for them to do. We don't formally teach students about pseudo elements or absolute positioning so it seems like an impossible challenge too. True, custom radio/checkbox styles are common but they're usually already included in whatever component library the team is using.

[LucyMac]

Hey @bonboh thanks for this and sorry for the delay - I wanted to 'test' this new material on our current London cohort and see how they got on. On the whole, they did pretty well!
I made the custom radio and checkboxes stretch goals, so they didn't get distracted by this if they didn't finish the rest of the page first. Seemed like a good compromise, and some of them enjoyed the challenge.

We did 'level 3' in class as part of the lesson on responsiveness and media queries, and it was great for them to practice with their own code as they faced slightly different issues depending on how they'd coded the pages up.

I've edited the references to folder names for consistency as suggested. I also removed the idea of creating a new branch for each level because they need their previous code to be able to build on top of it, so it was confusing.

[bonboh]

@LucyMac No problem about the delay! That's great that the expanded karma exercises went down well with the class. Making the custom radio/checkbox styles optional is a good compromise 👍

[SallyMcGrath]

PS these are template files so you might prefer to pull in the updated version from here:

https://github.com/CodeYourFuture/CYF-Coursework-Template/blob/main/HOW_TO_MARK.md

and make changes to that template file to fix everywhere when you see errors like this

[SallyMcGrath]

LGTM! 🥇

I suggest the name for this should be

HTML-CSS-Module-Project

Which is what all the module projects will be called!

[SallyMcGrath]

Great advice! I suggest following it up with a time box to make this clearer. "Make sure you commit your code every half an hour at least."

[SallyMcGrath]

Suggested change

	You could also create a specific `store.css` file - just make sure you're not duplicating the CSS already defined in `style.css`!
	You could also create a specific `store.css` file. Make sure you don't repeat the CSS already in `style.css`!

[SallyMcGrath]

Suggested change

	- Custom radio buttons and checkbox: the 2 radio buttons and the checkbox in the store page design are tricky to style and will require you to do a little research. Focus on the rest of the form and layout first, and leave these until the end as a stretch goal.
	**Custom radio buttons and checkbox.**
	The two radio buttons and the checkbox in the store page design are tricky to style. You will need to do some research to build these custom form controls. Focus on the rest of the form and layout first, and leave these until the end as a stretch goal.