background preloader

CSS

Facebook Twitter

W3Fools Takes on W3Schools. W3Schools is one of the oldest and most popular web development tutorial sites on the Web. But it has its share of critics. Today, 46 of those critics launched W3Fools, a site dedicated to criticizing W3Schools. W3Fools lists a number of mistakes, inaccuracies and pieces of outdated information in W3Schools' tutorials, especially the HTML and JavaScript tutorials. The site points out W3Schools' own disclaimer as evidence that the site is badly flawed. The disclaimer reads: "We do not warrant the correctness of [W3Schools] content. The site's authors note that although there are resources they believe are better, "W3Schools has put a lot of effort into positioning itself at the top of search results and, despite our efforts (such as the PromoteJS initiative), appears to be there to stay. " Here are the resources W3Fools recommends as alternatives: I linked to W3Schools' JavaScript tutorial in our 6 Free JavaScript E-Books and Tutorials post.

Update: W3Schools has responded.

Positioning

CSS font property. Frameworks for Designers. These days, “framework” is quite a buzzword in web development. With JavaScript frameworks like the Yahoo User Interface library, jQuery, and Prototype getting a lot of attention and web application frameworks like Rails and Django getting even more, it seems like everyone is using some kind of framework to build their sites. But what exactly is a framework? And are they only useful to programmers, or can we web designers benefit from the concept, as well? What is a framework? #section1 So that we’re all on the same page, let’s agree—at least for the duration of this article—on this definition of “framework”: a set of tools, libraries, conventions, and best practices that attempt to abstract routine tasks into generic modules that can be reused. To be clear, we’re not necessarily talking about something that is built, packaged, and released to the public.

A framework for designers#section2 Chances are, you can benefit from a similar abstraction of CSS code for your web design process. 960 Grid System. Don't Overthink It Grids. The vast majority of websites out there use a grid. They may not explicitly have a grid system in place, but if they have a "main content area" floated to the left a "sidebar" floated to the right, it's a simple grid. If a more complex layout presents itself, people often reach for a grid framework. They assume grids are these super difficult things best left to super CSS nerds. That idea is perpetuated by the fact that a lot of the grid systems they reach for are very complicated. Here's how I build grids. It's not hard or complicated. Even making them flexible is no big deal. Context A block level element is as wide as the parent it's inside (width: auto;). Columns Let's start with a practical and common need: a main content area being 2/3 the width and a sidebar being 1/3 the width.

<div class="grid"><div class="col-2-3"> Main Content </div><div class="col-1-3"> Sidebar </div></div> To make them next to each other, we just need to float them and apply widths. Clearing Context Gutters Sass.