Full Stack Web Dev Bootcamp (June 17 - June 28, 2024)

In this lesson we are introduced to HyperText Markup Language that is used to construct the structure of all websites in the web today.

HTML is a part of frontend web development, along with CSS, and JavaScript.

We go over the basic boilerplate structure and syntax, including some basic elements.

We learn about paragraphs, heading level 1 through 6, tags to mark text with strong importance and to emphasize it, bold tag, idiomatic tag.

We also look into how to create links with the anchor tag. We learn about how elements can receive additional information through attributes. We learn how to open links in a new tab.

The lesson also teaches you how to show an image and resize it. It also mentions about accessibility and how important the alt is for visually impaired users who leverage a screen reader app to read out loud the content of a web page.

We learn about bullet-point lists and numbered lists, also known as unordered and ordered lists, respectively. 

We also go over playing an audio file and showing a video.


Intro to HTML (Document Two Sections) - Full Stack Web Dev Bootcamp Day 1 (2024-06-17)

In this lesson we are introduced to HyperText Markup Language that is used to construct the structure of all websites in the web today.

HTML is a part of frontend web development, along with CSS, and JavaScript.

We go over the basic boilerplate structure and syntax, including some basic elements.

We learn about paragraphs, heading level 1 through 6, tags to mark text with strong importance and to emphasize it, bold tag, idiomatic tag.

We also look into how to create links with the anchor tag. We learn about how elements can receive additional information through attributes. We learn how to open links in a new tab.

The lesson also teaches you how to show an image and resize it. It also mentions about accessibility and how important the alt is for visually impaired users who leverage a screen reader app to read out loud the content of a web page.

We learn about bullet-point lists and numbered lists, also known as unordered and ordered lists, respectively. 

We also go over playing an audio file and showing a video.

Source Code: https://github.com/nbktechworld/full-stack-web-dev/tree/f3bb0ec82a1b6527a309cb35c0cfcccb2d17f58a/src

This lecture goes over HTML forms.

You first learn that you need to use the form tag as the container for all the form input elements.

You get to know the input tag that is very versatile and can take on many forms via the type attribute.

You learn to create a simple sign up form that has the user type in a name, email, password, date of birth. All of that using the input element.

You learn how the input of type email can validate the email format (like requiring the user type an at sign).

You see how the input of type password hides the characters the user types.

You see how the input of type date shows a calendar widget where the user can click a specific date. 

The lesson also goes over inputs of type radio, where you have to pick from a list of choices. You learn that enclosing the input and text in a label allows the user to pick a choice by just clicking the text instead of the circle.

You learn to group radio buttons under the same name attribute. 

Along the way you also learn that the name attribute is necessary for the backend server to understand what information is being sent.

The lecture also shows how to allow the user to type multiple lines with a textarea element.

You also learn how to create checkboxes to mark more than once choice.

Along the way you learn about the Developer Tools (DevTools) that is opened by pressing F12 or right-click anywhere, Inspect. You learn to monitor the form submission and see if data is being sent correctly.

You learn about GET versus POST method of HyperText Transfer Protocol (HTTP). For forms, you want to choose POST to avoid exposing the form data in the URL, because servers usually log the URL.

The lesson briefly goes over built-in HTML form validation.

You also find out the frontend can be tampered with using the DevTools, so you should always treat the frontend as insecure by default. All the enforcement of rules and validation should always be implemented in the backend server.


Intro to HTML Forms - Full Stack Web Dev Bootcamp Day 1 (2024-06-17)

This lecture goes over HTML forms.

You first learn that you need to use the form tag as the container for all the form input elements.

You get to know the input tag that is very versatile and can take on many forms via the type attribute.

You learn to create a simple sign up form that has the user type in a name, email, password, date of birth. All of that using the input element.

You learn how the input of type email can validate the email format (like requiring the user type an at sign).

You see how the input of type password hides the characters the user types.

You see how the input of type date shows a calendar widget where the user can click a specific date. 

