Friday, February 3, 2017

Advanced CSS Concepts (edX)

Last summer I enrolled in a class on edX called "Advanced CSS Concepts".  It was delayed until November because of technical issues on their end, and I put it off until a week ago because Google.

"Oh, advanced ey?  That should be interesting" I thought.  Boy was I in for a disappointment.

The class purports to offer a "solid foundation in developing and testing device-friendly websites using the power of CSS.", but I felt it really fell short of the goal.  Perhaps I just had unrealistic expectations after taking some of the MIT and Berkeley classes, which have rich video content and challenging homework assignments.

This class had almost no video content at all.  Most of the "tutorial labs" really reduced down to a game of finding the location to copy-paste the snippets they fed you.  I mean, you could type them in manually to feel more involved (which I did for much of the course), but it was still a pretty shallow exercise.

I suppose in an effort to even things out, they made the "self assessment" tutorials damn near impossible.  Not because it was terribly difficult, conceptually.  No, they were nearly impossible because they were so grossly under-specified, and because nowhere in any of the supporting material was any motivation provided for any of the concepts we were supposed to learn.  Copy-pasting code snippets doesn't give one a solid handle on why this or that code was written the way it was.

Now, I did learn a few things.  It wasn't 100% awful.  Playing with Visual Studio Code was fun.  I installed it on both my Windows 7 machine at work and on my Ubuntu 16.04 machine at home and it was great (though I forgot to install the HTML/CSS formatting extension at home...).  Playing around with SCSS in module 3 was also kinda fun (I set up Gulp to auto run the compilation step, which was not a part of the course...).

I'll summarize the modules, and note the few places where I did learn something interesting.


Module 1


It didn't take long to figure out that this class wasn't going to be all it was cracked up to be.  Most of module 1 involved basic CSS fundamentals.  And not even what I would consider a particularly compelling presentation of those fundamentals either.  I kept thinking back to a tutorial I did back with I was studying for 70-480, and how much better it was at presenting the basics.

This was the only time I completed the "self assessment" portion. It probably ruined me for the rest, but this is what my results looked like (which, as far as I can tell, is the expected result):


Google Chrome developer tools were pretty handy when I was trying to test whether the media queries were working, since I could change it to device mode and slide the size around without having to mess with the entire browser window.


Module 2


The "big idea" for this module was... well, "modules".  Making our CSS more readable, scalable, and reusable.  Of course, these ideas don't really come to fruition until the next module when we start playing with CSS preprocessors.  So this module boiled down to choosing how to group CSS into classes.  As I noted in my opening rant, none of the example were particularly well motivated.  Playing with the font-awesome icons was sort of fun, but it's not exactly ground breaking, and certainly not "advanced".  Again... me with my unfairly high expectation...

I got as far as the testimonial section of the self assessment, and skipped the last bit (creating the media objects).  It just wasn't worth it.  I'd post of picture of my testimonial section, but I don't care and you shouldn't either.  It's dumb.


Module 3


This section almost provided a bit of redemption for the course (I'd already rated it one star by this point)... but I think overall this is still a dud of a course.  I liked getting a taste of SCSS (course mentioned LESS and classic SASS, but the examples were SCSS).  It certainly wasn't a comprehensive lesson in SCSS by any means.  I also got a taste of using Gulp, though that was courtesy of the instructions for automating SCSS compilation in VS Code. I didn't want to have to run the task runner, manually, every time I changed something, and Gulp did that for me.  It's a shame it wasn't integrated into the class...

The self assessment for this module was even worse than the last, and I pretty much skipped it entirely.  The multiple choice question part was pretty obvious, so I got that, but I wasn't going to play the "lets read their minds and try to figure out what I'm supposed to do here" game... that's what real customers are for haha.


Module 4


By the time I got to the last module, I was ready for this nightmare to be over.  It seemed like half this module was pages cataloging tools I should go look at.  There was a little bit of fiddling with flexbox and SVG (including some kind of picture element polyfill I think... not sure because again, no explanation was really given, just "make sure you have this, copy this in, *poof* magic!".

It's sad that my blog posts for 70-480 that covered SVG and Flexbox probably did a better job... and it's not like those are great posts either (Pretty sure I hadn't even been hired as a full time dev yet when I wrote them!).  Maybe it isn't a fair comparison.  They really didn't try to explain much of anything about either, maybe that wasn't their goal.  Whatever...

Least satisfying progress chart ever... sigh

My code is also on GitHub: https://github.com/sabotuer99/AdvCssClass





No comments:

Post a Comment