Style Class, Session #1: Class Intro

[foxfirefey]

Welcome to the DW Styles Class! From the number of people answering the poll, this is going to be a fairly large class, even if a lot of you can't make it. Lurking is, of course, okay! I do want to encourage lurkers to ask questions if they have them, however--you don't have to stay out of sight.

This class is geared around learning by doing. The main project of the class is to create a style of your own! The lessons are tools to help you along the way, so the syllabus is subject to change if I feel we're going over a subject too fast and people need more time to adjust. At the end, I'll have treats for people who share layouts with others at dreamwidthlayouts.

Your mentors are, in no particular order: afuna, ninetydegrees, liv, seleneheart, monarchist, exor674, and, well, me. Mentors are here to help me review lesson plans before they go live and help answer student questions--some are CSS only, others know S2. But! If you know the answer to another student's question, please feel free to help them. We all can work together to learn things.

This class is split up into three "tracks" for different experience levels and goals.

Simplified CSS

Designed for people who want an easier introduction in CSS. It involves making style changes to an existing layout with the base CSS included.

CSS only

Designed for people who want to make a layout from scratch based on existing layout HTML--you can do a lot with just CSS. People might need help with an S2 override or two in order to achieve the effect they really want, but overall the goal is to work with CSS.

S2/CSS

Designed for people who want to be experts in changing both the HTML and CSS of their layout, or building in interesting behaviors. S2 is a programming language and once you know it you'll have few limitations (no JS, some CSS cleaning) in making a style exactly the way you want.

Poll #6596 Original Student Desires and Experience Levels

Open to: Registered Users, detailed results viewable to: All, participants: 151

View Respondents

My class track will be:

View Answers

Simplified CSS
20 (13.4%)

CSS only
17 (11.4%)

S2/CSS
94 (63.1%)

Observation only
18 (12.1%)

I'm interested in this class because:

View Answers

I want to customize my own style
114 (79.2%)

I want to make styles I can share with others
76 (52.8%)

I want to be able to help others with their styles
56 (38.9%)

It's a good way to learn skills I'm interested in, like HTML/CSS or basic programming concepts.
108 (75.0%)

If you have another interest in this class, what is it?

View Answers

CSS Experience

View Answers

None or very little
47 (31.1%)

Beginner
51 (33.8%)

Experienced
44 (29.1%)

Advanced
9 (6.0%)

HTML Experience

View Answers

None or very little
13 (8.6%)

Beginner
51 (33.8%)

Experienced
69 (45.7%)

Advanced
18 (11.9%)

S2 experience:

View Answers

None or very little
107 (70.9%)

Beginner
35 (23.2%)

Experienced
7 (4.6%)

Advanced
2 (1.3%)

Browsers I use or have access to:

View Answers

Chrome
91 (60.3%)

Firefox 3.x
90 (59.6%)

Firefox 4.x
80 (53.0%)

IE6
10 (6.6%)

IE7
12 (7.9%)

IE8
40 (26.5%)

IE9
38 (25.2%)

Opera
54 (35.8%)

Safari
62 (41.1%)

Mobile browsers/devices
66 (43.7%)

Other
13 (8.6%)

My main browser is:

View Answers

Chrome
26 (17.2%)

Firefox 3.x
56 (37.1%)

Firefox 4.x
44 (29.1%)

IE6
0 (0.0%)

IE7
0 (0.0%)

IE8
1 (0.7%)

IE9
1 (0.7%)

Opera
9 (6.0%)

Safari
9 (6.0%)

Mobile browsers/devices
2 (1.3%)

Other
3 (2.0%)

If you answered "Other" for any of the browser questions, what browser(s)?

View Answers

Alright students, as your first exercise I would like you to:

• Say hi, and greet others! Also ask any questions you would like to know before Friday's class on "S2 Background and the Customization Wizard".
• Fill out this poll--it will help me know who has what experience level, and the different reasons people are taking the course for.
• Think about what you want your style to look like, if you'll be making a style for the course!

