We are going to build a revision cards html website. This website will contain two pages: home page and cards page.
At the top of both pages, we will list all the subjects, at least three, you want to include. This list will be the main navigation of your html website. Alternatively, you can pick just one subject and list all the topics you want to cover, at least three topics.
In the middle of the home page, we will place a huge title – Revision cards.
The cards page will contain either one card in the middle and navigation arrows from both sides to change them, or you can design them differently. When users will click the menu button (it could be one subject or one topic from your choice), you will display cards from that subject.
contentIn front of every single card, we will add the keyword. When this card will be flipped, user will see the definition of this word. We will create at least twenty cards for each subject. When users will click the navigation arrows another card will appear.
Before we will start coding, we need to create a design for your website.
To get an inspiration and see some existing features you can include in your design, we are going to create a mood board. Your mood board will contain four sections: fonts you like, some examples of cards, navigation ideas, and colours. There are plenty of websites you can use for your research, one of them is dribbble.com.
When you’ve done your mood board you are going to create the design of your website. There are many apps you can use for that, for this project you are going to use figma.com.
First, you will pick the fonts you like. You need one for the content and one for titles. Look at your mood board, think about your users and about the theme of your website. Would you like to keep it formal or informal? We are going to use google fonts (https://fonts.google.com/) for your website because google fonts has free fonts and you can use it without registration. Pick two fonts and write down the names of these fonts.
Your next step would be to pick colours for your website. Again, look at your mood board and decide what colours you want to use for your website. There is one website you can use https://color.adobe.com/create/ to either create colours or use those already created for you.
Now you need to pick three sizes to create a prototype of your actual website. One size for a mobile phone, one for a laptop and one for a desktop.
Open figma.com, click new design file button and rename it at the top. Add 6 rectangles to your design page, three for home page and three for cards. Remember to use the same sizes you picked for the mobile phone, the laptop, and the desktop. Change the background, using the colour you’ve decided to use as a background.
Finally, you can start. You are ready to build your website. Create a new folder and call it 'Revision cards'. For this project we are going to use Visual Studio Code. Open Visual Studio Code and open the folder you've just created.
All html files has html extension. You need to create a new file, the name of this file is index.html.
In general, html is just the text surrounded by tags. The first tag you need to include at the top of your file is <!DOCTYPE html>, this way you declare the type of your document, so the browser knows how to read it. Straight after, you need to open your html page using html tag and close it <html> </html>. Your page must be between these two tags. Your page contains two sections: the head of your page, the body of your page. Now we are going to add two more tags one for the head and one for the body. Now, your code looks like this <!DOCTYPE html> <html> <head></head> <body></body> </html>. The content of your page will be between the body tags <body> Here you will add the content of your page </body>. Remember, when you are opening a tag you need to close it (there are some exeptions-empty tags, we will look at them later.
The first section inside the body will be navigation of your website. To build it, we are going to use three new tags (nav, ul, li). Nav stands for navigation and you can use this tag just for navigation. Ul tag is used for unordered list and it's going to be nested inside nav tags. Li tags you will use for the list items, every single item of your menu will be surrounded by li tags and nested inside ul tags. The number of li tags depends on how many subjects you are going to include. In this example I've added three items, your number maybe different. <!DOCTYPE html> <html> <head></head> <body> <nav> <ul> <li> Home </li> <li> Computer science </li><li> Maths </li> </ul> </nav> </body> </html> Save you changes. Make sure that you are using keyboard shortcuts - Ctrl + S will save your changes. Open your file with Google Chrome to see the progress.
There are several tags you can use for headings (h1, h2, h3, h4, h5, h6). For the main title we are going to use h1 tag and add a class of your choice.
Before we've started to style your website, we are going to modify your html code. We are going to add classes to some tags. These classes will work as a reference for your stylsheet. <nav class= 'nav'> </nav> here you can see an example of such class. You can pick any name for the class name, just make sure that it is meaningful. To show the relationship between nav tag and ul tag, the name of ul class will be 'nav__ul'
We are ready to add styles to your webpage. Our first step would be to create css folder inside revision cards folder. Inside css folder your are going to create style.css file. Now you need to add the reference to this file, so browser knows where to get styles from. Inside your html file (index.html) between head tags you are going to add this line of code. <link rel="stylesheet" href="./css/style.css">The dot in front (./css) says that this folder(css) is placed inside the same folder as index.html
At the top of your stylsheet you are going to add your first rule. We are going to style the body of your website.Body is the only element we are going to target without using a class of this element.body { background-color: black; font-family: 'your font'; font-size: 16px; color: white} Inside curly bruckets you are going to add some rules for the body element. We are going to change the colour of the background (background-color), add font family(font-family) for the content, add font size(font-size) and color of the text (color). We set font size, colour and font family as default for your website. Now we will target the classes of the elements to change this default.
To change the style of the element, using its class we need a dot in front of this class. .nav { font-size: 20px; }
To style 'Revision cards' title you will target the class of h1 tag. In this example the name of the class is title, as I mentioned you can use different meaningful name of your choice..title { font-size: 40px}
When you've created the prototype of your website you've been designing three sizes. Now you are going to change some rules you set for your title and later we will add new rules for nav element as well. Open figma.com and check what size you've been using for a mobile phone, laptop and desktop. You need to change max-width to add one more media query for different device @media only screen and (max-width: 600px) {.title { font-size: 20px}}
Imagine diving into the exciting world of JavaScript through colorful and captivating books. With each turn of the page, you'll uncover the secrets of how websites and games come to life on screens. Through stories and playful examples, you'll meet friendly characters like Loopy the Loop and Function Fox, who will show you how to create amazing things with code. So grab your favorite snack, find a cozy spot, and let these magical books whisk you away on a journey of discovery, where learning to code is as fun as solving a puzzle in a treasure-filled land of the internet!
This helps you to unleash your creativity and become the wizards of the digital world. Learning to code in a playful and imaginative way helps you build problem-solving skills and empowers you to bring your own ideas to life, whether it's designing a game, creating interactive stories, or crafting your own mini websites. Foolow this link to find some existing JavaScript books for children. Happy reading and coding!