This is a simple landing page for The Legend of Zelda. It was the final project for SheCodes Basic, a three-week course teaching the basics of HTML, CSS, and JavaScript. The requirements for this project was to create an interactive landing page on a topic of interest (I chose gaming - specifically, The Legend of Zelda).
- HTML/CSS
- JavaScript
- VS Code
- Netlify (added after I completed the course)
When you first load the page, an alert will pop up asking for the user's name. If the user enters a name, the alert will change to a greeting. If the user doesn't enter a name, the alert will greet "(null)."
After the user exits the alert message, the page will show an introduction of the concept behind The Legend of Zelda's storyline and an image of the "triforce" logo. Further down the page are links to each of version of the game and the year it was released. Clicking on the links will open a tab new and take the user to more information about that particular game.
At the bottom is a button that asks whether the user is "ready to save Hyrule." Clicking on this button will send an alert to the user for them to answer yes or no. If they answer "yes," the button's text will change to wish them luck. If they answer "no," the button's text will change to ask them to come back when they're ready.
I started by visiting the official Legend of Zelda website to gather ideas on topics, information to include, color schemes, and images. After I decided what I wanted to feature, I drafted a layout of the page and determined how I wanted to make it interactive.
I knew I wanted to have a few functions on the page to test and improve my skills. So in addition to the alert, I researched how I could target the button's text to make that change too.
As I was very new to coding, I was still figuring out what I could do with the skills I had learned in the course. So my main struggles tended to relate more to responsive design, which I knew I was going to learn in another SheCodes course (and implemented after said course).
However, there are definitely things I would love to improve and update now that my skills have grown further. These are listed below under "Improvements."
In this project, I learned how to create a few basic JS functions and event listeners, such as alerts and targeting specific elements. I also learned how to use classes for further styling (something I implemented after the course) and create a simple design for accessibility and readability.
Since my skills are still new, it would've been very easy to overcode everything in an effort to show my skills. Instead, I tried to focus on key elements and writing clean code.
These are just some of the improvements I would like to work on next time:
- Finding out if the title on the alert can be changed, and if so, changing it.
- Changing the text under the image into a 2-column flexbox and adding additional gameplay images. This would look like:
Paragraph, Image
Image, Paragraph
Paragraph, Image - Using flex-wrap on the links and adding images of each game above the links.
- Adding additional options to the button's question. For example, the good luck message only occurs for answers of "Yes," "yes," "Y," and "y." I would consider other answers like "yeah," "yea," "of course," and "sure."
- Changing all user responses to .capitalize() in JS for consistency.
Landing Page: Legend of Zelda