13 ms·

W3.css – A minimal alternative to Bootstrap

206 points by aabbcc1241 4y ago

paulryanrogers 4y ago
I wonder how much smaller it could be if they drop IE
willio58 4y ago
Anytime I land on w3schools, I go back to google and click on the MDN link. This was a learned behavior that I don't even question now. Has w3schools gotten any better over the years? Would anyone consider using this or any package from them?
- kodt 4y ago
 Yes they improved considerably from the past but old habits are hard to break.
- account-5 4y ago
 As a beginner, with no history, w3schools is way better than MDN.
 - kube-system 4y ago
 MDN has really good beginners guides, if you go to their tutorial section and not the detailed documentation. https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web https://developer.mozilla.org/en-US/docs/Learn/Getting_start...
 - lelandfe 4y ago
 As someone who helps beginners learn CSS regularly at my job, my biggest qualm with MDN is that they tend to leave out the why. Check out this page: https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bloc... > The `margin-block` CSS shorthand property defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation. Whew, that's a lot. Setting aside how inside baseball the terms "logical block" and "physical margin" are, this description fails to tell the reader why they would want to use this property. Why use this, instead of `margin`? It's nowhere on the page. Typically, that reasoning lays buried in the distant and forbidden "Guides" section (which MDN's search doesn't index). To find our reasoning, you must go to Guides, under CSS expand "CSS building blocks," then finally click "Handling different text directions": https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_... “But look, you found the explanation for `margin-block`, didn’t you?” “Yes I did. It was on display in the bottom of a locked filing cabinet stuck in a disused lavatory with a sign on the door saying 'Beware of the Leopard.'”
 - blakblakarak 4y ago
 This is a good resource for beginner too: https://tympanus.net/codrops/css_reference/ https://tympanus.net/codrops/css_reference/
 - marcosdumay 4y ago
 You can't expect long documentation for beginners to be inline on the reference pages. Just start teaching the beginners you help how to find the guides.
 - lelandfe 4y ago
 The guides are written for beginners. But an explanation of why does not need to be. It could even be included in that intro paragraph with just a sentence or two, with a link out to the guide for more. > how to find the guides I'll let you know when I learn how to find the guides. I didn't even know that one existed until I scoured the site.
 marcosdumay 4y ago
 There are a lot of guides. If you go to the more general references on the hierarchy (indexed at the left side), you will find small explanations on the why with links for the guides. What you won't find are general details on the more specific references. Unfortunately, search engines prefer the specific ones, so you will have to backtrack by yourself.
 - synergy20 4y ago
 agreed, somehow w3schools just made stuff really easy to learn, easy to navigate, and easy to refer. I only need MDN when I want to read stuff 'deep', but 98% of the time I don't need that depth. MDN is also hard to navigate, it works like a thick dictionary to me, it will be needed, but only rarely.
- duxup 4y ago
 They’re handy for beginners. MDN is a bit technical at times and doesn’t always have detailed examples a beginner might hope for.
 - Izkata 4y ago
 Eh. I'm the same as GP, because back before learned that behavior, w3schools had plenty of straight up wrong information. So their question still stands: have they gotten better?
 - duxup 4y ago
 I haven’t seen anything wrong in years
 - chrisweekly 4y ago
 - irrational 4y ago
 Do you have a reference to them buying it out. This is the first time I’ve heard this claim.
 chrisweekly 4y ago
 mea culpa, I was wrong (see my newer comment upthread)
 - TheMaskedCoder 4y ago
 This is false. Paul Irish still has the repository for w3fools on Github. You can verify[1] that Paul Irish himself revised the text. Paul Irish works for Google. There is no reason to think that w3schools paid him to revise the content. There is a closed issue that explains the reasoning[2] 1: https://github.com/paulirish/w3fools/commits/gh-pages https://github.com/paulirish/w3fools/commits/gh-pages 2: https://github.com/paulirish/w3fools/issues/50 https://github.com/paulirish/w3fools/issues/50
- wnevets 4y ago
 > Has w3schools gotten any better over the years? Their website has, no idea about the company itself tho.
- doytch 4y ago
 Ha, same. Though I've been using Kagi Search for a few months now and blocked W3Schools from my search results so I never make this mistake anymore.
- lxe 4y ago
 W3schools has completely redeemed itself at this point. The content is much much better than it was 10 years ago.
 - deleted 4y ago
 [deleted]
 - laundermaf 4y ago
 Not. As shown in many examples in this thread.
 - Tao3300 4y ago
 But also yes, as shown by many other examples in this thread. Huh.
 - rchaud 4y ago
 Look at the examples of W3schools' errors in the thread, and then compare them to what a beginner learning experience is actually going to be like. Step 1: W3schools.com is the first link on Google, so I'll go there. Step 2: OK, I copy/pasted some of the code into my Sublime Text scratchpad file, but I'm getting an error when I load it in the browser. Step 3: Do a search on the error message, StackOverflow is the first result. Go there and find the issue (syntax error on W3schools page) Compare this to a world where StackOverflow is always #1. Try posting a question about learning HTML and CSS and see how fast the mods delete your question. W3Schools serves an important purpose.
- MatthiasPortzel 4y ago
 I just pulled up the page for String.match, which is a weird function because it returns an array that has named properties on it. W3Schools doesn't mention that. It just says it "method returns an array with the matches." It also doesn't mention the behavior without the global flag. I also noticed a misspelling ("Differense"). => https://www.w3schools.com/jsref/jsref_match.asp https://www.w3schools.com/jsref/jsref_match.asp => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... Comparing these two pages, only the second one is competent at describing what the function actually does. Neither is perfect. The MDN doesn't do a great job of communicating all the information, but at least all of the information is there.
 - Waterluvian 4y ago
 Tangent: why is .match on Symbol? I read through string.match and looked at Symbol and I don’t understand why all these helpful functions exist on Symbol.
 - jchw 4y ago
 Symbol.match is not the match function, it is a Symbol which can be used as a property key on an object that is supposed to behave like a regular expression. The purpose of having Symbol values is to ensure the property keys are unique and can't collide with string keys that predate new standards.
 - Waterluvian 4y ago
 Ohhhh okay. So it’s just a flag describing expectations about an object. And as a Symbol it doesn’t interfere with any other part of the object such as properties or iteration.
 - acdibble 4y ago
 Also known as "well-known symbols". https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol#well-known_symbols https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
