Upcoming style making class syllabus

[foxfirefey]

Okay, folks, I am going to post the Class Intro next Monday; afterwards, class lessons will be posted on Fridays. This is the tentative syllabus and is subject to change--class mentors and potential students, please review and tell me what you think! I focused on giving everyone a lot of breathing room and a leisurely pace, so that people who aren't as familiar with web design have the time to learn and people who are trying to take their skills to the next level have time to explore.

If you haven't already marked yourself as interested in the class poll, please do so!

Background

Class Intro

A chance for me to talk about how the class will run and try to survey out particular student needs.

S2 Background and the Customization Wizard

Goes into why S2 was created and give a review of the Customization Wizard.

HTML and CSS overview; Examining with browser developer tools -- Lesson 1, Lesson 2

Gives an overview of HTML and how it pertains to styles, a run over of good CSS resources, and how to explore HTML and CSS using browser developer tools (which can simultaneously save you a lot of time and help you learn).

Finding Resources

Good places to find things you can use for your layouts. Feel free to share your favorites!

Core2 and Core2 Based Layouts

A review of the core2 foundation of DW styles and its aims, as well as the current layouts.

Layout Making

The following classes run on two levels: only CSS and CSS/S2. People who only want to learn the CSS side can ignore the S2 sections of the classes and use the extra time to work more on their layouts.

Custom CSS; The formation of a Style and Using the Advanced Customization Area

Talks about Custom CSS options for folks doing only CSS, and reviews how to use the advanced customization area for people who want to learn S2

Basic core2 CSS Strategies

Reviews overall CSS strategies for core2--especially how different classes can change from options in the Customization wizard.

Basic S2 Strategies

Goes over the basics of defining, retrieving, and setting properties; redefining functions and methods; basics the different classes. Reviews resources written about S2.

Primary Layout: Headers, Columns, Footers

Concentrates on putting the overall pieces of the layout into their positions, in two parts: the first focusing on CSS, the second on S2.

Modules

Two weeks, one CSS and one S2, that explain the modules system.

The Recent Page

Two weeks, one CSS and one S2, that lay the groundwork for the recent page--and many other entry pages.

The Reading Page and Network Page

Two weeks, one CSS and one S2, on styling the Reading and Network pages.

Entry and Reply Pages

Custom comment pages! This is an optional section--some layout makers prefer to rely on site comment pages. If you'd prefer, you can focus on refining the other parts of your layout in the two weeks the lessons focus on S2 and CSS.

Archive -- Year Page

One lesson that covers the CSS and S2 for Year Pages.

Archive -- Month Page

One lesson that covers the CSS and S2 for Month Pages.

Tag Page

One lesson that covers the CSS and S2 for Tag Pages

Icon Page

One lesson that covers the CSS and S2 for Icon Pages (a new upcoming style feature that will be ready by this point!)

Finishing Touches

Designed to catch anything the other lessons didn't cover and give people a chance to ask questions they need to wrap up.

Sharing Time!

Hopefully a bunch of people have brand new styles to share!

Comments

[dchan]

Ooh, looks exciting. I know enough about CSS and S2 that I don't have much trouble modifying layouts other people have made, but I've never coded a layout from the ground up before so I shall be looking forward to this.

[ursamajor]

Exactly, this. I can do CSS and (X)HTML from scratch, no problem, and if I want to tweak something that already exists for S2, I can usually figure it out. But it'll be nice to learn how to create things from scratch for S2 :)

[foxfirefey]

Well, I don't know if basing things off of core2 really counts as from scratch, since core2 has so much built in--but I think that's a good thing. Far, far better to override what you want changed than redo everything--although I'll admit after this I think you probably COULD.

[ursamajor]

*grin* I like the sound of this!

[marahmarie]

But it'll be nice to learn how to create things from scratch for S2 :)

My sentiments exactly. I can't wait for the s2 classes. I can't write s2 at all on DW (can't figure out how most of the functions should be written nor how to modify them) and couldn't do it from scratch on LJ, either - only certain functions, mostly limited to adding or modifying links for one non-open source style - so it will be fun to get a better handle on it.

[amadi]

CSS and XHTML are old friends, but the S2 system is a bit confounding, so getting into it from this approach looks perfect!

[majoline]

This is quite nifty looking! I'm not unfamiliar with CSS or S2 but I've never felt like playing around past the little bits that I know just because I don't want to have to clean up any experimentation that broke my layout.

I can't wait to get started :D so excited!

[lexicalcrow]

That sounds really cool. I know enough CSS to tweak layouts, but I'm unfamilar with S2. I will enjoy messing about with all of it.

[sharpiefan]

Woo!

I can alter the look - colours and stuff - of an already-existing layout. It'll be fun to make a whole new layout of my own. (Hopefully I'll get to that point, anyway - I only have a very basic knowledge of HTML/CSS and all that good stuff.)

