7 Step Guide to Getting Started with Web Development using Codecademy

Howdy folks,

My name is Prasid – I’m the community manager here at Bloc, but before that, I was the Director of Marketing at SoFi – another education startup, and I very very much wanted to learn to code on my own. I thought about enrolling in a bootcamp, I thought about learning online. And I tried about five different resources before eventually discovering Bloc. I wanted to share my personal guide on how you can get started with web development, using one of the tools that really helped me in the first month – none other than Codecademy. In later posts, I’ll talk about what I did after Codecademy when I was ready to get more serious.

Codecademy is considered by many, including us here at Bloc, to be the best resource for beginning your “learning to code” journey and getting a taste of the vocabulary, syntax, and sentence structure for code. So – you’ve never coded a day in your life? This guide is for you.

Step 1: This ain’t your father’s textbook. Stop reading. Start coding 

Let’s get one thing straight: you’ll never learn to code until you start coding. I’m  not even gonna to tell you what HTML stands for. Doesn’t matter yet. I am going to tell you that websites are made up of  multiple languages being used together – so you’ll probably end up having to learn a bit of 3-6 languages before you can build anything real. This is why we recommend you avoid going too deep in one language when you’re getting started. Instead, focus on outcomes – focus on building real things.

Ok. Right now, alongside this guide, pull-up Codecademy and get cracking.That’s the beauty of Codecademy – you can be doing it in 20 seconds.

Got Codecademy open? Great. Create an account.


Step 2: Start Codecademy with a taste of HTML5

Let’s say you want to build something that looks like an old Geocities site – the number one language that you’ll need to learn to build it is HTML. The words on this page – they’re written in HTML.  HTML is the “wooden frame” of the house, that everything is build around. I want you to go to the Web Fundementals track and do Exercises 1 and 2. Should be super-quick – and now you’ll have a taste of HTML!

When developing a website, the fundamental language being used is HTML. So if you wanted to make a site that looked like a 90s Geocities site (like above), the #1 skill you would first learn is HTML. Then you would add CSS to add better styling, and finally you might employ JavaScript to add interactive elements.

With the Codecademy course in Web Fundamentals, you can learn to build sites like this.


Step 3: And now some CSS3

Let’s not do all of the HTML track right now. I just want to give you the lay of the land. Let’s move on to CSS.

Now, let’s say you want to build something attractive – minimal text – lots of squares of pretty colors and gradients and rounded corners – this is what CSS is for. Seriously, still not gonna tell you what the acronym stands for. CSS is like the facade of paint, stucco, siding, and roof tiles that go over your wooden frame making it pretty.

Go ahead and do Web Fundamentals exercises 7 and 8.


Step 4: JavaScript – You’ve hit the big-time

Let’s say you’re wanna build something interactive. Ever noticed how sometimes when you click on a button a whole new page loads, other times you can click it without the reload. That’s Javascript! Javascript is what makes drag & drop work. It’s what let’s you compose a new Gmail and send without reloading the inbox or doing it in a pop-up.  Javascript is like the conveyor-belt – moving new stucco and wood back-and forth from the tool-shed as your house morphs and changes. If somebody mentions JQuery, or Angular.js, or Node.js to you – they’re talking about things built on top of Javascript.

Let’s get a taste of this one. Go to the Into to JavaScript track and do exercises 1-4.

JavaScript acts as a conveyor belt during web development

JavaScript is like a conveyor belt that brings new elements to the page and carries old ones away, in order to create interactive site elements.


Step 5: Decide What You Wanna Learn Next

Okay great. Now you have tasted all the basic flavors. Now the question is – do you want to learn web design, front end web, or full-stack development. Well, someone should probably explain the difference. Here’s a great way to visualize the difference between frontend and backend development from Skillcrush.

How to visualize Front End and Backend Web Development as an Iceberg

Thanks to the folks at Skillcrush for this amazing visualization of Frontend vs. Backend Development

Web Design

Web Designers generally use tools like Photoshop or Illustrator to design what a page should look like, and then hand-that-off to a developer who turns that into code. As a web designer you might want to know HTML and CSS, but you’ll want to go deeper in design patterns, user flows, user experience, user interfaces, wire framing, and that sorta stuff. Web Designers will always be totally dependent on developers in order to get something up and running.

Frontend vs. Backend 

Let’s say you want to build something flat – like the Apple.com site – it has lots of beautiful images – colors, and links – you could probably get-by with just Front End skills. But let’s say you want users to be able to sell stuff and accept credit card payments – now you’re gonna need some back-end skills. Let’s say you want to build Yelp.com – you could build probably build the listings for all the restaurants with just Front End skills. But now you want users to be able to log in and write reviews and give ratings. Or you need that search-bar to work. Now you need some back-end skills. Without them, you’ll be dependent on a back-end developer who can bring your ideas to life. That’s why Bloc offers a Rails Developer Apprenticeship, but not a Frontend-only course.

Ultimately, it’s gonna come down to your priorities.

Want to create something pretty that looks clean and modern like Yahoo.com, but doesn’t do much more than display text – yeah you might be able to get by with just front-end skills.


Step 6A: Become a Web Developer

For your madam (or sir), I recommend the rack of lamb with a side of Ruby.

But seriously, for the aspiring developer, I recommend you finish-out the Javascript track, and then complete the Ruby track  There’s an ongoing debate between Ruby on Rails vs. Python/Django – Ruby is much more established (as of January 2014, although this may change) and so we recommend learning Ruby.


Step 6B: Become a Frontend Web Designer

If you know that you are going to have a team member who can bring your ideas to life and you want to focus on being a kick-ass web designer, we’d recommend you finish-out Codecademy’s Web Fundamentals track and then move-onto more design-specific resources. Personally, we think Tuts+ offers some great premium courses. When you’re ready for something more advanced, try out Bloc’s new web design & front end apprenticeship.

Learn Front End Web Design for Web, iPhone, Android, Mobile, and Tablet

Step 7: Figure out what to do after Codecademy

There’s no shortage of great options for what to try once you’re done with Codecademy’s Javascript and Ruby tracks. I think the JQuery track is great. But the challenge is always going to be that you can’t build really substantive projects without combining languages, and right now Codecademy doesn’t offer a way to do that.  One of the best resources out there is RailsTutorial.org. If, after RailsTutorial, you are looking for something more advanced, you might be ready to try out Bloc  Although we don’t require any previous coding experience, we find that most students want to get their feet wet with something more advanced than Codecademy.


Tweet about this on TwitterShare on LinkedInShare on FacebookShare on RedditEmail this to someone

One Response to “7 Step Guide to Getting Started with Web Development using Codecademy”