- Waterluvian 4y ago
 I use a plug-in to hide w3schools from results. MDN is amazing.
- tjpnz 4y ago
 I do have a deep-seated fear of being seen as less competent if someone saw it up on my screen.
- irrational 4y ago
 I would use the website. I don’t know anything about the library. W3schools has gotten a lot better I’ve the past 5 years or so. I use it for quick lookups and only go to mdn when I’m trying to learn something new.
- remram 4y ago
 I wrote a search-result filter extension (actually TamperMonkey script) just for w3schools, many years ago! Then I added all those auto-generated comparison sites: stackshare, wikidiff, etc. It's satisfying to see that my dislike is not some unfounded personal quirk!
- jamesfinlayson 4y ago
 I always use it for SQL syntax - no other site seems to give basic details about the syntax for different constructs.
- hamboga 4y ago
 I'm not an expert, but W3 schools uses in their examples which is a bad way of teaching since my understanding is that there is never a good reason to use a especially not to format a page, which is a habit I had to drop because I learned it from w3.
 - jakelazaroff 4y ago
 What’s wrong with ? It’s a perfectly semantic way to insert a line break. I use it often when I’m trying to get a block of text to look good at multiple breakpoints.
 - sn0n 4y ago
 I think the main reason given is if you think something needs a br tag, the content before and after should probably be in p tags or something else. That's at least what my 2am brain remembers reading somewhere some years ago.
 - jakelazaroff 4y ago
 tags are for paragraphs. If you’re trying to break in the middle of a paragraph or sentence, they’re the wrong tool to use. Also, they’re not flexible across breakpoints like tags are.
- RockRobotRock 4y ago
 W3schools sucks but still holds a place in my heart from my youth
- lelanthran 4y ago
 > Has w3schools gotten any better over the years? Would anyone consider using this or any package from them? Yeah. I prefer it to MDN sometimes because they usually have a "try it yourself" that actually works very well. Doesn't matter how much better the MDN doc might be, I often just want to try it myself.
 - iaml 4y ago
 MDN also has a “try it” widget [0], works well enough for my purposes. [0] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
 - lelanthran 4y ago
 It never used to be on all pages, though.
 - wil421 4y ago
 It’s been on most if not all pages for years now.
- Ayesh 4y ago
 I can only judge them based on CSS and PHP content because those are the things I can even properly compare. W3schools continue to be a very low quality resource, incomplete and incoherent on most aspects. There is a "try it yourself" that I sometimes use, merely because it's quick to whip something up, and much more faster than codepen.
- chillfox 4y ago
 I would say they haven't changed much over the years, but I always quite liked them for just getting answers to simple things fast. MDN is of course fantastic, but generally requires more reading/scrolling and is therefore slower for simple things like what's the markup for a button or select drop down thing look like again. As for the w3.css style sheet, it's quite good for sprucing up small internal web apps.
 - rchaud 4y ago
 You nailed it about the appeal of W3: It's quick to get to the point. I can read the first para and figure out what I'll be learning. The code examples are interactive and visual, and help enormously. MDN reads like a technical reference. Wordpress documentation is similarly structured, but it has a comments section with a lot of sample code for different use cases, which helps me figure out whether the function I'm looking at will help accomplish what I am trying to do.
 - pwdisswordfish9 4y ago
 > You nailed it about the appeal of W3 W3Schools isn't "W3". It's W3Schools. To put it another way, W3Schools is "W3" in the same way that JavaScript is "Java" or Wikipedia is "Wiki".
- _the_inflator 4y ago
 This here is for you then: https://www.w3fools.com/ https://www.w3fools.com/ ;) w3schools got way better, but back then w3fools had its reason.
- benknight87 4y ago
 I did this so much that I got into the habit of putting "mdn" before any search query. Now I do it without even thinking about it.
 - reidrac 4y ago
 In DDG you can just !mdn your search.
- anonymous344 4y ago
 This. That is just awful site. Like created just to make you go crazy
- tiborsaas 4y ago
 No. The issue is that it's sometimes OK, sometimes good and sometimes hilariously bad. I don't want to play russian roulette with docs so I installed W3School blocker extension to weed out the problem at the root :)
- theandrewbailey 4y ago
 Use a better search engine that uses bangs like DuckDuckGo or Brave. !mdn search term brings you directly to MDN's search result page for search term.
- rchaud 4y ago
 Tried learning HTML/CSS through that site in 2006. Terrible experience, so I continued to use Dreamweaver for personal projects. Tried learning again in 2014, after a career change: Excellent experience, so good that I go there first. I simply did not grok responsive design until I read their article about floats and media queries. I was trying to get admitted into a bootcamp at the time, and my assignment was to recreate a landing page from a PNG image, without using Bootstrap or any other grid framework. Most official sources of technical documentation online are written by and for developers, and assume a lot of prior knowledge. I never understood a lick of the official jQuery documentation either, until I went through W3schools section on it, and then later Jon Duckett's beautifully visual dead-tree book on JS and jQuery.
- err4nt 4y ago
 They have some good resources for obscure technologies, like XPath, but for the big ones like HTML/CSS/JS there's both the danger that they're out of date and not showing you what's new, while also possibly showing you old hacks and workarounds that are against modern best practice. MDN is a better choice for (almost) anything MDN has content for.
 - rchaud 4y ago
 How much of the core of HTML/CSS/JS has been deprecated? Somebody going to W3schools probably isn't looking for the latest and greatest. The person who is looking for that would already have a good grasp of the fundamentals, and would have graduated to looking elsewhere, like StackOverflow or Caniuse.com.
