Software School Cuts

A lesson for beginners that introduces the library React.js that is used to build user interfaces (UI). It's part of frontend development in the browser, although learning the way of writing React can also translate to other platforms such as mobile with React Native and virtual reality with React VR.

CodeSandbox is leveraged as the development environment, although other web-based alternatives are also available. You can also develop locally, generating the project with a tool like create-react-app.

Writing an HTML-like pattern within JavaScript is also introduced. JSX transpilation is briefly explained using the Babel website's Try it out feature.

The lesson goes on teaching how to change the view that is rendered by the React component. You learn to return multiple things from a component function using a Fragment.

Finally, you briefly see, using the browser Developer Tools (DevTools for short), how the React.js application is injected in a lone, empty div element whose id is root.

Introduction to React.js and JSX

The lesson goes over creating your own React component. In particular, you create a component to make a square box.

Reactjs is a frontend library that helps you build user interfaces with the JavaScript programming language.

You learn how to instantiate a component in JSX, simply using a tag like you do in HTML.

You also learn to pass information down to the component via props (short for properties).

You also learn that you can pass information between the open and close tags of the component, which is a special props called children.


Creating a custom Box component with React.js

Continuing the example of colored Box components in React.js, the lesson explains how to listen to and handle click events. More specifically the goal is to click a button to change the color of an existing box.

You are introduced to the concept of state using the useState hook to keep track of a color name. See how you assign the return value of the useState hook to two variables created via destructuring of an array. One variable to access the state value and another to mutate (modify) that state value.

When the React state changes, the component renders anew. That is, the function that defines the component is called again and if any values have changed from a previous render, they will be reflected in the updated document object model (DOM) for the web application.

Changing React.js Box Component Color with a Click While Keeping Track of State with Hook Private

Changing React.js Box Component Color with a Click While Keeping Track of State with Hook

Continuing from the example of using the library React.js to build user interfaces. In this particular situation, a colored Box component whose color is controlled via a property. Now the goal is to change the color of a Box component using a text field.

Using the hook useState, you can keep track of another state variable to hold the color name. That value is tied to an input of attribute type having the value text. That input is placed next to the existing button to change the color.

You learn about controlled components, those whose value and onChange props are defined explicitly and controlled using a React state value. A function is defined to handle the changing of the text. That is, when the user types into the text field, the onChange handler function is called to update the value in state.

An event handler function has a parameter called event that includes details about who triggered the event. In particular, you can use the event target to access the input element so that you can retrieve the value that was typed by the user.

You can call on the mutate function for the color name to update its value after the user types into the text field. Then, the click handler for the button to change color is modified to set the Box component color prop to the value that was typed into the text field for the color name. That is, the click of the button takes the state value for color name and uses that as the prop passed to the Box component.

The lesson also briefly mentions how in the past React.js components used to be mostly written with classes instead of functions. But that paradigm has since been changed and writing functional components is more encouraged now. Questions about the order of JavaScript code statements are also addressed, like the definition of a function inside a function and the order the functions are defined.

React.js Box Component Color Controlled via Text Field

Learn to isolate a React.js component in a separate file, a common practice especially if your codebase is large and you want to separate the concerns and single out responsibility. In particular, take the colored Box component and move its definition to its own file Box.js instead of defining it in the same file as the App component.

Moving definition of React.js Box Component to a Separate File

A lesson that introduces you to HyperText Markup Language (HTML), a technology that is used to create websites.

You learn to create a tag with a paragraph element to display some text on a web page document.

Introduction to HTML and How to Write a Paragraph

A lesson that introduces you to HyperText Markup Language (HTML), a technology that is used to create websites.

You learn to create a tag with a paragraph element to display some text on a web page document.


The lecture goes over some HTML tags to mark some inline text in a particular way.

You learn to mark text as being of strong importance, which by default visually appears in bold letters.

You learn to emphasize text, which by default visually appears in slanted italics font style.

The lesson also mentions how the bold tag and the idiomatic text tag were also used to visually bolden and italicize text. However today it is preferred to use the semantic tags strong and em due to their not necessarily being tied to a visual representation that could be changed. Documents can be read and understood semantically, the visual aspect being isolated from the meaning of the tags.

Boldening and Emphasizing Inline Text in HTML with Strong, Em, b, i

A book usually is divided into sections that are usually called chapters. Those chapters could also be part of greater subsection of the book. Usually there is a title text for each of those sections and subsections.

