An Introduction to Getting Started In Web Development
Late last week, I received a lengthy email from someone who was interested in getting started in web design and development, but they were at a total loss at where to begin. I'll use this article run through how you can get up and started with web development if you are feeling a bit lost.
Learning to code
Even if you don't want to pursue a career in web development, knowing how to code and program is an excellent skill to have. It helps develop logical thinking and makes you look objectively at the world. Codecademy founder Zach Sims has this to say:
Beyond creating things, coding is about algorithms and algorithmic thinking. It's a different way to think, and it adds to the way you can solve problems. There were some studies done awhile ago at MIT that found that kids who learned to program became better spellers.
We live in an era where you can learn anything from your own home. And that is awesome. Whether it's astronomy, philosophy, or kinesiology, you can learn (and become proficient) from the comfort of your own surroundings. So why not use that privilege to learn how to code? Web design, specifically, is a terrific industry to get into on your own because the application is - or can be - the same as the lesson: what you will be doing while learning web design is the same as the production. (More or less.)
Getting Started: The Tools
What do you need in order to get started? A browser and a text editor. That's it. In order to get started, all you need is something to write the code, and something to show what wrote. But there are also some additional tools you might need. I recommend:
- Text editor: If you are running OSX, you can use TextEdit, or if you're running Window, try Notepad. These work fine for basic. But if you're interested in using something a bit more robust and capable, there are alternatives such as Atom (OSX, free),Coda (OSX $75), Espresso (OSX $75), Sublime Text (OSX / Windows / Linux $70), and Notepad++ (Windows, free), among many more. There is no right or wrong: pick something that works for you.
- Browser: Chrome, Safari, Firefox, IE, Opera… these are the most common browsers. It is a good idea to get them all for testing purposes.
- Image editor: whether you use Photoshop, GIMP, or any other photo editing software, it is a good idea too. Eventually. you will want to add images to your site, and you'll need some way to format them.
- WAMP/MAMP: WAMP/MAMP is an application that you install on your computer that will allow you to make dynamic websites on your own machine. With it you can run server-side languages like PHP.
- Backups: Dropbox, Google Drive, iCloud… have somewhere that you can back up your files. It will come in handy if you want to continue learning when away from your main computer or device.
Getting Started: The Basics
There are many different programming languages out there, some of them similar, others unique. The first step is deciding what kind of development do you want to tackle. Are you more interested in doing front-end development (what you see in your browser window, and how it looks) or back-end programming (the data stored behind the website)? Regardless of the path you take, it is a good idea to start with the very basics: learn HTML and CSS.
HINT
Once you understand these two fundamentals, you can then work your way to more complex languages. JavaScript (a common starting point) and other programming languages can wait.
Best friends: HTML and CSS
HTML and standardized languages that browsers render on their own. You write something in HTML or CSS, and your browser will convert that code into something tangible.
HTML (HyperText Markup Language) is a markup language: it dictates the structure and content of a page. HTML looks like this:
<article> <h1>This is a headline</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis turpis mi, sit amet cursus erat ullamcorper id. Aenean lacinia felis tortor, ac efficitur velit sollicitudin ornare.</p> </article>
CSS (Cascading Style Sheets) is a language for describing the look and formatting of a document written in a markup language (such as HTML). CSS looks like this:
article { width: 75%; font-family: "Helvetica Neue", sans-serif; font-size: 18px; line-height: 25px; }
HTML and CSS go hand in hand: it's your thing, and the way that thing looks. But where to go to begin understanding how to write these two languages?
Online Resources
Don't Fear the Internet is a series of videos produced by Jessica Hische & Russ Maschmeyer. What do they do? "Through short tutorial videos, you'll learn how to take a basic WordPress blog and manipulate the CSS, HTML (and even some PHP!) to match your aesthetic." The series, although short, offers and excellent primer getting started to look at code.
There are also many excellent teaching resources that will guide you through learning various languages. I recommend trying out:
Once you have reviewed the videos, it's time to get your hands dirty. It really is the only way to truly learn. Get in there! Don't be afraid to break stuff: remember, this is just code. Making mistakes is totally okay, so just start experimenting. Some useful resources to help you out along the way include:
HINT
You can also use us as a resource! We love spending time teaching what we know, and we have years of experience doing just this. In fact, our combined years of teaching experience make us collectively a very, very wise old crone. And we love that. Education services
Can't coding be replaced by WordPress?
Do designers really need to code? It's been a hot topic since, like, forever. The answer really is "it depends". The truth is that in some situations you might be able to strictly designing, and other times you might be strictly developing. But most likely, you will fall somewhere in the middle of the two. See, web design and development are on a spectrum, not separate ideas.
As for the designers who say "no one really codes anymore," well, sorry, but a straight up lie. Some designers claim that WordPress widgets can do all of this for you: if so, they aren't appreciative of the nature of the web, or they really don't have a clue. What happens if a project needs to happen outside of WordPress? Or you can't find a widget/plugin that does the job for you? Sure you can only work on projects with WordPress templates, but doing so puts blinders on you and limits you to all the wonders and capabilities of code. So, no, coding will always be relevant. Coding is also such a satisfying experience; there is something wonderful about making a thing out of nothing.
Keep pushing yourself
Once you have a grasp on HTML and CSS, you can move along to other languages, such as Javascript, Ruby on Rails, PHP, or Python. You can also look into things like version control (Git), CSS preprocessors (LESS and Sass) and Content Management Systems (Umbraco, WordPress, Drupal). There is also more to learn… keep learning and expanding your knowledge!