[Pro] Learning CSS?

At the advice of many folks on this forum, I am finally learning CSS through a paid online training website. Unfortunately, my head is about to explode.

How do you guys remember all of this stuff, especially the syntax?


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

By repetition and doing.

Todd

How do you guys remember all of this stuff, especially the syntax?


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

How do you guys remember all of this stuff, especially the syntax?

Google. The W3C CSS Validator. The Sticky Notes app. Real sticky notes.
Flash cards, notebooks, millions of little snippet files. I have a whole
set of bookmarks (with subfolders) titled Websmithery.

Start slow, don’t try to use all the exotic selectors first. Keep it
simple. Try to get the most done with the least amount of effort.


Ernie Simpson


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Well that makes sense. How long before you were really comfortable with CSS?


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I don’t recall a specific “a-ha” moment but it wasn’t an excessively long period of time. CSS made sense to me and I really embraced it so I was probably eager to absorb as much as I could as quickly as I could. The thing is with this stuff it’s kind of like having the goalposts constantly moved, as soon as you get comfortable you find so much more to learn about. Then on top of it there are preprocessors. CSS is a wonderfully nuanced language in many ways and more powerful than it seems on the surface.

Take Ernie’s advice and start slow, CSS isn’t going anywhere.

Todd

Well that makes sense. How long before you were really comfortable with CSS?


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Google. The W3C CSS Validator. The Sticky Notes app. Real sticky notes. Flash cards, notebooks, millions of little snippet files.

I also have a couple of Dashboard Widgets - one from SeeSS and another the CSS Cheat Sheet Widget

D


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I remember it much like Todd, through repetition and doing. If I have a question, I run a search in Google. Then, I keep a lot of odd (not easily remembered) snippets in CodeBox.

How soon you get comfortable with it will depend on how much you use it. A lot of it didn’t click until I started construction on Backdraft.

Start slowly and easily. Don’t worry about the fancy CSS3 selectors and properties until you have a good grasp of working with the basics. Above all, start a project website to experiment and get “real world” experience with. As you learn more, rework the CSS for that website. Try to apply the DRY principal to your CSS (Don’t Repeat Yourself) as much as possible.

In other words, just go and do it. Also, if you get stuck, there’s always somebody here to help get you unstuck. :slight_smile:


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks guys. I appreciate all of the helpful advice and encouragement. Now on to the next subject in my training—Floats. :slight_smile:


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

A good programming editor also makes things easier. You don’t need anything fancy but something like Brackets http://brackets.io (free) is great. It has a clean and beautiful UI, is lightweight, accepts extensions/plugins and has a wonderful in-page CSS editor. Plus you can set it up with Chrome to auto-refresh your pages as you edit. Yes, other editors can do this but they probably aren’t free.

Todd


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I like free. Is Brackets comparable to Coda or Stylizer?


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It’s more lightweight. But when you’re just starting out I think that’s better because your less distracted with a lot of stuff you may never need to use. Keep-It-Simple. Brackets is simple but has all the basic tools needed for the job.

Todd

I like free. Is Brackets comparable to Coda or Stylizer?


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I just tried out Brackets and it’s really cool! You can essentially drop a whole site into it and play around with different CSS settings. However, it currently only supports Chrome for live previews.

This brings up another interesting anomaly. I normally use Safari for all of my website development work and my own browsing. For whatever reason, Chrome and Firefox both display my websites lighter than Safari does, which means the colors aren’t as rich.

Is that normal? If so, what’s the best browser to use when trying to work with color?


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Here is a good example of what I’m talking about:
http://www.davidgustav.com/web-development/why-is-my-background-image-different-color-in-different-browsers/


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That’s odd, but not very surprising. IMHO, pursuing color reproduction on the web is an act of futility. There are just too many browsers, OSs, and displays, each of which will bring drastically different color interpretations to your simple little hex value. In fact, a cheap-o display is an essential part of my usability testing. It’s amazing how what looks like a proper level of contract between text and background on my iMac’s display will be almost unreadable on that poor display.

I’ll second the thought that Brackets is a remarkable tool for a gobblesmackingly good price. I wouldn’t trade it for Coda, but that’s a lot like saying that I wouldn’t trade a semi-truck for a SUV. Coda is my go-to when I’m going to hand-code an entire website, TextMate is my quick-edit tool of choice, and Brackets falls somewhere in-between. It’s light, it’s fast, it’s easily extendable, and it’s probably all you need.

Oh, and a shameless plug. I’ve cooked up some pretty Tomorrow themes for Brackets. You can snag 'em here.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Plug away.

Thanks.

Todd

Oh, and a shameless plug. I’ve cooked up some pretty Tomorrow themes for Brackets. You can snag 'em here.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There’s a LiveReload extension that works with the major browsers. It can be installed via the Extension Manager.

Todd

However, it currently only supports Chrome for live previews.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, good to know.

Some of this CSS stuff is finally starting to make sense to me. Unfortunately, I think the biggest challenge will be learning how to integrate what I’ve learned into FWP, so don’t be surprised if I still ask a lot of questions. :wink:


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’m just starting my coding education over at Codecademy, and am would like to be able to incorporate a code editor like Brackets into my workflow. Isn’t it tricky, though, with FW overwriting stylesheets on every publish?

Do I need to wait until I’m thoroughly versed in HTML and CSS before I start poking around with a code editor, or is there a simple, relatively fool-proof way to use both together?


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Short answer: no. Test, explore, try, fail, succeed.

If you are using Freeway Pro and learning CSS code, I think the important
step is to start understanding the relationship of the two. As you learn
properties - and their different values - to ask yourself “how do I get FWP
to write it like that?”.

As you learn code, observe what FWP does - what code it makes for what you
do. For many styles, you will learn their true names… like how “leading” is
actually line-height. You will learn how to shortcut and streamline FWP’s
laborious and redundant styling - putting font-family properties only where
they are needed. Test. Try. Explore. Refine.

Immerse.

Eventually, everything that FWP does will become demystified, and you can
learn how to control it’s output to your design. Then you can decide how
you want to use it.


Ernie Simpson

On Mon, Jan 27, 2014 at 9:17 AM, derekzinger email@hidden wrote:

I’m just starting my coding education over at Codecademy, and am would
like to be able to incorporate a code editor like Brackets into my
workflow. Isn’t it tricky, though, with FW overwriting stylesheets on every
publish?

Do I need to wait until I’m thoroughly versed in HTML and CSS before I
start poking around with a code editor, or is there a simple, relatively
fool-proof way to use both together?


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sounds like good advice, Ernie. I am beginning to get a certain grip on this relationship between FW and the stylesheet. Recently, for example, I discovered how to write my own custom pseudo-classes in the Styles panel. :smiley:


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options