Learn Programming/Front-End Development (HTML/CSS/Javascript)
Front-End developers are different from back-end devs in that front-end developers manipulate the browsers to create web pages and other interactive content. To learn front-end development, you start off with HTML, then CSS, and then Javascript. Once you've learned those, you can move on to other things like frameworks (Bootstrap, React, Angular, Vue, etc). Frameworks you can start learning once you've learned the basics of the three. Frameworks make lives easier.
A good programmer does not have to remember everything. Open source code powers the web and allows programmers to use and exchange code for free (check out some contributing open source guides underneath "Mastering Front End"). If you are stuck on something GOOGLE IT. You'll probably find the answer.
There are a million tutorials out there. Be careful not to get stuck in what's known as "tutorial hell" where you just endlessly watch tutorials but never learn anything concrete. The best way to learn is BY DOING. Exercise sites like this come in handy, but you also want to think of projects to build. Host those projects on Github for your portfolio. Or look up project tutortials.
Using Google Chrome Developer tools, you can inspect the code behind any website or make not-live changes. Other browsers like Firefox also have these tools. Make it your best friend.
Youtube is a really great resource in general. Anything you want to know. It's probably there. A lot of well respected programmers are on there like Wes Bos. Also follow other developers on Twitter.
Youtube Master List - https://github.com/ErikCH/DevYouTubeList
The IMPORTANT other thing to know is that YOU DO NOT HAVE TO KNOW EVERYTHING to get your first job or jobs after that. Programming is ALWAYS CHANGING. A good job will let you learn on the job, hopefully pay you to learn some things, and will teach you what you don't already need to know.
ASK QUESTIONS - no question is a dumb one. Use Google first. If that fails, reach out to other programmers via forums, Stack Overflow, Facebook Groups or Twitter. Someone will be happy to help you.
HOW WILL I KNOW WHEN I'M READY?
When you can create a basic website and have a portfolio of a couple different projects.
-
Website with static and prototypes designs
-
A Github showcasing your code
If you work on a website that's already live, you don't need a github for it. But they're good for projects that aren't live.
Regardless of what you do, freelance or volunteer projects will help you gain exp in case you can't get an internship. But developer internships are usually open to people out of school because so many people career swtich. You can also start applying to junior level positions. Check out open source projects, paired programming, and colloboration with a friend.
PROGRAMMING RESOURCES
(Other lists)
https://www.womenwhocode.com/resources
http://codingheroes.io/resources/
Essentials-
GITHUB - An online repository of code to showcase and join in on open-source projects
Git & Github Tutorial - https://youtu.be/SWYqp7iY_Tc
CodePen- Explore and create things from your browser - https://codepen.io/dashboard/
Sublime Text - An easy, free code editor - https://www.sublimetext.com/
VS Code- Is the current, more advanced, free code editor - https://code.visualstudio.com/
Chrome Dev Tools - Open directly in your browser to test, diagognose, and explore websites - https://developers.google.com/web/tools/chrome-devtools
Blog for developers - https://dev.to/
Stack Overflow is great for looking up answers and stuff, but the community is known to be not friendly to newbies or women - https://stackoverflow.com/
Front End News - Stay Up to Date - https://frontendfront.com/
Front End Focus - Stay Up to Date with this Newsletter - https://frontendfoc.us/
Essential Topics and Concepts
How the Internet & Computers Work - https://www.khanacademy.org/computing/computer-science/computers-and-internet-code-org#internet-works-intro
What is Computer Science? - https://www.freecodecamp.org/news/what-is-computer-programming-defining-software-development/
Responsive Web Design - https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/
Cross Browser Development - https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction
Agile Methodology - https://www.youtube.com/playlist?list=PLWKjhJtqVAbm0gPNunWf4pr4xV8I3Geh-
Web Page Speed Test - https://tools.pingdom.com/
Paul Ford's WHAT IS CODE 10,000 word online novel - https://www.bloomberg.com/graphics/2015-paul-ford-what-is-code/
Debugging for Beginners - Debugging is the process of finding and fixing errors - https://docs.microsoft.com/en-us/visualstudio/debugger/debugging-absolute-beginners?view=vs-2019
Mastering Front-End
100 Days of Code - the idea behind it is solid, reptition, accountability, and progress - https://www.100daysofcode.com/
Guide to Web Skills - https://andreasbm.github.io/web-skills/
W3Schools- Learn programming and look stuff up- A reference resource- https://www.w3schools.com/
*Mozilla Developer's Network - Like W3Schools, but the more mature, more indepth up to date sister -https://developer.mozilla.org/en-US/
Tools that Front-end Devs use in 2019 - https://ashleynolan.co.uk/blog/frontend-tooling-survey-2019-results
Roadmap- Guide to becoming a front-end dev in 2020 https://roadmap.sh/frontend
Front End Developer 2020 Guide - https://youtu.be/sppSnBQVt0k
Interview Questions for Front-End (I.e can you answer these?) https://github.com/h5bp/Front-end-Developer-Interview-Questions
Front End Developer Interview Questions and Answers - https://www.fullstack.cafe/blog/front-end-developer-interview-questions
Illustrated Dev - Illustrating developer concepts - https://illustrated.dev/
Interview Cake - Learn CS and how to solve programmer interviews - https://www.interviewcake.com/
Programming Interview Youtube - https://www.youtube.com/playlist?list=PLWKjhJtqVAblv09G3sFgRMSeR0jnKQmJ9
The Definite Guide to Contributing to Open Source - https://www.freecodecamp.org/news/the-definitive-guide-to-contributing-to-open-source-900d5f9f2282/
How to Make Contributions - https://github.com/firstcontributions/first-contributions
Awesome list of PR (Pull Requests) - https://github.com/MunGell/awesome-for-beginners
First Timers Only- A resource for your first time contributing to open source projects - https://www.firsttimersonly.com/
Pros and Cons of Paired Programming (When you and a teammate work together on the same code) - https://www.freecodecamp.org/news/the-benefits-and-pitfalls-of-pair-programming-in-the-workplace-e68c3ed3c81f/
Content Management Systems
Wordpress- There is a lot of jobs that will require you to know how to work with these -- Wordpress.org / Wordpress.com
Drupal
Webflow (newer but has a lot of talk around it)
Tutorials and Others
FreeCode Camp- One of the best free resources you can use - https://www.freecodecamp.org/
Khan Academy - has great programming lessons and check out their Computer Science stuff too - https://www.khanacademy.org/computing/computer-programming
CodeAcademy- A Favorite but you have to pay now at a certain point - https://www.codecademy.com/
Front-End Masters - Learn Front-End Development - https://frontendmasters.com/
Udemy - Check out their free courses and then wait for sales on their classes- https://www.udemy.com/courses/free/
Thinkful Webinars- has a bunch of free beginner webinars- https://www.thinkful.com/webinars/
Tree House - A great tutortial/Portfolio/Degree site but can be pricey - https://teamtreehouse.com/
Hackr.io- Tutorials and other Learning - https://hackr.io/
Egghead - Tutorials - https://egghead.io/
LinkedinLearning
Coursera
Skillshare
Exercises
Exercism- Learn programming with exercises - https://exercism.io/
Edabit - Learn coding with interactive challenges - https://edabit.com/
Code Wars - Daily programming challenges - https://www.codewars.com/
HTML/CSS/Javascript specifics
HTML crash courses - https://youtu.be/pQN-pnXPaVg ; https://youtu.be/UB1O30fR-EE
HTML and CSS Book - A popular book with code examples online - http://www.htmlandcssbook.com/
CSS crash course - https://www.youtube.com/watch?v=yfoY53QXEnI
CSS Tricks - A blog for CSS and other Front-End Dev - https://css-tricks.com/
CSS Podcast- https://pod.link/thecsspodcast
CSS Generator - Quickly generate css - http://css3generator.com/
CSS Diner - https://flukeout.github.io/
CSS Grid - https://cssgrid.io/ ; https://learncssgrid.com/
CSS Flexbox- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
CSS Box Model - https://css-tricks.com/the-css-box-model/
Bootstrap - A CSS, front-end framework - https://getbootstrap.com/
CoDrops- Snippets of cool coding stuff - http://tympanus.net/codrops/
Eloquent Javascript - A read book (with an in browser programming practice) https://eloquentjavascript.net/Eloquent_JavaScript.pdf
Javascript and JQuery - A Popular book with code examples - http://www.javascriptbook.com/
JSLint- "Lints" are programs that find problems in your code - http://www.jslint.com/
JavaScript30 - Create 30 different vanilla Javascript projects - https://javascript30.com/
Beginner Javascript - A paid course by Wes Bos - https://beginnerjavascript.com/
Just Javascript - A newsletter explaining Javascript - https://justjavascript.com/
Vanilla Javascript Projects - +20 plain Javascript projects - https://vanillawebprojects.com/
Full Javascript Foundations Video - https://youtu.be/PkZNo7MFNFg
HTML in 12 minutes - https://youtu.be/bWPMSSsVdPk
CSS in 12 minutes - https://youtu.be/0afZj1G0BIE
Javascript in 12 minutes - https://youtu.be/Ukg_U3CnJWI
More Advanced Code and Topcis and Computer Science-
Google Developers - tutorials and other resources - https://developers.google.com/
Choose one JS framework to start out with (React, Angular, Vue). It doesn't really matter which you choose but some companies prefer them over others. React is the most popular, followed by Angular, and then Vue. Not a lot of people know Vue but it is really sought out actually. So Maybe React or Angular and Vue together might be a strong choice.
History of Front End Frameworks- https://youtu.be/Kzeog8yTFaE
React - https://www.youtube.com/playlist?list=PLWKjhJtqVAbkArDMazoARtNz1aMwNWmvC ; https://www.youtube.com/playlist?list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3
Angular -https://www.youtube.com/playlist?list=PLWKjhJtqVAblNvGKk6aQVPAJHxrRXxHTs
Vue - https://youtu.be/Wy9q22isx3U
PHP -https://www.youtube.com/playlist?list=PLWKjhJtqVAbkoMsX4hgwxbJZW4aB0cbaB
SQL- https://www.khanacademy.org/computing/computer-programming/sql
APIs - https://youtu.be/GZvSYJDk-us
Computer Science from Havard - https://www.youtube.com/playlist?list=PLWKjhJtqVAbmGw5fN5BQlwuug-8bDmabi
Computer Science - https://www.youtube.com/playlist?list=PLWKjhJtqVAbn5emQ3RRG8gEBqkhf_5vxD
Google Materials - https://material.io/design/
What is Blockchain? - https://www.freecodecamp.org/news/what-is-blockchain-and-how-does-it-work/
Accessibility
Web Content Accessibility Guidelines (WCAG) - https://www.w3.org/WAI/standards-guidelines/wcag/
ADA Checklist (2019) - https://medium.com/@krisrivenburgh/the-ada-checklist-website-compliance-guidelines-for-2019-in-plain-english-123c1d58fad9
A11y Checklist (check out the a11y newsletter) - https://a11yproject.com/checklist/
Web Accessibility for Developers - https://www.wuhcag.com/wcag-checklist/
15 Things You Can Do to Improve Your website Accessibility - https://websitesetup.org/web-accessibility-checklist/
Just for Fun -
Processing - A Java based programming language used to create animations, games, and interactive art - https://processing.org/
General Assembly- Another certificate place but also has some free stuff - https://generalassemb.ly/blog/free-fridays/
Developer and Tech Communities
https://www.hiretechladies.com/
Get Involved as Developers - https://www.pluralsight.com/courses/get-involved
CodeNewbie- https://www.codenewbie.org/
Hackernoon- A community blog, learning resource, etc.- https://hackernoon.com/
http://ladydev.org/ (Local club in Des Moines, they also run Area515)
JOB BOARDS
Vettery - https://www.vettery.com/candidate/tech
TripleByte- https://triplebyte.com/
AngelList- jobs from start ups - https://angel.co/jobs
We Work Remotely - https://weworkremotely.com/
Dice - https://www.dice.com/
Stack Overflow - https://stackoverflow.com/
CodePen - https://codepen.io/jobs/
AIGA Design Jobs - https://designjobs.aiga.org/
Behance - https://www.behance.net/joblist
Design Observer - https://designobserver.com/jobs/
USER INTERFACE, WEB DESIGN, VISUAL DESIGN, ETC Within the magical world of UX design, there lives a host of titles that are basically the same or all related to each other. If you really wanted to, the order might be visual designer, web designer, user interface designer, interaction designer....etc. (goes into UX pretty quickly).
UI is NOT THE SAME as UX. UX is the study of design and human-computer-interaction and psychology. UI deals with the visual stuffs.
Stay up to date in the field by reading articles from places like
Smashing Magazine, https://www.smashingmagazine.com/
Muzli, https://muz.li/
UX Planet, https://uxplanet.org/
Protypr, https://blog.prototypr.io/
UX collective https://uxdesign.cc/
Neilsen Norman Group https://www.nngroup.com/
Mockplus https://www.mockplus.com/blog
Hey Designer https://heydesigner.com/
Designer News https://www.designernews.co/
and more.
Take online classes and get certificates from places like CareerFoundry, Interaction Design Foundation, Linkedin Learning and others. Read more about the options from UX Planet. https://careerfoundry.com/ **https://www.interaction-design.org/ (Personal favorite, it's what I'm using) https://uxplanet.org/top-10-online-platforms-to-learn-ui-ux-design-dcfb613d097a
Start your own blog and write about what you know and recommend. Become a thought leader in the community.
Listen to podcasts like User Experience Defenders, What’s Wrong With UX, and others. Here’s a list of the best 25 UX podcasts from MockPlus for 2020.https://www.mockplus.com/blog/post/ux-podcasts
Attend UX networking meetups. (meetup . com)
Watch Youtube Channels and videos about UX.
AJ&Smart
App Design Tips
The Futur
Caler Edwards
CareerFoundry
Dansky
Invision
DesignCourse
Flux
LinkedinLearning
NNGroup
Stay up-to-date and watch tutorials on using tools like Sketch, Invision, Figma, and other UX tools or user research tools.
Complete mock UX and UI challenges like the Sharpen UX generator, The Good Brief, and the 100 day DailyUI challenge. https://www.dailyui.co/ http://goodbrief.io/ https://sharpen.design/
Learn about accessibility and subscribe to newsletters like the A11yWeekly newsletter.
Study Design Systems. https://designsystemsrepo.com/design-systems/
Study Usability. https://www.usability.gov/
Study Design Thinking. You can start by watching a documentary or looking at different methologies like from IDEO, D.School, HCS, Design Council, Frog, Whatx4, or LUMA. http://www.designthinkingmovie.com/
Share resources on social media.
Join UX Facebook and Linkedin groups. Follow designers on Twitter and Instagram.
Stay up-to-date with trends in UX and the State of UX. https://trends.uxdesign.cc/
Keep improving your portfolio (find some cool resources from Sarah Doody’s site) and case studies (find a template generator here). Study other UX Portfolios. https://www.sarahdoody.com/ https://design-stories.herokuapp.com/ux-case-study-template
Find a mentor or become a mentor.
Read books on UX/UI and other similar topics. Like, “Don’t Make Me Think”, “The Design of Everyday Things”, “The Elements of User Experience”, “A Project Guide to UX”, “Lean UX”, and others. https://www.mockplus.com/blog/post/ux-design-books
Deep dive into other subsets of UX like Interaction Design, Information Architecture, Visual Design, UX Research, UI, UX Writing, etc.
Attend IxDA World Conference Day for Free or other conferences. https://ixda.org/
Join local clubs, organizations, and other community groups.
Become a speaker or start hosting workshops.
Get a college degree in HCI, UX, UI, or other similar programs.
Volunteer your skills or freelance.
Practice, practice, practice. Create passion projects and case studies in your free time.