[foxfirefey]

No worries--the lessons are designed in chunks manageable for somebody to improve their HTML/CSS skills as we go.

[metawidget]

I come at this as someone who regularly does CSS and managed to hack their S2 layout a tiny bit, without really getting a sense of the language.

This looks very cool — I hope our S2 lessons will include the more programmer-y elements and the conventions used in the current crop of layouts.

[foxfirefey]

They will indeed! I have a good chunk of S2 documentation already written (S2 Guide and S2 Cookbook), and will spruce it up for this class.

[sinensis]

It looks like the topics have been broken into nicely manageable chunks for learning, which is great. I can code HTML and CSS (slowly, and with a lot of revision and looking things up), but know nothing about S2, and am looking forward to learning about it.

[foxfirefey]

Hopefully the developer tools review will make you more sure on your feet with the HTML/CSS--I know my skills grew leaps and bounds when I started using them.

[terajk]

This looks cool! I have a very basic understanding of CSS (will probably review before class), know nothing whatsoever about S2, and am really looking forward to this.

[foxfirefey]

My recommendations for review are background/border/color/font properties, list styling techniques (they come up a lot in styles), positioning with relative/absolute/floats, and overflow properties.

[kitters]

This looks really exciting! I'm mainly looking forward to this because, for some strange reason, my imported custom Flexible Squares layout from LJ isn't behaving correctly concerning the Quick Reply function. I originally thought it was just an issue with Opera, but after installing a custom jscript to fix it and testing in Firefox with no change, I'm wondering if a native DW layout will solve the problem.

[foxfirefey]

Hrm, the Quick Reply is working for me on your journal--details? Maybe it can be fixed. (Although of course I would still encourage you to learn about native DW layouts!)

[kitters]

Weird! It's totally not working for me, and just me, it seems. Everyone else that has tried says it works for them. I've gone through every possible cause: 1) My internet connection at home is really wonky and slow, so the Quick Reply not working could be due to that. But, the problem persists even with fast and stable connections, so that can't be it. 2) My browser. I know the new Opera is buggy when it comes to LJ's Quick Reply, but I have tested in Firefox, and the Quick Reply still won't work. 3) I've noticed that it doesn't always work on LJ either, which rules out the possibility that it's a problem on DW's end.

The problem ONLY seems to affect Flexible Squares-based layouts. But if a journal has default site comment pages, the Quick Reply will work.

The problem started when I got my new laptop with Windows 7. On my old laptop with XP, installing the custom jscript for Opera to fix LJ's Quick Reply problem had worked. But... the OS being the culprit is kind of ridiculous because, by that logic, everyone commenting on my journal using Windows 7 would encounter the same problem.

[foxfirefey]

Hmm, looks like it is only Opera. Opera doesn't work for me either.

On the plus side, we're moving all the journal based JavaScript to jQuery and Quick Reply has been implemented there already. I tested it in Opera and it seems to work with the new code.

If you would like to test this out, you can turn the beta tester mode on and off:

http://www.dreamwidth.org/betafeatures

[kitters]

OMG IT WORKED. :DDDDD Looks like that was the problem! But that doesn't explain why the Quick Reply didn't work in Firefox. Weird. Fortunately, it's only my backup browser, so it's not a big deal.

Anyways, thanks a lot for that! I think I'll leave beta mode on since DW doesn't seem to behave any differently.

[foxfirefey]

You can see from the list the things that are and aren't implemented yet. For instance, thread expansion and cut expansion and contextual hovers aren't available in the beta mode yet (which is why it's so beta)!

[kitters]

Handy! Thanks a lot for the help and info.

[emeraldsnakes]

I just recently joined the site, planned to for a while but the recent hacking problems on LJ pushed me to have all my stuff here too.

I'm really excited about this comm and these lessons. I've done some puttering around editing the CSS at LJ but nothing really extensive and this is exactly what I've been looking for.

[foxfirefey]

Poor LJ! DDoSes are so frustrating--I hope they pull through very soon. But I'm glad you're excited about the class!

[tree]

um, monday and fridays in what time zone? when most people say 'monday' and 'friday' it generally translates to 'tuesday' and 'saturday' for me.

the syllabus looks awesome. thank you so much for doing this.

[foxfirefey]

I'm in Pacific, but, well, I'm going to give myself latitude on the time of the day it gets posted--it could be in the morning or evening. So it could be Saturday for you!

[tree]

pacific in the US? i'm 16 hours ahead of you, so it'll definitely be my saturday. ;)