In HTML you can accomplish that with heading tags. The top-level section marker is heading level one. Then you can have subsections of sections using headings of a level higher than one. Those headings can go up to six. You can think of them like title that marks a subsection of a subsection of a subsection and so on.

Adding Section Titles in HTML using Heading Tags Level One through Six

The lesson goes over how to create a bulleted list in HTML. In particular, it uses the unordered list element ul.

You also learn about list item elements and how they need to be nested inside the list elements.

At the end you learn to make a numbered list using the ordered list element. You find out it is as easy as renaming the ul to ol.

Writing a Bullet Point List and Numbered List in HTML

Learn how to display a link that goes to another page.

You learn about the HTML anchor tag.

You also learn how to open the URL in a new tab (traditionally a new window).

Showing Links in HTML with the Anchor Tag

Learn how to display images in an HTML document.

Learn about the img tag and its src attribute.

You are also introduced to the alt attribute for the image element. That attribute is useful for accessibility. Screen readers read it out loud so visually-impaired users can still understand the content of a website.


Showing Images in HTML with the IMG Tag

The lecture gives a brief introduction to HTML forms and teaches how to build a simple sign in or login form.

Learn how to make a single-line text field input.

Then learn how to hide the characters with password type.

Then learn how to pick a date.

Then learn how to show a button.

Learn about the label tag.

Learn how to group form controls.

Learn how to create an email text field.

Learn how to create multiline text fields.

Learn how to associate a label with an input.

Learn about the placeholder attribute.

Showing a Login Form in HTML for Users to Sign In

Get started with Cascading Styling Sheets (CSS), using the JSFiddle platform.

In a previous session, HyperText Markup Language (HTML) was introduced to define the structure of a website document. This lecture goes over changing the styling and visuals of a page.

The lesson shows you how to style paragraph elements. You learn the syntax to select elements for styling. You learn to use an element name selector to change the text color CSS property.


Introduction to CSS - Styling Paragraphs

The lecture teaches you how to change the background color of a paragraph element. You also learn how to change the text alignment so the paragraph text becomes centered.

CSS properties for Background Color and Text Alignment

The lecture starts off teaching you a way to discover new CSS properties.

Then you get introduced to the browser Developer Tools, usually called the DevTools. You learn that you can right-click to inspect an element on the page.

You can select an element and see its CSS properties on the side.

You can click the color circle to pick a different color and see the changes in real time.

You can select an element and specify new CSS properties under the element and braces section.

You can use the checkboxes next to the property name to see what it looks like before and after that property is applied.

You can use the DevTools to provide you suggestions for property names as you start typing characters. The DevTools also provides suggestions for the value of the property, so you can go through them and see which one suits better your use case.

Students ask questions in the end.


Debugging CSS in Real Time with DevTools

The lecture teaches you how to use Cascading Style Sheets (CSS) to change properties related to the font of an HTML element.

In particular, you learn how to change the font size, its family (the typeface), and the weight (i.e. making it bold).

Changing CSS Font Size, Family, and Weight

The lecture introduces you to another way of specifying a color in CSS.

Previously you learned that you can specify the color name, like red, green, or blue. But there are other ways of defining a color value, like using the hex value or the rgb value.

The hexadecimal value (aka hex) is a value that ranges from 0 to 255 in base 10, but is written in base 16 ranging from 0 to ff. That's why it's called hexadecimal, because one digit can have 16 different characters. It goes from the usual 0 to 9, then after that is goes using the letters a through f.

For the specific case of color hex codes, there are usually six digits. The first two digits are the value for the Red. The middle two digits are the values for the Green. The last two digits are the value for the Blue. Hence the abbreviation RGB whenever you need to compose those three colors to build any one color. For CSS, the hex value is always prefixed with a hash or pound sign.

You can also specify color values using base-10 RGB by saying rgb followed by parentheses. Inside the parentheses you write the values for RGB, separated by a comma. For example, for the Red value, instead of writing ff in hexadecimal, you would write 255 in decimal.

To show the red color, simply use value 255 for Red, 0 for Green, and 0 for Blue.

To show the green color, simply use value 0 for Red, 255 for Green, and 0 for Blue.

To show the blue color, simply use value 0 for Red, 0 for Green, and 255 for Blue.

CSS Color Values with Hex Code and RGB

