Tag: JavaScript

python javascript beginners

Sunday, March 26, 2023

Learn about Python's built-in data types, including numeric types, sequences, mappings, and sets, and how they compare to their JavaScript counterparts. This article explains the similarities and differences between Python's int, float, complex, str, list, tuple, dict, set, and frozenset data types and the Number, String, Array, Object, and Set types in JavaScript.

react javascript

Thursday, March 23, 2023

Learn how to build a weather app in React using hooks in this step-by-step tutorial. You'll use the OpenWeatherMap API to fetch weather data and display it in a component. You'll also add dynamic city input using useState hook and learn about useEffect and CSS styling. Code samples are provided for each step of the tutorial.

react javascript

Wednesday, March 22, 2023

How to code a tic-tac-toe game in React, using hooks? Here's another way to do it, in this tutorial.

react javascript

Tuesday, March 21, 2023

How to code a tic-tac-toe game in React, using hooks? Here's one way to do it, in this tutorial.

react javascript

Monday, March 20, 2023

A list of free React app examples found online with a short description of what each example is about.

react javascript react from scratch

Tuesday, January 25, 2022

Based on the React Todo app we've already built on Codepen, we're now rebuilding it locally, so that we can further improve our understanding of React.

react javascript react from scratch

Tuesday, January 25, 2022

react javascript react from scratch

Tuesday, January 25, 2022

What's the difference between class-based and functional components, and where do React hooks fit into the picture. Find out all of that in this tutorial.

react javascript react from scratch

Tuesday, January 25, 2022

Beginner-level React tips and tricks: code organization, passing objects as props, default props, using ternaries in our components, using fragments, handling events, checking if props are truthy, and more.

react javascript react from scratch

Tuesday, January 25, 2022

We'll add a new JavaScript file with an array of objects, and then we'll loop over this array of objects using the Array.prototype.map method in our React code.

react javascript react from scratch

Tuesday, January 25, 2022

Learn to update React apps from ES5 to ES6 functional components; additionally, learn how Babel works with ES6 functions in React.

react javascript react from scratch

Tuesday, January 25, 2022

Learn to add icons to React apps in this tutorial. We're using a simple React-powered layout built in Bootstrap as the foundation, and we're adding icons to this pre-built layout.

react javascript react from scratch

Monday, January 24, 2022

React is all about components. In this tutorial, we'll learn about how these components are composable and we'll build a simple Bootstrap layout doing it.

react javascript react from scratch

Saturday, January 22, 2022

react javascript react from scratch

Friday, January 21, 2022

We'll build a React app using create-react-app, then learn how to tweak it. Next, we'll compare a local and a cdn-powered version of the same simple React app to further understand the differences between the two approaches.

react javascript react from scratch

Thursday, January 20, 2022

We can use React without a build step. In this tutorial, we'll learn how to include React from a CDN and use it in our projects right away.

react javascript react from scratch

Thursday, January 20, 2022

A perfect tutorial for a beginner in React: learn how to get started with it and all the tools you need to get started with it. Additionally, we'll build a very simple app in React.

react javascript react from scratch

Tuesday, January 18, 2022

In the React from scratch article series, we'll learn all there is to know about the React framework, from the very beginning.

html javascript

Thursday, June 17, 2021

Blog post image generator app tutorial. Learn to build blog post images right in your browser. This post shows you how to do it, step by step.

html javascript

Wednesday, June 16, 2021

In this post we'll explore the Drag and Drop API in modern browsers until we get comfortable using this functionality.

javascript html

Thursday, April 15, 2021

HTML Element interface has a number of subclasses available in modern browsers. Some of them have been deprecated, and others are safe to use. Here's a list that shows all of those subclasses that are available in Chrome, plus some deprecated subclasses that are no longer exposed.

javascript exercises beginners

Wednesday, January 27, 2021

We all know that the var keyword should not be used in our code, and that we should mostly use let and const. We've probably already read articles about the reasons for this and how to use them properly. But what are the differences between var, let, and const, in relation to hoisting? Let's find out.

javascript exercises beginners

Wednesday, January 27, 2021

Key up and key down events in JS return a bunch of information in the Event object. This information includes the keycode data. In this tutorial we discuss how to get that info with JS.

javascript exercises beginners

Tuesday, January 26, 2021

Cookies are one of the oldest ways of saving text-based data on the web. The data that gets saved is not meant to be large. It's use case is to 'remember' some things about the user, even after they have closed the web page or the browser. In this article, we'll learn about working with cookies in JS.

javascript exercises beginners

Friday, January 22, 2021

Converting an object to an array is pretty easy in JavaScript. All we have to do is use Object.keys, or an even easier method to use, Object.entries.

javascript exercises beginners

Thursday, January 21, 2021

To get the length of an object in JS, we use Object.keys() to get an array of our object's own properties' keys. Then we can easily return the length value.

javascript exercises beginners

Monday, January 18, 2021

