HTML and CSS overview; Examining with browser developer tools

[foxfirefey]

Class Notes

For people who participated in last week's exercises, thank you so much. Anybody who discovered options not working the way they should be got 10 DW points.

You can always look at the syllabus to see where we are. Our previous class was on S2 Background and the Customization Wizard.

Reading for the Week

This week's class is a day late, because I've been working on filling out the following reading aimed at people who need to learn the basics of CSS and HTML:

• HTML Primer
• CSS Primer
• Browser Developing Tools

They are still not complete yet, in my opinion, and I'll be completing them as people start asking questions and needing guidance. I hope that we can work together on this, since I've never taught HTML/CSS from scratch before--if you have something you feel should be added, feel free to edit the wiki pages. Because so many of you are new to this, this portion of the class will span two weeks (as stated last week). This week, let's concentrate on getting a grasp on the basics of HTML and simpler CSS declarations, for those who don't know it yet. Next week, we'll go more in depth on topics that people ask about or need this week, and possibly throw in some bonus teachings on interesting new CSS3 rules.

Exercises

Okay, for those of you who need a little crash course in HTML and CSS, CSS Lesson 1. It's a little bundle of files. When you unzip the folder, you'll find:

• examples.html -- The HTML file to work with.
• css/examples.css -- Edit this file in order to change the styling in the HTML file.
• exercises.txt -- Has a list of exercises for people new to CSS to try. Note: centering the bigger image might be a little tricky if you're new to CSS, so don't be ashamed. I'll give solutions (and new exercises) next week.

If you are already pretty proficient with HTML and CSS, please get some practice with Browser Developing Tools if you don't know how to use them! Play around with exploring your journal and its current HTML/CSS. Test making out on-the-fly changes.

seleneheart has also prepared something very nice: an annotated version of the CSS for two different layout themes.

• Bases - Steele
• Blanket - Autumn Clouds

Comments

[ex_pippin880]

DIVs scare me.

[exor674]

How do divs scare you?

[ex_pippin880]

By existing and not being tables? :(

[foxfirefey]

How can we help you overcome this fear!

[ex_pippin880]

Haha, I probably just need a newer HTML book. I should have got one when I bought a new CSS guide the other year.

[foxfirefey]

Heh. There's really not all that much to say about divs! They don't really do much of anything on their own, they're just containers to put other elements into. You can give them classes and IDs to help select them and things inside of them with, and add backgrounds and borders and make them into pretty containers, but they're still just containers. My guess is the scary part is actually trying to lay them out on the page the way you want using CSS! Much more difficult than just the concept of them.

[sunrisetr]

And here I was wondering where this week's lesson was, and if I mixed up the days. Thank you!

[tyger]

....I haven't even started yet, but I have to say. You get my eternal gratitude for pointing out the Safari developer tools. *_______*
I don't have to switch to Firefox just when I want to check what class something's in! aljdgl;jea;l <3<3<3<3<3

[foxfirefey]

Glad to be of service!

[ex_pippin880]

Yeah, my entire history of websiting has been "make an image in Photoshop, turn it into a table". I don't really know how to make the jump from the sort of website design I do to the sort that I should be doing.

[ninetydegrees]

Do you have an example of layout structure you made with tables? We may be able to walk you through the transition.

[silverflight8]

*checks off name on attendance* :D

[foxfirefey]

Aww, yay!

[tyger]

...argh. I can't make the developer tools actually edit anything. :( I tried double-clicking on the left side, but all it did was let you change variables that're there - if I tabbed to try and make a new one all it did was highlight. And if I tried to double-click into anything on the left all it did was select the term. And using the gear on the left didn't do anything, I'd input my CSS and hit enter, and it'd just disappear. I also tried putting background-color rule into the console directly, but I just get 'SyntaxError: Parse error'.

I'm probably missing something really simple, but, uh. /o\

[kitters]

Omgyay Dragonfly and annotated Bases. :DDDDDDD Thank you so much, you guys!

[erika]

Is there some place where I can get a journal to play with customization options and not take up a username token on DW and not have to worry about fucking up my main journal?

I mean, I could use my fanfic journal for it so it's not a big deal if the answer to my original question is no; I am just curious.

[seleneheart]

If you look at the previous lesson, foxfirefey has set up a link where people can create temporary journals.

If you don't want to do that, you can create a testing community.

[erika]

Thank you for addressing my question which had already been addressed! Silly me for not reading the previous lesson more carefully.

[seleneheart]

No worries!!! It's a lot of info.

[pipisafoat]

I have had the web developer toolbar for a really long time and never really could learn how to do much of anything with it. Two minutes and I can actually Do Things now! Hooray! (Unexpected bonus, yay!)

[lapillus]

This is a bit tangential and probably too early in the curriculum, but, does DW have usage stats for various browsers around in a publicly accessible place? Since the reset is useful, but doesn't change what is implemented, it would be nice to be able to check how many folks using IE6 or the like.

[foxfirefey]

We do have stats:

http://dw-design.dreamwidth.org/2803.html

BUT those stats are not going to necessarily match the stats of people ho visit journals, because DW GA is only on application pages, so it's only logged in users or viewers of the main site page, etc. And my guess is logged in users might have a different profile than perhaps general journal visitors. You have a seed account, though, so you can definitely hook up Google Analytics to it and see for yourself what your spread is.

Fortunately IE6 in the US overall is pretty darn low by now:

http://ie6countdown.com/

[zvi]

I have seen such stats recently! But I can't remember where. The break down was that most users were either Firefox 3.6/4 on Windows or Chrome on Windows, followed by Safari or Firefox on Mac, followed by IE7/8, followed by Firefox/Chrome on Linux, followed by other. In a very approximate way. Basically, the takeaway is that an unusualy high percentage of our users use either Firefox or Chrome, and that there's almost no (not zero, but close) IE6 use. (This is probably in large part because the official site portions do not support IE6, and display funkily in it.)

[vilakins]

I did last week's (and I'm not sure if not being able to add a background image to Modular counts as a bug or a feature of Modular) but since then my computer died and has to be replaced, I'm on someone else's in the meantime. Let's hope I have a new one by next week.

I do know a fair bit of HTML and some CSS from looking behind Dreeamweaver, and I look forward to learning more.

[ex_pippin880]

Here's all I have online at the moment, and some screencaps of designs I never actually finished enough to upload: one, two. (I haven't worked on anything for over a year due to various things.)