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)

# HTML Forms Tutorial Summary

In this tutorial, we learned the essentials of building HTML forms, which are crucial for input collection on websites.

## Setting Up the Environment
1. **Live Share Tool**: Use the Live Share extension for collaborative coding.
2. **HTML File**: Start editing a file named `signup.html`.

## Building a Basic Form
1. **Form Element**: Wrap inputs in a `<form>` tag. This functions as the container for all form elements.
2. **Input Elements**: Utilize `<input>` tags for various user inputs like email, password, date, etc.
   - **Email Input**: `<input type="email">` validates email format.
   - **Password Input**: `<input type="password">` hides the input characters.
   - **Date Input**: `<input type="date">` provides a date picker.

## Grouping Inputs
- Use `<div>` elements to group `<label>` and `<input>` elements for better organization.
- Labels inform users what information to provide. Create associations between labels and inputs using the `for` attribute in `<label>` and `id` in `<input>`.

## Different Input Types
- **Text Area**: For multi-line text, use the `<textarea>` tag.
- **Radio Buttons**: Allow selection of one option from multiple choices using `<input type="radio">`.
   - Group radio buttons by giving them the same `name` attribute.
- **Select Dropdown**: Use the `<select>` tag with `<option>` elements for dropdown menus.
- **Checkboxes**: For options to be checked, `<input type="checkbox">` elements can be used.

## Form Submission
1. **Submission Methods**: Set the `method` attribute to `POST` to send input data securely, avoiding sensitive information in the URL.
2. **Action Attribute**: The `action` attribute determines where the form data is sent upon submission.

## Validation
- **Required Fields**: Use the `required` attribute to ensure fields are filled out before submission.
- **Frontend vs. Backend Validation**: Frontend validation improves user experience, but backend validation is crucial for data integrity.

## Additional Features
- **Button for Submission**: Inputs can submit the form with `<input type="submit">` or `<button type="submit">`.
- **Associating Labels with Inputs**: Use the `id` attribute in inputs and reference them in labels to enhance usability.

## Conclusion
Understanding how to build and validate forms is vital for any web developer. HTML forms are versatile and can capture various types of user input, making them a key component of interactive web applications. As a best practice, always validate data on the server side in addition to any client-side validations.

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)

# Summary of Collaboration on GitHub

This guide outlines the process for contributing to open source projects on GitHub, including how to find repositories, handle issues, and propose changes.

## Steps for Contributing

### 1. Finding a Repository
- Start by locating a repository that interests you.
- Browse through the `Issues` section of the repository to find tasks you'd like to tackle.

### 2. Expressing Interest
- Comment on the issue you're interested in, asking to be assigned to it.
- Wait for the maintainer to assign you before starting work to prevent duplicate efforts.

### 3. Forking the Repository
- Create a fork of the repository, which makes a personal copy in your GitHub account.
- Clone the fork to your local machine to work on it.

### 4. Creating a Feature Branch
- Switch to your local master branch:
  ```bash
  git checkout master
  ```
- Create a new feature branch to work on the issue:
  ```bash
  git checkout -b feature-branch-name
  ```

### 5. Making Changes
- Make changes to the code as required by the issue.
- Use commands like `git add` and `git commit` to stage and save your changes.

### 6. Pushing Changes and Creating a Pull Request
- Push your changes to your fork:
  ```bash
  git push origin feature-branch-name
  ```
- Go to your GitHub fork and click on "Compare & Pull Request."
- Fill in the title and description of the pull request, linking to the issue.

### 7. Code Review
- After submitting, the maintainer or other contributors will review your changes.
- Address any feedback by making additional commits on the same branch and pushing again.

### 8. Merging Changes
- Once approved, the maintainer will merge your changes into the original repository.
- Clean up by deleting your feature branch both locally and on GitHub.

### 9. Syncing with the Original Repository
- Sync your fork with the original by adding it as an `upstream` remote:
  ```bash
  git remote add upstream original-repo-url
  ```
- Fetch and merge the latest changes from upstream:
  ```bash
  git fetch upstream
  git merge upstream/master
  ```

### 10. Closing Issues
- Ensure to close the relevant issue on GitHub, which can happen automatically if linked correctly in your pull request description.

## Using GitHub Projects
GitHub Projects allows you to manage tasks visually through a Kanban-style board. Move tasks between columns like "To Do," "In Progress," and "Done" as you work through issues.

## Searching for Issues
To find opportunities to contribute, you can explore GitHub and filter issues by labels (like "good first issue") to find beginner-friendly tasks.

## Conclusion
This process illustrates a collaborative workflow on GitHub for contributions to open source projects. If you have any questions or would like to contribute to the Orbit Camp project, check the issues and start your journey!

--- 
Feel free to use this guide as a reference when contributing to repositories on GitHub.

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)

# Summary of SQL Table Creation and PGAdmin Use

## Course Overview
The session focuses on utilizing SQL to create and manage a database table for a web application using Postgres and PGAdmin.

## Prerequisites
- Ensure Postgres and PGAdmin are installed.

## Application Context
- The application has a React-based web client that allows users to leave comments.
- Currently, comments are not persisted in a database and are fetched from an external backend.

## Designing the Database Table
### Table Requirements
The goal is to create a `messages` table with the following columns:
1. **ID** (Primary Key, Serial): Unique identifier for each message.
2. **Comment** (Text): The text typed by the user.
3. **Created At** (Timestamp): The date and time the comment was created.
4. **Author ID** (Foreign Key): Links to the user's ID in the users table.

### Creating the Table
1. Use PGAdmin to connect to the Postgres server.
2. Create a new database using a custom username instead of the default Postgres user.
3. Create the `messages` table and define its columns.

## Using PGAdmin
- **Registering a Server**: Right-click to register a new server.
- **Creating a Database**: Right-click on Databases and select "Create Database".
- **Creating a Table**: Use "Create Table" under Schemas > Public.
- **Defining Data Types**: Choose appropriate types for each column (e.g., Serial for ID, Character Varying for comments, etc.).
- **Setting Constraints**: Ensure primary key and foreign key constraints are set properly.

## Querying with PSQL
- **Accessing PSQL**: Use the PSQL tool for command-line interactions.
- **Basic Commands**: Run commands like `SELECT * FROM messages;`.
- **Inserting Data**: Use the `INSERT` command with proper values, taking care of syntax.

## Creating a Users Table
- Build a `users` table with relevant fields such as email, password, date of birth, and preferences about terms and subscriptions.

## Features of PGAdmin
- **GUI Convenience**: PGAdmin helps visualize database structures and perform operations through a GUI rather than manually writing SQL.
- **Query Tool**: Execute SQL commands and see results in a structured way.
- **Creating and Managing Tables**: Easily create and manipulate table structures directly within the UI.

## Next Steps
- The goal is to connect the front end with the back end using the Express.js framework.
- Query the messages table for persistence of user comments in the app.

## Conclusion
The session concludes with instructions on integrating the front end with the backend to facilitate a complete web application experience. Questions are welcomed to clarify any concepts discussed.

--- 

This summary captures the key points and processes discussed in the meeting regarding the creation and management of a SQL table using Postgres and PGAdmin.

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

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

Lessons