31–40 of 40 posts
Earlier quoted context omitted.
I'm not sure anyone really expects websites to look good in internet explorer anymore. As long as it's mostly functional, it's fine.
I think internet explorer users would disagree with you.
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!
STOP copying and pasting. Try typing every character in your CSS and never rely on external or pre-made libraries and you will learn what is, and more importantly what is not actually required for a layout to work. 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…
- Design an application or website inside the browser (no photoshop mockup). - 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,…
> Find and read some front-end designer blogs. Do you have some suggestions?
As someone else said, write your own responsive grid from scratch. Try writing a responsive contact form (name, E-Mail, message body).
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...)
* Modern browsers only * use flexbox * must work in ie6 with no js * must degrade gracefully etc
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.
STOP copying and pasting. Try typing every character in your CSS and never rely on external or pre-made libraries and you will learn what is, and more importantly what is not actually required for a layout to work. 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…
Did you personally think up this quilting analogy for copy-pasta programming? Because it's pretty awesome and I want to be able to give due credit when I steal it.
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!
Earlier quoted context omitted.
I'm not sure anyone really expects websites to look good in internet explorer anymore. As long as it's mostly functional, it's fine.
I think internet explorer users would disagree with you.