And now, I'm going through and checking to make sure that all people who answered the original interest poll and don't already subscribe get a reminder to watch this community (unless they have different methods of keeping track)! Hope to hear from you all!

---

Previous: Syllabus

Comments

[dchan]

Hi! I'm dchan. I mentioned this in a previous post, but I'm a relatively experienced tinkerer in HTML and CSS and can do a little bit with S2 but up until now I've mostly been working off of other people's frameworks instead of designing my own styles from scratch. I'm quite comfortable digging around in the source code and documentation to figure out how everything works but I'm really not all that up on what the current best practices are for web design so I'm hoping that you'll guys spend some time on that.

In addition to learning stuff, I'm hoping that having a defined schedule and assignments will help me conquer my laziness and procrastionation. It's so much easier to use a default layout that I kinda like instead of spending the time and effort to code myself a layout that I *really* like.

I didn't check the box for it but I suppose I'd be up for sharing the layouts that I make but I don't get ideas very often and I frequently get distracted by other shinies on the internet so it's really more of a 'nice bonus' rather than a driving motivation in my case.

ETA: Page 2! Woo!

[foxfirefey]

Ha, your reasons for taking the class are kind of similar to mine for running it. I want a nice schedule to help me improve the documentation as I go through each subject.

[samjohnsson]

Hey, all. Since there is CSS tutorials going on, I am in! Mostly a hand-coder, and have been kicking (and getting kicked by) HTML and .js since tables were cool and a Geocities address was mandatory. But I haven't had a lot of practical CSS (ab)use practice outside of a wysiwyg editor on a pre-built site, so I am here to break my layout hard!

(No generic questions yet.)

[foxfirefey]

CSS can be frustration (IE6, I HATE YOU), but it's still love once you get the hang of it.

[majoline]

Hi! I'm Margaret and I know a goodly amount of HTML and CSS but almost nothing of S2. I learned both of those things not on LJ/DW and because of the ridiculous amount of time I spend on my home-on-the-internet I've never really felt like trying to mess with it.

I'm really excited because I want to learn how to do styles in general and I really want to try to make me a new one.

Speaking of questions: should I set up another account for this learning experience? I don't want to mess up my default.

[foxfirefey]

You have a couple of options for developing styles:

* You're a paid user, so you automatically can have a bevvy of styles attached to your account, although only one will display at any time. Since you're doing the S2 side, it will even be easy to never have to make the style you're working on the default for your journal. (I'm trying to make that the case with the Customization Wizard, too, but it is very tricky.)

* I'm going to be letting people create accounts on my development server--this will especially be useful for free users who only have one set of layers and one style available to them and would have to develop using their default.

* And yup, you could create a separate journal if you really wanted to.

[liv]

I've learnt things sort of backwards; I know the S2 system pretty well, from a scary number of years of troubleshooting and helping people with layouts (I was doing LJ Support back when S2 was first introduced, yes I'm that old). Indeed, I was one of the team who ported S2 over to Dreamwidth back in the closed beta days. It's based on this experience that I've offered to mentor, because I can definitely help people with the labyrinth that is the advanced customization system.

However I have really little experience in either programming or web design, so I'm almost a beginner at the same time. I don't know how to generate good concepts for what a journal should look like, and I don't really know enough CSS to implement any ideas I do have. Especially positioning, I really struggle with positioning. I'm pretty good at "porting" other people's layouts, eg from LJ Flexible Squares to DW Tabula Rasa, or from purely CSS based to S2. So as a student, I mainly want to learn to design from scratch.

Goals for the course:

• sort out the archive and tags views of my journal, which are kind of a mess at the moment because of the CSS tweaks I made to my entries and comments views.
  
• implement some kind of collapsed / collapsible / summary reading page system, hopefully robust enough to add to all the system styles
  
• make a start on designing a style which uses some fixed width and absolute dimension elements, ideally without too many compromises on screen-reader accessibility. I know a lot of people hate DW's selection of highly flexible, relative sized, div-based layouts, because they want to use graphics and make something pixel-perfect in any browser or resolution (including weird / proprietary / deprecated ones). I don't know if it's possible to have fixed width and accessibility at the same time, but I'm hoping to learn enough to start to tackle this issue.
  
