Full Stack Web Dev Bootcamp (August 26 - September 26, 2024)

An introduction to HyperText Markup Language to build websites.

Learn the boilerplate of every HTML page, plus basic tags such as paragraphs, headings, links aka anchors, images, audio, video, bullet lists, number lists.

You learn how to view the source code of every website and get exposed to the browser developer tools (DevTools for short).


Intro to HTML - Bootcamp Day 1 (2024-08-26)

An introduction to HyperText Markup Language to build websites.

Learn the boilerplate of every HTML page, plus basic tags such as paragraphs, headings, links aka anchors, images, audio, video, bullet lists, number lists.

You learn how to view the source code of every website and get exposed to the browser developer tools (DevTools for short).

Source Code: https://github.com/nbktechworld/full-stack-web-dev-3/tree/9318e9ac5d622e3b42156b4a31933860df2d6eaf


Learn how HTML forms are built.

In particular, learn how to create a form to authenticate a user using email and password. You learn about the tags for form, labels, input, div, button.

The lecture also shows how to use the browser Developer Tools (DevTools) to investigate Network requests.

The lecture also briefly shows to leverage frontend built-in HTML validation.

HTML Form to Sign in - Bootcamp Day 2 (2024-08-27)

Learn how HTML forms are built.

In particular, learn how to create a form to authenticate a user using email and password. You learn about the tags for form, labels, input, div, button.

The lecture also shows how to use the browser Developer Tools (DevTools) to investigate Network requests.

The lecture also briefly shows to leverage frontend built-in HTML validation.

Source Code: https://github.com/nbktechworld/full-stack-web-dev-3/tree/4f8fbd32c7acaaf6b6e81b10a1f1ccc510de538d


Learn how to use Cascading Style Sheets (CSS) to style an HTML document.

The lecture goes over the basics of changing the look and feel of an element on the website. You learn about CSS selectors and properties.

You also learn about colors and how their values can be represented in different formats.

You learn to debug and tweak CSS in real time using the browser Developer Tools (DevTools).

Learn how to link external fonts from Google Fonts.

Learn how to include icons from Font Awesome.


Intro to CSS - Bootcamp Day 3 (2024-08-28)

Learn how to use Cascading Style Sheets (CSS) to style an HTML document.

The lecture goes over the basics of changing the look and feel of an element on the website. You learn about CSS selectors and properties.

You also learn about colors and how their values can be represented in different formats.

You learn to debug and tweak CSS in real time using the browser Developer Tools (DevTools).

Learn how to link external fonts from Google Fonts.

Learn how to include icons from Font Awesome.

Source Code: https://github.com/nbktechworld/full-stack-web-dev-3/tree/500f8b3e387df4c52d6a956834a8a4f8e4c00f93

Learn how to style a sign-in form using Cascading Style Sheets (CSS).

The lecture goes over CSS selectors such as Descendant Selector and Child Selector.

You learn about the parent-child terminology for the document tree.

You learn the box model and meaning of padding, border, and margin.

The lecture teaches you to use the browser Developer Tools (DevTools) to investigate and explore CSS properties and concepts.

You also learn how to reference documentation such as from the Mozilla Developer Network (MDN).

You also learn about the hover pseudo-class and the attribute value selector.


Styling HTML Form with CSS - Bootcamp Day 4 (2024-08-29)

Learn how to style a sign-in form using Cascading Style Sheets (CSS).

The lecture goes over CSS selectors such as Descendant Selector and Child Selector.

You learn about the parent-child terminology for the document tree.

You learn the box model and meaning of padding, border, and margin.

The lecture teaches you to use the browser Developer Tools (DevTools) to investigate and explore CSS properties and concepts.

You also learn how to reference documentation such as from the Mozilla Developer Network (MDN).

You also learn about the hover pseudo-class and the attribute value selector.

Source Code: https://github.com/nbktechworld/full-stack-web-dev-3/tree/cf7cd28bdcbd75163a01d54754b0a31ae60f4aa7

