Learn how to create a stylish and functional fitness app UI with this step-by-step HTML and CSS tutorial. Get hands-on experience and source code included.
Table of Contents
Hey there! So, you know when you open a fitness app on your phone and see all those cool buttons, colors, and layouts? Well, someone had to design that! In this part of our tutorial, we'll talk about why fitness apps need to look good and how we can use HTML and CSS to make them look awesome. It's like giving your app a makeover to make it more attractive and user-friendly. Let's dive in and learn how to make your fitness app shine! 🌟
Why is it important for fitness apps to look good?
When you open a fitness app, you want to feel motivated and excited about your workout journey, right? Well, having a visually appealing design plays a big role in making that happen. Think about it: if an app looks outdated or messy, you might lose interest pretty quickly. But when an app looks sleek, modern, and easy to use, it makes you want to stick around and explore all it has to offer. Plus, a well-designed app can help you find what you need faster, track your progress more effectively, and overall, just enjoy the whole fitness experience a whole lot more. So, in a nutshell, a good-looking fitness app isn't just about aesthetics – it's about keeping you engaged, motivated, and on track to reaching your fitness goals.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our fitness app.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let's break down the HTML code step by step:
1. <!DOCTYPE html>: This declaration specifies the document type and version of HTML being used (HTML5 in this case).
2. <html lang="en">: This is the opening tag for the HTML document and specifies that the language used is English.
3. <head>: This section contains meta-information about the document such as character encoding, viewport settings, and the title of the webpage.
- <meta charset="UTF-8" />: Sets the character encoding to UTF-8, which supports a wide range of characters.
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />: Provides instructions to the browser to use the latest rendering engine available.
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />: Defines the viewport properties for responsive design.
- <title>Modern fitness app UI</title>: Sets the title of the webpage to "Modern fitness app UI".
- <link rel="stylesheet" href="styles.css" />: Links an external CSS file named "styles.css" for styling the webpage.
4. <body>: This section contains the visible content of the webpage.
5. <nav>: Defines a navigation bar containing links to different sections of the application.
- It includes links represented by <a> tags with icons from various libraries such as "ionicons" and "fontawesome".
- The <a> tags have classes indicating their status, such as "active".
6. <div class="dashboard">: This division contains the main content of the dashboard.
- It consists of several cards (<div class="card">) representing different sections of the dashboard, such as profile information, weekly schedule, active calories, etc.
- Each card has its own styling and grid area defined using inline CSS.
- Information such as greetings, exercise schedules, personal bests, challenges, and activity feeds are displayed within these cards.
7. <script>: This section includes JavaScript files required for functionality.
- Two script tags import the necessary modules for icons from "ionicons" and "fontawesome" libraries.
- One script tag imports the Font Awesome icon library.
This is the basic structure of our fitness app using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the fitness app is in place, the next step is to add styling to the application using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our fitness app UI.
Let's break down the CSS code step by step:
1. @import url('https://fonts.goo...');: This line imports the Inter font family from Google Fonts, with different weights (200, 300, 400, and 500).
2. Universal Box Sizing: The *, *:before, and *:after selectors set the box-sizing property to border-box for all elements. This ensures that padding and border are included in the element's total width and height.
3. :root: This selector defines global CSS variables, setting various colors to be used throughout the stylesheet.
4. body: Styles applied to the body element, setting the width to 100%, color to the global text color variable, using the Inter font family, and creating a grid layout with two columns.
5. .bg: Styles for a background element, creating a fixed position background with a linear gradient overlay and an image from the specified URL.
6. nav: Styles for a navigation element, making it sticky at the top of the viewport, with a background color and a blurred effect using backdrop-filter.
7. nav > a: Styles for links within the navigation, setting their appearance and creating a hover effect.
8. nav > a:after: Styles for the hover effect of links, creating a glowing effect below the links.
9. nav > .navspacer: Styles for a spacer element within the navigation.
10. .dashboard: Styles for a dashboard section, setting a grid layout and padding.
11. .card: Styles for card elements within the dashboard, including border-radius, background, and backdrop-filter.
12. .card > h2: Styles for headings within cards.
13. .card > .bigstats: Styles for a section of big statistics within cards, including a grid layout and padding.
14. .card > .bigstats > .stat: Styles for individual statistics within the big stats section.
15. .statnum: Styles for the numbers within statistics, including a gradient background, font-weight, and drop shadow.
16. .card > ul, .card > ul > li: Styles for unordered lists and list items within cards.
17. .progresscircle: Styles for progress circle elements, setting dimensions, and font-weight.
18. .progresscircle > svg, .progresscircle > svg > circle: Styles for SVG elements used in progress circles, setting stroke properties.
19. .card > table, .card > table th, .card > table td: Styles for tables within cards, including spacing and border properties.
20. .card.profile: Styles for a special type of card called a profile card.
21. .card.profile > h2, .card.profile > p: Styles for headings and paragraphs within profile cards.
This will give our fitness app an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&display=swap');
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:root {
--background: #00000044;
--glow-object: #a530ff;
--glow-object-grad: linear-gradient(to bottom right, #9d1fff, #bf1fff);
--glow-object-grad-text: linear-gradient(to bottom right, #d770ff, #bc85ff);
--glow-shadow: #7900ff;
--glow-shadow-text: #7900ffbb;
--text: #d5d1dd;
}
body {
width: 100%;
color: var(--text);
font-family: "Inter";
display: grid;
grid-template-columns: 4.5rem 1fr;
margin: 0;
}
.bg {
position: fixed;
inset: 0;
z-index: -1;
background:
linear-gradient(#23004a55, #23004a99), url("https://media.idownloadblog.com/wp-content/uploads/2021/06/macOS-Monterey-wallpaper-Dark.jpg") center center / cover;
}
nav {
position: sticky;
top: 0;
height: 100vh;
place-self: stretch;
background: var(--background);
backdrop-filter: blur(2rem);
display: flex;
flex-direction: column;
padding: 0.5rem;
}
nav > a {
position: relative;
display: grid;
place-content: center;
color: var(--text);
height: 3.5rem;
border-radius: 0.75rem;
font-size: 1.5rem;
text-decoration: none;
}
nav > a:after {
position: absolute;
content: "";
left: 0.125rem;
top: 50%;
transform: translateY(-50%);
height: 0rem;
width: 0.25rem;
border-radius: 1rem;
background: var(--glow-object);
transition: height 200ms ease, box-shadow 200ms ease;
}
nav > a:hover {
background: #ffffff15
}
nav > a:hover:after {
height: 2.5rem;
box-shadow: var(--glow-shadow) 0 0 7px 1px;
}
nav > a.active:after {
height: 2.5rem;
box-shadow: var(--glow-shadow) 0 0 7px 1px;
}
nav > .navspacer {
flex-grow: 1;
}
.dashboard {
place-self: stretch;
display: grid;
place-content: center;
grid-auto-rows: 9rem;
grid-template-columns: repeat(auto-fit, 9rem);
grid-auto-flow: row;
grid-gap: 0.75rem;
padding: 0.5rem;
}
.card {
display: flex;
flex-direction: column;
position: relative;
border-radius: 0.75rem;
background: var(--background);
backdrop-filter: blur(2rem);
}
.card > h2 {
margin: 0;
padding: 0.375rem 0.5rem;
font-size: 1.125rem;
}
.card > .bigstats {
padding-top: 1.75rem;
display: grid;
grid-auto-flow: row;
grid-template-columns: 1fr 1fr 1fr;
grid-row-gap: 2rem;
place-content: center;
padding-bottom: 0.5rem;
}
.card > .bigstats > .stat {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.statnum {
background: var(--glow-object-grad-text);
font-size: 2rem;
font-weight: 600;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
filter: drop-shadow(var(--glow-shadow-text) 0px 0px 5px);
line-height: 0.9;
}
.card > .bigstats > .stat > .stattext {
font-weight: 500;
}
.card > ul {
margin: 0;
padding: 0 0.5rem;
}
.card > ul > li {
list-style-type: none;
margin: 0;
padding: 0.5rem 0;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #ffffff22;
font-weight: 500;
}
.progresscircle {
--progress: 33;
position: relative;
width: 4.5rem;
height: 4.5rem;
display: grid;
place-content: center;
font-weight: 600;
margin: -0.375rem -0.25rem;
}
.progresscircle > svg {
position: absolute;
inset: 0;
transform: rotate(-90deg);
}
.progresscircle > svg > circle {
fill: none;
stroke: var(--glow-object);
filter: drop-shadow(var(--glow-shadow) 0 0 5px);
stroke-width: 8px;
stroke-dasharray: 250;
stroke-dashoffset: calc(250 - 2.5 * var(--progress));
}
.card > table {
flex-grow: 1;
margin: 0 0.5rem;
border-spacing: 0;
}
.card > table th, .card > table td {
margin: 0;
text-align: center;
border-top: 1px solid #ffffff22;
}
.card.profile {
display: flex;
flex-direction: column;
justify-content: center;
}
.card.profile > h2 {
font-weight: 600;
font-size: 1.5rem;
}
.card.profile > p {
margin: 0;
padding-left: 0.5rem;
font-weight: 500;
transform: translateY(-0.375rem)
} Final Output:
Conclusion:
Congratulations on completing this journey into designing a modern fitness app UI using HTML and CSS! By now, you've learned how to structure your project, create a visually appealing layout, and add stylish touches to enhance user experience.
Remember, the design of your fitness app isn't just about making it look pretty – it's about creating an environment that motivates and inspires users to achieve their fitness goals. With the skills you've gained, you're well-equipped to craft engaging and user-friendly interfaces that will keep your users coming back for more.
Keep practicing, experimenting, and refining your designs to make them truly shine. And most importantly, have fun with it! Your creativity is the limit, so don't be afraid to push boundaries and try new things.
Thanks for joining us on this journey. We hope you continue to explore the exciting world of front-end development and create amazing experiences for your users. Happy coding! 🚀
Code by: Mona Plamondon
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