- dpcan 4y ago
 You’re missing out. It’s probably the best and easiest to use css/js/html reference site anywhere. I can’t gauge how it’s changed but I find it’s to-the-point and example driven format is perfect for the way I learn.
 - rchaud 4y ago
 They definitely updated the content of the site. But they left the look (color scheme, etc) largely unchanged from the 2000s, so opening the site probably reminds some people of the bad old days.
version_five 4y ago
https://www.w3schools.com/w3css/4/w3.css https://www.w3schools.com/w3css/4/w3.css (evidently from December 2020) I think of w3schools as largely SEO spam, though sometimes I have found useful answers when they come up as the first hit. Is that the general perception? (I should add I don't use css professionally)
- nullgeo 4y ago
  w3schools has gotten better over the years[1]. I use MDN for almost everything, but I do mistakenly click the first result on Google Search which is usually w3schools. You can use this handy site to have the "I am feeling lucky" Google experience while searching for any web related queries. Example: mdn.io/flexbox [1]: https://www.w3fools.com/ https://www.w3fools.com/
  - laundermaf 4y ago
    No, what happened with w3fools is that someone realized that it was not “politically correctly” so they picked out a couple of “fixed” examples and said “never mind it’s fine now.” The reality is that w3schools is low quality spam and it will never change.
- thecoppinger 4y ago
  That’s my experience and perception, too.
- bee_rider 4y ago
  As a non-webdev, I was always surprised that the World Wide Web consortium released such poor educational material. So, today I learned that W3schools and W3C were not related! That is... easy to mix up I think?
  - philipwhiuk 4y ago
    It's deliberate on the part of W3schools.
  - jcuenod 4y ago
justusw 4y ago
W3.CSS is free to use. No license is necessary. Does that not constitute a license?
- phire 4y ago
  A very minimal one. Decent chance it will stand up in court, but it's not going to make your legal department very happy.
  - quickthrower2 4y ago
    This might be it? https://github.com/JaniRefsnes/w3css/blob/master/LICENSE https://github.com/JaniRefsnes/w3css/blob/master/LICENSE Based on the github account being similar to the names in https://www.w3schools.com/w3css/4/w3.css https://www.w3schools.com/w3css/4/w3.css, it is likely to be the origin. Edit: https://news.ycombinator.com/item?id=32831880 https://news.ycombinator.com/item?id=32831880, beat me to it by a few seconds!
  - jaimex2 4y ago
    Yeah, but I would never work at a place with a legal department. I like getting things done.
- kyle-rb 4y ago
  It sounds like whoever wrote that page doesn't know much about software licensing. Doesn't make me confident that w3schools has improved as much as people say it has. However, it does seem to be MIT-licensed. Linked from the downloads page: https://github.com/JaniRefsnes/w3css/blob/master/LICENSE https://github.com/JaniRefsnes/w3css/blob/master/LICENSE
  - XorNot 4y ago
    Would've helped if there any sort of license spec in the file header. All it's got is "/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */"
  - hamandcheese 4y ago
codazoda 4y ago
“No license is necessary.” What does that even mean? Sounds like w3.css is copyrighted with no license granting me the privilege of using it. Edit: Looks like the GitHub repo does have a license and it’s a proper MIT license. https://github.com/JaniRefsnes/w3css https://github.com/JaniRefsnes/w3css
- jamesrr39 4y ago
  I think here it means you don't need to buy a license or sign up to any terms and conditions, which would be in line with the MIT license in the github repository.
iambateman 4y ago
(This was a framework released in 2017.)
- bornfreddy 4y ago
  (This is a framework which was released in 2017.)
- endless1234 4y ago
  Yeah, and last commit to github was in 2018, last update to the hosted CSS file in 2020. Not quite sure why it's posted to HN now?
TobyTheDog123 4y ago
Even besides the licensing questions and IE comments, this just.... doesn't look good, I'm sorry. I wouldn't be surprised if there were objectively incorrect design decisions here. The final straw was when I visited the "Cards" component - my God. Comparing this to Bootstrap? It's Bootstrap by a landslide.
- j0hnyl 4y ago
  I'm not a frontend person and I'm attracted to simplicity. I can certainly believe this is not good, but do you know if there are good minimal alternatives like this? Bootstrap seems a bit complex for basic stuff.
  - stackbutterflow 4y ago
    Try Tailwind.
  - rodorgas 4y ago
    Bulma is smaller. But I feel CSS frameworks are not much flexible, which may explain their decay. Also, frontend modern tooling helps you build your own components with minimal CSS helpers, like Tailwind.
- christoph 4y ago
  w3-circle made me chuckle. https://www.w3schools.com/w3css/w3css_images.asp https://www.w3schools.com/w3css/w3css_images.asp
  - selcuka 4y ago
    It is a circle, from a certain point of view.
philipwhiuk 4y ago
w3-center Can we all please appreciate how stupid this CSS is. This literally removes the whole point of CSS classes.
- tuukkah 4y ago
  It's debatable which style is best and it also depends on the contex . Tailwind has popularised this style to the extreme, see e.g. https://tailwindcss.com/docs/align-content https://tailwindcss.com/docs/align-content
- dpcan 4y ago
  And it’s okay for bootstrap to use p- or m- etc? Is it just because it’s w3?