Learn how to keep track of changes in your source code with the version control software Git.

Learn basic git commands such as config, init, add, commit, status, diff, log, remote, push.

The lecture also gives you an introduction to the social collaboration and coding platform GitHub.

You learn how to generate an SSH key and submit the public key to GitHub so you can authenticate automatically while pushing changes to a remote repository there.


Intro to Git and GitHub - Bootcamp Day 5 (2024-09-03)

Learn how to keep track of changes in your source code with the version control software Git.

Learn basic git commands such as config, init, add, commit, status, diff, log, remote, push.

The lecture also gives you an introduction to the social collaboration and coding platform GitHub.

You learn how to generate an SSH key and submit the public key to GitHub so you can authenticate automatically while pushing changes to a remote repository there.

Source Code: https://github.com/nbktechworld/introduction-to-git4


Learn how to get assigned to a task and collaborate on an open source project on GitHub.

The lecture gives you a brief overview of how you would go about using GitHub to go about the development of an issue that is assigned to you.

You learn how to fork an open source project, create a feature branch and make commits.

Then you learn how to submit a pull request to propose changes to the original source code.

You learn how to clean up after finishing your work, making sure your forked repository is in sync with the original repository.

Collaborating on GitHub - Bootcamp Day 6 (2024-09-04)

Learn how to use the JavaScript programming language to manipulate an HTML document.

You learn how to change CSS properties of an HTML element using JavaScript.

You learn different ways of finding an HTML element, like by id or class name. You also learn to use querySelector function.

You learn about JavaScript variables and arrays.

You learn how to build a simple image gallery with images changing pressing a next button.

Intro to JavaScript - Bootcamp Day 7 (2024-09-05)

Learn how to use the JavaScript programming language to manipulate an HTML document.

You learn how to change CSS properties of an HTML element using JavaScript.

You learn different ways of finding an HTML element, like by id or class name. You also learn to use querySelector function.

You learn about JavaScript variables and arrays.

You learn how to build a simple image gallery with images changing pressing a next button.

Source Code: https://github.com/nbktechworld/full-stack-web-dev-3/tree/9e815284f6bfacbf47cd83e0703f2cd931358399

Learn how to use HTML, CSS, and JavaScript to implement a message board, similar to the comment feature on social media websites.

The lecture teaches you how to store message board messages in a JavaScript array, then construct HTML elements styled with CSS showing each message.

You learn how to loop and repeat statements using a for-of loop.

You learn about JavaScript objects to hold arbitrary data that isn't necessarily sequential like an array.

You learn to use functions to create and inject a new element into the document object model (DOM).

You also learn how to handle form submit events and inject the new message into the list.

You learn how to create a function to reuse code logic to avoid having to repeat yourself.


Message Board with Vanilla JavaScript - Bootcamp Day 8 (2024-09-09)

Learn how to use HTML, CSS, and JavaScript to implement a message board, similar to the comment feature on social media websites.

The lecture teaches you how to store message board messages in a JavaScript array, then construct HTML elements styled with CSS showing each message.

You learn how to loop and repeat statements using a for-of loop.

You learn about JavaScript objects to hold arbitrary data that isn't necessarily sequential like an array.

You learn to use functions to create and inject a new element into the document object model (DOM).

You also learn how to handle form submit events and inject the new message into the list.

You learn how to create a function to reuse code logic to avoid having to repeat yourself.

Source Code: https://github.com/nbktechworld/full-stack-web-dev-3/tree/a5c801246982af7b324a696037e64514f9fb5b10

A brief introduction to creating websites and web applications with the React library.

The lecture teaches you how to generate a new ReactJS project using create-react-app.

Then you get an overview of how user interfaces are built in the frontend with React.

The lecture goes over converting the Messages page to a React component.

You learn the React syntax and how you can write templates in JSX, a notation that looks like HTML.

The lecture also goes over event handler functions, keeping track of state, and generating components dynamically with the map function.


Intro to ReactJS - Bootcamp Day 9 (2024-09-10)

