![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
foxfirefey) wrote in ![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png){kind=small}
style_system2011-04-23 11:29 pm
HTML and CSS overview; Examining with browser developer tools
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:
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.
no subject
Okay okay so using the developer tool and this tute - which had entirely the wrong classes for my layout so I had to FIND THE ONES THAT ACTUALLY WORK MYSELF - and my fumbling knowledge of CSS I managed to put my moodtheme on the left!
It took a lot of guessing, but I did it! :D:D:D:D
*so happy~*
..still haven't done the example exercise, but, uh. I did a thing! That I didn't know I could do before! (I was using the exercise as more a 'learn the developer tools' thing and yeah uh that didn't work. ¬¬;) :D SO HAPPY! Have been meaning to do this for MONTHS but I thought it'd take me hours of swearing but it took me maybe twenty minutes! *dances* :D
no subject
That tute you linked to has somebody using an imported layer of Flexible Squares, and while we've tried to standardize CSS classes across DW layouts, that doesn't mean we standardized on the names in Flexible Squares, so you're right to notice that it's different.
no subject
It's still kind of hard, at least for me - if I highlight the moodtheme-picture in the development tools it tells me it's div.metadata.bottom-metadata ul li img, whereas what actually worked to move it was just .metadata ul li img, but still! :D I managed to get it, which is about 1000x more than I usually can do things!
*nodnod* Was still handy to know what I should be coding once I found the right classes! :D