The lecture shows you how to select an HTML element for styling with CSS using its id or class attribute instead of using the type selector that targets all elements of a specific name.

Using a type selector is usually not the best practice because HTML web pages usually have hundreds of elements and changing all of them at once to comfort to a specific style might cause inconsistencies in the design.

You can select a specific element for styling with CSS using its id attribute. Only one, and only one, element may have that unique identifier.

If you need to select multiple elements for styling under the same ruleset, you can use the class attribute. It turns out using a class is usually the most popular and safe choice for best practice. When in doubt, just use a class.

The lecture also gives the example of leveraging CSS code already written by somebody else, like the Bootstrap design system. Because the class definitions are already written for you, all you have to do is use the class name if you want to adopt the same style for your web page element, provided you link the Bootstrap spreadsheet to make it available in your document.


Styling with CSS by Id and Class Selectors plus Bootstrap Button Example

This lecture teaches you how to create a text shadow with Cascading Style Sheets (CSS).

You learn that a CSS property can have more than one value, each separated from the other by a whitespace.

The lecture shows how you can calibrate the text shadow using the browser developer tools (DevTools).


Adding a Text Shadow with CSS

The lecture presents you the CSS property to add a box shadow.

You see that the property can take multiple values instead of just one. Simply separate them by a whitespace.

You learn to calibrate the values for the property using the browser developer tools (DevTools).

Note that for the text example in the video, it is better to use the text shadow property, so that is why it looks a bit weird. Box shadow would look nice if the example text in the video was presented as a button with border, rounded border, and padding.

You also learn to look up documentation for the CSS property to understand the different ways you can specify the values. In particular, we look at the docs website for the Mozilla Developer Network (MDN). 

Box Shadow CSS Property and Referencing MDN Documentation

The lecture introduces you to Structured Query Language (SQL) that is used to interface with a relational database management system (RDBMS).

You learn that information from websites and web applications are ultimately stored in a database, so they persist as you come back to the website at a later time.

You learn that the database can have many tables to store different resources. Each table has columns that are attributes of a specific object. Those objects are presented as rows.

In the example, there is a table of customers. Each row represents a customer. Each column represents a piece of information about that customer. For example, the column first_name stores the customer's first name.

There are many implementations of SQL out there. Many companies have built their own flavor. For example: MySQL, MariaDB, SQLite, PostgreSQL, Microsoft SQL Server, Oracle Database, IBM DB2, etc.  But so long as you learn standard SQL, you can easily run queries for any of those specific implementations.

Brief Introduction to Structured Query Language (SQL)

Learn how to access data using Structured Query Language (SQL).

In particular, learn how to retrieve data from tables using SELECT. You learn to select all columns as well as specific ones. You also learn to eliminate duplicates with the DISTINCT keyword preceding the column name.

How to Retrieve Data Using SQL with Select Query

Learn how to use Structured Query Language (SQL) to select rows from a table using a filter that matches a certain condition.

You are introduced to the WHERE clause to narrow down the result rows in a query. You can specify the column name, a comparison operator, and the desired value.

You also learn that you can narrow down even more with more conditions using the AND keyword. Later you are also briefly exposed to its counterpart OR keyword.

How to Retrieve Filtered Data Using SQL WHERE Clause

Learn how to use Structured Query Language (SQL) to insert new rows into a table with a set of given column values.

You can also use SQL to add new data to a table. The lecture goes over the insert statement so you can populate a table with new rows.

You first learn the implicit way, then you learn the explicit way that requires you specify every column name in the table.

Along the way you are also exposed to the UNIQUE constraint that can be set on a specific column to prevent duplicate rows with the same column value. Primary key columns usually have that unique constraint.


Populating a SQL Database Table with New Data

Students ask some questions related to Structured Query Language (SQL) and get a response.

Is id always the primary key without specifying it?

What is VARCHAR(100)?

How to sort data in a specific order, ascending or descending?


Answering Questions About SQL (Id Primary Key, Varchar, Sorting)

Learn how to use Structured Query Language (SQL) to delete records from a database.

In particular, the lesson teaches you the DELETE FROM statement with a WHERE clause to delete a row by the primary key identifier column.

It is important to be very careful going about deleting records, so for most cases, make sure to always add a WHERE clause matching the value of a unique column, since you know only one row will be deleted versus potentially deleted unwanted records by mistake.