conjuredbytes 4y ago
I think there's a lot of unnecessary aggro in here just for the fact that it's from W3Schools. Yeah, MDN is a better source of record but W3schools often lays things out in a way that's easier for beginners to digest. I started with W3Schools before moving to MDN. It served a purpose.
- that_guy_iain 4y ago
  I've heard it's way better than it used to be. It used to be a completely terrible resource but that was like 10-years ago. It's obivously had time to improve over the years. One of the bad things in tech is that reputations stick and people are too quick to bad mouth something because of what it was like 10-15 years ago.
  - mhaberl 4y ago
    I don't know about that. I occasionally used that site at least 20 years ago. It seems to me that it serves the same audience as it did back then. You can quickly find useful pieces of information when you need them. I don't get where did the bad rep come from. Did they show inaccurate information at some point? I never noticed that. What I did notice is that people are eager to compare them to MDN any time they are mentioned. Even the wikipedia page about them says "MDN Web Docs – similar website". This is obviously my personal experience and I could have missed something.
    - that_guy_iain 4y ago
      > I don't get where did the bad rep come from. Did they show inaccurate information at some point? I never noticed that. Yea, they did. There was a massive campaign to get w3schools to fix their docs because it was out of date. The site is still alive https://www.w3fools.com/ https://www.w3fools.com/ but updated. But check out the wayback when machine to see about the errors.
    - klibertp 4y ago
      Same here - I used it when I was writing DHTML on top of PHP 5, then years later when writing my blog, then from time to time when I had to touch the frontend. It's a nice resource for refreshing your memory of the basics, because the basics are front and center (one could say there are only basics there...) without distracting discussions of implementation details. When I need a detailed reference, I go somewhere else. There definitely were problematic articles on the site, and its biggest contribution to my career was probably teaching me to cross-check my sources. There's a list of problems and nitpicks here[1] - apparently all of these were fixed over the years, hence why it's archived. [1] https://web.archive.org/web/20110412103745/http://w3fools.com/ https://web.archive.org/web/20110412103745/http://w3fools.co...
tommica 4y ago
Nice of them to do this
memset 4y ago
Has anyone used this (is it me new or has it been around?) Would love to know your experiences!
- okasaki 4y ago
  I've used it a bunch and think it's really great. eg. https://camo.githubusercontent.com/ae63c1d0f74004872445991205d8a6413d078b155133a2139f930dee5ffc3b7a/68747470733a2f2f692e696d6775722e636f6d2f614b4c6e4266672e706e67 https://camo.githubusercontent.com/ae63c1d0f7400487244599120... I thought it looked good and it's very simple to use.
hit8run 4y ago
Good for minimal stuff that’s fire and forget. Their official GitHub Repo is not in sync with the latest release on their website. CSS classes often contain !important rules which makes it harder to customize. No use of css variables so good luck with darkmode. They don’t make use of flexbox or css grid. A
andrewstuart 4y ago
What the heck IS w3schools? i.e who is behind it, where did it come from, where is it going? It's always there and seemingly always BEEN there, and it always comes up in my search results and indeed I often use it and the info seems pretty good. But apart from that, how can something so well used basically fly under the radar?
- dzink 4y ago
  It's how I learned web development 20 something years ago. They have simple, clear, entry level tutorials on HTML, CSS, JS and a number of other languages that give you enough to become somewhat productive on the web, so you can be interested in deeper content. It's an institution.
  - vijayabhaskarj 4y ago
    I downloaded the W3Schools offline dump zip archive, which was under 50mb IIRC, from a friend when I first started learning programming because I didn't have access to proper internet. That helped me a lot to learn to code.
- mrcus 4y ago
  Most people seem to think w3schools has some form of association with the W3C. It is actually run by a small family company, Refsnes Data AS, from Sandnes, a depressing city on the western coast of Norway.
  - wizofaus 4y ago
    Perhaps what the world needs is more depressing cities then...
- TrackerFF 4y ago
  As one comment under said, it's a small Norwegian family company (5 employees) that's been around since at least 1998. And they've always focused on what they do. From open Norwegian business data (https://www.proff.no/selskap/refsnes-data-as/sandnes/it-konsulenter-og-r%C3%A5dgivning/IG7JIK103DC/ https://www.proff.no/selskap/refsnes-data-as/sandnes/it-kons...), it seems like they have a yearly revenue around $4.5M USD. From the annual salary expenses, those five employees either make bank - or they hire a lot of consultants from overseas. So I guess it's a good example of first-mover advantage.
laundermaf 4y ago
Outdated junk from a junk website. Stop upvoting this. The domain should probably be blocked from HN like tabloids are.
- reportgunner 4y ago
  If we block w3schools please block reddit too.
skilled 4y ago
Okay, you have to admit them tagging all the classes with a W3- prefix is kind of funny. Looks like their SEO spam approach leaked out to their framework also. But I agree with most people, this site will never recover from its poor reputation. And that’s also their business model. We can only hope Google will eventually tone down how much their site appears in search queries for topics they provide no in-depth information for.
- Ayesh 4y ago
  There is of course that nuclear option of blocking the site entirely on search results using a browser addon. I block w3schools, Pinterest, and a bunch of GitHub/stackoverflow scrapers, and didn't miss a thing.
- chillfox 4y ago
  All css frameworks really should prefix their classes so you can mix them. And I hope that Google keeps showing them in search results, because while MDN is great for in-depth information, most of the time I just need a quick reference of common attributes, and no I don't want it cluttered with a bunch of in-depth information when I am just trying to see what the correct word for something is and how to spell it. Both W3 and MDN are valuable resources for different use cases.
  - zichy 4y ago
    >All css frameworks really should prefix their classes so you can mix them. I don't believe that would work out.
    - klibertp 4y ago
      That's a standard practice in languages that don't have namespaces. C and Emacs Lisp have both proven to be "working out" for decades despite using prefixes instead of namespace support.
    - jaywalk 4y ago
      Why not? Using prefixes to create a "namespace" is a well-established practice in CSS. I'm not sure there's much of a point in doing it to use multiple frameworks, but there's really no reason it wouldn't work.
rado 4y ago
Dropdowns unusable by keyboard, modal doesn't trap focus.
chillfox 4y ago
I used W3.css some time ago to make a basic website [1] for making it easier to find rules while running a pen and paper role playing game. [1] https://www.cardflip.asia/ https://www.cardflip.asia/
adeleine 4y ago
From my experience with Bootstrap I can tell you the only thing you really need is the grid part of it and there are so many lightweight "frameworks" that have just that and its only 250 lines of css in the example of simple grid: https://simplegrid.io/ https://simplegrid.io/ Everything else, buttons, modals, sliders, chords are super simple anyway you can just make them yourself or use a way more featurerich separate slider or modal framework and still be on less junk code than with using bootstrap. tl;dr if you know html and css, you no longer need a css framework for most cases.
- petepete 4y ago
  These days you don't even need a grid library. You can build an entire layout in a handful of lines of CSS with CSS Grid. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La... It's well supported and gracefully degrades (so long as your content is in the right order in the markup).
