Web Dev

Web Development is a scary world for most people, but trust me: if Megan can go from barely being able to make a link in a blog post to knowing basic HTML in a year, anyone can.

Understanding code and development is important for bloggers. If you have the right resources, web development is an attainable skill: a skill that will prevent you from having to outsource your blog coding and that will save you tons of money! These sites are the best 7 I’ve found for those interested in beginning to learn web development, but there’s awesome stuff for more advanced coders too. Make sure to keep reading: I saved the best for last.


7. Abduzeedo | Okay, this one isn’t technically a development site. It focuses instead on design. However, I believe that, in order to know what’s going on, you have to see both sides of the spectrum in action (design and development). Abduzeedo gives some great inspiration: even if you are not into web dev, you’ll find plenty of beautiful pin-able stuff. It also has some great tutorials on the Adobe Creative Suite Applications like Photoshop, Illustrator, and Fireworks (For the record they also have tuts for Pixelmator).

You can be the greatest developer EVAR, but if it doesn’t look good, nobody’s going to use your creation.


6.  W3 Schools | This is a great reference site for just about every web programming language. If you were to google the various attributes available in HTML, or how to use a particular element, or tag, 9 times out of 10 you’re going to come accross w3schools. This site offers an overview of each element and has examples and demonstrations for them as well. The site also has a test section to see what you’ve retained. It’s a great resource for newcomers, because newcomers generally have a hard time remembering all the options you can use for each HTML element/tag.


5. StackOverflow | StackOverflow is like Yahoo!Answers for developers. While StackOverflow is technically not a tutorial site, I can’t tell you how many times I’ve read other people’s questions, and then read the answers to their questions. It’s a great resource for the intermediate developer who kinda already knows what’s going on. Again, if you google a question about web development, you’ll often see StackOverflow in the list of results.

I’ve found that the best way to learn is to play and test things out. This site has tons of example code that doesn’t work, and code right next to it that does work. Learning why it doesn’t work is part of the process in learning why it does work.


4. Codrops | It was tough not putting this in the top 3 simply because I use this site so often. My favorite part of this site is the tutorials on the “cool stuff” you can do with various web technologies, my latest interest being jQuery (a javascript library).

They have tutorials on a wide variety of web technologies. Generally when I’m bored, I’ll go to codrops, find a tutorial, and follow along. I’ve found this is a great way to learn and stay sharp.

One drawback, (but also a positive) is that a lot of the tutorials utilize functionality not supported by all browsers. CSS3, for example, is an amazing revision of CSS (currently the latest version), but it isn’t supported in all browsers. So when developing, it’ll look great on your fancy new updated browser, but your friends won’t be able to see the awesomeness unless their browser is also up to date. And if they’re using Internet Explorer… well, let’s just say I don’t know a single web developer that approves of IE (lol). Nothing cool is going to show up.


3. 1st Web Designer | This is so awesome, we’ve already dedicated a whole Website Wednesday post to it. 1st Web Designer is a blog that is centered around web development. On the blog they offer numerous tutorials, but I mainly see the site as a daily read to see what’s up in the web dev world. They cover any and all aspects of the web. From tips on freelancing, the dos and don’ts of SEO, and “quick” tutorials with titles that include “learn ____ in 10 minutes”. This is a great place to visit if you’d like to learn how to do specific things, but don’t feel like you need an all-encompassing understanding of web development.


2. 30 Days to Learn HTML & CSS | This is a great site to learn CSS and HTML in 30 days. It’s set up on a schedule where you do a little every day. This repetition forces what you’ve learned to memory. Think of this as a free college course in coding!

If you want to learn HTML and CSS, and you want it to stick, this is a great place to start. The site is video guided, so you get to watch a guy talk and share his screen while he explains what he’s doing. I’d say the site is best utilized with dual monitors, so that you can put your code on one monitor, and the video tutorial on the other monitor. I’m making asking Megan take the course over the summer.


1. Codecademy | If you’re new to web development, this is your bootcamp before the battle ground. This site has by far the best online tutorial concept I’ve ever seen. There are a few sites that are similar in nature, but for more advanced developers. This one is just right for beginners. They have three main tracks you can take. The first is the fundamentals of Javascript. Javascript is the best way to add functionality to the site beyond looks and content. For example: this is how movement occurs, this is how fadeout occurs, this is how dynamic pages are update… the list goes on and on. The next track is Web Fundamentals. The Web Fundamentals course covers mainly HTML and CSS. In other words, it covers the look and feel of the site, as well as the content on the site and its formatting. Finally, the third track is a combination of the previous 2 tracks.

My favorite part about the codeacademy setup, however, is how the information is taught. Most people, myself included, learn best by “doing”–not by watching or reading. This site is mostly “doing” in their online command prompts. It’s a guided session, similar to what you’d get in an HTML course in school, only your teacher is text based. There is a reward system (in the form of badges). You get badges when you complete the various sections. I highly recommend this site to anyone interested in web development!


I hope you found these sites helpful or inspiring!

Have you dabbled in coding at all? How did it go? Is there something specific in Web Development you’d love to learn?