CSS tutorial

[crmamx]

To you vets who have got me to where I am with my new web site:

 

I am writing a CSS tutorial. Sounds kind of dumb doesn't it considering that 3 months ago I did not even know what css was.

 

I am not a vet and never will be. I am just a css beginner who was able to learn enough css to rewrite my old, ugly, 1990's iframe site to one that I am now told is pretty good.

 

But, it was extremely difficult and took way too much time. Why? Because I went about it in the wrong way. And tho there are some pretty good tutorials on the net, none of them IMHO are geared to an absolute beginner like me. And they just do not approach the subject the way I would.

 

I do not intend to reinvent the wheel or duplicate what others have done. Waste of time. But what I am trying to do is present the basics of how to get started with learning css in a fashion that is much easier to learn. I am fresh off the boat and know where I hit roadblocks.

 

So, what do you think?

 

 

[Maq]

I think it's a great idea.  I often forget the basics of CSS and usually resort to, "if it works and looks good, then I'm done" mentality.  Besides someone might have a better understanding from your perspective of a tutorial.  Just curious, do you have a structure or a planned out way of organizing your tutorial?  Like small individual examples?  Maybe you could do a tutorial that leads into a small website.

[KevinM1]

I also like the idea.  I think you could transform what you've already done with your existing site into a series of lessons and/or tips, perhaps in parallel with Maq's idea.  Sort of like:

 

"Here's what I originally had.  Here's how I changed it.  Now, let's look at trying it from scratch for a new layout."

[crmamx]

I think it's a great idea.  I often forget the basics of CSS and usually resort to, "if it works and looks good, then I'm done" mentality.  Besides someone might have a better understanding from your perspective of a tutorial.  Just curious, do you have a structure or a planned out way of organizing your tutorial?  Like small individual examples?  Maybe you could do a tutorial that leads into a small website.

 

What I have in mind is content to present, the order to present it and examples to show. Plus I do not plan to get into the really complicated stuff which I do not understand anyway, like overflow and push-pull.

 

But structure, layout, color, organization...in other words design are not my strong points. There I could use some help.

 

nightslyr

"Here's what I originally had.  Here's how I changed it.  Now, let's look at trying it from scratch for a new layout."

 

Yep, almost exactly what I am doing.

 

But now I have another idea. I will get you, Maq, giz, pikachu and cssF to collaborate on putting it together.

 

:D

 

 

 

 

[cssfreakie]

nice initiative crmamx,

 

happy to review it, and and help a bit in making sure the things told are indeed correct . Although it will never be a replacement for a good book, experience from the viewpoint of someone that just learned it can be pretty useful for others.

Good luck! don't forget to get outside in the sun though

[crmamx]

Well, with that encouragement and high powered vets to critique it, Here is a starting outline:

 

1.  Introduction to the tutorial:---now what should I call this? Lesson 1, Chapter 1..?

 

2.  What is CSS

 

3.  Basic requirements to learn and use it

 

4.  Benefits of CSS

 

5.  How does CSS work?

 

css example

html example

 

6.  Applying CSS to a HTML document

 

Method 1: In-line (the attribute style)

Method 2: Internal (the tag style)

Method 3: External (link to a style sheet)

 

7.  Creating the external css file and html file

 

8.  Summary

 

9.  Plan of attack: Redesign old, ugly, 1990's site, learn as we proceed

 

4 sections: header, menu, footer and content

 

Start with content, do easy stuff first, progress to harder (NOTE: one of my major mistakes was starting with index.php and trying to lay out the 4 panes on the page and figuring out what the hell was going on. I wasted a couple of weeks trying to understand it.)

 

Make a sketch of what you want in the header and footer. Any background images? If so list the name and location.Will you have a single menu or dropdown? List each menu item and what it links to. The content pane is where your site content will go. Draw it out. Where will the images go? Will you have headers? Will they be colored, centered, bold, larger than 100%. What about the text? Do you want margins? Where?

 

The more you can define before you start trying to code the better off you will be.

 

10.  The basic css syntax:

 

Selector

Declaration

Property

Value

 

11.  CSS rules

 

12.  CSS properties

 

13.  Let's start coding

 

I don't intend to recreate the whole site, but to include things that will show all aspects of css and especially those I had trouble with.

 

I will be looking for help especially on layout, colors,

 

So chime in guys.

[Philip]

I'd definitely suggest breaking that out into multiple tutorials

[*]What is CSS and why should I use it? (1-4)

[*]The basics of CSS (5-

[*]A real world example (9-end)

[cssfreakie]

I would add some mantra rules in it Like:

Css, is all about targeting elements by using selectors classes and id's

before you start of get a pen and pencil and shape your idea, before you start coding

 

 

In addition to King Philip Maybe add a 4th series of tutorials after the real world example, named efficiency or something. That could be more advanced, in order to remove redundancy, choose a font, choose some colors. (if you have time left of course)

 

If you require images that need to be drawn, and there are not too much of them, I am happy to provide them if you can give me a sketch.

[crmamx]

I'd definitely suggest breaking that out into multiple tutorials

[*]What is CSS and why should I use it? (1-4)

[*]The basics of CSS (5-

[*]A real world example (9-end)

 

Yep. Kind of ideas I need.

 

I would add some mantra rules in it Like:

Css, is all about targeting elements by using selectors classes and id's

before you start of get a pen and pencil and shape your idea, before you start coding

 

 

In addition to King Philip Maybe add a 4th series of tutorials after the real world example, named efficiency or something. That could be more advanced, in order to remove redundancy, choose a font, choose some colors. (if you have time left of course)

 

If you require images that need to be drawn, and there are not too much of them, I am happy to provide them if you can give me a sketch.

 

Mantra rules. I will Google that....

 

Images. I was thinking about that and have "lifted" a couple from w3schools. Is this legit? I don't expect I will need many and will take you up on your offer.

 

Advanced css. I don't think I am qualified to do that except I could take the ? mark code we did and use that as an efficiency example. It is also a good example of how to use float and clear which was very difficult for me to learn.

[cssfreakie]

mantra, is a little sentence repeatedly mumbled  by Buddhists  when meditating.

 

As far as copying an image, if it is a copyright-able expression of the author, it certainly is not legit. But you can change it a bit in order to remove his expression (which gives it the stamp of the author)  so you end up with just the bare subject matter and than it's perfectly legal.

[crmamx]

Here is a start. I would like to get the layout, format, colors, ect. right before I go any further.

 

I had planned on each Lesson being a separate page with navigation to the "next lesson" and "previous lesson" at the bottom. The Nav will link directly to each lesson listed.

 

If you would like some kind of background I really don't know what to use.

 

I am sure I don't have to say change .txt to .html to view.

 

Comments?

 

[attachment deleted by admin]

[crmamx]

I am shutting this down because I have made good progress with the tutorial. I have uploaded it to my server and I will post it soon in the website critique forum for you guys to fine tune.