I’ve been asked for guidance with getting started with web development a handful of times, here’s my thread.

Web development is a tool much like a typewriter, it’s an instrument for getting a story published. First, ask yourself why this interests you, what’s your goal with the tool? Once you’ve identified this we can begin.?

Many goals can get away with using website building tools, such as https://www.wix.com/, to build a landing page for a product, a blog, or even an ecommerce store. You don’t need to be tech savvy to get going, don’t over complicate life by telling yourself that you need to build it from scratch, always keep in mind what your end goal was. I myself fell into this trap, telling my friends I would build them a website from scratch, but the downfall of this was that it was not user friendly on their behalf to edit and make adjustments.

You should consider building websites without the help of website builders when an interface isn’t able to be built using tools, **cough cough** Wix or similar, that make our lives simple, easy, and time friendly.

If we get to this point, below should help give you some direction on this exhilarating journey, enjoy and feel free to reach out if you have questions in the comment section!?

My newly learned motto that you can take with you on this journey:?

Learn 80% in 20% of the time, create mvp to see results asap and build off this momentum.?

Web Development overarching topics:

HTML: Content defined with structure

CSS: Styling of HTML content

Javascript: Handling user interactions

Front-end Frameworks: Give us a framework to build reusable components that we will display to our users, allowing them to interact with what they see on the website.

Libraries: Why write code that is already made and optimized, e.g. npm (free marketplace of code)

APIs: Consume functionality and data hosted by other companies and people, e.g. Stripe payment processing platform to take debit/credit card payments. Checkout https://rapidapi.com/marketplace

Database: Think of a table/excel sheet to hold the website’s and user’s data that we will reference using the data layer.

Data Layer: A way to query and interact with the database (C.reate R.ead U.pdate D.elete)

Back-end frameworks: A way to expose functionality and a gateway to data stored in the database implementing a data layer for users, typically the business logic is kept here rather than the front-end for security measures. Essentially creating functions that can be hit by users sending relevant data to exposed URLS which then sends back appropriate responses.?

Build Tools: Optimizing and linking source code together into an executable form, for servers to send this code to users when they hit your website, converting those framework’s work into static files.

Deployment: Once the website is built, you will host it for others to access it, e.g Heroku (backend hosting), Netlify (frontend hosting)

Mobile & Desktop: Multiple device support

Devops: Automated and continuous integration and deployment, with monitoring. Checkout https://www.atlassian.com/devops?

Testing: Ensuring your logic is working as intended.

• Unit Testing: Individual component logic tests, e.g. Jest
• Integration Testing: Ensuring multiple components interact together as intended, e.g. Jest
• End-to-end Testing: Ensuring the application flow from a user’s perspective works smoothly, e.g. Cypress
• There are more, but I listed a few crucial ones to get started...

Git: A place to store your code on the cloud, offering incremental history backups and rollbacks, allowing developers the ability to work together with others with ease. Github tools help with getting organized, allowing you and your team to see progress being made and contribute in bite sized chunk timely manners. E.g. a place to keep an organized list of things that need to be done for milestones, monitoring activity, project kanban-style boards, and way more...?

Moving onto another topic, here are some mental models I live by:

• Break things down into the smallest sized chunks; once momentum begins, you’ll itch for more.
• Draw things out and write things down before implementing code, organization takes time, but it makes implementing timeless.
• Make wireframes using tools like https://www.figma.com.?
• Get organized as soon as possible using github. Creating a priority queue of things and creating precedence of what's important in a respective order. (Bonus: you will have an upper hand on a job search if you know git, because that shows you can work with others, and because it can help display the projects you’ve worked on).
• GET COMFORTABLE WITH SEEING ERRORS, THEY SHOW YOU ARE MAKING PROGRESS!!!?

Working with errors:

• See errors as progress being made, get comfortable with seeing them, PERIOD.?
• When searching the web for how to get out of a situation, remove any context you think other people wouldn’t see, i.e. your computer folder structure?
• If no results are found by copying the error minus context others wouldn’t have, use tags over complete sentences when querying the search engine for a solution to move forward.

