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.
Good luck!
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
- HTML
- CSS
- JavaScript (Different than Java)
- jQuery
Tools
- Text Editors
- FTP
- Command Line Utilities
Web Languages
- HTML (Basic, Ugly, Local Web Pages)
- CSS (Making HTML Pretty)
- JavaScript (Making Websites interactive)
The end goal:
Putting together a live (anyone can view via the internet) multi-page HTML Website with CSS Styling, and a few pieces of JavaScript/jQuerey. If you get stuck or confused go back to the Codecademy tutorials, the W3 schools explanations and demos or to your new best friend. If you still can’t figure it out feel free to reach out to me on Twitter.
Sub Goals:
- 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 some JavaScript
- Consider adding a copyright information with JavaScript that changes to update the year to the present year
- 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
Homework:
- 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
- Enroll in the HTML, CSS, JavaScript, jQuery and Command Line Courses on codecademy.com
Work on these lessons and if you get tired of lessons bounce over to your project and start working towards the end goal of the unit. (e.g. the multi-page HTML Website with CSS Styling, and a few pieces of JavaScript/jQuerey)
Project Work:
HTML
- 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
CSS
- 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
JavaScript
- 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
Next Steps: (After HTML, CSS, JavaScript) Before you get too in-depth with learning, you’ll want to plot out the route that makes the most sense for you to take depending on your interests. Regardless of what you choose to pursue the first steps will be the same. However, it’s good to know where you’ll be heading down the road.
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.