easy projects to learn html, css and javascript

I built my first app following a tutorial by James Quick on Udemy, a website where learners and tutors come together to teach and learn.

I spent the last couple of weeks learning Javascript and realising that html and css are not actually programming languages was really humbling. As a beginner myself, while learning, going through some materials and viewing different source codes. I've written a few things about some basic Javascript concepts every beginner should know and i'd like to share.

Screenshot 2022-12-02 at 18.12.13.png

WHAT IS JAVASCRIPT ?

JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions, most well-known as the scripting language for Web pages. It is the world's most popular programming language. Bear in mind that Javascript(JS) and Java programming language are two different languages.

While HTML defines the content of web pages, CSS specifies the layout of web pages and JavaScript programs the behaviour of web pages.

NB: Beginner to beginner advice, i'd say don't waste too much time on html and css because it's a long way from novice to front end developer.

ES6

ES6 is the sixth edition of the ECMAScript (a trademarked scripting language specification defined by ECMA International). It was introduced in 2015. The following features were added in the update;

A new primitive data type 'symbol' for supporting unique values.
Two new ways to define variables that are; let and const.
Because of new features and the shorthand storage implementation ES6 has a higher performance than ES5.
An arrow function where by we do not require the function keyword to define the function.
ES6 introduced the concept of for...of loop to perform an iteration over the values of the iterable objects.
Spread Operator (...), which makes it easy to merge arrays and objects.
Template Literals that allows us to perform string interpolation easily.

DATA TYPES

A data type, in programming, is a classification that specifies which type of value a variable has and what type of mathematical, relational or logical operations can be applied to it without causing an error.

Data types	Descriptions	Examples
String	It represents textual data	'hello', "hello world!" etc
Number	An integer or a floating-point number	3, 3.234, 3e-2 etc
Boolean	Any of two values: true or false	true and false
Null	Denotes a null value	let a = null;
Symbol	data type whose instances are unique and immutable	let value = Symbol('hello');
Object	key-value pairs of collection of data	let student = { };

VARIABLES

Variables can be thought of as named containers. You can place data into these containers and then refer to the data simply by naming the container. Variables can be declared using "var", In ES6 (update to javascript) variables can be declared in other means;

Let - The difference between declaring a variable with "var" and "let" is that unlike in var where variables can be declared twice and overridden, let allows only one variable to be declared at a time .
Const - Variables declared using const are read-only and cannot be changed.

FUNCTIONS

A JavaScript function is a block of code designed to perform a particular task. It is executed when "something" invokes it (calls it).

A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses ().

A function can take one or more parameters.

A function to add two digits together would look like this;

function myFunction (a, b) {
return a + b;
}

To invoke or "call" this function :

myFunction();

COMPARISON OPERATOR

( == ) equality operator compares two values and returns true if they are equivalent or false if they are not.
( === ) The strict equality operator checks whether its two operands are equal, returning a Boolean result. Unlike the equality operator, the strict equality operator always considers operands of different types to be different, strict equality does not perform type conversion.
( != ) - Inequality operator means not equal and returns false.
( !== ) - Strict inequality
( > ) - Greater than operator
( >= ) - Greater than or equal to operator will convert data types while comparing.
( && ) - Logical "and" operator returns true if operands to left and input are true.
( || ) - Logical "or" operator

SCOPE

Scope refers to the visibility of variables.

JavaScript has 3 types of scope:

Block scope
Function scope
Global scope

BLOCK SCOPE:

Before ES6 (2015), JavaScript had only Global Scope and Function Scope. ES6 introduced two important new JavaScript keywords: let and const. These two keywords provide Block Scope in JavaScript. Variables declared inside a { } block cannot be accessed from outside the block.

FUNCTION SCOPE:

Local variables have Function Scope, they can only be accessed from within the function. JavaScript has function scope: Each function creates a new scope. Variables defined inside a function are not accessible (visible) from outside the function.

GLOBAL SCOPE:

A variable declared outside a function, becomes GLOBAL. A global variable has Global Scope and can be accessed from anywhere in a JavaScript program.

METHODS

JavaScript methods are actions that can be performed on strings, objects and arrays. A JavaScript method is a property containing a function definition.

Some example of Javascript array method include;

Method	Function
Push()	This function is used to append data to the end of an array
Pop()	It removes the last element from an array and returns that element
Shift()	This removes the first element of an array
Unshift ()	Adds elements to the beginning of an array
Splice ()	This method changes an array, by adding or removing elements from it. It takes on two to three arguments.
	First argument indicates the index to start deleting from
	Second argument takes on the number of elements to delete
	Third argument is used to add elements to an array
Slice ()	The slice( ) method copies a given part of an array and returns that copied part as a new array without changing the original array. It takes on two parameters ;
	First is the index at which to begin extraction
	Second is the index to stop extraction

Examples of string methods

Method	Function
Split()	This divides a string into substrings and returns them as an array
toUpperCase()	Converts a string to uppercase
toLowerCase()	Converts a string to lowercase
concat()	Joins two or more strings

DEBUGGING

Inspect the browsers console through right-clicking on the Navbar.
You can use typeof() to check the data structure or type of a variable.
Console.log - The log() method writes a message to the console. It is useful for testing purposes.

Reference: W3school Freecodecamp

In the course of creating the app, i learnt to do the following;

Screenshot 2022-12-02 at 18.13.35.png

One thing i was excited to learn about and use is API

Application Programming Interfaces (APIs) are constructs made available in programming languages to allow developers to create complex functionality more easily. They abstract more complex code away from you, providing some easier syntax to use in its place.

As a real-world example, think about the electricity supply in your house, apartment, or other dwellings. If you want to use an appliance in your house, you plug it into a plug socket and it works. You don't try to wire it directly into the power supply — to do so would be really inefficient and, if you are not an electrician, difficult and dangerous to attempt.

In the same way, if you want to say, program some 3D graphics, it is a lot easier to do it using an API written in a higher-level language such as JavaScript or Python, rather than try to directly write low-level code (say C or C++) that directly controls the computer's GPU or other graphics functions.

Browser APIs are built into your web browser and are able to expose data from the browser and surrounding computer environment and do useful complex things with it.

Third-party APIs are not built into the browser by default, and you generally have to retrieve their code and information from somewhere on the Web. Example below;

Screenshot 2022-12-02 at 17.07.18.png