I have recently published a piece on “what no one tells you about working in web development” in which I shared some insights on how working on web development projects, well, works.
Starting out in web development can be quite difficult, but it is a worthwhile adventure if well prepared. Here’s my web development tutorial with 9 useful tips that can help you make your start in web development a smooth one!
1. Learn the basics
LTFB – Learn the f* basics. Any further tip is useless if you do not know the basics of web development. If you find yourself struggling with programming and design, I’ve got some nice getting started guides for you on this blog. Try to pick a few topics and make yourself comfortable with basic requirements in web development.
To learn the basics of programming, I’d recommend taking an online course. There are tons of great programs to choose from out there: Hop over to treehouse or code academy and check out their classes.
Learn how to design
Getting started in web development also requires some basic understanding of good design. Besides making yourself familiar with some design tools, I’d recommend learning the basic concepts of design. Learn how to think like a designer.
Further educational resources
- Learn a new programming language within 1 month
- Great tutorials on design & web development at lynda.com
- Learn how to code with Code School
2. Do your research & get inspired
When starting out in web development, you’ll be reading a lot of articles and books, as well as other people’s code. You don’t have to come up with something nobody has ever seen before. There are tons of (open source) projects, code snippets, and free libraries available that you can use to build your first projects. You can gain a lot of inspiration from looking at the work of others.
Great ideas come from building on the ideas of others.
Further resources for research & inspiration:
- Make use of code snippets on hsnipt.net
- Discover the community of web developers on github.com
- Find some design inspirations on pinterest.com
- Check out the search engine for design ideas at niice.co
3. Make use of free resources
Starting out in web development isn’t expensive Apart from your hardware. There are some great software products out there that you can use for free. However, it’s not easy to decide which people and resources to follow, when there are tons of them out there.
- Check out our post about the 12 best web development blogs which can provide you great insights and updates on any topic in web development.
- Explore different Quora threads on a variety of web dev topics. I’d recommend taking a look at the following Quora threads:
- Build a network of people you follow on Twitter and GitHub and try to engage in relevant conversations.
- Explore new resources, tools, and content on Product Hunt, dzone, Reddit and hacker news.
Whether you’re looking for free stock images, free design or dev tools, I’d recommend taking a look at the following collections of free resources:
- Curated collection of tools for design, development and business: toolr.co
- List of free tools to build your startup: startupstash.com
Further collections of free stuff:
- 200+ free tools for web developers: https://medium.com/@ti_asif/200-best-free-tools-resources-for-front-end-web-developers-3fb3c415a643
- 300 free things for design, web dev & business: https://medium.com/everything-about-startups-and-entrepreneurship/300-awesome-free-things-e07b3cd5fd5b
- 50 free web design tools: http://www.creativebloq.com/design/50-free-web-design-tools-rock-3126412
- Collection of free stuff for startups: http://www.producthunt.com/hnshah/collections/free-stuff-for-startups
4. Improve your design skills
These days, with ever-changing “design standards” it’s not only important to learn the basics of good design, but also to keep your design skills up-to-date. It doesn’t matter how good you are today but how fast you improve your design skill every day. I really like these 17 tips from wikiHow on how to improve as a designer.
Get a design tool
For more and more web designers, Sketch has become the successor of Photoshop. I, personally, think it is more intuitive and easier to learn than Photoshop. Check out some free tutorials, which can save you a lot of a time.
5. Make yourself familiar with the concept of requirements engineering
Working on digital products or any other web project not only requires skills on how to code or design, but also some basic organisational skills.
The framework of requirements engineering helps you (and your clients) to formulate, document and maintain different requirements for your product or project.
Identify relevant requirements
Identifying, formulating, documenting and monitoring all your requirements can become quite a mess if you’re not using the right tool.
Apart from well-known project software for web development like JIRA or Basecamp, there are more and more really awesome tools available on the market. They range from collecting your requirements/tasks to planning your milestones to analysing your project progress. Take a look at some of these awesome project management tools and figure out if one of them fits your project and workflow.
6. Get a programming-friendly text editor
A programming-friendly text editor is must-have for every web developer. It’s the place where you’ll spend most of your time, so make sure you secure the best option available to you. Whether it’s Vim, Sublime Text, Notepad++, or Eclipse — choose the tool which is the best fit for you.
7. Use frameworks
Frameworks can make your life in web development a lot easier.
Since most projects, you’ll be working on are not particularly unique, you’ll probably end up making use of different frameworks.
There are different frameworks available, depending on the area you’re working in. Bootstrap, for example, is one of the most popular frameworks nowadays. Furthermore, there are some great front-end frameworks like Ember or Modernizr.
8. Track bugs – from the start
Most people think bug tracking is not for beginners. But having a workflow in place where you collect and track bugs and allow your users to report bugs is essential for a successful web development project.
Of course, we eat our own dog food but we can really recommend the Usersnap Bug Tracker. Why? Because it has a screenshot tool that lets you annotate screens directly in your browser, which makes sharing stuff with your fellow developers and designers much easier. Just give it a try, it’s completely free for 15-days, and you don’t even need a credit card to sign up: usersnap.com
9. Always keep Learning
Always keep moving forward with your new coding and design skills.
Learn, test, build and iterate over and over again.
That’s the only way to becoming better at what you’re doing right now.
Any other great web development tutorial recommendations? Let us know in the comments!
What is Software Testing?
This article is brought to you by Usersnap, a user testing software that helps you communicate visually. You can get a 15-day free trial here. Your software application is acting weird: it’s crashing during quality analysis and the front-end application isn’t working as expected! You need a software testing team to figure out the problem areas…
Top 8 SaaS Monitoring Tools for DevOps
As a SaaS business, we’re regularly trying new products and tools to help us with DevOps. We recently started to evaluate a lot of different SaaS monitoring tools and wanted to share some of our findings. You’ll find some thoughts about the following tools in this post.
14 extremely useful Chrome extensions for developers
A couple of months ago, we reviewed the new Firefox browser designed for developers. Since then most of our developers kept Google Chrome as their primary browser. Working with Chrome offers access to an immense repository of Chrome extensions and tools which make our daily tasks less of a chore. With the built-in developer tools,…
6 surprisingly easy bug tracking hacks every developer should know
When it comes to bug tracking there’s a lot of discipline required from everybody involved. Tracking & solving bugs encourages everyone involved to stand to the rules. Especially in creative- & startup-driven industries it can be pretty hard to discourage any informal communication. And in many cases people won’t name bug tracking as their favourite part of…
A beginner’s guide to Pivotal Tracker: How to boost your Pivotal Tracker projects!
When working in agile development teams or web agencies, you are probably always on the look-out for new and better productivity tools. Pivotal Tracker might be one of these tools which can help you become a better and faster team. In this post, you’ll find everything you need to know when getting started with Pivotal…
Containerize your web development: How Docker is solving real world problems for web developers!
Working in web development? Well, then you’ve probably heard about Docker and its recent developments before. Many people call it hotter than hot. Docker containers can be a true productivity booster for your next web apps. As a web developer, it’s not that easy to understand the essence of it. This is why I’d like…
Building a software product?
Solve your customers' pain and create a great product.
Get feedback easily within the browser.
Fix bugs in minutes with screenshot & metadata.
Trusted by 1000+ customers worldwide.