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 span
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.
<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>
<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">
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.




I am a web developer who writes web development content for you to make web development easier

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Connecting Jenkins CI to VM-Based Application

NTT DATA Services Announces Intent to Acquire Hashmap

A holistic approach to business process modelling

How to create Light / Dark mode toggle with CSS and Javascript

Course App using Flutter

Coding for Stock Traders in the GameStop Era

Photo of stock charts

Relationship between the Cloud Custodian Lambda Function and the Cloudwatch Event Rule (Part 2)

Program test analysis and technical advice on EOSIO

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


I am a web developer who writes web development content for you to make web development easier

More from Medium

Tips to get FreeCodeCamp Responsive Web Design certificate faster

Oxygen Builder vs. Elementor

Chrome’s Developer Tools — A Must Have

screenshot of Chrome Developer Tools

Insert an dynamic HTML signature to web applications