The forEach() method executes a callback function for each element in the array. What does that mean? The ‘forEach’ method calls a function that’s outside of forEach and that handles the iteration for the array that it’s checking. Let’s look closely how it really works.

forEach: callback function

We are…


What is semantic HTML?

Semantic HTML reinforces clear web content rather than vague<div> containers.

<section><article><nav><main><header><footer><aside><summary><details>

Why Semantic markup HTML?

Semantically correct HTML helps search engines, web browsers, developers and crawlers to distinguish between different types of data.

  1. SEO
  2. Accessibility
  3. Maintainability


What is EmailJS?

EmailJS is an incredible tool that send a submitted contact form from client-side javascript code to an email inbox without a backend server.

How to use EmailJS?

It’s easy to start. Create an account, connect the account to your email, then copy the react REST API code into your JS code. It’s free for…


Photo by Ferenc Almasi on Unsplash

1. Functional component event handling

<button onClick = {clickNext}> next </button>

In JSX, line 11, the button tag will get the event handler onClick (using camel case in React). Then let’s bound the callback helper function in line 5 in the class so it has access to the instance of the component.

When the…


1. typography

Texts in websites are most important content because it clearly communicate with the users with words and there are many different ways to approach designing text. Font family, size, spacing and character number limits. There are some modern

  1. body font size 15–12px.

2. Huge headline font size 90px, 60px, 32px…


I have seen display: flex; so many time, not bothering to understand what it meant because I was learning something else, either Javascript or React with deadline. Often I used css templates. So not knowing the foundation of flexbox was extremely frustrating. When I googled how to fix a simple…


Styled-components uses template literal to style components. You will be creating a normal React component to style your other components.

0. Advantages of styled-components:

  1. No duplication or overlap: because styled-components keeps track of which components are rendered on a page and injects their style.
  2. Dynamic styling: adapting the styling of a component based on…

Greem Jellyfish

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store