Full Stack Web Dev Bootcamp (July 01 - July 12, 2024)

The lecture goes over HyperText Markup Language (HTML), a technology that is used to build websites. 

Using Visual Studio Code, the instructor goes over setting up a basic web page, placing the source code in the src directory. The extension Microsoft Live Preview is used to get a quick website preview on the site as the code is written.

A boilerplate HTML structure is laid out and basic elements are taught, including paragraphs, headings, emphasis tags, links, images, audio, video, bullet lists, number lists.

Intro to HTML - Full Stack Web Dev Boocamp Day 1 (2024-07-01)

The lecture goes over HyperText Markup Language (HTML), a technology that is used to build websites. 

Using Visual Studio Code, the instructor goes over setting up a basic web page, placing the source code in the src directory. The extension Microsoft Live Preview is used to get a quick website preview on the site as the code is written.

A boilerplate HTML structure is laid out and basic elements are taught, including paragraphs, headings, emphasis tags, links, images, audio, video, bullet lists, number lists.

Source Code: https://github.com/nbktechworld/full-stack-web-dev-2/tree/a50983afdbc1019da35ac600cf1d7825eb7987a0

In this lecture the instructor goes over building a sign up form for a website.

With the help of a volunteer, the form is built using many kinds of controls such as text fields (email, password), date fields, multiline text, radio buttons, select / dropdown, checkboxes.

You learn how to submit the form and use the Developer Tools (DevTools) to debug your submission and the data that was sent to the server. You get to see the request and response in the Network tab of the DevTools.


HTML Forms - Full Stack Web Dev Bootcamp Day 1 (2024-07-01)

In this lecture the instructor goes over building a sign up form for a website.

With the help of a volunteer, the form is built using many kinds of controls such as text fields (email, password), date fields, multiline text, radio buttons, select / dropdown, checkboxes.

You learn how to submit the form and use the Developer Tools (DevTools) to debug your submission and the data that was sent to the server. You get to see the request and response in the Network tab of the DevTools.

Source Code: https://github.com/nbktechworld/full-stack-web-dev-2/tree/a50983afdbc1019da35ac600cf1d7825eb7987a0

In this lecture you learn about Cascading Style Sheets (CSS) to style a website.

You learn some basic selectors and a couple of CSS properties to change the look and feel of an HTML document.

You learn how to use the browser Developer Tools (DevTools) to debug and tweak styles in real time.

You learn about colors and color codes. You get to understand what contrast ratio is and how important it is for accessibility.

You learn that Visual Studio Code can clarify the meaning of CSS selectors if you leave the mouse pointer over them.


Intro to CSS - Full Stack Web Dev Bootcamp Day 2 (2024-07-02)

In this lecture you learn about Cascading Style Sheets (CSS) to style a website.

You learn some basic selectors and a couple of CSS properties to change the look and feel of an HTML document.

You learn how to use the browser Developer Tools (DevTools) to debug and tweak styles in real time.

You learn about colors and color codes. You get to understand what contrast ratio is and how important it is for accessibility.

You learn that Visual Studio Code can clarify the meaning of CSS selectors if you leave the mouse pointer over them.

Source Code: https://github.com/nbktechworld/full-stack-web-dev-2/commit/ffbccb7d0a4abe35040fd55d7f281348c9708986


In this lecture you learn more about Cascading Style Sheets (CSS). In particular, you learn to style and improve the look and feel of an HTML form to sign up users.

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

You learn to further debug in the browser DevTools.

You learn a technique to centralize CSS code in one form group class, so all form group containers change accordingly.

You learn some other CSS properties, and how to control the width of items using the parent container. You get to understand how a percentage width by default does not include padding and border in its computation. However that behavior can be changed with a CSS property.


Styling HTML Form with CSS - Full Stack Web Dev Bootcamp Day 2 (2024-07-02)

In this lecture you learn more about Cascading Style Sheets (CSS). In particular, you learn to style and improve the look and feel of an HTML form to sign up users.

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

You learn to further debug in the browser DevTools.

You learn a technique to centralize CSS code in one form group class, so all form group containers change accordingly.

You learn some other CSS properties, and how to control the width of items using the parent container. You get to understand how a percentage width by default does not include padding and border in its computation. However that behavior can be changed with a CSS property.

Source Code: https://github.com/nbktechworld/full-stack-web-dev-2/commit/3fb899e04e7b45ed4068d8117863f5c6f4e1b2c5


The lecture gives a brief introduction to the Git program for version control. 

You learn how to initialize a Git repository and how to use many commands to go about tracking file changes.

You also learn about GitHub and how you can store the source code there.


Intro to Git & GitHub - Full Stack Web Dev Bootcamp Day 3 (2024-07-03)

The lecture goes over GitHub, the social coding platform for collaboration.

You learn how to navigate Issues, Projects, and take something to work on. Then you create your own copy of the original repository, which is called the Fork feature of GitHub. Note fork is not a feature of Git.