Before I post some of my links and references I recommend, I’d like to reiterate on the learning 80% in 20% of the time method.?

It can be easy, especially for myself to dive down into tool’s documentation or blogs and guides, throwing copious amounts of time into something that seems interesting, but ultimately doesn’t help you make progress for your overall goal at that specific time. There is an overload of info out there, keep this in mind. This is one thing my co-workers beat into me, and I’m very grateful for it.

I was curious and sometimes it helped me understand things I saw in the future, after reading an article a while back, but my genuine curiosity wasn’t driving value. When you don’t drive value it can be easy to burn out and feel like no progress is being made, this is a friendly reminder to remember what your goal is at all times.

With this being said, it is a bit ironic for me to say that if something is new to you, it’s okay to try get 5-15 min of broad picture exposure, rather than dive deeper in docs to try get a picture of what this tool is actually accomplishing, just remember time is the most valuable commodity and this should be kept in mind at all times. That is why you hear some tech business people claim they’d hire a lazy developer, they ultimately get things done making progress.?

A good technique I’ve been taught and shared with my peers is to perform a search with the following syntax:

Google Query -> site:medium.com topic of interest?

e.g. site:medium.com terminal tutorial

This will perform a search on a specific website, medium is a great blog with an extraordinary amount of quick and dirty guides, helping you keep reading down to a minimum, maintaining momentum.?

Adding a tag ‘tutorial’ or ‘intro’ in this query will help express you want a condense guide to give you a overall picture of a start to finish with examples.

Interview Prep:

Pair Programming Live Interview Preparation - https://www.pramp.com/

Getting started links:?

Great introduction to programming with Javascript - https://jsforcats.com?

Foundations and Full Stack Javascript paths - https://www.theodinproject.com/paths

Everything Javascript - https://javascript.info?

Great tutorials and guide websites:

https://www.w3schools.com/?

https://www.geeksforgeeks.org

https://www.freecodecamp.org?

https://medium.com (Use incognito mode to view articles for free)?

https://www.coursera.org?

https://udemy.com/?

https://nodeschool.io?

https://flaviocopes.com (Choose a topic and navigate to the bottom of the posts listed since intros are on the bottom)

https://scotch.io?

https://learnxinyminutes.com (Know one language? This will help translate your knowledge to others)

Overview of technology:

Map of web dev (try not to get overwhelmed, that is not its purpose) - https://www.w3schools.com/whatis/?

Survey of technology being used today - https://2020.stateofjs.com/en-US/technologies/?

Mozilla’s getting started page - https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web?

Navigating and using a terminal?>_?

Learn how to navigate your computer using a terminal by playing a game - https://web.mit.edu/mprat/Public/web/Terminus/Web/main.html?

Terminal learning hub - https://linuxjourney.com?

OOP Concepts:

Object Orientated Programming condensed guide - https://sites.google.com/revature.com/studyguide/home?authuser=0?

Git:?

Exposure to git - https://www.youtube.com/watch?v=USjZcfj8yxE?

Git hub crash course - https://www.freecodecamp.org/news/git-and-github-crash-course/

A quick and comprehensible guide for getting working with Git ASAP - https://www.theclickreader.com/git-for-data-science/

Learn git through github - https://lab.github.com?

Data Science and Machine Learning (helped put these resources together when I worked with Softstack Factory):

Python For Data Science - https://softstack-factory.gitbook.io/python-data-science/

Data Science & Machine Learning - https://softstack-factory.gitbook.io/ds200/

Cheat sheets and guides I helped hand pick - https://softstack-factory.gitbook.io/ds200/next-steps/tutorials-guides

Books:

- The self taught programmer by Cory Althoff

- Computer science distilled by Wladston Ferreira Filho

- Clean code by Robert Cecil Martin

- The imposters handbook by Rob Conery?

Meetups; attend them will help you build a network and will give exposure to tools being used today along with examples and exercises ) - https://www.meetup.com?

Follow social media accounts relevant to your learning path using Linkedin, Instagram, twitter, etc..

Thanks for reading!