From Zero to Hero w/ HTML — CSS — JAVASCRIPT

After graduating my bootcamp in early 2017, I realized how lost I still felt. The camp I went through barely scraped the surface of JS fundamentals or why Objects were so crucial to understanding. This left me really feeling the weight of the imposter as I ventured into the job search, especially after putting together Bootcamped and meeting so many other bootcamp graduates from different schools. Resource after resource was shared in the community, many of which I barely understood the first time through.

At the same time, I did realize how powerful a Googler I had become, so I decided to flex my Google muscles and try and find every resource possible and find my niche. Which brings me to this post. Through the last year, I’ve spent an immense amount of time understanding how crucial the vocabulary behind being a developer was. To do so I went through course after course, article after article, and project after project.

With this post I’m looking to help set up a structure for those either looking to jump into programming, or even those feeling lost like I felt for a long time of this process. I’m going to be listing off some strong resources, classes, and tutorials I’ve used over the last year to help build a great base to learn off of. These may not be the best for everyone, but I found them extremely useful and hopefully so will you!

First —

I’d like to point you in the direction of FreeCodeCamp. FCC has been an invaluable resource for SO many new to development (including friends of mine that I’ve pointed in their direction). The curriculum, while also being completely free, will not only bring you through foundational HTML, CSS, and JS, but also help you to understand version control with Git, Frameworks and how helpful they can be, but most importantly how to read open source code and contribute to projects. As a base I would say starting here would be a strong idea for anyone making their first steps into web development.

HTML & CSS

After completing FCC’s HTML + CSS challenges, you should have a fair grip on the basic fundamentals of both. Bootstrap and other frameworks like it can be very tempting, but I’d definitely challenge you to learn your way around what they do and why they made them and making sure you’re comfortable styling without it.

1. Learning mobile responsiveness is a must
   You’ll learn very fast that desktop styling is not the only screen you need to worry about. Most people will be viewing your website on their mobile devices before sitting at a computer to check it out. Which means you should definitely look into —
   - Media Break Points : Basic breakpoints for screen sizes to help with mobile development
   - Bootstrap : The go to beginner framework for responsive applications. It’s an extremely useful tool, but should definitely be left alone while you learn basic HTML & CSS fundamentals.
   - CSS Grid tutorial by Wes Bos : CSS grid does some of the heavy lifting that Bootstrap offers
   - Flexbox Zombies : Flexbox is a great responsive way to display content
2. Learning best practices for CSS early on can help clear a lot of confusion
   -30 solid best practices for CSS: A great starting point for understanding how to write proper CSS. Not a must at first, but definitely something to keep in mind.
3. Create projects that will put your skills to the test.
   A recurring theme you will deal with as a programmer will be putting the things you’ve read and learned into actual practice. It is something you will time and time again encounter in almost every single article you read. It’s truer than most anything else. Learn. Practice. Implement. Iterate.

There’s loads more subjects and topics you can learn than what I have put here, but this should give you a solid footing to really dig your feet in and get comfortable.

Now we’re on to the beast. (at least it was for me lol)

Javascript

After getting through FCC enough to have hit javascript, even after completing some of the challenges, you will (and everyone has) hit the wall of questions. Fundamentals in JS, especially as your first dive into logistical thinking of any programming language, can be hard to pinpoint.

Things like:

• Object-Oriented Programming
• ‘this’
• Data Types
• Variables
• Functions
• Operators
• Conditionals
• Loops
• Data Structures
• Algorithms

With a lot to learn it can be hard to find the things that click with how you learn. I’ve bounced through a pretty large amount of resources and have a few that I wish I had found fresh out of my camp.

1. Books are always a solid place to start but can be pretty intimidating. There are so many good books that it can be hard to figure out where to start. I was recommended Eloquent Javascript when I first started, but still felt intimidated by some of the chapters. It wasn’t until I was introduced to the YDKJS (You Don’t Know Javascript) by Kyle Simpson. The link is a free online copy of his book series that he released to the public. I highly recommend reading the topics with a specific intention, as it will truly illuminate each topic for you.
2. CodeSchool has a free course on Javascript.
   Even without diving into paid, you get a pretty good basics taste. This coupled with CodeAcademy and FCC should offer you a solid base in the basics of Javascript. Other websites I’d recommend for diving deeper into Javascript would be
   - MDN Javascript docs are a pivotal spot for all things JS. Learning what to ask and how to find the answer is a huge part of programming in general. Find yourself stuck at a wall of understanding? This is the place to go while building fundamental knowledge.
   - Watch and Code.com offers a free practical Javascript course taught by Gordon Zhu, that really pieces together thoughtful programming and principles you will definitely find yourself reusing. You build out a Todo app using strictly vanilla javascript
   - Javascriptissexy.com offers a solid amount of articles centered around building your Javascript understanding.