The lecture goes over creating a feature branch and proposing changes to the original repository. You learn how to clean up and keep your fork in sync with the original repository.


Collaborating on GitHub - Full Stack Web Dev Bootcamp Day 3 (2024-07-03)

The lecture goes over JavaScript, the third element of frontend development.

HTML is used to structure a document. CSS is used to style it. JavaScript is a programming language used to manipulate the document, leading to highly interactive and dynamic web pages.

You are introduced to basic concepts such as doing arithmetic.

Then you are introduced to an object literal. Remember, you see isolated curly braces, you see an object. You can use an object to store information in a structure of key-value pairs (called properties and their values) that are separated by a comma.

The lecture also mentions the concept of a function, that is a plan for a set of instructions to be called when you execute the function. We also say we call the function, so its instructions are run. We learn about the concept of input, processing, and output.

You learn to find elements in the document by its id. Then you learn to use JavaScript to change CSS properties of an element.

You learn about number types and the string type, which is a sequence of characters, always enclosed by quotes. You can use either single or double quotes to make a string.

You learn about variables, which are defined as special keywords that hold a reference or hook to a certain thing. For example, you can store a number in a variable. You can then use the variable names if you ever need the values they point to. As an example, you see how variables can be used in a similar way as  equation variables in Mathematics.

The lecture goes back to further explaining objects and how to access its property values.

You also learn how to use JavaScript to change the text content of an element.

Finally, the lecture ends with letting you know how to move the JavaScript code to a separate, external file with the js extension, similar to how it is done with CSS.


Intro to JavaScript - Full Stack Web Dev Bootcamp Day 4 (2024-07-04)

The lecture goes over JavaScript, the third element of frontend development.

HTML is used to structure a document. CSS is used to style it. JavaScript is a programming language used to manipulate the document, leading to highly interactive and dynamic web pages.

You are introduced to basic concepts such as doing arithmetic.

Then you are introduced to an object literal. Remember, you see isolated curly braces, you see an object. You can use an object to store information in a structure of key-value pairs (called properties and their values) that are separated by a comma.

The lecture also mentions the concept of a function, that is a plan for a set of instructions to be called when you execute the function. We also say we call the function, so its instructions are run. We learn about the concept of input, processing, and output.

You learn to find elements in the document by its id. Then you learn to use JavaScript to change CSS properties of an element.

You learn about number types and the string type, which is a sequence of characters, always enclosed by quotes. You can use either single or double quotes to make a string.

You learn about variables, which are defined as special keywords that hold a reference or hook to a certain thing. For example, you can store a number in a variable. You can then use the variable names if you ever need the values they point to. As an example, you see how variables can be used in a similar way as  equation variables in Mathematics.

The lecture goes back to further explaining objects and how to access its property values.

You also learn how to use JavaScript to change the text content of an element.

Finally, the lecture ends with letting you know how to move the JavaScript code to a separate, external file with the js extension, similar to how it is done with CSS.

Source Code: https://github.com/nbktechworld/full-stack-web-dev-2/tree/db445731de0b196b4ea0ba1af0fb72cbf76ee466

The lecture goes over more JavaScript.

You learn how to play a sound when you click a button.

You learn to make a prototype image gallery with a button that when click shows the next image.

Along the way you learn about JavaScript arrays, which are lists of things. Those things are called elements. You can access array elements using the square bracket notation. You need to provide the index or position of the element in the array, counting from zero. So the first element would be accessible at index 0. Not one. The number of elements in array is called its length.

The lecture goes over how to make a comment form so users can leave a message that is added to the message list in the page. This functionality is very similar to when you post a comment on the social media platforms such as Twitter or X, Facebook, Instagram, etc.

The lecture also teaches you how to debug JavaScript code in the browser with the Developer Tools (DevTools). You learn how to set up breakpoints and walk through the code, investigating the variables and getting to know the various objects used, such as the event object.

You also get to learn how to fabricate HTML elements in memory, manipulate them, and finally inject them into the document object model (DOM).


More JavaScript - Full Stack Web Dev Bootcamp Day 4 (2024-07-04)

The lecture goes over more JavaScript.

You learn how to play a sound when you click a button.

You learn to make a prototype image gallery with a button that when click shows the next image.

Along the way you learn about JavaScript arrays, which are lists of things. Those things are called elements. You can access array elements using the square bracket notation. You need to provide the index or position of the element in the array, counting from zero. So the first element would be accessible at index 0. Not one. The number of elements in array is called its length.

The lecture goes over how to make a comment form so users can leave a message that is added to the message list in the page. This functionality is very similar to when you post a comment on the social media platforms such as Twitter or X, Facebook, Instagram, etc.

The lecture also teaches you how to debug JavaScript code in the browser with the Developer Tools (DevTools). You learn how to set up breakpoints and walk through the code, investigating the variables and getting to know the various objects used, such as the event object.

You also get to learn how to fabricate HTML elements in memory, manipulate them, and finally inject them into the document object model (DOM).