The lesson also goes over inputs of type radio, where you have to pick from a list of choices. You learn that enclosing the input and text in a label allows the user to pick a choice by just clicking the text instead of the circle.

You learn to group radio buttons under the same name attribute. 

Along the way you also learn that the name attribute is necessary for the backend server to understand what information is being sent.

The lecture also shows how to allow the user to type multiple lines with a textarea element.

You also learn how to create checkboxes to mark more than once choice.

Along the way you learn about the Developer Tools (DevTools) that is opened by pressing F12 or right-click anywhere, Inspect. You learn to monitor the form submission and see if data is being sent correctly.

You learn about GET versus POST method of HyperText Transfer Protocol (HTTP). For forms, you want to choose POST to avoid exposing the form data in the URL, because servers usually log the URL.

The lesson briefly goes over built-in HTML form validation.

You also find out the frontend can be tampered with using the DevTools, so you should always treat the frontend as insecure by default. All the enforcement of rules and validation should always be implemented in the backend server.

Source Code: https://github.com/nbktechworld/full-stack-web-dev/tree/23ffac15faf9188226ef5afd9a71abb04e7a78e5/src

In this lecture we learn about Cascading Style Sheets (CSS).

We first learn how to change the visual aspect of an HTML element using the style tag. Then we move the code to an external and separate stylesheet file whose filename ends in dot css.

We learn how to write a CSS selector going by the element name to target all elements of such name in a document.

We learn some basic CSS properties to change text color, background color, text alignment.

You also learn how to open the Developer Tools (DevTools) and use it to debug styling. It is very useful to play around and figure out the real time what the best colors, size, etc, are for your application. Then remember to copy the code back to your text editor because DevTools changes are temporary and you lose them after reloading the page.

We learn about inline and block elements using the display property.

We learn about the box model that is comprised of margin, border, and padding. The margin is the space outside. The border is what's between outside and inside. The padding is the space inside.

We learn how to redecorate an unordered list and turn it into navigation link buttons.

We learn some pseudo-classes like :hover, :active, :last-child that are applied to the selector to target it under a particular user interface state.

You learn about how classes are very useful to reuse the styles already written by somebody else. Bootstrap was used as an example.


Intro to CSS - Full Stack Web Dev Bootcamp Day 2 (2024-06-18)

In this lecture we learn about Cascading Style Sheets (CSS).

We first learn how to change the visual aspect of an HTML element using the style tag. Then we move the code to an external and separate stylesheet file whose filename ends in dot css.

We learn how to write a CSS selector going by the element name to target all elements of such name in a document.

We learn some basic CSS properties to change text color, background color, text alignment.

You also learn how to open the Developer Tools (DevTools) and use it to debug styling. It is very useful to play around and figure out the real time what the best colors, size, etc, are for your application. Then remember to copy the code back to your text editor because DevTools changes are temporary and you lose them after reloading the page.

We learn about inline and block elements using the display property.

We learn about the box model that is comprised of margin, border, and padding. The margin is the space outside. The border is what's between outside and inside. The padding is the space inside.

We learn how to redecorate an unordered list and turn it into navigation link buttons.

We learn some pseudo-classes like :hover, :active, :last-child that are applied to the selector to target it under a particular user interface state.

You learn about how classes are very useful to reuse the styles already written by somebody else. Bootstrap was used as an example.

Source Code: https://github.com/nbktechworld/full-stack-web-dev/tree/7e31751b707f38d411c93fad925e1fda36582f9f/src

In this lesson we learn how to style an HTML form using CSS.

We learn how to make a form-group class to conveniently style each group of label and input, all from a central place, instead of having to style things separated and having to go through each element.

We add spacing between elements, increase the width, control the width from the parent element, style the submit button, etc.

We use the DevTools to debug things in real time and help us with development.