A brief introduction to creating websites and web applications with the React library.

The lecture teaches you how to generate a new ReactJS project using create-react-app.

Then you get an overview of how user interfaces are built in the frontend with React.

The lecture goes over converting the Messages page to a React component.

You learn the React syntax and how you can write templates in JSX, a notation that looks like HTML.

The lecture also goes over event handler functions, keeping track of state, and generating components dynamically with the map function.

Source Code: https://github.com/nbktechworld/full-stack-web-dev-3/tree/4687757052a413328b600cfe4ec69f5606632020

The lecture continues the topic of building user interfaces in the frontend using JavaScript programming language and the library React.

You first learn to write a component in a separate file.

Then you learn how to retrieve data using an HTTP request through the fetch API.

You learn about JavaScript promises, how they have the state of pending, fulfilled, and rejected. You learn how to handle promises and catch any errors.

You learn about the React hook useEffect to execute a set of instructions after the first rendering of the component, using the second argument with empty array of dependencies.

You also learn how to make a POST request using fetch, passing an object for options. You learn how to set request headers and the JSON body.

The lecture also teaches you how to handle loading and error state for the user interface (UI).


Further Intro to ReactJS - Bootcamp Day 10 (2024-09-12)

The lecture continues the topic of building user interfaces in the frontend using JavaScript programming language and the library React.

You first learn to write a component in a separate file.

Then you learn how to retrieve data using an HTTP request through the fetch API.

You learn about JavaScript promises, how they have the state of pending, fulfilled, and rejected. You learn how to handle promises and catch any errors.

You learn about the React hook useEffect to execute a set of instructions after the first rendering of the component, using the second argument with empty array of dependencies.

You also learn how to make a POST request using fetch, passing an object for options. You learn how to set request headers and the JSON body.

The lecture also teaches you how to handle loading and error state for the user interface (UI).

Source Code: https://github.com/nbktechworld/full-stack-web-dev-3/tree/f84b4cb2679ba418738e227c281cdc9a160d816b

The lecture introduces Structured Query Language (SQL) and teaches you how to make some basic queries for a relational database management system (RDBMS).

You get to learn how to retrieve data, including with a filter.

You also learn how to eliminate duplicates and count.

The lecture also goes over the insertion of new data into the database tables.

You also learn how to delete data.

The lecture also teaches you how to update existing database table rows.

You also learn about PostgreSQL and pgAdmin. The lecture briefly goes over PSQL and the Query Tool, as well as creating a table using the graphical user interface (GUI).

Intro to SQL - Bootcamp Day 11 (2024-09-17)

Intro to SQL - Bootcamp Day 11 (2024-09-16)

Learn how to design and build PostgreSQL database tables for messages and users, using the pgAdmin graphical user interface (GUI) software.

You learn to create a role / user that is used to own a new database in the Postgres database server.

You also learn to create tables and the numerous ways you can use pgAdmin to help you in designing, analyzing, and maintaining databases.

You learn about the Query Tool to make SQL statements.

You learn about the PSQL tool to run commands.

You learn about certain constraints such as primary key, foreign key, unique.

The lecture also shows you how to test constraints to see if they are working.


SQL Tables for Messages and Users with pgAdmin - Bootcamp Day 12 (2024-09-17)

Learn how to design and build PostgreSQL database tables for messages and users, using the pgAdmin graphical user interface (GUI) software.

You learn to create a role / user that is used to own a new database in the Postgres database server.

You also learn to create tables and the numerous ways you can use pgAdmin to help you in designing, analyzing, and maintaining databases.

You learn about the Query Tool to make SQL statements.

You learn about the PSQL tool to run commands.

You learn about certain constraints such as primary key, foreign key, unique.

The lecture also shows you how to test constraints to see if they are working.

Source Code: https://github.com/nbktechworld/full-stack-web-dev-3/tree/3cd31aa52af338b0787bc39e9f88e499f345286d

The lecture introduces you to Express, a library used to build HTTP servers with the Nodejs (Serverside JavaScript) programming language.

