Design the Internet. Go.
August 11, 2012 7:50 PM Subscribe
Good resources to learn current HTML and CSS for web design? Especially looking for best practices for creating blog websites for modern browsers and devices.
At the moment, I have a cobbled-together knowledge of basic HTML and CSS. I would like to expand that to a deeper and more thorough understanding of web design so that I can efficiently modify WordPress blog templates and/or create my own. What resources should I look at? (Seems like this question was last asked in 2008, so presumably responses would be quite different now.)
I am especially curious about:
- best practices for getting stuff to render correctly in browsers as well as devices like iPads (for example, should I use percentages or pixels or ems? when are tables a good idea or a bad idea? which formerly popular techniques are now deprecated?)
- tools/programs to use for coding (is there a decent WYSIWYG editor these days? what other cool tools are out there besides Firebug? how do you make sure all browsers are rendering your code as you intended it, if you don't have all those browsers installed on your machine? what program do people use to actually write their code and test-drive it?)
- responsive design practices (like how to use flexible images and widths to adapt to smaller screens, and dynamic design based on whether visitors have been to your website before or not)
- basic overview of when to use JavaScript, jQuery, Ajax, etc. and what they're good for
Ideally, I'm looking for an up-to-date, comprehensive resource that starts from first principles, builds up a progression of skills and knowledge, and gives specific suggestions like "do this, don't do that, but here is one exception" (as opposed to more broadly stating "here are some possibilities you could use" without any advice for when to use them).
At the moment, I have a cobbled-together knowledge of basic HTML and CSS. I would like to expand that to a deeper and more thorough understanding of web design so that I can efficiently modify WordPress blog templates and/or create my own. What resources should I look at? (Seems like this question was last asked in 2008, so presumably responses would be quite different now.)
I am especially curious about:
- best practices for getting stuff to render correctly in browsers as well as devices like iPads (for example, should I use percentages or pixels or ems? when are tables a good idea or a bad idea? which formerly popular techniques are now deprecated?)
- tools/programs to use for coding (is there a decent WYSIWYG editor these days? what other cool tools are out there besides Firebug? how do you make sure all browsers are rendering your code as you intended it, if you don't have all those browsers installed on your machine? what program do people use to actually write their code and test-drive it?)
- responsive design practices (like how to use flexible images and widths to adapt to smaller screens, and dynamic design based on whether visitors have been to your website before or not)
- basic overview of when to use JavaScript, jQuery, Ajax, etc. and what they're good for
Ideally, I'm looking for an up-to-date, comprehensive resource that starts from first principles, builds up a progression of skills and knowledge, and gives specific suggestions like "do this, don't do that, but here is one exception" (as opposed to more broadly stating "here are some possibilities you could use" without any advice for when to use them).
Use a CSS reset to iron out differences in various browsers' default HTML rendering.
jQuery is a JavaScript library that takes care of cross-browser differences in JavaScript so you just need to write code that does what you want to do. There are other JavaScript libraries but jQuery's probably the most widely used.
Ajax is a way of using JavaScript (or jQuery) to communicate with a server-side script and update part of a page without having to reload the whole page.
RESS: Responsive Design + Server Side Components is more practical than straight-up responsive web design. Which One: Responsive Design, Device Experiences, or RESS? Getting started with RESS
posted by kirkaracha at 9:35 PM on August 11, 2012
jQuery is a JavaScript library that takes care of cross-browser differences in JavaScript so you just need to write code that does what you want to do. There are other JavaScript libraries but jQuery's probably the most widely used.
Ajax is a way of using JavaScript (or jQuery) to communicate with a server-side script and update part of a page without having to reload the whole page.
RESS: Responsive Design + Server Side Components is more practical than straight-up responsive web design. Which One: Responsive Design, Device Experiences, or RESS? Getting started with RESS
posted by kirkaracha at 9:35 PM on August 11, 2012
It's not exactly what you're looking for, but it would be worth it to look through the html5 boilerplate template generator/initializr). It gives you a solid foundation for starting an HTML5 project (including a responsive version), with notes and links about the javascript/jquery/css hacks/best practices in use.
posted by logic vs love at 10:20 PM on August 11, 2012
posted by logic vs love at 10:20 PM on August 11, 2012
Seconding the recommendation that you look to expanding your knowledge of HTML & CSS apart from Wordpress. Wordpress's templates tend to lock a lot of things down in ways that ultimately make them less flexible then straight markup. Look at some of the resources at Codecademy for tutorials and consider at least looking at 1stPage3, an editor that offers quite a lot of capabilities.
posted by Emperor SnooKloze at 11:53 PM on August 11, 2012
posted by Emperor SnooKloze at 11:53 PM on August 11, 2012
It sounds like you have a good approach, which is half the battle won already... let me try to answer a few of your questions, and then provide some resources.
Introductory Guides: Don't Fear The Internet, by the wonderful Jessica Hische (uses WordPress, so it might be a good starting point), Designing For The Web by Mark Boulton (a complete free book), Dive Into HTML5 (another one).
Online schools and curricula: CodeAcademy, CodeSchool, W3C Education Community Group, the Opera Web Standards Curriculum, A Beginner's Guide To HTML and CSS.
General hints and tips: CSS Tricks, all the other resources mentioned above.
Finally, my own humble contribution to the community and web development classes: my blog.
I hope this helps!
posted by Bora Horza Gobuchul at 12:08 AM on August 12, 2012 [5 favorites]
- Practices that are deprecated: tables for layout. Flash has largely been relegated to very complex interactive content. JavaScript plays more of a role in pages than ever, but it tends to be more advanced; basic stuff like rollovers is increasingly handled by CSS.
- As a general rule, try to use fluid, relative systems of measurement (em, rem, percentages) over fixed (pixels). While it is harder, doing so makes the process of taking your site responsive later much easier. For example, try placing an image on the page with
<img src=x.jpg style="max-width:100%">... and then resize the browser. - Tools for making webpages... no, the mythical WYSIWYG is still not with us, and probably never will be. The web runs on code, and while trying to create the stuff visually can provide results, it will never give you the degree of control that working with the code directly will allow you.
- Making sure that your site works on all browsers: ensure that your HTML code is valid, add your CSS in a logical manner, avoid IE7 and below, and test your pages in browserstack, which runs multiple browsers as services and shows you your page in each of them.
Introductory Guides: Don't Fear The Internet, by the wonderful Jessica Hische (uses WordPress, so it might be a good starting point), Designing For The Web by Mark Boulton (a complete free book), Dive Into HTML5 (another one).
Online schools and curricula: CodeAcademy, CodeSchool, W3C Education Community Group, the Opera Web Standards Curriculum, A Beginner's Guide To HTML and CSS.
General hints and tips: CSS Tricks, all the other resources mentioned above.
Finally, my own humble contribution to the community and web development classes: my blog.
I hope this helps!
posted by Bora Horza Gobuchul at 12:08 AM on August 12, 2012 [5 favorites]
A lot of good online schools have been mentioned here! I've popped in to include another: treehouse. They offer everything from beginning html/css to more advanced courses such as responsive design and iOS development. I've recently enrolled, and while my skillset is probably beyond basic web stuff, it's still keeping me sharp in other realms of the ever-evolving web. They offer free trials, so you might benefit by at least giving it a spin!
posted by colorproof at 2:11 AM on August 12, 2012
posted by colorproof at 2:11 AM on August 12, 2012
Codecademy's courses on Web Fundamentals, JavaScript, and jQuery look good.
WordPress' backend is coded with PHP and a MySQL database. PHP Tutorial for Beginners, Object Oriented PHP for Beginners, 30+ PHP Best Practices for Beginners.
posted by kirkaracha at 7:23 AM on August 12, 2012 [1 favorite]
WordPress' backend is coded with PHP and a MySQL database. PHP Tutorial for Beginners, Object Oriented PHP for Beginners, 30+ PHP Best Practices for Beginners.
posted by kirkaracha at 7:23 AM on August 12, 2012 [1 favorite]
Response by poster: Thanks for the answers so far. I would still love to see something like a manual for designing with usability in mind. Is there such a thing out there?
And can anyone recommend a good, comprehensive tutorial that will teach me how to create beautiful, usable WordPress templates?
posted by danceswithlight at 7:33 AM on August 12, 2012
And can anyone recommend a good, comprehensive tutorial that will teach me how to create beautiful, usable WordPress templates?
posted by danceswithlight at 7:33 AM on August 12, 2012
For a foundation in CSS I strongly recommend Andy Budd's CSS Mastery.
posted by juiceCake at 8:26 AM on August 12, 2012
posted by juiceCake at 8:26 AM on August 12, 2012
Wptuts+ (by the same people that do Nettuts+) is all about WordPress; WordPress Theme Development Training Wheels: Day One
posted by kirkaracha at 4:23 PM on August 12, 2012
posted by kirkaracha at 4:23 PM on August 12, 2012
I would still love to see something like a manual for designing with usability in mind.
I think recently usability plays a major role in most of the resources already mentioned. A lot more-so than in the table-based and Flash era of the web anyways. But now, usability is often geared toward mobile devices (less hover effects, bigger buttons for fingers, etc).
posted by p3t3 at 5:13 PM on August 12, 2012
I think recently usability plays a major role in most of the resources already mentioned. A lot more-so than in the table-based and Flash era of the web anyways. But now, usability is often geared toward mobile devices (less hover effects, bigger buttons for fingers, etc).
posted by p3t3 at 5:13 PM on August 12, 2012
« Older Other motivations in weightlifting besides beating... | How to deal with possibly litigious client Newer »
This thread is closed to new comments.
Font sizing with rem works well in modern browsers, with pixels as a fallback for older ones.
Code in HTML5. Coding an HTML 5 Layout From Scratch. Internet Explorer needs a html5shiv to understand newer HTML5 tags.
Tables are a good idea for tabular data and a bad idea for layout.
Smashing Magazine and Nettuts+ are good resources.
posted by kirkaracha at 8:09 PM on August 11, 2012 [1 favorite]