anonymous344 4y ago
waste of my 10 minutes just to find out it's old and not updated in 4 years. No thanks.
dustinmoris 4y ago

206 points by aabbcc1241 4y ago

I wonder how much smaller it could be if they drop IE

Anytime I land on w3schools, I go back to google and click on the MDN link. This was a learned behavior that I don't even question now. Has w3schools gotten any better over the years? Would anyone consider using this or any package from them?

kodt 4y ago
Yes they improved considerably from the past but old habits are hard to break.
account-5 4y ago
As a beginner, with no history, w3schools is way better than MDN.
- kube-system 4y ago
  MDN has really good beginners guides, if you go to their tutorial section and not the detailed documentation. https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web https://developer.mozilla.org/en-US/docs/Learn/Getting_start...
- lelandfe 4y ago
  As someone who helps beginners learn CSS regularly at my job, my biggest qualm with MDN is that they tend to leave out the why. Check out this page: https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bloc... > The `margin-block` CSS shorthand property defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation. Whew, that's a lot. Setting aside how inside baseball the terms "logical block" and "physical margin" are, this description fails to tell the reader why they would want to use this property. Why use this, instead of `margin`? It's nowhere on the page. Typically, that reasoning lays buried in the distant and forbidden "Guides" section (which MDN's search doesn't index). To find our reasoning, you must go to Guides, under CSS expand "CSS building blocks," then finally click "Handling different text directions": https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_... “But look, you found the explanation for `margin-block`, didn’t you?” “Yes I did. It was on display in the bottom of a locked filing cabinet stuck in a disused lavatory with a sign on the door saying 'Beware of the Leopard.'”
  - blakblakarak 4y ago
    This is a good resource for beginner too: https://tympanus.net/codrops/css_reference/ https://tympanus.net/codrops/css_reference/
  - marcosdumay 4y ago
    You can't expect long documentation for beginners to be inline on the reference pages. Just start teaching the beginners you help how to find the guides.
    - lelandfe 4y ago
      The guides are written for beginners. But an explanation of why does not need to be. It could even be included in that intro paragraph with just a sentence or two, with a link out to the guide for more. > how to find the guides I'll let you know when I learn how to find the guides. I didn't even know that one existed until I scoured the site.
      - marcosdumay 4y ago
        There are a lot of guides. If you go to the more general references on the hierarchy (indexed at the left side), you will find small explanations on the why with links for the guides. What you won't find are general details on the more specific references. Unfortunately, search engines prefer the specific ones, so you will have to backtrack by yourself.
- synergy20 4y ago
  agreed, somehow w3schools just made stuff really easy to learn, easy to navigate, and easy to refer. I only need MDN when I want to read stuff 'deep', but 98% of the time I don't need that depth. MDN is also hard to navigate, it works like a thick dictionary to me, it will be needed, but only rarely.
duxup 4y ago
They’re handy for beginners. MDN is a bit technical at times and doesn’t always have detailed examples a beginner might hope for.
- Izkata 4y ago
  Eh. I'm the same as GP, because back before learned that behavior, w3schools had plenty of straight up wrong information. So their question still stands: have they gotten better?
  - duxup 4y ago
    I haven’t seen anything wrong in years
  - chrisweekly 4y ago
    - irrational 4y ago
      Do you have a reference to them buying it out. This is the first time I’ve heard this claim.
      - chrisweekly 4y ago
        mea culpa, I was wrong (see my newer comment upthread)
    - TheMaskedCoder 4y ago
      This is false. Paul Irish still has the repository for w3fools on Github. You can verify[1] that Paul Irish himself revised the text. Paul Irish works for Google. There is no reason to think that w3schools paid him to revise the content. There is a closed issue that explains the reasoning[2] 1: https://github.com/paulirish/w3fools/commits/gh-pages https://github.com/paulirish/w3fools/commits/gh-pages 2: https://github.com/paulirish/w3fools/issues/50 https://github.com/paulirish/w3fools/issues/50
wnevets 4y ago
> Has w3schools gotten any better over the years? Their website has, no idea about the company itself tho.
doytch 4y ago
Ha, same. Though I've been using Kagi Search for a few months now and blocked W3Schools from my search results so I never make this mistake anymore.
lxe 4y ago
W3schools has completely redeemed itself at this point. The content is much much better than it was 10 years ago.
- deleted 4y ago
  [deleted]
- laundermaf 4y ago
  Not. As shown in many examples in this thread.
  - Tao3300 4y ago
    But also yes, as shown by many other examples in this thread. Huh.
  - rchaud 4y ago
    Look at the examples of W3schools' errors in the thread, and then compare them to what a beginner learning experience is actually going to be like. Step 1: W3schools.com is the first link on Google, so I'll go there. Step 2: OK, I copy/pasted some of the code into my Sublime Text scratchpad file, but I'm getting an error when I load it in the browser. Step 3: Do a search on the error message, StackOverflow is the first result. Go there and find the issue (syntax error on W3schools page) Compare this to a world where StackOverflow is always #1. Try posting a question about learning HTML and CSS and see how fast the mods delete your question. W3Schools serves an important purpose.
MatthiasPortzel 4y ago
I just pulled up the page for String.match, which is a weird function because it returns an array that has named properties on it. W3Schools doesn't mention that. It just says it "method returns an array with the matches." It also doesn't mention the behavior without the global flag. I also noticed a misspelling ("Differense"). => https://www.w3schools.com/jsref/jsref_match.asp https://www.w3schools.com/jsref/jsref_match.asp => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... Comparing these two pages, only the second one is competent at describing what the function actually does. Neither is perfect. The MDN doesn't do a great job of communicating all the information, but at least all of the information is there.
- Waterluvian 4y ago
  Tangent: why is .match on Symbol? I read through string.match and looked at Symbol and I don’t understand why all these helpful functions exist on Symbol.
  - jchw 4y ago
    Symbol.match is not the match function, it is a Symbol which can be used as a property key on an object that is supposed to behave like a regular expression. The purpose of having Symbol values is to ensure the property keys are unique and can't collide with string keys that predate new standards.
    - Waterluvian 4y ago
      Ohhhh okay. So it’s just a flag describing expectations about an object. And as a Symbol it doesn’t interfere with any other part of the object such as properties or iteration.
    - acdibble 4y ago
      Also known as "well-known symbols". https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol#well-known_symbols https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