3. Algorithms and Data Structures
   These subjects have proven to be quite the tricky place to find your way into. There are TONS of books, practice websites, etc that can rip you around without actually instilling core fundamentals of Big-O, what data structure fits the issue, and how to build the algorithm around it. Our goal at Bootcamped is grounding you truly in the fundamentals of all of these subjects with training, mentorship, and lots and lots of practice. We will revisit some core fundamentals for this an upcoming post.

Practice makes perfect (as I will keep drilling ;]) so I wanted to leave you with some inspiration to practice your Javascript skills. A great place to start would be Javascript30.com, another awesome punch of projects from Wes BOSS. If you’re feeling comfortable through these, you’re definitely ready to put it into practice and build on your own projects.

Frameworks

No matter what, if you’re entering the world of Javascript development, you’re going to hear the infamous “Learn React. Get a job.” What is React? Why is it so important to everyone? How do I learn it?????!?!?
Don’t worry. After these resources you’ll learn about what a framework is, NodeJS & Express, React & Redux.

1. Let’s start with understanding what a framework is and why they are important to understanding early in your career.
   This Quora post’s 1st answer will sum it all up and then some (with some extra resources inside of it). Quora & StackOverflow are the go-to places to ask any dev question you may have.
2. NodeJS packs a serious punch to the world of backend, allowing you to now build full applications in Javascript.
   Everything up to this point has been free and I will definitely include some free resources for these categories, but I’d be outlandish to dismiss the amazing course Andrew Mead delivers with The complete NodeJS developer course on Udemy. Not only is Andrew super involved in bringing the topics to an understanding, but also challenges you to put your knowledge to the test over and over. He covers everything from ES6–7 to version control and testing. After meeting Andrew personally, I can say with confidence that he is dedicated to his community and is always delivering at 110%.
3. When it comes to front end frameworks, React is a largely sought after skill.
   After learning Node, I would step right into Andrew’s second course for React & Redux (or Stephen Grider’s React course, both top rated in their category with amazing teaching styles). Again another paid course, but absolutely worth it! All of these courses are project driven and dig into not only what to do to build these projects, but why you’ll make the decisions you’re making.
4. FullStack JS — From Node & -insert database here- to React. Building a full application.
   If you’re looking for more practice, Stephen Grider also has a FullStack NodeJS + React course. He walks you through building a real-world application with Stripe integration, Database setup and query, Testing, OAuth, and much much more.
5. Last but not least, some of the free resources for this category!
   - NodeSchool: An open source NodeJS based curriculum, built by volunteers, deliver a massive amount of workshops for learning Node.
   - Build with React: Loads of tutorials and articles based on learning anywhere from the fundamentals of React, to advanced topics.

OKAY, I know this was a lot. It’s not going to happen overnight. You will spend countless nights questioning what you’ve learned, banging your head on your keyboard, and reading until your brain is melting. Through all of this, you will gain a pretty serious grasp on what building a web application looks like from beginning to end.

Walking into tech can be super intimidating, especially with all of the possible roles you can take on. Hopefully, this article has given you the strength to push yourself to take a dip into programming and hustle forward!

Some other upcoming topics I’ll be sharing resources on will be Databases, mobile development, UI/UX, and much much more. Stay tuned!

— Shameless Plug —
We discuss this and MUCH more inside our Bootcamped community. If you’re looking for somewhere to plant your feet, find your voice, and join a safe space to grow in this industry..look no further!

You can join us in Slack or on our new Facebook group page! Can’t wait to see some new faces!

If you enjoyed the article, throw it a 👏🏼 or thirty and let me know! Thanks for reading and hope to bring more awesome content to your screens!