TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

A beginner's cheat sheet for web development

450 pointsby jonhmchanover 11 years ago

67 comments

brdover 11 years ago
The title and the pitch on the actual site are kind of disingenuous. This is a collection of resources to learn web development. Its hardly a cheat sheet or &quot;everything you need to know&quot;.<p>A cheat sheet would be a succinct set of syntax&#x2F;concepts&#x2F;examples required to get by.<p>Having said that, its a pretty website and its a worthy cause so please don&#x27;t take my critique too critically.
评论 #6420018 未加载
评论 #6418769 未加载
评论 #6419859 未加载
评论 #6418607 未加载
rryanover 11 years ago
Hm, looks nice! The coloring of the columns doesn&#x27;t seem to be meaningful in any way I can come up with. I think it would make more sense if things were grouped into categories (e.g. databases, web frameworks, frontend languages, backend languages, style&#x2F;presentation). If you use color I would make it meaningful (e.g. represent order of learning things with color something?).
评论 #6419301 未加载
评论 #6418854 未加载
评论 #6420301 未加载
donutdan4114over 11 years ago
I&#x27;m not sure if the order is supposed to matter that much, but I feel like the blocks should be ordered from easy to hard. Why is PHP at the end of the list? Why is JSON so close to the front?<p>But yea, I just think the ordering could be better, still a nice resource!
评论 #6418784 未加载
评论 #6418627 未加载
评论 #6418778 未加载
评论 #6418763 未加载
liquidiseover 11 years ago
A good list so far.<p>The lack of XML though, in addition to JSON&#x27;s claim of being the ubiquitous data transfer format, seems a bit hyperbolic.
评论 #6419230 未加载
Vivtekover 11 years ago
Appears to be broken this morning. I see the template briefly, then nothing, in Chrome and IE. Which is sad because it sounds really great.
评论 #6422500 未加载
评论 #6422561 未加载
评论 #6422418 未加载
dsrguruover 11 years ago
Only works for me in Chromium. Firefox is displaying &quot;box.name&quot; and &quot;box.description&quot; instead of their values.
评论 #6420389 未加载
评论 #6420041 未加载
评论 #6420321 未加载
CmonDevover 11 years ago
Where is knockout.js, SignalR, ASP.NET MVC, Azure?<p>Call it &quot;hipsterbentobox.io&quot;.<p>PS: I am on BitBucket, I know it&#x27;s not as hip as GitHub - sorry.
评论 #6420471 未加载
评论 #6419561 未加载
eaurougeover 11 years ago
Here&#x27;s an idea. Let each box &#x27;expand&#x27;, perhaps to its own page. This way, if you want to dig deeper, you can find more resources in the expanded box. You can let users suggest resources with an &#x27;add&#x27; button; users can vote for resources so the best ones bubble to the top. You could take this further and break each resource list into beginner, intermediate, advanced.
jonhmchanover 11 years ago
OP here: in case anyone has suggestions, this is also on GitHub: <a href="https://github.com/JonHMChan/bento/tree/gh-pages" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;JonHMChan&#x2F;bento&#x2F;tree&#x2F;gh-pages</a><p>Would love your feedback!
评论 #6421209 未加载
评论 #6418659 未加载
评论 #6418565 未加载
scottrblockover 11 years ago
I think the web would be a better place if you encouraged beginners to start with the HTTP block, rather than HTML.
评论 #6421147 未加载
bpp4dtover 11 years ago
I&#x27;ve always been looking for something like this to send to friends wanting to learn to code. A couple of recommended<p>This step by step guide to learning Github: <a href="http://www.thinkful.com/learn/a-guide-to-using-github-pages/" rel="nofollow">http:&#x2F;&#x2F;www.thinkful.com&#x2F;learn&#x2F;a-guide-to-using-github-pages&#x2F;</a><p>My first [hilarious] exposure to Ruby <a href="http://mislav.uniqpath.com/poignant-guide/book/chapter-1.html" rel="nofollow">http:&#x2F;&#x2F;mislav.uniqpath.com&#x2F;poignant-guide&#x2F;book&#x2F;chapter-1.htm...</a><p>Eloquent Javascript [built in console with examples]: <a href="https://eloquentjavascript.net/contents.html" rel="nofollow">https:&#x2F;&#x2F;eloquentjavascript.net&#x2F;contents.html</a><p>If anyone&#x27;s interested in some front-end web development sources: <a href="http://www.quora.com/What-are-the-best-sources-to-learn-web-coding-in-a-short-time?share=1" rel="nofollow">http:&#x2F;&#x2F;www.quora.com&#x2F;What-are-the-best-sources-to-learn-web-...</a> [You won&#x27;t need to make an account with this url] [1st answer has the skills you&#x27;ll need to learn with documentation and 2nd has a great collection of resources for newbies]
评论 #6419224 未加载
评论 #6419384 未加载
gravedaveover 11 years ago
Where&#x27;s the content? I thought it&#x27;s just my browser (Chrome), but on browsershots it seems to be empty for most browsers. Is it a WIP?
dclowd9901over 11 years ago
Hilarious to me that no one here gives a second thought of how intimidating a list like this would be to someone first getting into web development. On my initial scroll down the list, I first thought it was a tongue-in-cheek joke (&quot;cheat sheet&quot;? Lol) about the incredible range of things your typical full stack developer needs to know to actually go from 0 to .com
评论 #6421126 未加载
hodderover 11 years ago
This is great! Thanks! As a beginner, figuring out what to learn, as opposed to how to learn, is a struggle. This provides a pretty great roadmap and explains how things fit together.<p>As for feedback, you could potentially add: -Hartl tutorial to the rails section -Udacity to the python section.
评论 #6420141 未加载
DanielKehoeover 11 years ago
For Rails, the article &quot;What is Ruby on Rails?&quot;<p><a href="http://railsapps.github.io/what-is-ruby-rails.html" rel="nofollow">http:&#x2F;&#x2F;railsapps.github.io&#x2F;what-is-ruby-rails.html</a><p>It&#x27;s getting a lot of praise as a good starting point for beginners. (BTW I wrote it)
评论 #6419397 未加载
marincountyover 11 years ago
I think it&#x27;s a great site. What I need is the &quot;glue&quot;(how all the different programs, set of instructions) fit together.<p>I realize most website developement is not programming; it&#x27;s following a lot of directions. This is the reason I hated working with computers when I was younger. I just wasen&#x27;t interested in learning a bunch of man made terms that seemed to change yearly. As older dude, I&#x27;m looking at it differently.<p>I still think there&#x27;s got to be a better way of learning dynamic website developement? I do like the idea of condensed teaching--like cheat sheets.
donniezazenover 11 years ago
Sometime ago I finished Codecademy&#x27;s Web Fundamentals. I learned enough to understand what&#x27;s going behind the scene but not enough to start hacking on my own. Since then I have started learning Python, also on Codecademy. There&#x27;s Java for Android. And I would also like to learn C++&#x2F;QML to hack my Arch Linux&#x2F;KDE box.<p>Is it common for programmers to be proficient(reasonably well) and also be able to work on multiple projects requiring multiple languages at the same time? Or do most folks learn many things but tend to work with one language on one project.
granttimmermanover 11 years ago
Awesome! I&#x27;d be great if the title of each language was a link to the language&#x27;s home page (if applicable) rather than having a &lt;a&gt;Home&lt;&#x2F;a&gt; in every box.
评论 #6419342 未加载
colemanfoleyover 11 years ago
Cool. Thanks for putting this out there. I like it overall, but stepping through the beginner&#x27;s sequence by highlighting different squares doesn&#x27;t work great. Separate from the exhaustive glossary view, you could have &quot;track&quot; views where you could guide beginners through different paths, like an all JavaScript path that takes users from front-end stuff to Node to Heroku or whatever. Like Codecademy&#x27;s tracks. Beginners love that stuff.
MrBraover 11 years ago
These kind of cheat sheets make order in my mind and motivate me to start doing something, or at least reinforce the thought that hopefully sooner or later I will!<p>In either case, thank you.
TallboyOneover 11 years ago
Great stuff :)<p>Shameless plug for more of the same: <a href="http://pineapple.io/tags/all" rel="nofollow">http:&#x2F;&#x2F;pineapple.io&#x2F;tags&#x2F;all</a>
评论 #6419063 未加载
评论 #6419237 未加载
contingenciesover 11 years ago
Javascript based templating engines and the web don&#x27;t necessarily mix. They are ideal for mobile, intranets or other known environments, but not something I&#x27;d use in this sort of environment. Right tool for the job. <a href="https://minus.com/ly4w7OtUMBvxX" rel="nofollow">https:&#x2F;&#x2F;minus.com&#x2F;ly4w7OtUMBvxX</a>
blitiover 11 years ago
The colors are off. Particularly the yellow. It is hard to read. The blue is nice, could be a shade darker. The last square position is empty. Why not put one there with links to your blog or whatever? Its prime real estate, because the reader will flow into it. Having a blank space there takes away from the design.
评论 #6419442 未加载
shireover 11 years ago
I like this, you should include Udacity for the Python section. They teach everything from Basic Python to web development to software testing and even debugging. Can&#x27;t find better resource for Python than <a href="https://www.udacity.com" rel="nofollow">https:&#x2F;&#x2F;www.udacity.com</a>
评论 #6419210 未加载
loucalover 11 years ago
IMO clicking rails should show sass also. It shows less which can also be used with rails, but if I&#x27;m not mistaken sass is still the default. I&#x27;m sending you a pull request now. I didn&#x27;t remove less, I figured you could consider that yourself, just added sass to rails.
评论 #6419489 未加载
shnover 11 years ago
Interesting, I do not see anything other than a link to github page. <a href="https://dl.dropboxusercontent.com/u/50999755/Screen%20Shot%202013-09-21%20at%208.39.52%20AM.png" rel="nofollow">https:&#x2F;&#x2F;dl.dropboxusercontent.com&#x2F;u&#x2F;50999755&#x2F;Screen%20Shot%2...</a>
评论 #6422782 未加载
评论 #6423033 未加载
FLUX-YOUover 11 years ago
Since a portion of beginners are interested in employment, I wonder how much of this sheet needs to be &#x27;filled in&#x27; to become employable at a minimum, junior position?<p>I&#x27;ve found that the threshold between beginner -&gt; employable is really fuzzy and that&#x27;s a bit frustrating.
评论 #6420809 未加载
filopodiumover 11 years ago
I&#x27;m not seeing any content and the console gives me:<p>&quot;ReferenceError: CONTENT is not defined&quot;
gremlinsincover 11 years ago
hey Just pushed some laravel links to This project. . I&#x27;m actually wanting to start a dev boot camp her in Dayton that uses online learning resources to teach the fundamentals.. i.e why reinvent the wheel... with pair coding and real idea pitch sessions and learning while working on real startups that we may also help get some traction. ie Dev boot camp meets coworking space meets incubator&#x2F;accelerator. this will be a great starting point for that... I learned a lot of my coding skills from code academy, team treehouse, and code school..and ruby koans..all are amazing resources.
评论 #6422684 未加载
shahedover 11 years ago
I found out about this cool site a few days before it was posted on HN.<p><i>Pats self on the back</i>
评论 #6418725 未加载
评论 #6418878 未加载
stateover 11 years ago
I can&#x27;t say how many times I have been asked &#x27;How can I start learning to build stuff for the web?&#x27; and wanted to give this as an answer. It&#x27;s not perfect, but it&#x27;s on GitHub!
评论 #6418868 未加载
robseedover 11 years ago
Such a relief to see xml described as &quot;An alternative to json&quot;.
jwallaceparkerover 11 years ago
Would like to see the Ruby micro-framework Sinatra on this list.<p>It&#x27;s a great starting point for Ruby development and could be a good entry point into Rails, which can be intimidating for a beginner.
评论 #6421235 未加载
mrbad101over 11 years ago
Why is ColdFusion always the ugly red-headed stepchild? I realize that the amount of people using it in comparison to PHP is very low, but it still exists! Can we get some love?
评论 #6419534 未加载
评论 #6419499 未加载
michaluover 11 years ago
This is great, thank you. Some links for Scala:<p>Documentation: <a href="http://www.scala-lang.org/" rel="nofollow">http:&#x2F;&#x2F;www.scala-lang.org&#x2F;</a> Twitter School for Scala: <a href="http://twitter.github.io/scala_school/" rel="nofollow">http:&#x2F;&#x2F;twitter.github.io&#x2F;scala_school&#x2F;</a> 99 problems in Scala: <a href="http://aperiodic.net/phil/scala/s-99/" rel="nofollow">http:&#x2F;&#x2F;aperiodic.net&#x2F;phil&#x2F;scala&#x2F;s-99&#x2F;</a> Coursera with Martin Odersky: <a href="https://www.coursera.org/course/progfun" rel="nofollow">https:&#x2F;&#x2F;www.coursera.org&#x2F;course&#x2F;progfun</a>
deevusover 11 years ago
Don&#x27;t know if anyone else noticed this but I see the page template briefly before the content is loaded in.<p>Can&#x27;t say I&#x27;ve seen this for long enough to notice before.
dprattover 11 years ago
&quot;Java, a popular programming language.&quot; - that&#x27;s basically best thing you can say about it, but it also deserves a caveat on how awesome the JVM is.
supahackaover 11 years ago
I don&#x27;t see anything related to web development on this site. It&#x27;s just an empty page with a header, About Me and Pull request. What&#x27;s going on?
nwgover 11 years ago
Periods. Overused. In marketing. So much. Appears normal.
评论 #6420422 未加载
officialjunkover 11 years ago
iOS chrome: huge white popup with text &quot;{{ boxes[more_index].name }}&quot; Keeps reopening after I close it... will have to check it out on a comp.
评论 #6422513 未加载
grenover 11 years ago
Good list indeed. But nothing about Play Framework?
dylandevover 11 years ago
If you&#x27;re going to include Laravel, which is built entirely on top of Symfony, you may also want to include Symfony.
Grue3over 11 years ago
Why is there vim and not emacs? Emacs is far better suited for web development, especially with stuff like web-mode.
lbarrowover 11 years ago
&quot;SQL&quot; is not a database.
评论 #6418702 未加载
评论 #6418744 未加载
pintglassover 11 years ago
Nice page, Doesn&#x27;t seem to be any rhyme or reason to the layout, which is strange.
jbro72over 11 years ago
Code snippets in the JSON tutorial are blocked by ad-block plus in Chrome
maerF0x0over 11 years ago
Lost all credibility (in my mind) when it pointed to w3schools
评论 #6419493 未加载
Splendorover 11 years ago
nodeschool.io might be a nice addition to the node.js seciton.
评论 #6418680 未加载
abhishekdeltaover 11 years ago
The site&#x27;s broken.
IvanK_netover 11 years ago
I recommend to avoid that website. That&#x27;s why: <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.bentobox.io" rel="nofollow">http:&#x2F;&#x2F;validator.w3.org&#x2F;check?uri=http%3A%2F%2Fwww.bentobox....</a>
评论 #6420696 未加载
nickthemagicmanover 11 years ago
Good stuff! Commenting so I don&#x27;t forget about it.
Aldo_MXover 11 years ago
I would rather hide blocks instead of graying them out.
konstantintinover 11 years ago
everything about web development... apart from the two of the biggest languages&#x2F;platforms for web development.
评论 #6418629 未加载
评论 #6418799 未加载
SamBoogieover 11 years ago
Awesome, nice design too. Thanks for this
megrimlockover 11 years ago
Does the color coding indicate anything?
akilismover 11 years ago
Green Yellow Red coloring never fails.
hoboloboover 11 years ago
Well done. A very well executed idea.
dhruvaroraover 11 years ago
Is it just me or is this site broken?
jdorwover 11 years ago
descriptions about why I would want to learn each one would be helpful.
gesmanover 11 years ago
Add &#x27;donate&#x27; button!<p>Great work
chevasover 11 years ago
I was hoping to see GO
评论 #6419636 未加载
评论 #6419399 未加载
r0sover 11 years ago
Django but no Drupal?
sebnukem2over 11 years ago
Groovy? Grails?
knownover 11 years ago
Brilliant
hoonbaeover 11 years ago
beautiful
评论 #6420143 未加载
burgerzover 11 years ago
The thing I was most interested in was backbone, and it just links to the original site. I mean the colors are nice but this is pretty much useless.
评论 #6419488 未加载
AsymetricComover 11 years ago
Love all these new technologies that are hardly proven in production and many have been proven to have fundamental design problems leading to security issues that cannot be engineered around without breaking the flexibility offered by the technology, such as PHP and Ruby.<p>JSON and XML are just data formats, there&#x27;s nothing special to know about them other than that a lot of stupid enterprises decided that they are standard now so that&#x27;s what you&#x27;ll use. Considering that Javascript isn&#x27;t even a defined standard (although ECMAScript is) , I find the idea of a standard based on it quite laughable.<p>This is more like a cheat sheet for farmland development, as requested by the landowner. Bring your own tools and teach yourself how to use them, just don&#x27;t bring your own land unless you plan to forfeit it.
评论 #6421255 未加载