Waterluvian 4y ago
I use a plug-in to hide w3schools from results. MDN is amazing.
tjpnz 4y ago
I do have a deep-seated fear of being seen as less competent if someone saw it up on my screen.
irrational 4y ago
I would use the website. I don’t know anything about the library. W3schools has gotten a lot better I’ve the past 5 years or so. I use it for quick lookups and only go to mdn when I’m trying to learn something new.
remram 4y ago
I wrote a search-result filter extension (actually TamperMonkey script) just for w3schools, many years ago! Then I added all those auto-generated comparison sites: stackshare, wikidiff, etc. It's satisfying to see that my dislike is not some unfounded personal quirk!
jamesfinlayson 4y ago
I always use it for SQL syntax - no other site seems to give basic details about the syntax for different constructs.
hamboga 4y ago
I'm not an expert, but W3 schools uses in their examples which is a bad way of teaching since my understanding is that there is never a good reason to use a especially not to format a page, which is a habit I had to drop because I learned it from w3.
- jakelazaroff 4y ago
 What’s wrong with ? It’s a perfectly semantic way to insert a line break. I use it often when I’m trying to get a block of text to look good at multiple breakpoints.
 - sn0n 4y ago
 I think the main reason given is if you think something needs a br tag, the content before and after should probably be in p tags or something else. That's at least what my 2am brain remembers reading somewhere some years ago.
 - jakelazaroff 4y ago
 tags are for paragraphs. If you’re trying to break in the middle of a paragraph or sentence, they’re the wrong tool to use. Also, they’re not flexible across breakpoints like tags are.
RockRobotRock 4y ago
W3schools sucks but still holds a place in my heart from my youth
lelanthran 4y ago
> Has w3schools gotten any better over the years? Would anyone consider using this or any package from them? Yeah. I prefer it to MDN sometimes because they usually have a "try it yourself" that actually works very well. Doesn't matter how much better the MDN doc might be, I often just want to try it myself.
- iaml 4y ago
  MDN also has a “try it” widget [0], works well enough for my purposes. [0] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
  - lelanthran 4y ago
    It never used to be on all pages, though.
    - wil421 4y ago
      It’s been on most if not all pages for years now.
Ayesh 4y ago
I can only judge them based on CSS and PHP content because those are the things I can even properly compare. W3schools continue to be a very low quality resource, incomplete and incoherent on most aspects. There is a "try it yourself" that I sometimes use, merely because it's quick to whip something up, and much more faster than codepen.
chillfox 4y ago
I would say they haven't changed much over the years, but I always quite liked them for just getting answers to simple things fast. MDN is of course fantastic, but generally requires more reading/scrolling and is therefore slower for simple things like what's the markup for a button or select drop down thing look like again. As for the w3.css style sheet, it's quite good for sprucing up small internal web apps.
- rchaud 4y ago
  You nailed it about the appeal of W3: It's quick to get to the point. I can read the first para and figure out what I'll be learning. The code examples are interactive and visual, and help enormously. MDN reads like a technical reference. Wordpress documentation is similarly structured, but it has a comments section with a lot of sample code for different use cases, which helps me figure out whether the function I'm looking at will help accomplish what I am trying to do.
  - pwdisswordfish9 4y ago
    > You nailed it about the appeal of W3 W3Schools isn't "W3". It's W3Schools. To put it another way, W3Schools is "W3" in the same way that JavaScript is "Java" or Wikipedia is "Wiki".
_the_inflator 4y ago
This here is for you then: https://www.w3fools.com/ https://www.w3fools.com/ ;) w3schools got way better, but back then w3fools had its reason.
benknight87 4y ago
I did this so much that I got into the habit of putting "mdn" before any search query. Now I do it without even thinking about it.
- reidrac 4y ago
  In DDG you can just !mdn your search.
anonymous344 4y ago
This. That is just awful site. Like created just to make you go crazy
tiborsaas 4y ago
No. The issue is that it's sometimes OK, sometimes good and sometimes hilariously bad. I don't want to play russian roulette with docs so I installed W3School blocker extension to weed out the problem at the root :)
theandrewbailey 4y ago
Use a better search engine that uses bangs like DuckDuckGo or Brave. !mdn search term brings you directly to MDN's search result page for search term.
rchaud 4y ago
Tried learning HTML/CSS through that site in 2006. Terrible experience, so I continued to use Dreamweaver for personal projects. Tried learning again in 2014, after a career change: Excellent experience, so good that I go there first. I simply did not grok responsive design until I read their article about floats and media queries. I was trying to get admitted into a bootcamp at the time, and my assignment was to recreate a landing page from a PNG image, without using Bootstrap or any other grid framework. Most official sources of technical documentation online are written by and for developers, and assume a lot of prior knowledge. I never understood a lick of the official jQuery documentation either, until I went through W3schools section on it, and then later Jon Duckett's beautifully visual dead-tree book on JS and jQuery.
err4nt 4y ago
They have some good resources for obscure technologies, like XPath, but for the big ones like HTML/CSS/JS there's both the danger that they're out of date and not showing you what's new, while also possibly showing you old hacks and workarounds that are against modern best practice. MDN is a better choice for (almost) anything MDN has content for.
- rchaud 4y ago
  How much of the core of HTML/CSS/JS has been deprecated? Somebody going to W3schools probably isn't looking for the latest and greatest. The person who is looking for that would already have a good grasp of the fundamentals, and would have graduated to looking elsewhere, like StackOverflow or Caniuse.com.
dpcan 4y ago
You’re missing out. It’s probably the best and easiest to use css/js/html reference site anywhere. I can’t gauge how it’s changed but I find it’s to-the-point and example driven format is perfect for the way I learn.
- rchaud 4y ago
  They definitely updated the content of the site. But they left the look (color scheme, etc) largely unchanged from the 2000s, so opening the site probably reminds some people of the bad old days.