How to build matrices in JS? Also known as multi-dimensional arrays, these are just arrays of arrays in JS. An easy way to build multi-dimensional arrays is to output them using nested loops, as we'll show in this tutorial.

javascript exercises beginners

Monday, January 18, 2021

It's the combination of String.prototype.match(), RegExp, and String.prototype.replace() that gives us the solution to coverting a kebab case string to camel case string in JS.

javascript exercises beginners

Monday, January 18, 2021

The trick is to separate the string into the first letter and the rest of the string using charAt() and slice(), then run the toUpperCase() method on the first substring, and concatenate the rest of the original string back to the uppercased first letter.

javascript exercises beginners

Sunday, January 17, 2021

Appending a style tag to the head tag of an HTML document requires some simple DOM manipulation. In this tutorial, we'll discuss how to do this, and all the other ways of adding styles using JS.

javascript exercises beginners

Sunday, January 17, 2021

Calculating a factorial is very easy, but many JS implementations online make this problem unnecessarily complex. In this tutorial, we'll see the basics of how to calculate a factorial in JavaScript. We'll also go through the explanation of building a factorial calculating function in JS step-by-step.

javascript exercises beginners

Saturday, January 16, 2021

Fibonacci sequence in JS should not be hard to build. In this article, we show step-by-step, how to build in a few simple steps, a rudimentary fibonacci sequence. Once we know the basic mehanism that lies behind the logic of fibonacci sequence code, we can then build more complex code based on this foundation.

javascript exercises beginners

Friday, January 15, 2021

Have you ever tried to see how many times a letter or a word appears in a string? Or how many times a value is repeated in an array? This tutorial shows you how to figure that out in JS.

javascript exercises beginners

Thursday, January 14, 2021

To format an array of numbers as ordinal numbers, we need to properly add the suffixes -st, -nd, -rd, and -th to correct numbers. This includes numbers 11, 12, and 13, which are a bit of an edge case. In this article, we discuss how this works.

javascript exercises beginners

Wednesday, January 13, 2021

Formatting a number as currency in JS is easy. We can use Intl.NumberFormat(), and style it as currency, or we can use the toLocaleString method, and again provide the style parameter to the options object.

javascript exercises beginners

Tuesday, January 12, 2021

In JS, we can add a comma as thousands separator using the toLocaleString() method, or using Intl.NumberFormat().format, or using a RegExp. In this tutorial, we'll cover the first two listed means of doing this.

javascript exercises beginners

Monday, January 11, 2021

To get a random, three-member sub-array from an array of items, we need to use the splice, Math.random, and array flat methods, along with a simple for loop. It's a nice and easy solution, and in this tutorial, we'll go through each step of how to do this.

javascript exercises beginners

Sunday, January 10, 2021

We have a web page with a script tag. That script tag holds an array of various Bootstrap 4 CSS classes, and our JavaScript picks a random member from this array and assigns it as a CSS class to a paragraph in our web page's body tag.

javascript exercises beginners

Saturday, January 9, 2021

We can easily whip up our own password generator in vanilla JS. This tutorial shows you how to do it, step by step, with each step explained in detail.

javascript exercises beginners

Friday, January 8, 2021

Randomly reordering members of a JavaScript array might seem an easy task, but it can also be difficult to junior developers. See a step-by-step solution with a detailed explanation of how to shuffle an array in JS.

javascript exercises beginners

Thursday, January 7, 2021

Math.random() gives us a range between 0 (inclusive) and 1 (exclusive). But how do we use this method to get a random number from a range of numbers, say, a random number between 30 and 60? Read more to find out...

javascript exercises beginners

Thursday, January 7, 2021

Using the conditional (ternary) operator, we are able to easily return, at random, either a boolean true or false in JS. Additionally, by setting up our condition differently, we can affect the frequency of one result over the other. In this article, we explain how this works.

javascript exercises beginners

Wednesday, January 6, 2021

Multiply the length of array with the call to Math object's random method, then floor the result. We'll explain how that's done in this article.

javascript exercises beginners

Tuesday, January 5, 2021

Use Math.random() static method to emulate a pair of dice in JavaScript, and keep in mind these simple tips.

javascript intermediate

Saturday, December 12, 2020

There are 12 node types in the DOM. It's useful to know at least the few of those that are most commonly used.

javascript beginners

Saturday, December 12, 2020

This article discusses the difference between objects and non-objects in the JavaScript language.

javascript intermediate

Saturday, November 28, 2020

Understanding how onload event works in the DOM with vanilla JS is a very important piece of knowledge for a web developer. In this article we'll cover this topic in depth.

css javascript beginners

Saturday, March 7, 2020

How to use vanilla JavaScript to replace all instances of a CSS class with another CSS class on a web page? That's what we'll learn in this article.

javascript beginners

Thursday, December 5, 2019

Productivity can be hard to improve, even if you're a talented web developer. Here's a list of tips and tricks that might help you boost your productivity as a web developer.