Delete Row from SQL Database Table

Learn how to use Structured Query Language (SQL) to update database records.

In particular, you learn how to use the UPDATE statement to set a particular column value for the rows in the database.

For most cases, you usually specify a WHERE clause to narrow down to a specific row. Otherwise, you would end up changing many, if not all, rows in the table by accident.

SQL Update Table Set Value Where Condition

Learn how to use Structured Query Language (SQL) to combine matching data from two separate tables.

In particular, you learn how to match rows in one table with rows in another, going by the foreign key in one table pointing to the primary key of another table. You learn the Inner Join kind.


How to Combine SQL Tables Data Together with an Inner Join

Learn how to use Structured Query Language (SQL) to count the number of rows in a database table.

In particular, you learn how to use the COUNT function to find out the number of rows found with your query. You also learn how to alias a column name with the AS keyword.

How to Count Rows in SQL and Renaming Result Column with Alias

Learn how to use Structured Query Language (SQL) to group rows by a certain column.

In particular, you learn how to use the GROUP BY statement to consolidate rows grouped by a certain column value. You also learn how to a similar thing using the DISTINCT keyword preceding the column name.


How to Write SQL to Group By Column and Using Distinct

Learn how to use the JavaScript programming language to change the Cascading Style Sheets (CSS) properties of an HTML element.

In particular, you learn how to change the text color and the background color of an element, after having found it on the document by its id attribute.


Using JavaScript to Change CSS Properties of an HTML Element

Learn how to handle click events on an HTML element using a JavaScript function. The lecture goes over how to change the CSS styles of an element when you click it.

You can add an onclick attribute to an HTML element to do something when it is clicked. The value of the attribute is the name of a function followed by parentheses.

A function is a set of instructions that can be executed when its name is called with parentheses. 

One way of defining a function in JavaScript is by preceding its name with the function keyword. Any input parameters are contained within the parentheses. Write the statements after the open curly brace and before the corresponding closing curly brace.


Click Event and JavaScript Function to Change CSS Style

Learn to create a const variable in the JavaScript programming language to hold a reference to an object that represents a paragraph element.

JavaScript Variable to Hold Reference to Paragraph Element

A brief introduction to the concept of Arrays in the JavaScript programming language.

The lecture uses the browser Developer Tools to type JavaScript statements and walk through building and accessing elements of a sequence of elements grouped together into a variable that holds a reference to an Array data structure.

Brief Overview of JavaScript Arrays

Learn how to listen to click events in JavaScript to execute a set of instructions.

In particular, you learn to click a button to change an image to another one. This feature is a very basic one from image galleries where you click a next button and the current image is replaced with the next one.


Clicking Next Calls JavaScript Function to Change the Image

Learn how to define a JavaScript array to keep a list of image URLs for an image gallery widget.

The lesson refactors previous code to access the next image URL by its position index on a variable that holds a reference to an array.

Creating a JavaScript Array to Hold Image URLs

Learn how to keep track of the current image index using a JavaScript variable.

In order to allow for multiple images to be browsed through as you click the next button, you have to know which image URL to use to display the image. Since the URLs are held in an array, you can take the next element every time you click next.

In order to remember what image the user is seeing, you have to store its index in a variable. Then, every time you click the next button, that index is incremented and eventually you see the next image in the list.


Keeping Track of Current Image Index with a JavaScript Variable

Learn how to use the remainder operator (percent sign, aka modulo) to go from the last image to the first image.

Every time you click the next button, the current image index increments. However, it goes beyond the number of elements in the array of image URLs. So we have to reset that index back to 0 when you are seeing the last image and click next.

Cycling Through Images using the JavaScript Remainder Operator

The lecture gives a brief overview of what Nodejs is.

Then you get introduced to the Express library.

After that, you learn how to generate an NPM project with the creation of a package dot json file.

The lecture shows you how to install the express package from the Node Package Manager (NPM) registry.

You learn that third-party packages are installed in a directory called node_modules. Dependencies are specified in the manifest file called package followed by the extension json. 

Somebody has a question about NPM not being recognized. Make sure to install Node from the website nodejs dot org. It usually comes bundled with the NPM command as well.

Somebody else asks how to verify the library express was actually installed.

Generate NPM Project and Install ExpressJS

Learn how to create an HTTP server with the Express library using the JavaScript programming language on the serverside, also known as Nodejs.