• build on my skills for helping people who have a really great vision for what their journal should look like, but don't know how to implement it.

[exor674]

Yay another S2 mentor!!!

ETA: implement some kind of collapsed / collapsible / summary reading page system, hopefully robust enough to add to all the system style

There's actually an active bug for that if I understand what you mean properly -- at least a summary view. The collapsible would be quite hard to add to just your style, given it'd require trusted mode ( which is system styles only )

[flamewarrior]

Hi! I'm flame. *waves*

I'm here because none of the existing styles, or amended-by-DW-members styles (that I've been able to find) are quite what I want. And once I start thinking about what I want, I have Lots Of Ideas, which is very frustrating when I don't have the first clue about CSS. And I don't even know what S2 is...

[foxfirefey]

What are some of your ideas!

S2 is the technical name for the style system--the first lesson will go over it in more detail, but basically, it is a templating programming language that is made so that viewers and servers are secure, lay users don't have to know HTML or CSS to make simple tweaks to their styles (see: the Customization Wizard), and style makers are given a lot of power to change the presentation.

[exor674]

Hey! I'm Dre and I am going to be one of your mentors.

I've been spending my spare time for the past 2-ish years being a volunteer developer for Dreamwidth, and because of that I have way more knowledge then I'd like to have on the S2 backend ( and many other scary parts of the code ).

Sooo... I can probably help you on any bit of S2 you need help with.

I am probably not the person to ask if you are having trouble making your style look the way you want it in HTML/CSS, but if you have the CSS but it is just not working, I will totally be willing to look at it to see if I can spot the problem.

[foxfirefey]

Looks like you have a lot of S2 mentoring work ahead of you--most people are on the S2/CSS track, but not many people know much S2! I am happy you are on board.

[teigh_corvus]

Hello! I'm T. and I'm pretty much a newbie at all of this. I've tweaked some basic things in layouts, but nothing major. Despite being somewhat intimidated, I'm terribly excited to learn this stuff.

[foxfirefey]

Any major plans you have in mind?

[sunrisetr]

*waves* I'm Sunrise. I have some experience with CSS and HTML, and most of the time I can get my layout to do what I want, but all that I've done in S2 so far is modifying other people's functions by following tutorials (and being very, very afraid). Hoping to learn enough to tinker with S2, and pick up some skills in creating layouts from scratch.

Thanks for doing this!

[foxfirefey]

Sounds like you already have a bit of experience! That's good, a lot of people are totally new to S2, and there's a lot more people wanting to take that track than I expected!

[kabal42]

Hello everyone!

I'll mostly be following on the sidelines and will be using this to later build my own layout/make styles. Later because I'm finishing up my thesis right now and have surgery coming up, so I doubt I'll be able to follow. But I'll be reading along and using this when I get a chance.

Thanks to the faculty for making this possible :-)

[foxfirefey]

Fortunately I'll get the comments to any questions you make, long after the lessons have been put up, and can help you out. The other effect of this class will be making sure I have better S2 documentation up on the wiki.

And I might run this class again next year, too, if this goes well and we have people who want to take it again.

[ariestess]

He-ey there! I'm ariestess, or you can call me AJ. I'll answer to both.

I taught myself HTML out of a couple of manuals back in 1994-ish for a class project in college and have pretty much continued learning by self-taught and/or "find and steal code" methods ever since. I maintain 3 different websites, all hand-coded through templates I created myself. I took a CSS class from Virtual University back in the spring of 2004 and still have my homework online. Eeek! For the most part, I now use TopStyle Lite when creating my CSS for my websites.

As for S2, I have absolutely NO knowledge of using it beyond a little bit of customization, usually of colors for various layouts I've used over the years over on LJ.

I'm looking to find a new way to be creative, and have wanted to figure out how to make layouts for quite some time now.

