Full-Stack Coding Bootcamp Essentials (focussing on web development):
- Learn how basic webpages are made, this will cover:
- HTML elements, CSS selectors, inspecting web pages using dev tools (this is very important for front-end development and a great way to learn, right click and then click inspect to try for yourself now!), positioning on a page using FlexBox/ CSS grid, animations, CSS frameworks like Bootstrap (these tends to be how CSS is used in the real world)
- First tasks/learning exercises in this area might be to create a few basic page layouts using just quadrangles on a page copying some mock-ups (much harder than it sounds!) and then to try and exactly copy some more complicated designs that incorporate links and images etc
- These first tasks should be done using an IDE or code editor like Atom or VSCode and with this we should also get a basic understanding of project structure, how files work in directories and..
- Start using the command line/terminal – essential commands, moving between directories, making files etc
- First taste of git and GitHub: learn about branches, first few exercises should be committed and “pushed up”
- Introduction to JavaScript, what is it? Why is it needed? What differentiates it from other scripting languages? (Hint: client-side) How does it interact with HTML and CSS?
- Learn the basics of JavaScript: datatypes, functions, loops, conditionals
- Learn what the Document Object Model (DOM) is and how JavaScript interacts with it.
- First mini project (for most people this will be quite challenging) – Rock, Paper, Scissors game with HTML,CSS and JavaScript. For added complexity add Lizard and Spock.
- At this point start doing little JavaScript challenges too, sign up for Codewars!
- Introduction to slightly more advanced JavaScript concepts – objects, classes, constructors, promises, what the fact it works asynchronously actually means (it’s unlikely much of this will make much sense at this point and it is where a lot of people have a bit of a freak out so don’t worry too much about these concepts, just get a bit familiar with the terminology etc)
- First big project – give yourself a week to make a classic game using vanilla Javascript with HTML/CSS, decide on which game based on your confidence with JavaScript. It’s probably a good rule of thumb to think, if you can sort of envisage how you would go about coding the game without googling every single thing (a bit of googling is fine) then it’s roughly the right level. Most basic being something like Noughts and Crosses to most advanced PacMan or Tetris. This will take a solid week of hard work, the project will be committed to GitHub and at the end of the week made “Live” using GitHub pages .
Learning a front-end framework:
- Good options are React and Vue, maybe Angular (though this is slightly less fashionable now).
- Learn answers to questions such as - What is a framework? What are the advantages of frameworks?
- Introduction to the concept of APIs using public, third-party examples (TFL and MapBox are good basic examples)
- API is a vague term and Googling what it means probably won’t get you far as it is applied so broadly, what we’re talking about here are data sources that we can query using HTTP requests. This system of requesting is a Client- Server protocol and basically how the internet works, clients (can be a user via a browser) talk to servers (there are many different types of server) via APIs (sort of).
We can start using Insomnia or Postman to make http requests to public APIs (we actually talk about “consuming” APIs in this context), and this is our first introduction to the idea of REST (“representational state transfer”) as an architectural pattern. (Don’t worry about fully understanding any of this terminology at this at this point as I found that these things only really made any sense a good few months down the line, GraphQL and REST are the only two HTTP request formats that you are likely to encounter)
- Project – Use the framework you have chosen to create an app that consumes a third party public API and does something with it. Examples include things like making a multiple choice music guessing game using the Deezer (or similar music) API or making your own version of IMDB.
Moving to creating our own Back-end:
- Learn about databases – relational vs non-relational. Learn the basics of SQL as language and and how it is used to interact with databases. Download Sequel Pro and Insomnia (or apps that do the same thing)
- At this point you can choose to stick to JavaScript and use NodeJS (JavaScript for the back-end or switch to a new language like Python or Ruby (not the most fashionable but very good for beginners).
- What is CRUD? It is an acronym for Create, Read, Update, Delete - the key things that we do with data. So far we have only done the reading bit, via the APIs used in the previous project. Soon we will soon be making full-stack applications that have their own APIs and have full CRUD functionality.
- Bit of a tangent here but I’m going to quickly do a bit of a simple introduction to the concept of the “back-end” of a web application using Mumsnet as an example as it took me a while to truly get what people were banging on about when they were talking about front end and back ends (FYI - same as client and server and these terms are used interchangeably). It’s a concept that as a user of the internet you just don’t need to think about but is absolutely fundamental to getting a handle on how websites/apps actually work.
- There are two basic types of thing needed for Mumsnet chat: users and posts.
- Both users and posts must be stored somewhere – this somewhere is a database.
- So very simply, when we talk about the “back-end” of a website we’re talking about code that deals directly with the database or the data itself.
So now we apply what we learned about CRUD when we were first learning about databases:
- Users Create themselves by signing up, they can then Create posts and read posts, they can Update themselves by name changing (they cannot Update their posts but in theory they could – this is a slightly quirk of Mumsnet though, no edit button!), they can Delete their accounts and they can (ask MNHQ) to Delete their posts. Those verbs – create, read, update, delete are all database interactions and CRUD functionality is central to how most full-stack applications are designed.
- Now we come back to the idea of an API – whereas before we were reading third party data from someone else’s database via an API we now have the tools and understanding to be able to create our own database and then to speak to it and to apply CRUD functionality.
- At this point we will learn about authentication too, how users login to their own account, JSON web tokens, passwords etc.
- Homework/exercise - create a database and the back-end code that will enable you to interact with and query your database. Put anything at all in your database- dog breeds or horror films or even members or your family. You must be able to create, read (list), update and delete through Insomnia (or similar GUI app).
- We can then come back to thinking about the other thing that is a essential component of Mumsnet and that is the bit you see in front of you in the browser– the bit that you (the user) see and interact with so we don’t have to interact with the Mumsnet database of posts and users using http requests via the command line or using Insomnia so that’s the next project, add a front-end to the database and API you have created and hook it all up so that it works together.
- Deploy your application using Heroku or similar.
- Ta dah! You are a full-stack software developer. Job done.
(I think half-way through writing that I switched to "we" as I was imagining I was an instructor doing an intro class so apologies for that...)