search

CodeYourFuture / syllabus-archive

[ARCHIVED] Please use https://github.com/CodeYourFuture/syllabus
https://codeyourfuture.github.io/syllabus-master
74 stars 116 forks source link

HTML/CSS Module #2

Open kabaros opened 7 years ago

kabaros commented 7 years ago

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:

We also want to:

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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

rarmatei commented 7 years ago

Agree, flexbox is more powerful.

Michael-Antczak commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

@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.