In this lesson, we will be creating a 404 Not Found Page using HTML, CSS, and JS. Also, we will introduce our awesome course which teaches basic programming for teenagers. Now let me introduce our Level 1 syllabus. We teach basic programming skills which contain Algorithm, Web system introduction, and OS. During the Algorithm lessons, students can get to know how computers work. In web lessons, we teach you basic web programming technologies such as HTML, CSS, and JS. The following image briefly describes them. ![970f6e0a66ec6e6b9c00774939a3cf53](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rgsjk29o3podoqybs9ns.jpeg) Please pay attention to the real demo. Let's build a Not Found Page and copy a default 404 page of the firebase (please see the below picture). Firebase is an awesome platform of Google. We teach Firebase in Hop level 1 and level 2. In order to build the web, we need to study HTML, CSS, JS. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tihtubvg4c517we5nr2z.png) Before we deep dive into coding, you need to install a more comfortable editor for programming. We suggest using [Visual Studio Code](https://code.visualstudio.com/). Otherwise, you can just use Notepad. First, we need to build our web structure by using HTML. The HyperText Markup Language (HTML) is like the backbone of the Web. Let's create a new folder for the project and add a new file named `project/index.html`. Please copy the below text to the file. ```html Page Title

Hello World!

``` If you open the file on the web browser, you'll see the first web which you made. In the second step, we will add HTML elements (Bones) in the HTML. There are [tags](https://www.w3schools.com/html/) you need to know such as Header tag, Paragraph tag, and Image tag. In order to add headers, subheaders, and paragraphs to the not found page, please replace the following script with `

Hello World!

` on `index.html` ```HTML

404

Page Not Found

The specified file was not found on this website. Please check the URL for mistakes and try again.

Why am I seeing this?

This page was generated by the Firebase Command-Line Interface. To modify it, edit the 404.html file in your project's configured public directory.

``` After editing the HTML file, reload and the following result will be shown. ![Screen Shot 2021-05-12 at 09.50.52](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5jo6lak7ci11lzeldy4d.png) Now let's work on the design, it will be our third step. Let's create a named `style.css` file on the project folder. The picture shown below is adding the `style.css` file to `index.html`. ```HTML ... ``` After adding the linked CSS file to `index.html`, add the following script to `style.css` file. CSS defines the style of elements on HTML such as color, size, spacing, and fonts. Maybe `margin` and `padding` are a little unclear on the below script. They are both help to define spaces on the web. ```CSS body { margin: 0px; background-color: rgb(247,247,247); font-family: Roboto, Helvetica, Arial, sans-serif; } .box { margin-top: 100px; max-width: 350px; padding: 25px 20px 15px 20px; background-color: white; margin-left: auto; margin-right: auto; border-radius: 3px; } p { font-size: 14px; } h1 { color: orange; font-size: 18px; } h2 { color: gray; font-weight: 200; font-size: 24px; } h3 { font-size: 16px; font-weight: 400; color: gray; } ``` Let's reload on the web page. You see the result on the web. ![Screen Shot 2021-05-12 at 20.55.59](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9glf075o7kqw54uic9wy.png) In the fourth step, We have to add action to our web. By using JavaScript we can easily create action to our web. This action will be completed by clicking on the given text which is "I Love Nest". When you add the following script on the `index.html`, "I, Love, Nest" text will be shown on the not found page. ```HTMl

404

Page Not Found

The specified file was not found on this website. I Please check the URL for mistakes and try again.

Why am I seeing this? Love
This page was generated by the Firebase Command-Line Interface. To modify it, edit the 404.html file in your project's configured public directory. Nest

``` ![Screen Shot 2021-05-12 at 20.55.59](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9glf075o7kqw54uic9wy.png) Next, we need to add action on the button "I Love Nest" by using Javascript (JS). So, create a file named `index.js` and add a script link on the `index.html`. ```HTML ``` Afterward, add the below scripts on `index.js`. This will bring the result to show alert by clicking on the letter "I". ```JS document.getElementById("i").addEventListener("click", functionClickI); function functionClickI(e) { alert("clicked on I") } ``` Lastly, You need to replace the "index.js" by the following code. This will result in an opening of Nest website by orderly clicking on the given text "I Love Nest". ```JS document.getElementById("i").addEventListener("click", functionClickI); document.getElementById("love").addEventListener("click", functionClickLove); document.getElementById("nest").addEventListener("click", functionClickNest); document.getElementById("reset").addEventListener("click", functionClickRest); let step = 0 function functionClickI(e) { e.stopPropagation() console.log("clicked on I") step = 1 } function functionClickLove(e) { console.log('clicked on Love') e.stopPropagation() if (step == 1) { step = 2 } } function functionClickNest(e) { console.log('clicked on Nest') e.stopPropagation() if (step == 2) { window.location = 'http://nestacademy.mn/' } } function functionClickRest(e) { console.log('reset') e.stopPropagation() step = 0 } ```

Hello World!

Hello World!

404

Page Not Found

Why am I seeing this?

404

Page Not Found

Why am I seeing this? Love This page was generated by the Firebase Command-Line Interface. To modify it, edit the 404.html file in your project's configured public directory. Nest

Why am I seeing this? Love
This page was generated by the Firebase Command-Line Interface. To modify it, edit the 404.html file in your project's configured public directory. Nest

lbayarkhuu

Demo lesson 1 for Hop level - 1

Join Our Newsletter. No Spam, Only the good stuff.