I put together this outline to help folks transitioning from a non-software job towards Web Development/Front End Development/UX Design. I’m no expert in the field, but I have spent a lot of time documenting and using a variety of free resources and I hope they’re useful for you.
This doesn’t really dig into the steps to take to become a “full stack” developer but it’s a decent way to get your toes wet. Just realize there’s lots more to learn!
This is really meant as an outline of things to learn. But it isn’t a step-by-step guide. As a rule there will be things in development that you don’t know. The best skill you could learn is how to use This effectively.
Tools & Resources
I try to pick either free and open source tools or freemium tools with good reputations. However, I don’t check old posts so if you notice a tool has any issues with it at any point in the future please tell me so I can remove links to that tool.
The parenthesis below show suggested applications but there are plenty others to choose from. By default they are suggestions in order of the operating system they run on like this: (Linux/Mac/Windows) or if only one suggestionis in the () it is a suggestion for any of the three main operating systems together.
A. Local Software Tools
Password Manager (KeePassX/KeePassX/KeePass2) You’ll start to build up a lot of passwords so this is a must.
Plain Text Editor (Sublime Text): http://www.sublimetext.com/ It’s hard to use a program like MS word because of the way it adds formatting to text.
FTP Client (FileZilla): https://filezilla-project.org/download.php?type=client Be sure to read through the installation prompts. Filezilla is sometimes bundled with adware.
Simple Image Manipulation (Shutter/Skitch/Paint.net) You’ll probably need to work with images at some point and having a nice, lightweight editor is helpful. You can also checkout GIMP.
Web Browser (Chrome) Firefox can work too, but you’ll find that IE and Safari are not the best browsers for development in the long run. Chrome and Firefox have many tools built-in.
B. Other Tools
Basic Website Host (DreamHost)* If you want to use something more advanced and a bit more involved I’d suggest looking at Amazon Web Services’ free tier. Just be careful what you use because not everything on AWS is free and you can accidentally rack up a bill.
C. Resources Codecademy.com: https://www.codecademy.com/learn
This is a great interactive way to jump into a bunch of skills you’ll need with examples, explanations, and learning checkpoints.
W3 Schools - http://www.w3schools.com/: http://www.w3schools.com/html/default.asp Think of this as your encyclopedia for a bunch of basic concepts.
What we’ll begin learning
Regardless of what tech path you take in web development, learning these fundamentals will useful to the work you do.
Languages & Libraries
- Text Editors
- Command Line Utilities
- HTML (Basic, Ugly, Local Web Pages)
- CSS (Making HTML Pretty)
The end goal:
- Create a basic HTML Webpage and view it locally on your computer
- Add styling to that HTML Webpage with CSS
- Put these elements online with a FTP Client and make changes to the live web page
- Add a script to get the current time and add that in
- Add a script to hide/show images on a click of some element
- Download and try all the required software (don’t worry if you don’t know what to do with it yet)
- Sign up for codecademy.com
- Open up Sublime text and start writing out a basic HTML Document (you’ll learn this in the Codecademy course). Save the HTML document as “index.html” in a folder called “mysite”.
- Add A Heading
- Add a Paragraph
- Add a Hyperlink
- Add an image
- Create a new document to serve as your CSS file. Save it in the same “mysite” folder and call it “style.css”
- Make a first simple change to an HTML element you used in the html document
- Edit your site.html file so that it loads the style.css file and save it
- Open up the site.html file in your browser - Make changes to the CSS file for your Header, Paragraphs, and other elements you use in the main part of your HTML Document
- Choose some sort of interactive features to add to your page:
- Add a hide/show on click feature for your paragraph or photo
- Add a script which inserts today’s time in the page
This video is a great overview of the paths you can take as a developer. Thinking this far in advance could be intimidating. But it’s a great way to consider what to learn next. https://youtu.be/pB0WvcxTbCA?t=53s
Here are some other great resources: http://learncode.academy/ http://learn.jquery.com/
I also strongly suggest you get involved in tech meetups on meetup.com. See if there are any in your area. I strongly recommend Python User Group meetups because the Python community in general is very open to beginners.
Questions? Feel free to tweet at me.
*FYI That’s my referral link so I do make money if you use that. I’ve had no complaints about Dreamhost customer service, or quality of the product so I feel pretty good referring them.