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!
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 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.
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.
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.
Step 7: Figure out what to do after Codecademy