My Master List For Learning Front End Development

Person in a sweater typing on a computer - My Master List to Learn Front End Development


Learn Programming/Front-End Development + UX/UI

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.

  1. Website with static and prototypes designs

  2. 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.

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/

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 - https://university.webflow.com/courses

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 subgrid - https://12daysofweb.dev/2022/css-subgrid

CSS Flexbox- https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ; https://www.joshwcomeau.com/css/interactive-guide-to-flexbox

CSS Box Model - https://css-tricks.com/the-css-box-model/

State of CSS 2022 - https://2022.stateofcss.com/en-US/

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/

Github CoPilot - https://github.com/features/copilot

What is Web 3.0? - https://www.freecodecamp.org/news/what-is-web3/

ChatGPT - https://openai.com/blog/chatgpt/

DALL-E - https://openai.com/dall-e-2/

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://womeninwebdev.com/

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)

USER INTERFACE, WEB DESIGN, VISUAL DESIGN, ETC

This section was originally published here on my blog.

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

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.

How to Spot UX Dark Patterns on the Web by Sareh Price

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.

This was originally published in 2020 on my Github page but has now been republished here and updated for 2023.

Tech and DevelopmentSarah Priceresources, front end development, front end programming, master list, master guide, html, css, Javascript, ux design, UI Design, programming, codingComment