Tech World Software School

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.

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.

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.

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.

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.

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).

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.

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.

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.

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.

Consider a donation: https://linktr.ee/nbktechworld

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.

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.

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.

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.

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.

Learn how to create documents for a website.

Learn to build user interfaces for client-side browser with the React library. Write code in the JavaScript programming language.

We learn to program using the programming language JavaScript.

An introduction to social coding and collaborating on GitHub. Learn to navigate GitHub issues, fork a repository, and propose new changes with a pull request. This lecture is a follow-up to the Introduction to Git and GitHub. We'll leverage the repository we made. See https://github.com/nbktechworld/introduction-to-git Requirements A GitHub account (register at https://github.com) Terminal app (cmd, PowerShell, macOS Terminal, iTerm 2, etc) A text editor such as Visual Studio Code Git (If typing `git --version` command in terminal doesn't work for you, download from https://git-scm.com/downloads)

We'll learn some backend development and improve upon an existing frontend React application.

We'll learn about frontend development.

We'll learn to use the library Express.js to make an HTTP server with the Node.js (server side JavaScript) programming language.