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

Update for NFTY Jigs Presale Participants

9 Best Data Engineering Courses You Should Take in 2022

How to earn extra income from Airbnb Business

Richmond ready for move from Congress to West Wing

A Programmer Walks Into a Dance Party, Then…

Cloud Deep Dive: Part 3 — The Extremely Scalable Pizza Menu with Serverless SSR

OAuth in REST API done right with OutSystems

Azure Data Factory pipeline with Snowflake and DBT

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

100 Days Of Code #3

A To-do List HTML & CSS (Pt.1)

Who knew!?

Things you didn’t know about HTML