-
Notifications
You must be signed in to change notification settings - Fork 1
Guide on How to Teach Yourself Web Design and Development
I'll start by saying that the best way to learn, and more importantly, to stay motivated, is to come up with a specific project that you want to build, and stay focused on doing that. (It could be anything from 'building a personal website' to 'building a social networking site for my pet ferret').
Another thing to keep in mind is that learning to program seems to be a bit different than most other things we self-learn, which catches some people up.
First off, it's very non-linear: there are many ways to start and no specific 'order' to learn things in. My best advice here is to follow the general outline I've provided below, and once you have the basics, try to start building your project. Each time you get stuck or come across a new topic, spend some time learning about that topic and then apply it to your project. Rinse and repeat, and eventually you'll finish it!
Second, almost all concepts are inter-related, often to more complex concepts. Sometimes you'll get a glimpse of these more complex concepts, but you have to hold off on diving into them until you're ready.
Finally, it's really easy to get stuck on trivial problems (i.e. things that aren't relevant or interesting). It's not uncommon for new programmers to get stuck for hours on a problem that an intermediate programmer could find and fix in 30 seconds. My advice here is to not be afraid to ask for help when you're stuck. I am happy to help you with any questions you have or when you get stuck, and StackOverflow is a great place to ask for help online.
If you want to build apps for the web, here are the things you need to learn, in the order I'd suggest learning them.
- HTML - For structuring web pages
- CSS - For styling them so they look nice
- Fundamentals of Programming - All programming languages share common features (variables, loops, arrays, etc) that you need to learn. An good language to learn would be Ruby or Python.
- JavaScript - Once you feel comfortable with one language, you can start learning JS. This is the language used in web browsers to make web pages interactive.
- Web Framework - Building a 'backend' with a framework is what distinguishes a web app from a static website. A framework makes it significantly easier (read: possible) to make an interactive application. Popular web framework examples include Rails (which uses Ruby) or Django (which uses Python).
If you want to build non-web apps (like maybe something to do with statistical analysis), you can skip HTML/CSS/Javascript/Web Frameworks, and just learn the Fundamentals of Programming, and then dive into advanced programming topics as you need them for your project.
I'm putting these first, but I'll reference many of them in my 'Suggested Path' below.
- TreeHouse - Highly Recommended - Interactive and lots of content. Very project-focused and great for beginners. $25 / month. I believe you can pay a bit extra for mentors (not sure if it's worth it).
- CodeSchool - Highly Recommended. Also $25 / month, but it's a great value once you get some more experience. They have courses on HTML/CSS/JavaScript, design techniques, Ruby & Rails, iOS, and more. Even better, everything is interactive and works right in your web browser. This means you can get started without all the hassle of configuring your computer for programming.
- CodeAcademy - Somewhat Recommended - Much like CodeSchool in that it's interactive, but not as much video content. (Excellent for practicing syntax and learning some APIs.)
- Thinkful - Not free, but this is a great way to get one-on-one help and mentorship from an experienced programmer if you want it. The mentors usually offer their own curriculum as well.
- Lynda.com - If watching videos is more your thing, Lynda.com has some fantastic courses on everything from design and OO principles, to Rails and Node.js. Everyone with a Yale NetID has access!
We built a course wiki for the bootcamp I taught this summer. It may be useful. In particular, you probably care about the main page, the resources page, and the assignments page.
- Thoughtbot Trails - A really fantastic aggregate of tons of resources organized in "trails" to follow for mastery. You can keep track of your progress if you make an account.
Goal: Build a personal site.
- Go through the Become a Web Designer Path on TreeHouse or the HTML/CSS Path on CodeSchool.
- Read this amazing guide to HTML / CSS - A Practical Guide to HTML & CSS (this can be done while you do step 3).
- Build a personal website. Get someone to give you feedback on your design and coding style.
- Look through some of our HTML/CSS Links
I'd start with Ruby (especially for web development), but Python would be OK too.
Easy Goal: Build a simple (non-web) program
Hard Goal: Solve a PuzzleNode challenge
- Get familiar with the 'terminal' (or 'console' as it's sometimes called). Complete the Treehouse Console Foundations Course.
- Go through either CodeSchool's Ruby Path or TreeHouse's Intro to Programming and Ruby Foundations courses.
- If you're doing Ruby, try to solve the Ruby Koans
- When you feel comfortable, pick a puzzle from PuzzleNode and solve it.
Goal: Build a simple interactive website using JS
- Complete the Treehouse JavaScript Path or CodeSchool's JavaScript Path
- Browse some reference material here just to see what's out there: JS References
Goal: Build an awesome interactive web application that can store and manipulate data
Note, if you prefer books Agile Web Development with Rails is the best.
- Work through either Treehouse Ruby on Rails Path or CodeSchool's Ruby/Rails Path.
- Try building something for yourself. Get help if you get stuck!