[majoline]

"find and steal code" is the way everyone learns code, I think.

No matter what your teachers want to say :D

[kuangning]

*waves cheerfully.*

I'm Cairsten, and while I've done quite a bit in HTML, I've touched CSS only as much as I needed to fix/tweak someone else's pre-built styles. I've dabbled in S2 for the same reasons, reading enough along the way that I at least know where to start looking for a problem and can usually find a solution, but not enough to be able to lay out something that's all mine from the ground up.

[foxfirefey]

Any ideas on what you'd want to make from the ground up?

[the_mad_hobbit]

Hi, all! I'm new to DW as well as CSS, though I have SOME HTML experience. I have wanted to learn this for ages and am more than happy to be a part of the class! Thank you for offering the course!

Hugs,
Rach

[foxfirefey]

Thank you for taking the course! I am very excited.

[inkstone]

Hi everyone! I'm V. I know a decent amount of HTML, an okay amount of CSS and nothing at all about S2. I've always wanted to learn how to customize & create my layout and styles myself so this is a great opportunity! Thanks for doing this. :)

[lexicalcrow]

Hai, I'm Sasha. I'm pretty good with HTML, and I'm decent at making leet grafix. CSS, not so much. Well. I know how CSS works, and I can do some basic things, but I haven't had a chance to use it in any meaningful way yet since I took a unit on web design last year. I can find my way around a layout enough to tweak a few basic things, but I've never used S2 before.

I actually never particularly wanted to make my own styles while I was only on LJ, but being on DW has made me ponder if I could do it. I have vague ideas for what I want to make, but I think I'm happy for it to be a work in progress and see what I end up with at the end of it.

I'm commenting before I've filled out the poll too, if only because I don't know which stream/track I want to do/would suit me best. Also, if classes are going to be on Fridays, I have uni all day Fridays til the end of May, so I may be late in getting around to these classes. I hope that won't be too much of a problem. D:

[foxfirefey]

Leet grafix are a skill I do not yet possess but am trying to learn! You can switch tracks at any time--there will be enough background lessons to give you a good idea of whether or not you feel you can handle the track you picked.

Also, because this is an online course, Friday is just when the lesson is posted--all of us are participating in the same lesson the entire week. This helps accommodate people of many different schedules and time zones!

[purplecat]

Hi!

I'm not sure I've any specific questions beyond feeling I've always found the various Customization wizards a little opaque, like there's some underlying concept about S2 or style sheets that I don't quite get.

[foxfirefey]

Well, hey, the Customization Wizard is part of the first lesson, so you are in luck!

[vae]

Hello fellow-students! I worked in web front end stuff for five years but I've been hiding in back end for the last three so brushing up CSS knowledge and bringing the old XHTML up to date will come in very handy.

[foxfirefey]

Apparently the dashing new thing is HTML5 nowadays, which I haven't even sat down and learned properly yet!

[tyger]

Hi, I'm Tyger. Taught myself some HTML back in the days when 4.0 was slightly old but still relevant, and have picked up some CSS by wanting to mess with layouts, mainly by swearing at it until it works for the first time. (Once I get it the first time it usually works the second time... Usually.)

Don't know any S2 - did some copy/paste work that occasionally involved copy/pasting into specific bits of other copy/pastes, but nothing more complicated than that. It looks like DOOM when you know nothing about it, but if this is a basic tutorial I'll definitely give it a go! >:

I'm almost-certainally going to make a new layout, but probably something very very fannish - probably Kingdom Hearts of some stripe, but maybe pokémon. Would that still be okay to put up in dreamwidthlayouts, or should I keep it to fandom-specific circles (assuming I don't get possessive, um. *laughs*)

[denise]

If you're putting it up for conversion to a system style for everyone to use, it can't have any proprietary graphics, screenshots, etc -- any images used in the style have to be either created by you, or freely available under a compatable open source license. But if you're just offering it up for people to use unofficially, you can do anything you want!

[yati]

