Simplest possible examples of HTML, CSS and JavaScript.
#css
Bounce.js
bounce.js lets you create tasty CSS3 powered animations in no time.
Why Web Development Is Complex
I keep hearing things like “programming is easy” and “everyone should code”! These are both interesting, kind of misleading statements. The actual core part of programming — actually writing code, is perhaps not that hard. Writing simple code is, relatively, simple. Many more people can, and should, probably learn to do that. Actually being a good developer is vastly different (and massively more complex).
It’s a worthy goal for people to get into development, and I love that more and more folks are, but you should also set your expectations realistically if you’ve never coded anything before. You can learn some basics pretty quickly, but you have a lot to learn before you will be fully proficient in a real development environment.
If you’re building something big-ish on the web, here’s a non-exhaustive selection of the things that are (or potentially are) relevant to that process:
- HTTP
- File paths
- DNS
- Servers and Clients
- Databases
- HTML
- CSS
- JavaScript
- Browser Compatibility issues (affects all HTML, CSS and JavaScript!)
- Web Server configuration and tuning
- RTL languages and their effects on your designs/layouts
- Internationalization, including keeping your designs flexible enough to handle variable-length text
- Search Engine Optimization, normally based on dynamic, user-input data
- Semantic markup
- Accessibility
- Design
- Color theory
- Visual hierarchy
- Graphic design/image manipulation
- Image optimization
- Web fonts/Icon fonts
- Image sprites
- FTP
- SSH
- Scalability
- Memory management
- Performance bottlenecks
- Mobile web development (infinite screen sizes)
- Responsive Design
- Touch vs Click interaction models and considerations
- Offline considerations/handling (for “live” web apps)
- Version/Source Control (Git/SVN)
- Visual/Text Editors
- The command line (and everything that comes with it)
- Retina/HiDPI screens vs “normal” screens
Depending on the specific technology stack you end up using, there will be entire swaths of other technologies, libraries and tools involved as well.
Guess what I didn’t even actually mention in that list? A server side programming language (unless you’re going to use Node.js and write JavaScript on your server perhaps). So all of that other stuff up there doesn’t even actually get you writing the code on your server (PHP/Python/whatever) to do the heavy lifting that you’re here to do.
Also, just so that you’re aware; in the 15 years I’ve been doing this, the list never gets shorter, it only gets longer.
CSS Vocabulary
Great resource to make sure you’re calling things by their correct name in CSS-land.
WTF, HTML and CSS?
Reasons HTML and CSS might make you say what the fuck. A curated list of commonly frustrating HTML and CSS quandaries, miscues, and dilemmas.
Code Guide by @mdo
Standards for developing flexible, durable, and sustainable HTML and CSS.
ratchet
Build mobile apps with simple HTML, CSS, and JS components.
Unison.js
Unifying named breakpoints across CSS, JS, and HTML.