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 handling an array called flowers. Each element in the array are strings of flower names. Let’s write a callback function and the default arguments are ( each element , index , original array )and you can console log the function or anything but for this lesson, we will console log…


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 200 email submits a month. Here are some resources that I followed along step by step.

Travis Prol (a coder I met through Artists Who Code)’s blog
https://travisprol.medium.com/sending-emails-via-form-submit-in-react-8d87e55eca3a

https://medium.com/kirsten-werner/using-a-react-form-to-send-information-directly-to-your-email-2c9666f0d63a

These resources cover simple one page form. It should have worked for my form too but it just didn’t work…


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 button gets clicked, the click handler callback function clickNext will run. The helper function, clickNext on line 5 will be triggered and the console will print “next button clicked”.

2. Class component event handling

For React class components, the only difference for the event handling is adding this before the click handler function.


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…

3. Use line spacing between 120 and 150%

4. 45 to 90 characters

https://creativemarket.com/fonts

1. Use a font-size between 15 and 25 pixels for body text

2. Use (really) big font sizes for headlines

3. Use a line spacing between 120 and 150% of the font size

4. 45 to…


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 css and followed the stackover flow instruction, the whole look of my app would break. haha. So this was time to build strong foundation.

I really wish I learned how to use flexbox long time ago because I absolutely love flexbox. It’s also extremely easy to learn because there are…


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 its props or a global theme is simple and intuitive without having to manually manage dozens of classes.

1. Install:

yarn add styled-components

2. Import:

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