Hullo! My name is Yati. I get along fine with HTML and CSS and S2 (quite possibly I was even slightly better at S2 than CSS), but I've been away from dev work for so long I'm not even sure I can make sense of my own layout any longer (whoops). I've actually converted a style posted to dreamscapes and I've made my own styles, but I'd like to get a better grasp of S2 -- most of what I've done before was based on guesswork and a lot of copy and pasting.

[foxfirefey]

Oh sweet, I'm just dying for some more experienced S2 people, since so many people want to learn it but don't know it yet. Hopefully you'll be able to help out answering questions sometimes, when you see one and have the notion!

[sharpiefan]

Hiya! I'm Sharpie!

Pretty much my experience with layouts is picking one and re-colouring it. I'm looking forward to learning a bit more than that.

[quietspring]

Hi, class!

I'm quietspring (just spring if you like) and I'm excited to learn S2! Veeeeery rusty on my CSS, but it looks like you guys have that covered too. HTML was my first love, all those years ago making simple webpages on Neopets. :')

Looking forward to the course!

[foxfirefey]

Aw, the halcyon days of our first page makings!

When I was fifteen or so I had a webpage on a place called Homestead using their site builder and it was HIDEOUS, haha. Moving flame gif graphics: not the best choice in design!

[shaela]

Hi, I’m Shaela. I know my way around HTML and CSS, but S2 is Greek to me. (Actually, it would be easier if it were Greek. I got my bachelor’s degree in Latin and Greek.)

The biggest change I want to make is to my yearly archive pages. I want to replace the calendars with lists of the entries that were posted in each month. (What I want is something like the Daring Fireball archive page. In fact, I’d love it if my archive page could list all my entries, the way his does, but I’ll settle for all the entries in a year. I’m pretty sure that the changes I want to make to my journal’s information architecture are beyond the scope of this course.)

[foxfirefey]

Oh hey, pippin has studied Latin!

Unfortunately there might be a limitation keeping you from what you want to do--I don't think the YearPage gets access to all of the posts within it. It might be possible using some kind of hacks, but the system really isn't designed for it. While your journal may not have enough entries to be a problem, an archive page like Daring Fireball's is way to much to want to emulate for a service. But at the VERY least what you could do is put a link at the top of the YearPage to a post where you list out all your entries maybe? Aw man, I feel like I'm being all disappointy in the first lesson.

[ex_wolfborn415]

Hi there. My name is Will. I regularly customize layouts picked up from various design communities on LJ, so I have some ideas about CSS. I've designed simple web-pages before too, but have yet to design a layout or style from the ground up. That was my goal for this year, actually! I'm glad that this class will help me do that. I have absolutely no idea what I want it to look like. I just want to be able to do it.

[foxfirefey]

Hopefully the resources post will give you some inspiration!

[metawidget]

Hi everyone!

I've been coding HTML and CSS for quite some time (and through several versions of the standards) and would be quite happy to help newcomers to either. I have experience in a few non-S2 languages (PHP, ActionScript, SAS) and have dabbled in a bunch of others. I've had some very simple run-ins with S2, but I'm hoping to get formally introduced and get a sense of how DW styles work as a whole.

I hope to tweak my own journal style (which is currently a slightly modified Practicality), possibly get fancy with it over time, and share the changes with whoever wants to use them.

[foxfirefey]

Sounds like you have a very good foundation! Hopefully you'll also help out a programming newb or two in the class along the way.

[without_wings]

Hi, all.

I'd say I'm pretty comfortable with html and css (not that I know any S2 at all) but I'm completely self-taught so I'm sure there are some gaps in my knowledge. So I'm excited about learning how to apply what I know to Dreamwidth. What can I say, I like tinkering with things.

I originally planned on designing just for my needs/tastes, but I checked the box to share my work, because hey why not, huh.

[foxfirefey]

Sharing is caring!

[lurksnomore]

Hello, I'm Mary Frances. I've been wanting to learn how to do this since I joined. Thanks so much for offering to teach!

[foxfirefey]

Of course! Have you figured out which track you want to take?