Trouble using CSS as a beginner. I understand the rules, can follow them in my head, but can't produce anything.

Question

Can you guys help me rise above this wall?

I'm familiar with CSS, I can understand what the rules are, and how to use the logically. The problem is I cannot seem to put whats in my head onto the monitor.

I have trouble creating nice designs.

What do you guys recommend for someone like me? I'm trying but I just don't seem to be getting any better at all. Figuring out how to position an image is a 30 minute process and I almost instantly forgot how I did it because of the css-pasta I have to create just to make it look just right.

Thanks.

Edit: Can anyone share a book that will let me create a complete website look step by step using CSS best practices? Step by step is a must.

Edit 2: I'm talking design (aesthetics wise).

Answer 1

It helps to sketch the design you are looking for onto a napkin. Something will just a box to outline each element you want. Then you can decide on the best markup and CSS for your page. Write in brief details such as width, float, margin, etc. just enough to get you started. You'll quickly realize where your ideas don't quite work out in practice.

See A List Apart for information on good design tips and CSS techniques as well. http://www.alistapart.com/topics/design/layout/

Answer 2

What I did in the beginning of CSS development is really understanding what elements do, and how I could use it in the "real world." Similar to math, everything takes understanding and regular practice. Like js1568 said, sketching out the design could really help. Also, the first thing I worked on was knowing these things:

• The difference between block and inline elements. Inline elements do not have a width, and 'wrap' around elements like text, images, and so on. Block elements will span the width of their container and have, by default, no defined height. Think of this as a box of candy wrappers at a store. The candybar itself is the content. The wrapper around the candybar is an inline element. The box that contains all the candybars is the block element.
• What padding, margin, and borders are. Padding is the space between the content and the edges of the element. Padding lives inside the element. Borders are the literal border surrounding the element. Margin is the spacing outside of the element. So if you had a block element with 20px of padding, 3px borders and 20px of margin, the element would have an additional 43px of width on each side.

Focus on what each attribute does, read up on it and figure out what it does. While learning, try to see how these attributes can be incorporated into real world work. After you've mastered what attributes do, then try to begin applying these skills. Everything takes time and multiple revisions and attempts before you will start to 'adapt'.

Think of it as driving a manual transmission, and at first it can seem overwhelming to get the clutch, acceleration, and everything else in sync. After a while it just becomes second-nature and you don't even think about it.

I've been a frontend developer for 4 years, and at first it took a while to "get it." Just keep trying!

Answer 3

A big problem I used to run into is focus on a page from the inside out– meaning I would focus on small details of the page bit by bit until I got to the big picture stuff last. This is a big mistake and will triple or quadruple the time it takes you.

Focus first on the whole layout, minus any special effects, background images, images, or even content– the barebones structure of the page only using different border colors (border: 1px solid red) for each element. Once you have this skeleton successfully coded and have a "css / html wireframe" displaying cross-browser, it's alot easier to work your way inwards.

A Must Have is firebug, an extension for firefox which allows you to "inspect" an element to see where it lies in the HTML markup, and it's accompanying CSS values. The best way to learn is from experts– and all their best work is displayed for free all over the web.