[stealth_noodle]

This looks super-helpful! So far, every time I've thought about creating a new style, I've been overwhelmed by the S2 documentation, so this should be perfect for me. :D

[foxfirefey]

Any particular parts that are overwhelming?

[stealth_noodle]

Mostly I'm just not sure where to start; having things split up into lessons should help me a lot.

[sphinxfictorian]

Will there be a brief explanatory bit about terms? I must admit to having the most basic ignorance of what CSS actually is, for example. I am very interested in the class, though. I've long wanted to be able to truly customize my page and make it truly reflect my personality and interests.

Thank you so much for doing this!

[foxfirefey]

So, the class itself isn't designed to teach CSS, but it is designed for people to learn CSS as they go along. The HTML and CSS overview; Examining with browser developer tools class will be the explanatory bit you're looking for--it will do a brief explanatory bit, show you a lot of good resources and references to learn CSS with, and show you a bit about how to use the developer tools of your browser to see what's going on behind the scene.

Additionally, the Tabulua Rasa Plain style is designed to take care of some of the more finicky parts of layouts like where the columns go, allowing you to focus on the simpler parts of CSS customization to get your feet wet with. This will be explained in Custom CSS; The formation of a Style and Using the Advanced Customization Area.

Then, the layout making series of classes will give you opportunities to ask questions and get assistance about CSS things you don't understand.

[usagi_k1]

So this class won't be over the head of those with, at best, pre-school knowledge of HTML and CSS. I know what CSS is, and I know just enough about HTML to be a danger to myself. Would I be lost in this class?

[foxfirefey]

I'm hoping not--you are going to have to do some extra learning, but I will give you good resources for it. You will also have to not be afraid to ask questions if something is not clear--I am happy to answer them, but if something needs extra explanation, I won't know unless someone asks.

[without_wings]

Oh I am so excited about this! I'm not a complete newbie to html and css, but every time I've tried to make major changes to my layout I've always gotten stuck on something, so it would be really great to have some instruction.

[foxfirefey]

I'm curious--what major changes are you hoping to make?

[without_wings]

Probably nothing major, but I'd like to put two sidebar like things on the top and bottom of the page, with the entries in the middle. I'm not completely sure, but I'm looking for something a lot more suitable for mobile reading than what I'm using (that will also look pretty on an actual computer, of course). But I figure that if I find out what exactly can be done and how to do it, I can work my plans around that.

[illariy]

... apparently this is the bit where interested students talk about our background? I'm a bit slow today (RL workload) but very interested in reading along and experimenting as time permits. I can do some very basic html to code up entries in the html editor of lj/dw, do a very basic html page by myself, and have done some easy modifications of existing layouts (colours, fonts, borders, such things). Would love to learn more. This is such a great concept for a series of posts, thank you for organising it! *sits on hands and polishes keyboard*

[foxfirefey]

You can if you want! I'm going to do a poll as part of the class intro so I know the different experience levels. We seem to have a wide variety of skill levels, and that's great.

[stephenie_n_lamaina]

Hopefully there will be room for those with no experience. You don't know how happy I am you are doing this. I used to be a computer programmer but it was so long ago my knowledge is useless.

Stephenie

PS - Do we join this group? or follow a certain tag? or something else?

[foxfirefey]

I think having no experience is a really good reason to take the class! People who don't know any CSS will need to study up on it, but I will give good resources for that, and you can always ask questions on anything you struggle on.

If you subscribe to this group, you should be covered--there's not going to be any formal registration. You can also follow the tag "!style making class".

[stephenie_n_lamaina]

Well get ready for the questions. It has been frustrating finding decent sources to learn this stuff or even get a question answered. I learned my first computer language in 1979 (on punch cards) and have formal training in 16 different languages but haven't used any of it in two decades. I think that I am so frustrated because I think it should all be easy and recognizable. I am looking forward to dusting off this part of my brain.

Ready to get my geek on...

Stephenie

[stellastars]

Just wanted to say I am so looking forward to this! It's been ages since I've had a chance to play with any of this stuff -- and lack of knowledge has been holding me back. I think this will be the perfect opportunity and motivator for me!