version_five 4y ago

https://www.w3schools.com/w3css/4/w3.css https://www.w3schools.com/w3css/4/w3.css (evidently from December 2020) I think of w3schools as largely SEO spam, though sometimes I have found useful answers when they come up as the first hit. Is that the general perception? (I should add I don't use css professionally)

nullgeo 4y ago
w3schools has gotten better over the years[1]. I use MDN for almost everything, but I do mistakenly click the first result on Google Search which is usually w3schools. You can use this handy site to have the "I am feeling lucky" Google experience while searching for any web related queries. Example: mdn.io/flexbox [1]: https://www.w3fools.com/ https://www.w3fools.com/
- laundermaf 4y ago
  No, what happened with w3fools is that someone realized that it was not “politically correctly” so they picked out a couple of “fixed” examples and said “never mind it’s fine now.” The reality is that w3schools is low quality spam and it will never change.
thecoppinger 4y ago
That’s my experience and perception, too.
bee_rider 4y ago
As a non-webdev, I was always surprised that the World Wide Web consortium released such poor educational material. So, today I learned that W3schools and W3C were not related! That is... easy to mix up I think?
- philipwhiuk 4y ago
  It's deliberate on the part of W3schools.
- jcuenod 4y ago

justusw 4y ago

W3.CSS is free to use. No license is necessary. Does that not constitute a license?

phire 4y ago
A very minimal one. Decent chance it will stand up in court, but it's not going to make your legal department very happy.
- quickthrower2 4y ago
  This might be it? https://github.com/JaniRefsnes/w3css/blob/master/LICENSE https://github.com/JaniRefsnes/w3css/blob/master/LICENSE Based on the github account being similar to the names in https://www.w3schools.com/w3css/4/w3.css https://www.w3schools.com/w3css/4/w3.css, it is likely to be the origin. Edit: https://news.ycombinator.com/item?id=32831880 https://news.ycombinator.com/item?id=32831880, beat me to it by a few seconds!
- jaimex2 4y ago
  Yeah, but I would never work at a place with a legal department. I like getting things done.
kyle-rb 4y ago
It sounds like whoever wrote that page doesn't know much about software licensing. Doesn't make me confident that w3schools has improved as much as people say it has. However, it does seem to be MIT-licensed. Linked from the downloads page: https://github.com/JaniRefsnes/w3css/blob/master/LICENSE https://github.com/JaniRefsnes/w3css/blob/master/LICENSE
- XorNot 4y ago
  Would've helped if there any sort of license spec in the file header. All it's got is "/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */"
- hamandcheese 4y ago

codazoda 4y ago

“No license is necessary.” What does that even mean? Sounds like w3.css is copyrighted with no license granting me the privilege of using it. Edit: Looks like the GitHub repo does have a license and it’s a proper MIT license. https://github.com/JaniRefsnes/w3css https://github.com/JaniRefsnes/w3css

jamesrr39 4y ago
I think here it means you don't need to buy a license or sign up to any terms and conditions, which would be in line with the MIT license in the github repository.

iambateman 4y ago

(This was a framework released in 2017.)

bornfreddy 4y ago
(This is a framework which was released in 2017.)
endless1234 4y ago
Yeah, and last commit to github was in 2018, last update to the hosted CSS file in 2020. Not quite sure why it's posted to HN now?

TobyTheDog123 4y ago

Even besides the licensing questions and IE comments, this just.... doesn't look good, I'm sorry. I wouldn't be surprised if there were objectively incorrect design decisions here. The final straw was when I visited the "Cards" component - my God. Comparing this to Bootstrap? It's Bootstrap by a landslide.

j0hnyl 4y ago
I'm not a frontend person and I'm attracted to simplicity. I can certainly believe this is not good, but do you know if there are good minimal alternatives like this? Bootstrap seems a bit complex for basic stuff.
- stackbutterflow 4y ago
  Try Tailwind.
- rodorgas 4y ago
  Bulma is smaller. But I feel CSS frameworks are not much flexible, which may explain their decay. Also, frontend modern tooling helps you build your own components with minimal CSS helpers, like Tailwind.
christoph 4y ago
w3-circle made me chuckle. https://www.w3schools.com/w3css/w3css_images.asp https://www.w3schools.com/w3css/w3css_images.asp
- selcuka 4y ago
  It is a circle, from a certain point of view.

philipwhiuk 4y ago

w3-center Can we all please appreciate how stupid this CSS is. This literally removes the whole point of CSS classes.

tuukkah 4y ago
It's debatable which style is best and it also depends on the contex . Tailwind has popularised this style to the extreme, see e.g. https://tailwindcss.com/docs/align-content https://tailwindcss.com/docs/align-content
dpcan 4y ago
And it’s okay for bootstrap to use p- or m- etc? Is it just because it’s w3?

conjuredbytes 4y ago

I think there's a lot of unnecessary aggro in here just for the fact that it's from W3Schools. Yeah, MDN is a better source of record but W3schools often lays things out in a way that's easier for beginners to digest. I started with W3Schools before moving to MDN. It served a purpose.

