We've learnt HTML5 from scratch and now it's time to create some apps using HTML. In this post I am going to create a cat app using HTML without any style, so it is so ugly don't be scared right now when you learn CSS language we will apply our CSS into our cat app. First add h1 heading element into app.
<h1>Cat Photo App</h1>
We have HTML semantic elements, what does it mean. Semantics elements are elements that they have special like: header, section, aside, main, article, footor. Beside semantics elements we have non-semantic elements they don't have special meanings like: div and section.
Let me explain semantic elements
Header => From its name everyone knows it is used at the heading of a website.
Main => We wrap our web content inside main element.
Article => We put our content like: texts, images, videos , audios,...
Section => We can create multiple sections into our website which is so common.
Aside => Is used for sidebars, I fetch a photo of semantic elements on that time you will have a basic knowledge of semantic elements.
Footer => Is used at the bottom of our website which is sticked at the bottom.
Let's add the image of cat into our website then add a link to our cat photos after that create an unordered list what our cat eat, after that create a basic form which defines the type and some other attributes of our cat. As I said we wrap our content inside main element.
<main>
<img src="..." alt="my cat photo">
<p>Click <a href="..." target="_blank">here</a> to view more photos of my cat</p>
<h2>Things my cat eat daily</h2>
<ul>
<li>Meat</li>
<li>Bread</li>
<li>Bean</h2>
</ul>
<form>
<p>Cat Type</p>
<input type="radio" name="type" id="outdoor" value="outdoor">
<label for="outdoor">Outdoor</label>
<input type="radio" name="type" id="indoor" value="indoor">
<label for="indoor">Indoor</label>
<p>My Cat Attributes</p>
<input type="checkbox" id="lovely" value="lovely">
<label for="lovely">Lovely</label>
<input type="checkbox" id="lazy" value="lazy">
<label for="lazy">Lazy</label>
<input type="checkbox" id="energetic" value="energetic">
<label for="energetic">Energetic</label>
<input type="submit" value="Submit">
</form>
</main>
This was all about my cat photos' app. Hope you enjoy the story. If you have any questions or suggestions let me know. Don't forget to like and share.