I feel as though I have a decent theoretical understanding of CSS but I want something that is just drilling home stuff like creating great looking buttons, panels and input fields.
Any suggestions are much appreciated!
However, for the last two years I've been building a related web app that's all JS. We've cobbled together our own UI conventions out of HTML, CSS, and Backbone/Marionette classes. For a long time, I got frustrated with any task that involved doing UI layout. I inevitably found myself reduced to desperate googling and randomly flipping CSS attributes in the hopes that I might finally get things to slide into place.
Fortunately, in the last couple months things seem to have finally come together for me. The two keys for me have been:
- Grasping the core concepts of the HTML box model and block/inline behavior
- Flexbox. Flexbox FTW. I've been able to replace SO many nasty CSS hacks with simple flexbox directives over the last few weeks.
Here's two key links that have really helped me:
- http://learnlayout.com/ is a great guide to the basics of layout in CSS
- http://jonibologna.com/flexbox-cheatsheet/ is a simple graphical overview of flexbox commands
Obviously, all this is focused on the layout aspect rather than the "styling" part per se, as that's been my biggest concern on this project.
However, this webapp is used to generate websites that may be visited by anybody, really, so we have to support IE9 and we don't use flex box for them. It all depends on your customers / visitors base.
Flexbox is real CSS, it's part of the CSS3 spec: http://www.w3.org/TR/2015/WD-css-flexbox-1-20150514/
In two years of adopting this policy in my own work I would say I learned as fact as the entire decade before that, where I was making quilts by stitching pre-made bits of fabric into one larger piece.
Don't be a quiltmaker any longer!
Three years ago I couldn't write a line of JavaScript (though I could hook up, configure, and enable jQuery plugins). So I decided to just start _typing_ 100% of the JavaScript I would add to my projects instead of copying and pasting it in…two years later I'm writing vanilla JavaScript for everything I need and I haven't put jQuery on a project in months!
If you want to get closer to a language (CSS, HTML, JS) stop copying from Stack Overflow, stop using libraries you don't understand, and either write it yourself or re-write your own version of somebody else's pattern and use that.
This idea didn't come from another developer or advice or anything, I just set a personal goal to see how it would turn out. Now I highly recommend it to others too!
- Find and read some front-end designer blogs.
- Take a good (CSS) framework like HTML5 boilerplate and dissect its code.
- Remake your last favorite designed site without looking at their code. Then compare afterwards.
- Start creating your own framework for rapid prototyping. Add layout-rules to common UI elements: breadcrumbs, pane lists, buttons, forms etc.
Do you have some suggestions?
If you're not a designer, take a popular webpage and build your own version of it, then look at the real source code and see how yours compares, or ask some CSS forum members to look over your code.
Build a library of frequently used styles. I have something like the following:
.small {font-size: 12px;} .big {font-size: 16px;} .bigger {font-size: 18px;} .biggest {font-size: 20px;}
...and it extends from everything like font sizes to colors.
.red {color: #f00;}
Then when you're building something out, you can reference generic styles from your own library. It makes things quick:
<p class="big red">foo</p>
I'd recommend against using something like Bootstrap early on. To really get the grasp of CSS, you'll want to work with ONLY your own code so you really understand how it works. Libraries are great, but you can only fully understand it if you control everything.
Hope these tips help!
- Make a sketch of the design, form positioning or interface you want for a certain page.
- Try to translate this design to a more comprehensible form for your interpreter (I mean writing CSS lines).
- Long cycle of try and error, reading stackoverflow, testing, reading snippets.
Practice this for a certain amount of time (be patient!) you will find yourself a world class CSS "writer". The main basis is moving from a sketch to CSS script.
https://twitter.com/SaraSoueidan https://twitter.com/anatudor https://twitter.com/LeaVerou
2. Get a codepen account and start experimenting, sharing new ideas on css forums ect.
3. Try to replicate some css frameworks like pure. Read the code; try to figure out how they did something.
4. Finally, I recommend CSS Secrets book by Lea Verou. You can buy a pre release copy.
You might have a list with ideas (they can even be stupid, or already existing). If not, try to make one, the craziest things can go on there. Then every week try to sit down and make the user interface for them. Look at other websites that offer familiar services and combine them. Learning while practicing putting your ideas into reality has been my best way of getting any real sustained progress in skills!
There's a bunch of different ways to do this, one I liked was downloading free Bootstrap themes and making them look different. An unexpected bonus was learning to find errors in the code.
For great looking buttons/fields you just need to be sensitive to font selection, padding, borders, & colors.
1) Refer to apps / sites that you think are beautiful
2) Dissect them for:
- Color palettes
- horizontal padding
- vertical padding
- margins sizes
- border thicknesses
- font stacks
- font sizes
3) always build on top of a css framework such as bootstrap
4) implement design tweaks referring to your notes of other apps you wish to imitate.
Making things look great is more about an affinity for design than knowledge of fancy CSS.
OP, you might want to hang out on news.layervault.com in addition to HN. You can learn a lot by examining what gets shared and the comments.
1. Start making PSD to HTML/CSS with the following rules: - Write as less HTML as you can and use CSS to get the style. - Avoid using images as hard as you can. - Always remember we want a fast Web and every byte counts.
2. Be curious, if you see something you like on a website, check their code, look how they did it and try experiment with it. Try to find a cleaner, better and less-code way to do it (if ther is) and apply it to your projects.
As someone else said, write your own responsive grid from scratch. Try writing a responsive contact form (name, E-Mail, message body).
* Modern browsers only * use flexbox * must work in ie6 with no js * must degrade gracefully etc
Pick a CSS framework and look through the source. Bootstrap is a great one (https://github.com/twbs/bootstrap/blob/master/dist/css/boots...). You can read through their documentation and find the styles in the source to see how it works (http://getbootstrap.com/).
Whenever you see something cool on a website, Right Click -> Inspect Element and figure out how they did it. Google Chrome developer tools are really awesome for this. You can toggle existing styles, add styles, edit html, etc (https://developer.chrome.com/devtools/docs/elements-styles)
For detailed explanations use Mozilla Developer Network (https://developer.mozilla.org/en-US/docs/Web/CSS). They have very comprehensive write ups for every style attribute.
CSS Tricks has great write ups for specific styles and sets of styles to achieve things like centering, layout, and pretty much everything else you can think of (https://css-tricks.com/)
The Codrops CSS Reference is also very, very detailed (http://tympanus.net/codrops/css_reference/)
Like many other people have said, if you think up a design you can use jsfiddle, jsbin, coderpen or any in browser editor to quickly try and style something up.
For larger CSS code bases you'll need to keep things readable and easily understandable for yourself and others. My team follows the Medium CSS/LESS Style Guide. It's a really excellent way to keep your code organized when you start working in larger code bases. https://medium.com/@fat/mediums-css-is-actually-pretty-fucki...
Good luck!
Edit I forgot to mention reading up on media queries. Media queries are extremely important for when you get into responsive design and dealing with content layout across all sorts of different screen sizes. Google has a very good write up on this (https://developers.google.com/web/fundamentals/layouts/rwd-f...) as well as CSS Tricks (https://css-tricks.com/snippets/css/media-queries-for-standa...)