HTML / CSS Course Update

[codyloyd]

Title	Author	Date
Team Page	Cody	06/08/2021

HTML/CSS rewrite

Summary

It's time to rework our HTML/CSS material from the ground up.

Motivation

• Our current materials have become stale and out-of-date. They do not reflect best practices and modern CSS.
• We over-rely on FreeCodeCamp, with which many students express frustration.
• A very common complaint is that students are not good at, or not prepared to use CSS properly when it comes time to do projects.
• Offloading the entire learning experience to a single resource (FCC) is not very odin-like
• Overall, we can do better!

Suggested implementation

TLDR: outline a course flow, create issues for each lesson. write lessons.

Currently we have a pretty good idea of what all needs to go in this course. This document is currently the best and most complete effort https://docs.google.com/document/d/1XZXFAoADMTCF-nzvSPrbP5HwjM-pMfJ4nZVe7vpTCpk/edit#heading=h.rtv866lwog4w

• We need to go through it once again, iron out any wrinkles and finalize it as an outline of everything that needs to be written. It's in pretty good shape at the moment so this shouldn't be a huge effort.
• We need to come to a consensus on what our MVP is. Personally I'll suggest we go ahead and plan for the entire project, but then prioritize and complete and deploy the MVP items as a first milestone.
• Individual sections should be broken into issues with clear objectives such that anyone can research and write......
• ....at which point we can begin writing lessons.

Drawbacks

Writing lessons is time consuming. Maybe our efforts could be spent on something else?

Alternatives

We could just massage what we have instead of starting from the ground up. the FCC lessons could be broken up, with added context and some interstitial projects.

Additional

EDIT: see this issue-comment for a more detailed and accurate proposal for placement of this material inside the curriculum #15 (comment)

ORIGINAL TEXT:
We need to decide where this material is going to fit in the curriculum. Currently we have our stuff split with some of the very basics mentioned in the foundations course, and a full HTML/CSS course at the very end. I'm not convinced this is our best way forward, but I also do not have much clarity on what the best way forward actually should be.

If we keep our current arrangement we will at least need to decide which items belong in the 'foundations' course, and which can go in the full course. We'll also need to decide (and write/outline) what needs to be reviewed in the full course. I am of the opinion that at least half of this content (up until 'positioning') is 'foundational'... which doesn't really leave much content for the full course.

Another option is to front-load the HTML and CSS course in our tracks instead of saving it till the end. I'm not sure I'm a fan of this either, however. The rationale for saving it till the end has been to get students to writing actual code ASAP.... and I think that's still valid. I do not know how it would change our drop-off rate if we had an extended HTML/CSS course up front.

A third option is to keep the 'foundations' css course very basic... like maybe just the HTML content and CSS basics (linking styles, selectors and basic rules like font styles and colors) and then pepper in a few smaller modules between the larger courses.

EDIT: (this example has been dismissed, it won't work well)

Consider this example:

• Foundations (contains HTML BASICS and CSS BASICS)
• CSS Module 1 (contains more advanced HTML, and CSS Layout/Positioning)
• Javascript (contains no additional css material)
• CSS Module 2 (contains forms, responsive CSS and 'advanced' CSS)
• NODEJS

The actual breakdown and placement are somewhat arbitrary here, so don't get all up-in-arms about the order just yet.

Personally, I think this might be our best plan. It offers the most flexibility with pacing by letting our students get past the basics of HTML and into JS quickly during foundations.. but also allows for flexibility with the placement of other useful foundational content. We'll need to hash out the details and decide what belongs in each module, but I do not think that it represents an increase in the amount of work.

Additionally breaking it up like this may help us line out an MVP for milestone 1. For instance (again, this is only an example.. dont' get hung up on the specifics), we could keep (but reduce!) FCC for the 'foundations' lessons, and keep the current HTML/CSS course (perhaps edited/reduced) for module 2, and focus mainly on writing Module 1 for our first milestone... then after that is deployed, focus on reworking foundations, and then module 2.

[KevinMulhern]

Thanks for kicking things off @codyloyd, I'm super excited to get this under way.

My 2 cents, I'm all for keeping the start of it very basic. I really like the way you described it at one point about the start being a race to get to the layouts/positioning section because students wouldn't be able to do anything that useful until they knew how to do that stuff.

Then we could fill in the blanks with how to make things visually appealing with deeper dive lessons into fonts, typography, colors and more later on.

That's how I wished I was taught CSS tbh, instead of like how other courses do it with laying all the different font properties on you right at the beginning where you're sure to have no use for them yet.

As for placement, the big constraint for me is the current JS material. Which could be a good thing as it guides placement.

Students will probably need to know everything up to and including the layouts and positioning to do the JS foundation projects like the etch and sketch and calendar.

After that they need to know about forms before they do the library project I think. Besides that we can put the rest of it where ever we wish. With this in mind we could just do everything up to forms for the mvp because they have concrete places they can go.

It's also worth mentioning that we can also interlace the new material throughout existing courses now if that makes things easier? The seeds were changed to allow it a few months back.

[codyloyd]

yes lol.. the crux of the problem is that you kind of need almost all of it up front... which doesn't leave much for later.

Students will probably need to know everything up to and including the layouts and positioning to do the JS foundation projects

This is correct, and a detail I had forgotten. I was thinking they could get by with the most basic "this is a div, and this is a css selector" type information until after foundations.. but that isn't quite the case. My biggest worry is the foundations material becoming too bloated, but I don't see much way around getting to at least the positioning stuff.

One off-the-cuff solution could be to provide the html/css for the calculator project..... but that doesn't solve the issues that'll crop up with the etch-a-sketch, and i'm not prepared to drop that one.. it's a classic.

for posterity: moving to a discord thread called project proposal inside the html-css-rewrite-discussion channel

[codyloyd]

After discussion in the above mentioned thread (project proposal discussion, found in html-css-rewrite-discussion) here's an updated proposal for the sequencing/placement of items in the curriculum:

This proposal is somewhat specific so feel free to pick it apart and/or suggest different order/placement.

• Foundations
  • ... other sections (not changing the actual placement of these lessons inside of the foundations course)
  • HTML and CSS Foundations (section):
    • HTML basics (basic syntax, basic elements.. i.e. div paragraph h1)
    • CSS basics (basic syntax, selectors, very simple rules (colors, fonts maybe)
    • Browser element inspector
    • Layout and Positioning
  • ....js basics etc.
• Main HTML/CSS course
  • advanced HTML (more tags, tables, forms)
  • more CSS (advanced selectors, more css features)
  • accessibilty
  • responsive
  • animations
  • frameworks
• JS Course (and everything else)

The biggest change is that I'm suggesting front-loading the continuation of the HTML course instead of saving it until the end. The rationale here is that we need most of this stuff to do the assignments in the JS section.

I don't have much opinion on the placement of the main CSS course in the ruby track... maybe after ruby and before Rails?

• foundations
• ruby
• css
• rails

We can do further discussion in the above mentioned thread 🦅