We learn to create various kinds of selectors, especially ones that have to do with an element nested in another element. We learn how to style direct children (that aren't grandchildren) of a parent element.

We also learn how to change the font of the body using a font obtained from the Google Fonts website. We learn to link the font to the web page so the font name can be used in font-family property.


Styling an HTML Form with CSS - Full Stack Web Dev Bootcamp Day 2 (2024-06-18)

In this lesson we learn how to style an HTML form using CSS.

We learn how to make a form-group class to conveniently style each group of label and input, all from a central place, instead of having to style things separated and having to go through each element.

We add spacing between elements, increase the width, control the width from the parent element, style the submit button, etc.

We use the DevTools to debug things in real time and help us with development.

We learn to create various kinds of selectors, especially ones that have to do with an element nested in another element. We learn how to style direct children (that aren't grandchildren) of a parent element.

We also learn how to change the font of the body using a font obtained from the Google Fonts website. We learn to link the font to the web page so the font name can be used in font-family property.

Source Code: https://github.com/nbktechworld/full-stack-web-dev/tree/bd1696fa58fa89d29747ddef67f9cee0812935d9/src

In this lecture we go over the version control program Git.

We learn to initialize a Git repository and include files in version control.

We learn about the two-step process of first adding files to the staging area, then finally making a commit.

We learn to check the status of the Git repository as well as see the log of commits.

We also learn about checking what was changed with the difference subcommand.

We learn to push the code to GitHub, a remote location we can set up. The main remote is usually called origin.

The lesson introduces GitHub, a code collaboration platform that is like social media for developers and coding.

You make a repository and learn about the features in GitHub. You learn that GitHub is just a front for actual Git operations that were previously done in the terminal.

You see how GitHub makes it convenient to see the history of commits and to traverse the code base and see how it evolved with time. You can even see who changed what in each line using the Blame function.

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

In this lesson we go over how you can contribute code on GitHub. You learn how to go about finding an issue to work on, getting assigned, then submitting code changes.

GitHub can be used as an open-source collaboration tool where anyone can find other people's projects to contribute to. It doesn't necessarily have to be just code. It could be contributions in the form of submitting issues such as bug reports, feature requests, etc. You could also contribute to the documentation and guides.

In the golden days of GitHub, employers would actively look into the developer's GitHub profile to see what they have been working on. The profile page usually has things like the contribution graph and what you have been working on lately in the activity section.

GitHub is also widely used by companies and part of their software development life cycle. Although not necessarily open to everyone, the codebase is shared and open to the company at large, in a practice usually known as inner source. Because open source practices are applied to the closed company setting.

Teams often use features like the Projects board to navigate their Agile process, to see what everyone's been up to. Usually there are standup meetings for that. The kanban kind of board allows the team to know who's working on what and the status of those tasks.

In the open source setting, you can find Issues to work on. But it's important you first ask to work on it and get assigned. Don't just work on it without being assigned because multiple people could do that and waste time doing the same thing. Only start the task after commenting and being assigned to the issue. This practice might not apply if you are working in a company because you already have permission to the repositories and you already know what you should be working on, therefore assigning yourself without asking for another person is okay in that situation.

The lecture shows how you can contribute to somebody else's project. Since you don't have permission to change the code directly, you have to create your own copy, called a fork. Remember, a fork is a feature from GitHub, not from Git.

After making changes to your own copy, you can then propose changes to the original repository via a pull request.

A person will then review the code and leave any feedback if applicable. That is called the code review process. After addressing any feedback, any further changes to the code are reflected in the existing pull request. You don't have to create a new pull request.

The code reviewer will then approve the proposed changes.

From there on, either the reviewer or the one who proposed the changes could merge the pull request. In the open source setting usually the maintainer would do it since the one who proposed the changes doesn't usually have permission to the original repository. In the company setting it could be either person, depending on the team/company process.

In the pull request phase, usually builds are run to ensure the quality of the proposed changes. This is called continuous integration (CI). Tests, linters, etc, would run to ensure the proposed changes are okay to be merged in.

After the new code is integrated into the master branch of the original branch, the application, if there was one, would usually be deployed to production, where the public at large would have access to, and see the new feature or bug fix. That is usually automated using continuous deployment (CD).

Collaborating on GitHub - Full Stack Web Dev Bootcamp Day 3 (2024-06-19)

After learning HTML and CSS, we jump into the JavaScript programming language in the context of manipulating web documents.

We learn how to find elements in the document with JavaScript through the document object. If we assign an id to an element, we can find it with JavaScript using the getElementById function from the document object.
 
We learn how to change the style with JavaScript.

Then we learn how to manipulate HTML element attributes, like the src attribute of an img tag.

We learn to listen to events. In particular, we learn to add an onclick event listener to perform a setup of instructions when clicked. We learn to define a function and call it when a button is clicked.

We also learn how to play an audio player using JavaScript. We hide the audio player and make a sound when a button is clicked.

We also learn to find elements in the document using other functions such as querySelector.


Intro to JavaScript - Full Stack Web Dev Bootcamp Day 4 (2024-06-20)

After learning HTML and CSS, we jump into the JavaScript programming language in the context of manipulating web documents.

We learn how to find elements in the document with JavaScript through the document object. If we assign an id to an element, we can find it with JavaScript using the getElementById function from the document object.
 
We learn how to change the style with JavaScript.

Then we learn how to manipulate HTML element attributes, like the src attribute of an img tag.

We learn to listen to events. In particular, we learn to add an onclick event listener to perform a setup of instructions when clicked. We learn to define a function and call it when a button is clicked.

We also learn how to play an audio player using JavaScript. We hide the audio player and make a sound when a button is clicked.

We also learn to find elements in the document using other functions such as querySelector.

Source Code: https://github.com/nbktechworld/full-stack-web-dev/commit/1c73645a3be9322e5fe2b11aab08fbf16eeb9678

In this lesson we learn how to manipulate the web document with JavaScript.

We learn how to handle form onsubmit events in JavaScript.

We learn to prevent default form action.

We learn to debug JavaScript with the browser Developer Tools (DevTools).

We learn how to retrieve what is typed into a textarea element.

We learn to create elements with JavaScript and then inject them into the document object model (DOM).

We learn how to add classes to an element using JavaScript.

We learn how to set the text content of an element using JavaScript.

We briefly learn about arrays and objects.

We learn how to load data into the document from a backend server JSON API.. In particular, the lesson shows how to fetch data in the frontend using an XML HTTP Request (XHR).

We learn how to handle a promise with then.

We are briefly introduced to repetition with a for loop.


Commenting with JavaScript - Full Stack Web Dev Bootcamp Day 4 (2024-06-20)

In this lesson we learn how to manipulate the web document with JavaScript.

We learn how to handle form onsubmit events in JavaScript.

We learn to prevent default form action.

We learn to debug JavaScript with the browser Developer Tools (DevTools).

We learn how to retrieve what is typed into a textarea element.

We learn to create elements with JavaScript and then inject them into the document object model (DOM).

We learn how to add classes to an element using JavaScript.

We learn how to set the text content of an element using JavaScript.

We briefly learn about arrays and objects.

We learn how to load data into the document from a backend server JSON API.. In particular, the lesson shows how to fetch data in the frontend using an XML HTTP Request (XHR).

We learn how to handle a promise with then.

We are briefly introduced to repetition with a for loop.

Source Code: https://github.com/nbktechworld/full-stack-web-dev/commit/111b0a207a4968a7ea61eae4c563da8d5e97747a

In this lesson are introduced to the React library used to build user interfaces on the frontend. We use the JavaScript programming language to build a single-page application (SPA).

We get an overview of React and how it differs from vanilla JavaScript (i.e. JavaScript without any library or framework).

We learn to generate a new React.js project with create-react-app.

We learn to convert plain HTML, CSS, pages to React components.

We learn that HTML elements and attributes are called components and properties (props), respectively, in React world.

We learn that in React you write a function to define a component, then you return the template for what you want it to look like. That template looks like HTML, but is actually JSX. It is syntactic sugar (a front) for actual JavaScript function calls to React.createElement.

You learn to declaratively program components instead of doing imperative JavaScript manipulation. React takes care to manipulate the live DOM to conform to what you declared in your components. You don't have to worry about doing all the manipulation and updating of the document yourself.


Intro to React.js - Full Stack Web Dev Bootcamp Day 5 (2024-06-24)

In this lesson are introduced to the React library used to build user interfaces on the frontend. We use the JavaScript programming language to build a single-page application (SPA).

We get an overview of React and how it differs from vanilla JavaScript (i.e. JavaScript without any library or framework).

We learn to generate a new React.js project with create-react-app.

We learn to convert plain HTML, CSS, pages to React components.

We learn that HTML elements and attributes are called components and properties (props), respectively, in React world.

We learn that in React you write a function to define a component, then you return the template for what you want it to look like. That template looks like HTML, but is actually JSX. It is syntactic sugar (a front) for actual JavaScript function calls to React.createElement.

You learn to declaratively program components instead of doing imperative JavaScript manipulation. React takes care to manipulate the live DOM to conform to what you declared in your components. You don't have to worry about doing all the manipulation and updating of the document yourself.

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

In this lesson we learn how to route a React application using React Router DOM library. We learn to create a browser router and define routes. We use RouterProvider to command what "page" it is actually going to show.

We also delve into how to retrieve data from a backend using React as well as post that data to the frontend the React way.

Along the way we learn about React state and side effects. In particular, we learn the hooks useState and useEffect.

We learn how to control an input component so React.js is aware of its value and how to change its value. In particular, we controlled a textarea element (remember React they're actually called components) and defined the value and onChange properties.

We learn how to declaratively show the posts using a mapping operation of the state variable. That is different from the vanilla JavaScript way, where we had to programmatically find the elements, read their values, and construct new elements and inject them into the DOM manually. With React, that is all taken care of. You just got to declare everything you want to see and it will ensure that is manifested.

Whenever the state changes, React renders the component anew. With that mechanism, it knows about discrepancies in its own DOM and the actual DOM. So it works to bring them in sync, ultimately doing what you expect it to do.


React Router & Messages - Full Stack Web Dev Bootcamp Day 5 (2024-06-24)

In this lesson we learn how to route a React application using React Router DOM library. We learn to create a browser router and define routes. We use RouterProvider to command what "page" it is actually going to show.

We also delve into how to retrieve data from a backend using React as well as post that data to the frontend the React way.

Along the way we learn about React state and side effects. In particular, we learn the hooks useState and useEffect.

We learn how to control an input component so React.js is aware of its value and how to change its value. In particular, we controlled a textarea element (remember React they're actually called components) and defined the value and onChange properties.

We learn how to declaratively show the posts using a mapping operation of the state variable. That is different from the vanilla JavaScript way, where we had to programmatically find the elements, read their values, and construct new elements and inject them into the DOM manually. With React, that is all taken care of. You just got to declare everything you want to see and it will ensure that is manifested.

Whenever the state changes, React renders the component anew. With that mechanism, it knows about discrepancies in its own DOM and the actual DOM. So it works to bring them in sync, ultimately doing what you expect it to do.

Source Code: https://github.com/nbktechworld/full-stack-web-dev/tree/33455620e79597ed9df4d08278f927cac0444398

In this lecture we go over the basics of Structured Query Language (SQL), also pronounced sequel.

You learn about database tables and columns and rows.

Data is stored in tables. Every record is a row. Each column provides a different piece of information regarding that record.

We go over how to retrieve information from a table.

Then we learn to insert new records.

And then learn how to delete records.

Then we learn how to update records.

Along the way we learn how to narrow down to more specific rows with a filter.

We learn to combine tables with a join.

The lecture briefly touches upon distinct, count, and alias.

We also learn to create a table.

Intro to SQL - Full Stack Web Dev Bootcamp Day 6 (2024-06-25)

We are introduced to PostgreSQL, also known as Postgres. It's an open source implementation of SQL that is widely popular.

We learn to use pgAdmin, the graphical user interface (GUI) client for PostgreSQL. Along the way we also learn about the PSQL and Query Tool that is available through pgAdmin.

We learn to connect to a server, create a user, and create a database.

We learn to create tables the graphical way and learn that it is just a front for actual SQL commands that will be run behind the scenes.


PostgreSQL pgAdmin PSQL (Messages & Users) - Full Stack Web Dev Bootcamp Day 6 (2024-06-25)

We are introduced to PostgreSQL, also known as Postgres. It's an open source implementation of SQL that is widely popular.

We learn to use pgAdmin, the graphical user interface (GUI) client for PostgreSQL. Along the way we also learn about the PSQL and Query Tool that is available through pgAdmin.

We learn to connect to a server, create a user, and create a database.

We learn to create tables the graphical way and learn that it is just a front for actual SQL commands that will be run behind the scenes.

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

In this lecture we learn to build a backend HTTP server with the Node.js programming language.

JavaScript had its origins in the browser, however one day someone came up with the idea of using it outside the browser, as a general-purpose programming language, creating what is now called as Node.js. So whenever you hear of Nodejs, you can think of it as serverside JavaScript.

The lecture teaches how to use the library Express.js to build a web server API that serves data in the JSON format.


Intro to Express.js - Full Stack Web Dev Bootcamp Day 7 (2024-06-26)

In this lecture we learn to build a backend HTTP server with the Node.js programming language.

JavaScript had its origins in the browser, however one day someone came up with the idea of using it outside the browser, as a general-purpose programming language, creating what is now called as Node.js. So whenever you hear of Nodejs, you can think of it as serverside JavaScript.

The lecture teaches how to use the library Express.js to build a web server API that serves data in the JSON format.

We learn to implement backend API endpoints using Express.js library for Node.js to serve the React.js application we built to post message comments.

We use the pg library to connect to the PostgreSQL database and make queries.

The lecture goes over implementing the endpoints to retrieve all messages and to create a new message.


Express.js Backend for React.js App - Full Stack Web Dev Bootcamp Day 7 (2024-06-26)

We learn to implement backend API endpoints using Express.js library for Node.js to serve the React.js application we built to post message comments.

We use the pg library to connect to the PostgreSQL database and make queries.

The lecture goes over implementing the endpoints to retrieve all messages and to create a new message.

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

The lecture goes over creating a mobile application using the JavaScript programming language with the React Native framework.

If you are familiar with web development using HTML, CSS, JavaScript, and React.js, then you will find it easy to develop mobile applications with React Native. 

The lesson goes over setting up, creating a new app with Expo, then loading the app on your smartphone via the mobile Expo app, after scanning a QR code from the development server.

The lecture also goes over a few basic components such as View, Text, Button, Image, and TextInput. 

You also learn how to style components in a way similar to CSS or HTML style attribute.

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

The lecture goes over using the Express.js backend API that was previously built to retrieve the messages and post a message.

You get to learn how to use React Navigation to implement a Stack navigator to switch between screens.

You get to learn how to fetch data in React Native.

The lecture briefly goes over using localtunnel if you have trouble accessing the API from the smartphone device.

You also learn how to make the screen scrollable with a ScrollView.


React Native Navigation & Fetching Data - Full Stack Web Dev Bootcamp Day 8 (2024-06-27)

The lecture goes over using the Express.js backend API that was previously built to retrieve the messages and post a message.

You get to learn how to use React Navigation to implement a Stack navigator to switch between screens.

You get to learn how to fetch data in React Native.

The lecture briefly goes over using localtunnel if you have trouble accessing the API from the smartphone device.

You also learn how to make the screen scrollable with a ScrollView.

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