Vanilla JavaScript Projects


Anjana Vakil

Anjana Vakil

Software Engineer & Educator
Vanilla JavaScript Projects

Check out a free preview of the full Vanilla JavaScript Projects course

The "Introduction" Lesson is part of the full, Vanilla JavaScript Projects course featured in this preview video. Here's what you'd learn in this lesson:

Anjana Vakil introduces the course and explains that it will cover more advanced features of JavaScript, functional programming, object-oriented programming, and working with browser APIs. Several projects will be created throughout the course to practice and reinforce the advanced concepts presented.


Transcript from the "Introduction" Lesson

>> Hello and welcome, everyone, to a JavaScript adventure that I hope proves fun and fruitful for all of us. My name is Anjana Vakil. And I hope we're all excited to be here, to not just talk about some features and tools and ecosystems related to the day-to-day lives of what we do as professional JavaScript developers.

But also to put those into practice with some hands-on projects that we are going to work through together and build up into a project that I hope everyone is going to be able to take on and keep working on after this course. So thank you all so much for joining me for this.

There is a little site up at where you can find these slides and all of the links to the different projects we're gonna be working on, and all of the resources, and many, many gifts that I will be showing you [LAUGH] throughout the course. And why don't we take a moment to set ourselves up for success by wrapping our heads around what we're gonna be looking at and thinking about during the course, and where we're gonna take it from here.

So this is intended to essentially be a follow on to another course I had done called JavaScript First Steps to Professional. So we do all work from the assumption that we have taken that course, we are familiar with the concepts covered in that course. However, if you haven't, that'll be there, we can go back as we need to.

But essentially, if that course focused more on some of the basic language features and concepts and mental models that we need for JavaScript. The hope for this course, the aim for our hands on adventure here is to start moving from the theoretical in a nice little tidy artificial classroom environment of writing small JavaScript exercises into the wide weird world of real world JS development.

And that world is very large and in charge. So this is not by any means a comprehensive overview of everything there is to know about being a professional level JavaScript developer, by no stretch of the imagination. It is, however, another step forward, hopefully, into the continuous, infinite journey that we all have in front of us of learning JavaScript, because JavaScript is a living breathing language.

It is evolving as we learn it. So there is always something new to learn, always something new to discover. And we are focusing here on trying to move forward and not necessarily get to an end destination. It's the journey, not the destination. So the plan is we are going to approach this journey in three parts.

So in the first part of the course, we're gonna talk about some more features of JavaScript as a language that are a little bit more advanced, perhaps a little bit more complex, than some of the things that we've seen before. We'll also be doing some review of some of the concepts that we have seen and worked with, but perhaps just want a refresher on.

But some of the new things that we're going to be talking about, if you haven't explored these very much in JavaScript. Are, for example, how does JavaScript approach writing programs in different paradigms of programming, like functional programming, and object-oriented programming? What are some of the conveniences and features of the language that we can use to write code in those different styles?

And how does that feel, and how does that work? We're also gonna, in particular, be talking a lot about objects. Because in JavaScript are of the most important and are going to be something we need to get very cozy with. And we're gonna be talking about some fancy objects that can do special things.

And we're gonna be looking at JavaScript, not just in the sense of a language with certain syntax and certain built-in objects and variables that we can work with, but also as a language that sits in the heart of the web browser, when we're talking about it on the front end.

And what the web browser gives to us in terms of all of these amazing APIs for doing things for the user, with the user's computer, all of the different wonderful web capabilities that the browser exposes to us that we have access to through JavaScript. So we're gonna be talking about some of those browser APIs and starting to get our feet wet with poking around the massive ecosystem of things that we can do with JavaScript and the browser.

And in part 1, we're gonna be focusing on projects that are what I like to think of as quick wins. So relatively small, focused on a particular concept or skill that we are learning. And we're going to hopefully be feeling good about getting some things implemented from the get go.

So that's part 1. Then as we move into part 2, we're going to zoom out a little bit. And we're gonna be thinking not just about the features of the language and the browser environment, but also some of the tools and tooling that we need to function as our day-to-day lives as developers.

And not just write code in our browser console to check whether one value is or is not equal to another [LAUGH] value in JavaScript and things like that, but also to actually build things for the web. So we're gonna talk about things like version control, and Git, and GitHub.

We're gonna talk about NodeJS, which is a way to run JavaScript out of the browser in the backend environment. We're gonna talk about npm and the JavaScript package, Situation, [LAUGH] which there's plenty to say about. We're also gonna be looking at a tool called Vite, which is going to help us start developing in a workflow that is very common to the professional JavaScript developer's day to day.

And is going to let us move from the local environment where we are just writing code on our own machine to deploying it to the interwebs for the rest of the world to see. And we're gonna be working on some selfie-related projects, [LAUGH] moving through this part of the course.

So I won't give you any spoilers there, but we will be seeing a lot of memes and a lot of selfies of Anjana, so I apologize in advance. [LAUGH] And then in part 3, we're really gonna open things up, and it's gonna start to become more of a choose your own adventure.

So as we learn these features of the ecosystem, some of the tools, we're going to look at the kind of higher level, Overwhelm that might ensue from having a massive language like JavaScript in terms of its reach, and its community, and its ecosystem, and all of the things that we can do with the browser and on the backend and all of this stuff.

And we're gonna start to choose our own adventure a little bit, with taking a given project and making our own version of it, and adding new features, changing the way things work. And really trying to make things our own and start exploring the parts of web development, which is a vast universe that we are excited to learn and excited to play with.

So we're going to be thinking about it as a little bit more of a hackathon than a particular exercise project in part 3 of the course. So that is the grand plan. These are some of the main concepts we're gonna cover. And in general, let's keep in mind that we are all, especially in the web development community, coming from different backgrounds, we have different levels of experience.

Some of us have been working with computers for decades, some of us have just gotten our first jobs in tech, and we are all welcome and part of this collective journey. So there is a spot for everyone, there is something everyone can learn and share with other people.

And the goal here is to focus on moving forward, again, and growing our skills and growing our capabilities to function in this massive ecosystem of web development, and not on achieving certain goals. So the projects will just be a way for us to start beefing up our JavaScript skills.

And as we go, whatever questions come up, whatever rabbit holes we wanna dive down, more than welcome. This is a journey, like I said, and we're all gonna be learning from each other, and hopefully we're gonna end up somewhere interesting that's further along in our journey than we started out.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now