HTML/CSS Module

[kabaros]

For our review of the Syllabus for the new classes, we're looking at ways of improving the current syllabus. @NateWr took the lead in drafting the first module of the course (HTML/CSS).

We generally aim to:

• concentrate on very practical knowledge
• depend more on students' research and homework
• build a real-life project from day one (a website for Bike for Refugees was suggested)
• the first classes would be 60-70% HTML/CSS, and 30-40% intro to logical thinking and coding (Cedric is drafting that material) - it would be good if the HTML module leads nicely to that - for example, the Donate Button on the current draft can be a start of writing some JavaScript very early on.

We also want to:

• make sure the readings and research we set are to the point and suitable within the time limits
• accommodate practical issues such as learning Git, IDEs and using the Terminal in those first classes.

The draft of the new syllabus, and the HTML/CSS module lives in this repo and is published to https://code-your-future.github.io/syllabus . Please use this github issue to discuss improvements and remarks. Also feel free to fork the repo and add your suggestions as PRs.

[tvooo]

Quick thought re: real-life projects. Not sure if that's the idea in general, but should every group have their own project? If all groups build a website for Bikes for Refugees, it creates an unnecessary feeling of competition, and in the end just one of them will be taken. Would it be better to have one project per group (or individual)?

[NateWr]

@tvooo I think the idea was to have a different project for each class. @kabaros and I discussed the first module yesterday. We're thinking to switch to a generic site for in-class mentoring, so that the syllabus is more portable from class to class. But to encourage the students to build up their own (simple) site as their homework, so that by the end of the module they have a small example page or two that's unique to theme.

It would be nice to tie the first module into the real-life project later in the class. But I'm not sure we'll know early enough what that project will be, at least for this round.

[kabaros]

This is the updated lesson 1 - basically tailoring @NateWr outline and class to address students rather than being a guide for mentors. I tried to keep as complete as possible to avoid having a separate guide for mentors - my worry is having a separate guide would add one more thing to maintain and would quickly get out of sync from the main class.

The lesson: https://code-your-future.github.io/syllabus/html-css/lesson1.html

[kabaros]

The specific lessons of this module are in #5 and #7 - The high-level module plan discussion can keep happening here and the detailed discussions about a Lesson on the specific issues.

[rarmatei]

I haven't seen any mention of flexbox. It seems like it would fit in Lesson 2, where we do content positioning, but we're already planning to cover a lot for that lesson.

Maybe we can give a short intro to it, and have as the advanced homework part?

There's a really cool FlexBox exercise I think we definitely should use at some point: http://flexboxfroggy.com/

[NateWr]

Nice game there, @rarmatei. That will be great. We're looking at assigning this udacity course as homework, which covers flexbox as well as lots of other useful positioning techniques. But we want to make sure it's not too much for them to do over the course of 3 weeks.

What do you think about flexbox's compatibility? Is it supported enough now that we don't need to introduce floats or should we still cover them alongside flexbox?

[kabaros]

I also think it's good to cover it - support for flexbox is pretty much universal now, Bootstrap 4 is built on it, and react-native totally depends on it for its layout engine (and students naturally get interested in react-native after the react module)

[kabaros]

I would say let's skip floats in favour of flexbox.

[rarmatei]

Agree, flexbox is more powerful.

[Michael-Antczak]

Mobile first design - one of the homeworks I looked at was implemented like that: media query and max width of say 400px. I would say whatever in CSS is the default mobile and small width, so the first breakpoint needed would be say min-width 500px. I think it should be repeated again.

[Michael-Antczak]

W3 validator - https://validator.w3.org/ - We could encourage them to send websites through W3 validator first to catch the obvious mistakes. I had Won with messed up HTML (doctype after HEAD, etc)

[Michael-Antczak]

@kabaros I think some of them build too much complexity too early. All those images, text, but the fluid layout not working. I would say use just empty div boxes with border until you make it work, THEN keep adding more stuff. Just to remind students to build something simple and workable first and then add complexity, not build complex system and then try to find out why it doesnt work.