Learn how to generate an NPM project and install dependencies.

Then learn how to write the code for a basic ExpressJS server that is an API that serves data in JSON format.

You also learn how to install the library pg to make SQL queries and retrieve data from the PostgreSQL server.


Intro to ExpressJS and Connecting to PostgreSQL - Bootcamp Day 13 (2024-09-18)

The lecture introduces you to Express, a library used to build HTTP servers with the Nodejs (Serverside JavaScript) programming language.

Learn how to generate an NPM project and install dependencies.

Then learn how to write the code for a basic ExpressJS server that is an API that serves data in JSON format.

You also learn how to install the library pg to make SQL queries and retrieve data from the PostgreSQL server.

Source Code: https://github.com/nbktechworld/full-stack-web-dev-3/tree/e8459bcb9cc8a21469dbb8080f578e70b3f76b69

The lecture goes over implementing the backend JSON API endpoint to create a message for the message board.


You learn how to filter and validate user input on the server side.

The lecture goes over ExpressJS middleware. How to install the cors and json middleware. 

You also learn how to make HTTP requests with Postman.

The lecture also goes over debugging Node using the Visual Studio Code debugger.

Finally the lecture goes over making a SQL database query using the pg package so a new record is inserted into the messages table.


Implement Message Creation for ExpressJS Backend - Bootcamp Day 14 (2024-09-23)

The lecture goes over implementing the backend JSON API endpoint to create a message for the message board.


You learn how to filter and validate user input on the server side.

The lecture goes over ExpressJS middleware. How to install the cors and json middleware. 

You also learn how to make HTTP requests with Postman.

The lecture also goes over debugging Node using the Visual Studio Code debugger.

Finally the lecture goes over making a SQL database query using the pg package so a new record is inserted into the messages table.

Source Code: https://github.com/nbktechworld/full-stack-web-dev-3/tree/b87f9e77683870c7f915c641811ffbe2938e7f58

A brief introduction to building mobile applications in the JavaScript programming language using the React Native framework.

The lecture goes over generating a project using create-expo-app.

Then you learn how to power up the development server and load the app on your smartphone using the Expo app.

You are introduced to basic components such as View and Text.

You learn how to make a screen scrollable.

Like React for the web, you can also keep track of state and call side effect functions.

You also learn that to make HTTP requests you can also use the fetch function.

The lecture shows you how to show a feed of images.

You also learn you can use the DevTools to debug your application.


Intro to React Native Mobile Development - Bootcamp Day 15 (2024-09-25)

A brief introduction to building mobile applications in the JavaScript programming language using the React Native framework.

The lecture goes over generating a project using create-expo-app.

Then you learn how to power up the development server and load the app on your smartphone using the Expo app.

You are introduced to basic components such as View and Text.

You learn how to make a screen scrollable.

Like React for the web, you can also keep track of state and call side effect functions.

You also learn that to make HTTP requests you can also use the fetch function.

The lecture shows you how to show a feed of images.

You also learn you can use the DevTools to debug your application.

Source Code: https://github.com/nbktechworld/full-stack-web-dev-3/tree/2668f29b43c166a92b197d9ba23f4679597aa694

The lecture continues building the mobile application using the React Native framework and the JavaScript programming language.

You learn how to navigate with a stack navigator from the react navigation library.

The lecture also goes over implementing the message board for the mobile application, involving concepts such using React hooks, making HTTP requests, debugging with DevTools, etc.


React Native Navigation and Mobile Messages - Bootcamp Day 16 (2024-09-26)

The lecture continues building the mobile application using the React Native framework and the JavaScript programming language.

You learn how to navigate with a stack navigator from the react navigation library.

The lecture also goes over implementing the message board for the mobile application, involving concepts such using React hooks, making HTTP requests, debugging with DevTools, etc.

Source Code: https://github.com/nbktechworld/full-stack-web-dev-3/tree/185a563987e865eb7e6d0d4c55bfe4e769829dbc