javascript beginners

Tuesday, December 3, 2019

Nested for loops in JavaScript can help us with a number of coding tasks. In this article, we'll see how to use it to build a multiplication table and a domain-name generator.

javascript beginners

Monday, December 2, 2019

The map data structure is another data structure in JS that derives from the Object prototype. In this article, we're taking an in-depth look at maps in JS.

javascript beginners

Monday, December 2, 2019

JS array prototype, array methods, array use cases, and a number of tips and tricks - we're going to cover all of that and more in this in-depth tutorial on arrays in JavaScript.

javascript beginners

Sunday, December 1, 2019

This is an in-depth introduction to sets in JavaScript. A set is a special kind of a collection in JavaScript, holding only unique values.

javascript svg

Wednesday, November 27, 2019

DOM manipulation, working with SVGs and JavaScript events - we cover all of that in this beginner-friendly tutorial.

javascript css

Sunday, November 24, 2019

In this tutorial, we'll work with events to change the background color of an element dynamically, using JavaScript.

javascript beginners

Sunday, November 10, 2019

How to write a very simple quiz app in JavaScript? Find out in this introductory, beginner-friendly tutorial.

javascript beginners

Sunday, November 10, 2019

How to write a very simple todo app in vanilla JavaScript? Find out in this introductory, beginner-friendly tutorial.

javascript books

Sunday, November 10, 2019

This article gives some background information about my fifth book, A Better Way to Learn JavaScript; the book is currently in version 1.0, and is available for sale at Leanpub.

javascript beginners

Friday, November 8, 2019

What are the ways to improve you JavaScript coding skills? How to get better faster? Are there any shortcuts to success? We try to find the answer to these questions and to give some practical tips and tricks in this article.

javascript beginners

Friday, November 8, 2019

JavaScript inline event handlers, event propagation, event bubbling and capturing, the Event object, and commonly used events in JS - we cover all of these topics in this tutorial.

javascript beginners

Friday, November 8, 2019

The ability to use JavaScript right in the browser, via the devtools console, opens up a world of possibilites, and a number of ways to practice using JavaScript. In this tutorial, we'll use JS to filter some search results in the Google search engine.

javascript beginners

Sunday, November 3, 2019

This article lists a number of various snippets, tips, and tricks in JavaScript. This is an open-ended list of some cool ideas in JavaScript.

javascript intermediate

Monday, October 21, 2019

Learn all about objects in JavaScript in this in-depth tutorial on the topic.

javascript beginners

Sunday, October 20, 2019

There are well over a dozen ways to define a function in JavaScript. In this fifth article of the Anatomy of JavaScript functions article series, we go in depth, covering all the ways to define a function in JS.

javascript beginners

Sunday, October 20, 2019

How to use the function arguments and how are they related to the ES6 speread operator? This is the topic in this fourth article in the article series titled: the Anatomy of JavaScript functions.

javascript beginners

Saturday, October 19, 2019

What are the differences between ES5 and ES6 functions? We answer this question in this article, third in the series of articles on the Anatomy of JavaScript functions.

javascript beginners

Friday, October 18, 2019

How to generalize functions in JavaScript? Learn all about it in this second part of the Anatomy of JavaScript functions series of tutorials.

javascript angular beginners

Tuesday, October 8, 2019

It's hard to choose what to learn in web development when there are so many options: should I learn vanilla JS or a framework like Angular? Find the answer in this article.

nodejs javascript intermediate npm

Wednesday, September 25, 2019

Why Node and npm? What’s up with Grunt, Gulp, and Webpack? Why choose one over the other? How to reliably share third-party libraries with your team? Why was it so hard - even impossible - to use modules in JavaScript in the past? In this article, we'll answer all these questions.

javascript beginners

Sunday, September 8, 2019

When you're learning to code, it's always a good idea to try to build apps on your own. These apps don't have to be big; actually, as a beginner, it's better if apps are tiny. In this tutorial, we'll see how to learn JS by building a simple game of choice.

javascript intermediate

Sunday, March 24, 2019

Array fun ahead! How to merge two complex array into a single one? This is a practical exercises from one of the projects I was working on in my dayjob - adjusted so that it is more generalized and applicable as a tutorial.

javascript beginners

Monday, March 18, 2019

If you're planning to start learning a coding language, you can't go wrong with JavaScript. In this article we bring you 10 reasons why choose JavaScript as your first programming language.

javascript beginners

Monday, December 3, 2018

This tutorial compares JS functions to simple machines. We go step by step, building a JS function from scratch. We follow all the technical jargon with in-depth explanations and diagrams. By the end of the article, you should have a solid understanding of how JS functions work. Additionally, this is only the first in a series of several articles about the inner workings of JS functions.

html css javascript beginners

Friday, October 19, 2018

In this quick tip tutorial, we see how easy it is to add a border to a table HTML element using CSS, in all the different ways.