Learn to Code! A Course for Beginners

Explore how websites and mobile apps are built, with layered architectures and integrated systems, and see where today's coding technologies fit in an architectural diagram.

Explore how a browser requests a page via a url and http, and how front-end and back-end roles connect through api, html, css, javascript, and databases.

Explore front-end technologies like HTML, CSS, and JavaScript, and see how frameworks such as React, Angular, and View streamline development, while back-end languages and databases power the app.

Master HTML and CSS to structure and style a simple website, then set up Visual Studio Code with Prettier and Live Server to begin coding.

Create a basic html page with doctype, html, head, and body. Add headers, images with alt text, lists, links, and a simple form, then preview and format with prettier.

Style a structured HTML page by building a banner with an id and CSS, then apply flexbox layouts, grid layouts, hover effects, and Bootstrap CDN styling for forms and cards.

Master HTML basics—images, text, links, forms, and head metadata—paired with CSS styling, divs, flexbox, and positioning, plus Bootstrap prep for JavaScript.

Discover what JavaScript is and why to use it, and see how it powers front-end, back-end, and full-stack roles from vanilla js to ReactJS.

Learn to declare and manipulate variables in JavaScript using var, let, and const, log values to the console, and explore data types such as string, number, boolean, undefined, and null.

Learn how objects in JavaScript group related data and functions using curly braces and key value pairs, and access properties with dot or bracket notation, including methods that use this.

Explore arrays, including nested arrays, as a data collection, access elements with zero-based indices using square brackets, and modify or sort values with built-in methods like push, pop, and sort.

Learn to compare data with strict and loose equality, and build decisions using if statements and switch cases in JavaScript, leveraging not, and, or, and ternary operators.

Learn arithmetic and assignment operators in JavaScript, including plus, minus, multiplication, division, and modulus, with practical examples like X=5 and Y=10. Use assignment operators and parentheses for complex expressions.

Explore destructuring of objects and arrays, use rest and spread operators to combine and shallow-copy data, and understand object references to prevent unintended mutations.

master core coding concepts by reviewing variables and data types, including strings, numbers and booleans, objects and arrays, conditionals and ternary operators, and destructuring with spread operator; next, explore functions.

Learn to define and call JavaScript functions, return values, and pass parameters, using template literals and callbacks, with debugging and scope concepts for cleaner code.

Discover how scope in JavaScript controls where variables are accessible, from global to local scope, and how local variables shadow globals. Learn what to expect next with loops.

Explore loops and iterators in JavaScript, including for, while, and do-while, and learn to iterate arrays, objects, and strings with map, filter, find, and more.

Explore JavaScript classes as blueprints for objects with shared properties and methods. Define a class, instantiate with new, use this to set properties, and call Say Hello to log greetings.

Discover immutability and mutability in JavaScript, where primitive types are immutable but objects and arrays are mutable. Learn how Object.assign and the spread operator create immutable copies.

Explore the differences between synchronous and asynchronous code, and master the async/await pattern to handle API calls, promises, set timeout, fetch, and error handling with try/catch.

Master functions, fat arrow scope, and local and global variables, plus loops and iterators like for, for each, map, class construction, and difference between synchronous and asynchronous code with async/await.

Learn to identify syntax, runtime, and logic errors in JavaScript, escape quotes, and fix bugs with breakpoints and debugging tools while understanding cross-browser compatibility.

Explore the basics of React and learn to create components and manage state. Provide an overview of Agile development, plan an app from design, and finalize a minimal viable product.

Install Visual Studio Code and NodeJS, create a React app with npx using the TypeScript template, run it with yarn start, and push your code to GitHub using git.

Explore how React renders user interfaces by using a virtual DOM, components, and TSX with TypeScript. Learn state management with useState, JSX-based rendering, and the reconciliation process.

Master agile planning of the build by mapping sprints, designing with wireframes and Figma, and turning ideas into components, tickets, and backlogs for a mobile-first shopping app.

Install bootstrap, react bootstrap, redux, react redux, redux persist, react router dom, and redux toolkits with yarn add, then start the app and remove the created component.

Create a list container component in a folder using React with TypeScript, defining a props interface and an FC, then render a title prop in an h2 with Bootstrap styling.

Build a random box form component with React Bootstrap, manage state via onChange, enforce string and number types, apply TypeScript props, and validate min and max lengths.

Render a dynamic list with bootstrap list group items in React by mapping over an array, using keys, passing props, and incorporating a TypeScript interface and checkboxes.

Commit your code and push to GitHub using git status, git add, and git commit -m to save; revert with git reset --hard to the last commit if needed.

Learn to build a bootstrap footer with two buttons—a clear and a create shopping list button—wire onClick handlers, and add the component to the home screen with routing.

Create a shopping list interface using React Bootstrap tabs and accordions, with per meal and per ingredient tabs, navigation, and TypeScript interfaces for meals and ingredients.

Create an ingredients card by building an ingredients list component, testing with an ingredients array, and rendering category ingredients with a React fragment inside Bootstrap cards header and body.

Create a progress counter component using a bootstrap badge, accepting count and total props, display the numbers inside the badge, and integrate it into the ingredients list with mock data.

Learn to use Redux with Reactjs to centralize app state, dispatch actions, and update components via reducers and a Redux store, with persist to retain data.

Wire mock data from the helpers into the Redux store, create the meals reducer and a get meals for group selector, and connect the list container to show group-specific meals.

Click a list item to toggle its checked state by dispatching an update meal action, then update the state in the meals reducer using the group id and meal payload.

Implement a random box form by resetting all selections, dispatching a set random meals action with the group id and numeric payload, and updating the state accordingly.

Implement footer buttons with redux actions to clear selected meals and create a two-tab shopping list using reducers and selectors.

Learn to manage a shopping list by extracting meals' ingredients, unchecking items, and using a selector and reducer to toggle meal and ingredient checked states.

Learn to manage ingredients in a redux-driven shopping list by flattening arrays and categorizing items. Update state with dispatch, use selectors, and rely on mock data for UI previews.

Implement a progress counter by creating a selector that computes total, checked, and unchecked ingredients from the shopping state, using map and flat to derive counts for React components.

Style the React Bootstrap page by adding a separate CSS file and applying a custom class to the footer buttons to fix their position at the bottom.

Set up a React.js development environment, learn how React.js code runs, and plan an app using agile, then explore Yarn, components, state, hooks, Git, Redux, and the use state selector.

Write and run tests for the meals reducer using Jest and Redux patterns, describe blocks, and it tests; verify initial state, dispatch updates, and assert payloads and state changes.

sign up for heroku, deploy your app, connect GitHub, and enable automatic deployments from master; fix a build error by removing duplicate package lock files, then open the app.

Learn how websites and apps are built with HTML, CSS, JavaScript, tools; debug, build React components, manage redux store and reducers, test with jest, and deploy to GitHub and Heroku.

Explore how a Scrum developer team works, featuring a Scrum master, diverse developers, data nerds, and a product owner who aligns with customer needs to build software.

Choose your path in web and app development, learn the basics, build a portfolio, network, and start applying for jobs.