HTML/CSS course rewrite discussion

[codyloyd]

I don't have too much here, but I believe that we need to completely rewrite our entire CSS course.

I have lots of nebulous ideas, but not a lot of concrete plans, so let's discuss and see if we can get something rolling.

The first order of business is to get an organized list of everything such a course would cover. Second would be agreeing on some optimal sequence of those topics.

Here's what I have right now.. though I'm confident it's incomplete. For now, the order doesn't matter too much.

• HTML
  • basic tags and structure
  • semantics
  • Html-only Document layout
  • accessibility (maybe mention this now, but save it for a separate topic/lesson)
• Basic CSS how-to.
  • style tags
  • links
  • basic syntax
  • selectors
  • browser compatibility - can i use?
• Styling
  • colors
    • background
    • font-color
    • gradients
  • typography
    • font-stuff
    • line-height
    • floats
  • Other stuff?
    • border-radius
    • box-shadow
    • borders
    • tables
• Positioning
  • THE BOX MODEL
  • box-sizing
  • margin/padding
  • Positioning techniques:
    • block (first because it's default)
    • inline/inline-block (first because it's default for some types)
    • Flexbox!
    • Grid!
    • Absolute/Fixed Positioning!
    • Floats
• Animations!

[codyloyd]

One idea I have is that we probably don't need a specific HTML/CSS course at the end. I am willing to be convinced otherwise, but at the moment, I think there's not much reason we couldn't get most of this stuff in WD101 and just call it good... and then suggest that students keep practicing as they complete projects in other parts of the course.

How viable this is will depend on just how huge the content ends up being.

[ryanford]

HTML/CSS has a lot of ground to cover. I tend to like having some in WD101 but having the meat and potatoes in a dedicated section. I've noticed some students that have already completed HTML/CSS that are still critically deficient in basic layout stuff.

[ryanford]

I think we should have a whole lesson in HTML/CSS about debugging layout with devtools. Do we want to put responsive design in HTML/CSS? The outline as it is, is a great start. I kind of want to start with just HTML, focus on structuring the document, then incrementally add in styling what they're making if that's reasonable.

[codyloyd]

A large part of my thinking here is that most of the course should focus on positioning since, as you say, that's the biggest deficiency in our students at the moment. Everything else (font-size, color, box-shadow, etc. the list goes on) is relatively intuitive and easily googled once you know it exists, so I feel like we can put a BUNCH of that stuff into a couple of lessons and spend much more time drilling positioning.

I agree that we should add responsive stuff.
I agree that we should start with HTML.. but HTML isn't all that deep, to begin with. (Accessibility not-included 🙈)

[KevinMulhern]

Would it be worth doing something like a competitive analysis to compare the outlines of other html/css courses to give us some ideas/inspiration of how we should maybe structure this?

I'm excited to replace and break down the "god" html and css lesson in web dev 101, It's the last and only problem area left in web dev 101, we've tackled everything else 💪

[codyloyd]

But KEV: Everyone else is wrooooooooong

real-talk: Even if we decide that everyone is wrong and would like to do our own thing.. a comparative analysis would give us a good place to start and something on which to base our opinions if we DO decide to deviate.

[KevinMulhern]

Completley agree, definitely just something for us to use as a baseline.

Aight since I suggested it I don't mind whipping something up for a comparative analysis.

[ZachBaird]

@codyloyd Echoing what you said about positioning, I have noticed with student solutions that many just don't seem to understand positioning and getting up layouts. @KevinMulhern mentioned it as well during the call last week.

The overall structure you've started with is pretty good, but I think somewhere maybe between the HTML and CSS we talk a bit about how writing "good" HTML can help make writing good CSS easier.

[codyloyd]

That is a good point ^^. I've noticed several students that do not seem to understand the relationship to their markup and items position on the page. This fact seems crazy to me because I kind of assumed that would be obvious, but it's worth covering.

[ryanford]

That's what I was getting hoping to remedy by spending time without css to focus on the structure

[ZachBaird]

Should a lesson dive a bit into looking at wireframes or basic UX design (as relates to code) to fulfill this objective, or does something like that exist?

It might provide a useful path for students if they follow along breaking down and coding a wireframe.

[ryanford]

I'd like to start just creating web documents. Like you'd make with MS Word, using bullet points and headings, paragraphs, footers etc.

[codyloyd]

@ryanford-dev how much of this HTML-only stuff do you think we need? IMO it could probably just be one lesson.

HOWEVER => I do like that Idea quite a bit. Give the students something to replicate with plain ole HTML as a starting point

[ryanford]

Not too much. As you mentioned it's not that deep of a topic really, but at least a lesson or two and an exercise.

[codyloyd]

I can get on board with that. Updating my outline to reflect that order.

[KevinMulhern]

@ryanford-dev I really like that idea, we could maybe have that as the project for the html basics section and carry that over to the css basics section where they would style the plain old html project they did previously.

[ryanford]

Something like a resume or cover letter would be relevant and would use those types of non div semantic elements, and something we could circle back to when they have more skills to spice it up as they learn.

[codyloyd]

Another thing i've been ruminating on... What is the best way to teach positioning?

I'm not completely sure our typical text-only lessons are going to cut it. FCC doesn't cut it. I don't know of any killer videos on the topic either.

It's easy to find "this is how you use grid" and "this is how you use flexbox" but those are typically not easily applicable to "this is how you actually put stuff where you want it on a website"

I've been thinking videos would probably be the best because you can easily bounce back and forth between the code and the output to demonstrate what everything does, but I'm not sure I want to commit to making said videos just yet.

[I3uckwheat]

I think it would be a good time to talk about tooling and such at this point too, stuff like editing in the dev tools for positioning, using live-server on vscode, how to open HTML files in the browser, possibly design tools?

[codyloyd]

devtools => yes
live-server => meh? (never used it.. is it worth it?)
opening HTML files => lol yeah i guess we should cover that.
design tools => out of scope

[KevinMulhern]

@codyloyd we could use codepen examples and embed them in the lesson page. I like the way these guys do it https://frontend.turing.io/lessons/module-1/intro-to-css.html

[I3uckwheat]

@codyloyd live-server is to just get a hot-refresh on the webpage when editing.

[codyloyd]

@KevinMulhern oooh that's nice.

[I3uckwheat]

I do think it's important that we keep people developing on their local machine as much as possible, codepen is an easy out. But I love the idea of embedding those @KevinMulhern

[codyloyd]

The codepen is not a suggestion for the students, but for a way to demonstrate things in our lessons.

[I3uckwheat]

@codyloyd I understand that, I was just trying to mention something we should put emphasis on.

I should have seperated my points better.

[ryanford]

I think this would be pretty early for tooling talk, outside of devtools. But honestly early for devtools too. Depending on how much ground we cover in wd101, I'd say even devtools could wait until the dedicated section.

[I3uckwheat]

@ryanford-dev I don't think we want to starve them of basic tooling for help with CSS positioning though, seeing how the box model works in the tools is super helpful.

[codyloyd]

I really have a hard time deciding what should be 101 material and what can be put off. In my mind, almost everything is essential 🙈

[ryanford]

You want to talk about how to open files and use an editor, and then also how to use devtools in the same intro section? There's a big gap there

[ZachBaird]

@codyloyd Positioning is definitely a tough one folks seem to struggle to grasp.

Looking back on my personal experiences, I really internalized for myself what each position does when I began struggling through building webpages from scratch. Wanting to achieve something and wading through Google to make it happen makes the solutions memorable.

Maybe frequent, small challenges could be introduced like "put a red box on top of a blue box in the center of the screen" for positioning.

[codyloyd]

@ZachBaird yeah I agree with that... could easily expand to some common but basic site-layout stuff... like "header => sidebar => content => footer" etc.

You are right about the need to just get in and do it.... SO maybe our assignments here could just be images that need replicating? (with proper solutions so people don't just absolute-position everything)

[ryanford]

I'd be happy to tackle the positioning stuff. There are some typical components that show-case most of the layout techniques pretty well. We could just incrementally build/recreate a webpage that features them. A typical enews article would have most of them. Float -> picture with text surrounding. Flex -> navbar, Grid -> overall layout or a contact form etc.

[ryanford]

A brief lesson then as an exercise add that component to the webpage your recreating.

[codyloyd]

Right on... I'm already getting a clearer picture of this thing in my mind.

LIke I'm picturing a series of assignments with screenshots:

and markup:

<nav>
  <div class="logo">LOGO</div>
  <ul class="links">
    <li><a href="#">link1</a></li>
    <li><a href="#">link1</a></li>
  </ul>
</nav>

and some general hints like: the header font is 28px, and everything is placed with flex-box.

[Ikass]

If I may, a student here, currently going through the HTML/CSS course. As you already noted, I am also struggling with positioning content/layout. Building websites from scratch is a really memorable way to learn, but slow and incredibly frustrating.

In my opinion, the FCC intro section in the WD101 course was largely a waste of time - following "do this and then this" instructions is not a good way to learn, remember and make connections with the material.

A better approach, imho, would be to tackle meaningful, personal projects right from the start - a personal website/blog/portfolio - something to continue building out throughout the course. As was already suggested - teach the basics, show a static/image mockup and ask the students to build it, give hints, and in the end provide an optimal solution.

By the way, the Head First book series has a really good approach to teaching. Though I was reluctant to follow their HTML/CSS book, as it is rather old.

Finally, definitely keep the HTML/CSS as a separate course. Personally, I am first focusing on getting the basics in place, partly to begin freelancing building static sites (using Jekyll and CloudCannon) - to support my learning to code journey and also to fast-track learning by doing custom projects.

[codyloyd]

I'm ready to get rolling on this soon... going to close this issue to archive and start a fresh discussion.

Everything here is relevant and good and worth keeping... will link this thread in the new discussion.