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?

[foxfirefey]

How can we help you overcome this fear!

[sunrisetr]

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

[foxfirefey]

Noooo, your teacher was just negligent in trying to get together the massive amounts of data for this topic. Trouble is I don't even remember how I learned CSS, so it's hard to think of how I'd teach it. As opposed to learning DW styles, which I know quite well and have already written quite a span of documentation for!

[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!

[silverflight8]

*checks off name on attendance* :D

[foxfirefey]

Aww, yay!

[kitters]

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

[foxfirefey]

You are welcome!

[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.

[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!)

[foxfirefey]

Yeah, that toolbar is handy dandy.

[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/

[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.

[foxfirefey]

I am so sorry your computer died!

Not being able to add a background image to modular was a bug--did you get points for it for reporting it? If not, I should give you points for it!

[dchan]

Ooh, you can actually (temporarily) edit on the fly using the browser development tools! I've used them quite a bit before to view code/see where it is on the page, but I was never able to figure out how to change things around to test different options before. (Much more useful than having to upload a whole new css file every time I want to tinker around with the style!)


Also poked around with last weeks lesson too....I did not realize you could change the background image/header through the wizard! I've always completely skipped the wizard in the past and just skipped to posting custom css files when I wanted to make changes, lol.

[foxfirefey]

Yupyup! It's really handy if you just want to tweak a rule and see how it turns out before you save.

For people who know CSS, the wizard's background image options are pretty superfluous. But, for people who don't, it's very nice. And if somebody is making an S2 style, it's good to know about those built in options you can give people, so they can tweak your style without knowing about CSS.

[adalger]

"* Decorate the title"

This is a little vague. Do you mean "make it look pretty" or something specific like make it [underlined|italic|strikethrough]?

[foxfirefey]

Pretty much anything the person wants to do with it, as long as they do it to the title.

[melyanna]

I must not have read the details here on the exercises all that closely. I was starting to worry that I'd missed something really obvious with centering the large image. Still not sure I did it the best way, but it's centered, at least.

[foxfirefey]

Nope, it was a tricky one, so I added a note above about it--I had to think for a couple minutes about it, ha.

[lurksnomore]

Well, after reading...stuff until I didn't think I could read and process anymore, I finally got almost all of the exercises done. The only thing I couldn't get it to do was center the larger image. I probably did something very wrong with the selectors or some such, but I got everything else! Now, on to last week! (does anyone have a time-turner handy that I could borrow for a bit? I'll return it--I promise!)

[mergatrude]

Hi! I haven't done this yet. Life kablooeied in my face, but I do want to get back to it. Hope you don't mind people trailing behind?

[northern]

Thank you! The stuff in this lesson is things I learned at Library school - great to look through and see that I know it! :D

[tree]

yay! i have finally finished this lesson! only 3 weeks late!

[foxfirefey]

Sweeeet! I'm working on the current lesson, only one day and an hour late, ha.

[charlottetoolan]

Exercises done!