[Noisebridge WebDev] Re(1): Frontend Web Development, Monday 8pm: CSS selectors and the box model

[Aaronco Thirtysix]

From: Jeffrey Carl Faden <jeffreyatw at gmail.com>
To: .........., webdev at lists.noisebridge.net
Subject: [Noisebridge WebDev] Frontend Web Development, Monday 8pm:
        CSS selectors and the box model

> Last class we started talking about selectors in CSS. They are
> probably the most complex part of CSS, so we're going to look at them
> further in-depth. We'll also talk about the box model, the display
> concept that makes words and containers on the web look like they do.

IMNSHO, it would be great to gather and to present a list of decent
and alternate web-element inspection add-ons for Firefox/Iceweasel
_besides_ just Firebug --- naturally including the ability to finely
inspect CSS-elements for upcoming WebDev classes.
+Plus+, the ability to provide clearer instructions how to effectively
_use_ these Firebug alternatives for web-element inspection.
That's simply because NOT(!) everyone is using Google's Chrome
browser, Safari (for Macs), MS Internet Explorer (for PCs), Opera,
....etcetera.


> If you can't make it to this week's lecture, you can watch a live
> video stream of the class. Join this Google+ Event to be notified of
> when to hop on (you don't have to be a Google+ member):
> https://plus.google.com/events/c81a9fc4v6n8s9grq0r87hfobks
> This video stream will also be available to watch after the class is complete.

Having watched the live video stream of last week's first class in the
series, I think that the instructor might want to better sharpen the
focus on the video projections of the text edits. In several obvious
instances within that video stream, the text entries in both the
index.html and style.css files are CLEARLY blurry and hard to
distinguish. This is especially true when windows or portions of each
window are minimized, e.g., a) horizontally tiling the text editor
windows for index.html and style.css side-by-side along with the
browser results, and b) having the larger browser main window along
with the teeny-tiny (and blurry!) Firebug element-inspection window(s)
below.

Uncertain how the instructor could better clarify screen shots.
Here are just a few thoughts from on the top of my head how this could
perhaps be done:
1) Figuring out and then using the focusing mechanism(s) or control(s)
on the projector itself?
2) Cleaning and polishing the projector lens?
3) Physically moving the projector forward and backward from its front
position until the display is at its sharpest?
4) Using some sort of focusing software for video (somewhat like the
Sharpen filter does for graphics in the GIMP??)
5) Rapidly switching between maximized screenshots at maximized focus
for each part of the live video stream presentation, rather than
simultaneously trying to tile the several relevant windows or portions
of each window within the single screen?
Again, these are just a few thoughts on this off the top of my head...


> ....If you're either new, couldn't make last week's class or
> you simply need a refresher, come early and we'll go through
> a simple tutorial. Don't let it discourage you if you're starting
> from the middle - attend recaps and labs and you should be
> able to catch up!

I'm wondering what other decent tutorials/recaps are available online
for HTML5 and CSS3 _besides_ the instructor's live video stream and
the wide breadth of zip'ped downloads listed throughout
https://noisebridge.net/wiki/Frontend_Web_Development/Notes for Series
1 and Series 2 of the FWD class????
Already viewing the fine HTML and CSS Educator.com YouTube videos,
e.g., http://www.youtube.com/watch?v=mh0aY17Hh0o& and
http://www.youtube.com/watch?v=sWJH3GESYcU&

Thanks!
-A

------------------------------