Andi Smith

Beginning Web Development

Inspired by a post I read earlier this week on how difficult it can be for newcomers to get in to the industry, I decided that I wanted to write a post with some hints and advice for developers who are just starting out their careers.

Updated:

  • 7th March 2014 - Added some new links to other helpful resources.

This post does not include any code or best practices and it is not a tutorial or guide to writing web pages. Instead the points below are aimed toward explaining what to expect as a web developer, and some of the key things you should consider as early in to your journey as possible.

There are so many things to learn in web development now that it can feel incredibly overwhelming - but it can also be very rewarding. What fascinated me about web development was the ability to create - I love to create - and when I started out building web pages I found it incredibly easy to express my creativity with HTML and CSS in just a few lines of code. I could create something and then publish it on the web for others to see very quickly (which at the start of your career will likely just be your Dad and your best friend).

  1. There Are Multiple Ways To Do The Same Thing.

    One of the hardest concepts to get your head around when you start working in web development is that there can be be multiple ways to do exactly the same thing.

    For example, if you want to create a 2 column blog layout, there are a multitude of ways to do this. For most things, there is no single answer - there are multiple solutions to the same problem. Sometimes there will be solutions that are better suited than others, but there are also solutions that are equally valid as others; or solutions that are better in certain scenarios.

    Use variation as a way to encourage your creativity.

    Try not to look at this as a negative thing, but instead use it as a way to encourage your creativity. Make a decision on the solution to use this time around and as you use it see what works and what doesn't work. You'll learn more by trying a solution than forever searching the Internet for the perfect answer, because the truth is...

  2. Your Code Will Never Be Perfect.

    When you look back at the code you have written previously - whether it's one, two or six months later, or even the next day or after the weekend - you will see ways you can make things better. This is a good thing. It means you are learning and improving.

    Don't be afraid to write
    imperfect code.

    Don't be afraid to write imperfect code. With every site you develop, there will be a time that you have to let it go. It is better to be feature complete than to have 5 immaculate lines of code that do 10% of what you were trying to achieve. If someone wants to discuss with you about what you have written, it's an opportunity to ask them how you can make it better. It's a great way to learn; and you will find that different people with different backgrounds will have different experiences they can share.

  3. You Will Never Know Everything About Web Development.

    (But that doesn't mean you should stop trying)

    Nobody can honestly say that they know everything about web development - not every feature, every property and every browser bug. The scope of front end web development is so broad that it covers three completely different languages - HTML (markup), CSS (design and style) and JavaScript (logic).

    Each has their own structure, concepts and quirks and each is continually updated with new features. Unless you are building pages from a template, each site you build is likely to require a different configuration and with that come new challenges. There are also libraries, frameworks and APIs that you will need to become accustomed with over time as the situation demands.

    The truth is that you don't need to know everything straight away. You need to know how to build a web page that meets your initial basic requirements. Then going forward, you will need to know how to learn; who to talk to or where to go to find out what you need to know to do your next task.

    Knowing where to look and how to pick things apart in a skill in itself.

    Knowing where to look and how to pick things apart in a skill in itself and one that is very useful. You'll pick up knowledge and learnings as you go along.

  4. Google, MDN and Stack Overflow Are Your New Best Friends.

    If you have a problem, there is a 99.99% chance that it has already been solved. Multiple times. Using Google to search for a problem can often return the right results if you include the language and browser you are experiencing the issue in, e.g. "css ie6 margin".

    MDN (the Mozilla Developer Network) is an excellent source for finding out more detail about HTML elements and attributes; CSS styles and properties; and JavaScript APIs and methods. You can use Google to search MDN by prefixing your search with "MDN", e.g. "mdn box sizing".

    Stack Overflow is a place where developers can ask questions and receive answers from other members of the community. It is always worth searching their answers database - particularly if you are unsure of the exact term as the chances are someone with a similar amount of knowledge has asked the question before. In fact so many people have asked questions, I often find I skip the Google search and go straight to Stack Overflow for an answer nowadays.

    If you've yet to start your web development journey, Code Academy is as good a place to start as any.

    If you're looking to improve your CSS, CSS Tricks is a great site to bookmark.

  5. Not Everyone or Everything on the Web is Right.

    (Especially me)

    Just because someone has written a blog on a subject and that blog is the number one result on Google, it doesn't make what your reading correct. The author may just be really good at optimising their site for search engines (known as Seach Engine Optimisation or SEO).

    For instance, there are lots of articles and tutorials online but it can easy to be mislead by one that is out of date. Check the date timestamp on the tutorial you are reading to check if it is using current best practices. If the tutorial doesn't have a date, then its worth cross referencing the material against another article.

    Check the date timestamp on the tutorial you are reading.

    You can check comments on articles to see if others have left feedback saying something doesn't work (people tend to be more vocal when something is broken) before you go ahead and implement it.

    Stack Overflow and MDN work well for getting the right answers. On Stack Overflow, the first or second answer will usually be the answer that you are looking for; and you can see how well received an answer is by the community by looking at the number of votes it has next to it. On MDN, the wiki nature of the documentation means that it can be kept up to date by anybody rather than relying on one particular person to make updates - meaning it is current most of the time.

    Knowledge sites that are not community driven like W3Schools often contain outdated information, so use with caution.

    This also goes for libraries and APIs. Just because a library exists and has a nice site doesn't mean the library is actually any good. Running a quick Google search for problems with the library takes minutes and can save hours of frustration.

  6. Things Will Always Change.

    The web is constantly evolving. It has to. It needs to keep up with all the new devices and the functionality that comes with those devices. Some browser vendors now release new versions of their software every 6 weeks and with that new release comes new features.

    As an example of change, look at the devices people now use the browse the web. Increasingly people browse on their mobile phones or tablet. Just 3 years ago, the majority of people browsed the web on their computer. Not long before that, there was no such thing as a tablet! Who knows what will happen next.
    Don't ever expect to stop learning. There will always be something new to learn.

  7. Know Your Tools.

    In any career, you can do a better job if you know the tools you are working with. In web development as well as three separate languages, there are lots of tools to learn.

    Pick a text editor which highlights HTML, CSS and JavaScript syntax for you and learn useful keyboard shortcuts so you have a smooth development experience.

    Choose a browser that will be your primary browser for development and get accustomed to it's Browser Developer Tools. The first thing to find out how to do in the Browser Developer Tools is to see a list of the files that have loaded on your page as an incorrect URL to something the page relies on can stop styles, scripts or images from loading. A 404 error means the file could not be found.

    Finally, know the tools your user will visit your site in - download as many browsers as your machine allows - there's Safari, Chrome, Opera, Firefox and Internet Explorer. Get used to checking your work in each of these to learn the quirks and differences between them. The developer tools in each of these browsers include similar functionality, so if you find something useful to debug in one browser, generally there will be a way to do it in the other browsers' tools.

  8. Experiment.

    When children are learning they often go through a phase of trying things that they know are wrong in order to see what effect it has. They are experimenting, and if you are developing for the web - so should you. I could tell you to make sure you always close your brackets in CSS, but then you are getting second hand information. Try it yourself, see what happens. If you ever see the problem later on in your career (and you will) you will know exactly what to do and where to start looking in order to fix it.

  9. Pick Apart Other People's Code.

    One of the best things about the web is that it is open. You can view the source of any page and see the HTML markup, CSS and JavaScript using the Browser Developer Tools. Do you like the rounded corners used on your mates' blog? Right click on it and select "Inspect Element" in most browsers* to see how they did it.

    Open projects such as the HTML5 Boilerplate and read the comments to analyse why certain parts of code are included. Look at other people's projects on CodePen to see how certain visual effects and techniques were produced.

    * In Safari, you'll need to enable the developer toolbar. Go to Safari in the Menu Bar, then "Preferences" > "Advanced" > "Show Develop Menu in Menu Bar".

  10. Start a Blog.

    The best way to remember what you have learnt is to keep a log of your findings. Writing down what you have learnt will reinforce it in your head and may encourage you to think of "what if" situations.

    Writing down what you have learnt will reinforce what you've learnt.

    Since we live in a digital age, why not start a blog? This way, people are invited to read what you have learnt and contribute advice to help make you a better developer; and you can use your blog as a test bed for trying out your new coding skills!

For the web developers who are beginning their career, I hope that you have found this list useful and wish you the best of luck with your future webpages! For me, becoming a web developer was the best career choice I ever made.

I'm always looking for talking opportunities so if any schools, colleges or universities (particularly in the UK) would like me to come give a talk on this, please contact me.

If you are a web developer and have any further points to add to this list, feel free to leave a comment! If this post proves popular, I will likely write a follow up that focuses on tips for each of the languages.