12+ Top Resources for Beginner Web Developers

Welcome to development 101. If you’ve been eyeing Ruby on Rails or HTML/CSS freelance positions popping up across the web, but don’t have the full skills yet, here are the best resources to help you gain trust, experience and know-how.

Front-End Web Development

Front-end development seems like the early tie in for freelancers transiting into web development. There is usually a ton of opportunity around this space, and the skills to be functional don’t take long to grasp. Becoming great at it does though.

Beginning as a front-end developer is a fantastic way to quickly make a difference in your approach to freelance work, and will hopefully get you started down the path of transitioning your freelance career moving forward.

Don’t Reinvent the Wheel

It’s extremely important to not re-invent the wheel when it comes to learning a new skill, especially when it comes to web development. It’s a difficult concept to sometimes rationalize, only because school’s have really emphasized that sharing and using someone else’s work are akin to stealing.

Definitely not the case here. There are some amazing, open source, frameworks you can begin using immediately to help launch you as a front-end freelancer.

Bootstrap

Bootstrap was created and released by Twitter specifically with you in mind. It’s an entirely open framework that handles all the foundational elements you need as a front-end developer.

They offer a great grid system to handle the structure of your website, they offer fluid and responsive design to build mobile versions, and offer a template of beautifully designed buttons, fields and more.

Utilize their Javascript library to create simple effects and animations, and really go through their documentation to understand not just how to code, but how to design simple websites efficiently and quickly.

Not only will it save you time, but it will save your clients money. You’ll have a reputation for being agile, resourceful, and consistent. All traits extremely valuable on your path to becoming a freelance web developer.

To better understand Bootstrap and how it works, check out Railscasts. They offer an insightful, and quick look into just how Bootstrap works within the web application framework.

Foundation

Foundation is a similar framework to Bootstrap. It offers a similar grid system to act as the backbone for your websites, and offers a number of great stylized elements to make your sites as beautiful as they are efficient.

Really it’s about cutting costs, saving time, and building great products. These are true marks for any freelancer to hit, and there’s no shame in utilizing great work if it helps build your knowledge and experience.

Hosting for Free

You read it right. Hosting, for free? It’s a beautiful thing when you can create a web application and push it live immediately for the world to see, without costing you a penny.

Heroku is the perfect service for getting started with hosting projects online.

Whether you use it for personal projects, or for freelance projects, you can’t beat free hosting. Usually it’s a matter of quality with free services, but Heroku doesn’t skimp on anything. It’s convenient to setup, and if you have knowledge of git, extremely easy to add into your current work flow.

Git & Collaborating

Now that we’ve mentioned git, we should probably go over it. If you’re unfamiliar with it, that’s okay. Simply think of git as your version control. It allows you to save versions of your application as you build it in case you need to jump back, or keep track of the changes you make over time.

To learn the basics of git, enjoy Git Immersion.

Github

Github is key to web developers, both front-end and backend. It’s an amazing online tool to host your code in a space that’s either public or private. Free versions of Github host your code as public repositories for collaborators to share, or build off of.

Github also offers an amazing opportunity for you to seek out great resources to continue building off of, or add into your current workflow. Bootstrap itself is hosted on Github by Twitter.

For more information on Github and how it works, check out Githubs own guides.

Your Portfolio

Consider using Github as your personal portfolio moving forward. Seeing as any public repository you create is completely free and there’s already a huge number of people using the service, it’s a no-brainer. For developers looking to grow their freelance work, or even considering a full-time job, Github is a key component to your development resume.

There’s no better way to show off the progress you’ve made with an application, and no better way to showcase your work. It offers a quick look into the changes you’ve made over time, as well as the projects you may be collaborating on with others.

Open source projects are another key element to this equation. Seeing as so many repositories are open by nature on Github, it offers you the opportunity to jump into someone else’s project and help out. It’s as much about the community, as it is about building out and putting your own skills on display.

The Best Guide Ever

I personally love and use [Shay Howe’s guide to learning HTML/CSS every chance I have. It’s a beautiful site in itself, and if you check the source code, it alone becomes a lesson.

Shay created a front-end site dedicated to walking beginners through the foundations of HTML/CSS to some of the most utilized elements in HTML5 and CSS3. Learn about responsive design, building for mobile, as well as using CSS animations instead of Javascript.

For those of you that are Tuts+ Premium members you can also check out Jeffrey Way’s video courses on CSS3 Essentials and 30 Days to Learn HTML and CSS.

Back-End Development

For the Ruby on Rails developers out in the world, there’s a tremendous opportunity to build out your skills as a freelancer. Everyday there just seem to be more and more opportunities for beginner developers on small projects. And those are all great places to start if you’re a freelancer transitioning into backend development.

Specific to Ruby on Rails, here are a few of my favorite resources to get you going:

Ruby on Rails

Ruby is a great language, that’s just basic enough to pick up quickly, and throaty enough to build out full-scale web applications. Consider Twitter and Groupon began as a Ruby on Rails application.

Resources

To begin, Michael Hartl’s tutorial Learn by Example is an amazing and free guide for beginners. It walks you through most of everything we’ve already discussed in front-end, and ties in how object oriented programming works through building your first Ruby on Rails application.

Hartl will cover basics from getting your development software setup through building and launching your first application on Heroku. Pretty much every resource we’ve covered, Hartl will walk you through.

Ruby Kickstart is a great project to help you build out and learn the Ruby syntax. Watch a series of video lessons, each about an hour long, and take online quizzes through Github.

Chris Pine offers a digital version of his book Learn to Program. It’s a great guide for beginners wanting to program, and a great guide into the inner workings of Ruby. You’ll cover the basics from object oriented programming to a much deeper dive into the Ruby language.

If you’re getting stuck on a problem, don’t forget about Railscasts and Stack Overflow.

To Sum Up

For beginner web developers one of the most important lessons to impart is to read. Coding is as much about reading code as it is writing it. Read as much code as you can. Github again is your best friend. You’ll find a number of great applications at your disposal to peruse through and to learn from.

Take your new found skills and start finding small projects to get your feet wet. You’ll be surprised at how much you can accomplish in just three months of dedicated work.

Leave a Reply

*

Next ArticleHow Kids Fit Into Your Freelance Life: Part 1