Source Code: https://github.com/nbktechworld/full-stack-web-dev-2/tree/cd3b94fb6eb7db8713dcf86c57f57048e9859c02

The lecture goes over using the library React to build user interfaces.

Intro to Reactjs - Full Stack Web Dev Bootcamp Day 5 (2024-07-08)

This lecture shows how to do client-side transitions with React Router.

Then it shows how to load messages from a backend and how to post a new comment using the same fake server.


React Router and Retrieving Messages - Full Stack Web Dev Bootcamp Day 5 (2024-07-08)

This lecture shows how to do client-side transitions with React Router.

Then it shows how to load messages from a backend and how to post a new comment using the same fake server.

Source Code: https://github.com/nbktechworld/full-stack-web-dev-2/tree/1781f79c9ae0d82e30c2bcc99c28763658c3dc7e

The lecture goes over Structured Query Language (SQL). Some people pronounce it like sequel.

SQL is the most popular kind in Relational Database Management Systems (RDBMS).

There are many implementations of SQL, such as MySQL, PostgreSQL, Microsoft SQL Server, Oracle Database, etc.

Learning SQL in general, you will be able to work with any specific implementation easily because it is a standard language.

Learn how to retrieve data, insert data, how to delete, how to update.

Learn how to join two tables together.

Learn how to create a table.

Intro to SQL - Full Stack Web Dev Bootcamp Day 6 (2024-07-09)

Learn how to use pgAdmin, the graphical user interface (GUI) client for PostgreSQL. Create tables for messages and users.

Learn about the PSQL tool. It's a command line to make PostgreSQL queries.

Learn about the Query tool. It's the graphical equivalent of PSQL.

Learn how to create a user/role. Then create a database.

Then learn to create tables, navigate pgAdmin through its various functions to help you in performing SQL queries through a user interface.

You learn that clicks in pgAdmin actually translate to executing a SQL command behind the scenes.


pgAdmin and Creating Tables with PostgreSQL - Full Stack Web Dev Bootcamp Day 6 (2024-07-09)

Learn how to use pgAdmin, the graphical user interface (GUI) client for PostgreSQL. Create tables for messages and users.

Learn about the PSQL tool. It's a command line to make PostgreSQL queries.

Learn about the Query tool. It's the graphical equivalent of PSQL.

Learn how to create a user/role. Then create a database.

Then learn to create tables, navigate pgAdmin through its various functions to help you in performing SQL queries through a user interface.

You learn that clicks in pgAdmin actually translate to executing a SQL command behind the scenes.

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

Learn to build a backend JSON RESTful API for the React app that was built to leave comments on a page.

JavaScript can now be used outside the browser, as a general purpose language called Nodejs.

The Express library (code written by somebody else) makes it easy to create an HTTP server.

Third-party modules or packages can be downloaded from the NPM registry.

The lecture goes over creating an endpoint or route to retrieve all the messages and load them on the frontend.

You leverage the pg library to create a client to access to the PostgreSQL database.

Intro to Expressjs - Full Stack Web Dev Bootcamp Day 7 (2024-07-10)

The lecture continues building the backend for the React app, the comment feature. 

It leverages the messages table created with PostgreSQL.

You learn to build more endpoints, such as accessing a single message and creating a message.

You learn how to debug a Node.js Express app using Visual Studio Code debugger, using breakpoints.

You learn how to send back JSON responses, leverage middleware, etc.


Backend for Messages - Full Stack Web Dev Bootcamp Day 7 (2024-07-10)

The lecture continues building the backend for the React app, the comment feature. 

It leverages the messages table created with PostgreSQL.

You learn to build more endpoints, such as accessing a single message and creating a message.

You learn how to debug a Node.js Express app using Visual Studio Code debugger, using breakpoints.

You learn how to send back JSON responses, leverage middleware, etc.

Source Code: https://github.com/nbktechworld/full-stack-web-dev-2/tree/441d4e6912e37c6f05224fefbedd0ecd8669cf6a

In this lecture we learn how to build mobile apps with the React Native framework.

You learn how to write a cross-platform (Android and iOS) mobile application using the JavaScript programming language.

Intro to React Native to Build Mobile Apps - Full Stack Web Dev Bootcamp Day 8 (2024-07-11)

The lecture goes over navigation and retrieving data.

You learn how to use the stack navigator.

You learn how to load data as well as create new records through a backend JSON API.

You learn how to use the JavaScript DevTools debugger.


React Native Navigation and Data Retrieval - Full Stack Web Dev Bootcamp Day 8 (2024-07-11)

The lecture goes over navigation and retrieving data.

You learn how to use the stack navigator.

You learn how to load data as well as create new records through a backend JSON API.

You learn how to use the JavaScript DevTools debugger.

Source Code: https://github.com/nbktechworld/full-stack-web-dev-2/tree/c8897f542806bffc3fca3cae0c8bc2cdc67b3e09