Learn HTML, CSS, JavaScript and Ruby in Offline Mode
by Bradley Nice, Content Manager at ClickHelp.com — software documentation tool
Web Development is a growing industry and web designers and web developers are in great demand. Many specialists in other areas switch to web development. Online courses and learning platforms are trending among coding newbies.
But can you imagine learning web development and having fun in the offline world at the same time?
Today I came across a solution which will help you learn HTML, CSS, JavaScript and Ruby away from computer. The author of this solution, a true hero of this Medium post, is Carlos Lagrange, a UI designer and education enthusiast.
Carlos created a card game allowing you to learn web development in offline mode.
What’s included?
Each deck includes 53 unique cards, instructions and its custom Code Cards tuck box. The 4 deck full-house pack (212 cards) comes with its own unique 4 deck box.
How it works
Each card has a coloured front with a question relevant to a particular language. Blue cards are about HTML, yellow cards are about CSS, red cards are about Ruby, and green cards are about Javascript. On the back of every card is the answer to its question, with examples and relevant tips. All syntax is formatted as it would be in a code editor. Sometimes on the back you’ll also find gems (power ups) and bugs (power downs) that play into multiplayer game mechanics.
Learning how to code
Code Cards allow you to memorise the rather unmemorable syntax that makes up programming languages by utilising the magic of spaced repetition. Spaced what? Yes, spaced repetition. It’s a learning technique that incorporates increasing intervals of time between subsequent review of previously learned material in order to exploit the psychological spacing effect.
Subjects covered:
- HTML 5: Hyperlinks, divs, structure, iframes, links, scripts, lists, video, tables, drop downs, navigation, input fields, images, inline styling, headlines, buttons, audio, comments, http errors and much more.
- CSS 3: Background images, borders, shadows, positioning, visibility, z-index, sizing, spacing, text-alignment, fonts, weights, styles, colours, opacity, transitions, selectors, box models, transformations, animations and much more.
- Javascript: Triggers, event handling, Object-oriented programming, logic and tons of semi-colons!
- Ruby (2) & Rails (4): Flow control, looping, iterations, Object-oriented programming and meta-programming.
Download for free:
Have a nice day!
Bradley Nice,
Content Manager at ClickHelp.com — best online documentation tool for SaaS vendors