that_guy_iain 4y ago
I've heard it's way better than it used to be. It used to be a completely terrible resource but that was like 10-years ago. It's obivously had time to improve over the years. One of the bad things in tech is that reputations stick and people are too quick to bad mouth something because of what it was like 10-15 years ago.
- mhaberl 4y ago
  I don't know about that. I occasionally used that site at least 20 years ago. It seems to me that it serves the same audience as it did back then. You can quickly find useful pieces of information when you need them. I don't get where did the bad rep come from. Did they show inaccurate information at some point? I never noticed that. What I did notice is that people are eager to compare them to MDN any time they are mentioned. Even the wikipedia page about them says "MDN Web Docs – similar website". This is obviously my personal experience and I could have missed something.
  - that_guy_iain 4y ago
    > I don't get where did the bad rep come from. Did they show inaccurate information at some point? I never noticed that. Yea, they did. There was a massive campaign to get w3schools to fix their docs because it was out of date. The site is still alive https://www.w3fools.com/ https://www.w3fools.com/ but updated. But check out the wayback when machine to see about the errors.
  - klibertp 4y ago
    Same here - I used it when I was writing DHTML on top of PHP 5, then years later when writing my blog, then from time to time when I had to touch the frontend. It's a nice resource for refreshing your memory of the basics, because the basics are front and center (one could say there are only basics there...) without distracting discussions of implementation details. When I need a detailed reference, I go somewhere else. There definitely were problematic articles on the site, and its biggest contribution to my career was probably teaching me to cross-check my sources. There's a list of problems and nitpicks here[1] - apparently all of these were fixed over the years, hence why it's archived. [1] https://web.archive.org/web/20110412103745/http://w3fools.com/ https://web.archive.org/web/20110412103745/http://w3fools.co...

tommica 4y ago

Nice of them to do this

memset 4y ago

Has anyone used this (is it me new or has it been around?) Would love to know your experiences!

okasaki 4y ago
I've used it a bunch and think it's really great. eg. https://camo.githubusercontent.com/ae63c1d0f74004872445991205d8a6413d078b155133a2139f930dee5ffc3b7a/68747470733a2f2f692e696d6775722e636f6d2f614b4c6e4266672e706e67 https://camo.githubusercontent.com/ae63c1d0f7400487244599120... I thought it looked good and it's very simple to use.

hit8run 4y ago

Good for minimal stuff that’s fire and forget. Their official GitHub Repo is not in sync with the latest release on their website. CSS classes often contain !important rules which makes it harder to customize. No use of css variables so good luck with darkmode. They don’t make use of flexbox or css grid. A

andrewstuart 4y ago

What the heck IS w3schools? i.e who is behind it, where did it come from, where is it going? It's always there and seemingly always BEEN there, and it always comes up in my search results and indeed I often use it and the info seems pretty good. But apart from that, how can something so well used basically fly under the radar?

dzink 4y ago
It's how I learned web development 20 something years ago. They have simple, clear, entry level tutorials on HTML, CSS, JS and a number of other languages that give you enough to become somewhat productive on the web, so you can be interested in deeper content. It's an institution.
- vijayabhaskarj 4y ago
  I downloaded the W3Schools offline dump zip archive, which was under 50mb IIRC, from a friend when I first started learning programming because I didn't have access to proper internet. That helped me a lot to learn to code.
mrcus 4y ago
Most people seem to think w3schools has some form of association with the W3C. It is actually run by a small family company, Refsnes Data AS, from Sandnes, a depressing city on the western coast of Norway.
- wizofaus 4y ago
  Perhaps what the world needs is more depressing cities then...
TrackerFF 4y ago
As one comment under said, it's a small Norwegian family company (5 employees) that's been around since at least 1998. And they've always focused on what they do. From open Norwegian business data (https://www.proff.no/selskap/refsnes-data-as/sandnes/it-konsulenter-og-r%C3%A5dgivning/IG7JIK103DC/ https://www.proff.no/selskap/refsnes-data-as/sandnes/it-kons...), it seems like they have a yearly revenue around $4.5M USD. From the annual salary expenses, those five employees either make bank - or they hire a lot of consultants from overseas. So I guess it's a good example of first-mover advantage.

laundermaf 4y ago

Outdated junk from a junk website. Stop upvoting this. The domain should probably be blocked from HN like tabloids are.

reportgunner 4y ago
If we block w3schools please block reddit too.

skilled 4y ago

Okay, you have to admit them tagging all the classes with a W3- prefix is kind of funny. Looks like their SEO spam approach leaked out to their framework also. But I agree with most people, this site will never recover from its poor reputation. And that’s also their business model. We can only hope Google will eventually tone down how much their site appears in search queries for topics they provide no in-depth information for.

Ayesh 4y ago
There is of course that nuclear option of blocking the site entirely on search results using a browser addon. I block w3schools, Pinterest, and a bunch of GitHub/stackoverflow scrapers, and didn't miss a thing.
chillfox 4y ago
All css frameworks really should prefix their classes so you can mix them. And I hope that Google keeps showing them in search results, because while MDN is great for in-depth information, most of the time I just need a quick reference of common attributes, and no I don't want it cluttered with a bunch of in-depth information when I am just trying to see what the correct word for something is and how to spell it. Both W3 and MDN are valuable resources for different use cases.
- zichy 4y ago
  >All css frameworks really should prefix their classes so you can mix them. I don't believe that would work out.
  - klibertp 4y ago
    That's a standard practice in languages that don't have namespaces. C and Emacs Lisp have both proven to be "working out" for decades despite using prefixes instead of namespace support.
  - jaywalk 4y ago
    Why not? Using prefixes to create a "namespace" is a well-established practice in CSS. I'm not sure there's much of a point in doing it to use multiple frameworks, but there's really no reason it wouldn't work.

rado 4y ago

Dropdowns unusable by keyboard, modal doesn't trap focus.

chillfox 4y ago

I used W3.css some time ago to make a basic website [1] for making it easier to find rules while running a pen and paper role playing game. [1] https://www.cardflip.asia/ https://www.cardflip.asia/

adeleine 4y ago

From my experience with Bootstrap I can tell you the only thing you really need is the grid part of it and there are so many lightweight "frameworks" that have just that and its only 250 lines of css in the example of simple grid: https://simplegrid.io/ https://simplegrid.io/ Everything else, buttons, modals, sliders, chords are super simple anyway you can just make them yourself or use a way more featurerich separate slider or modal framework and still be on less junk code than with using bootstrap. tl;dr if you know html and css, you no longer need a css framework for most cases.

petepete 4y ago
These days you don't even need a grid library. You can build an entire layout in a handful of lines of CSS with CSS Grid. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La... It's well supported and gracefully degrades (so long as your content is in the right order in the markup).

anonymous344 4y ago

waste of my 10 minutes just to find out it's old and not updated in 4 years. No thanks.

dustinmoris 4y ago