Learn how to create an interactive and responsive file sharing web app UI using HTML, CSS, and JavaScript. Step-by-step guide with source code included.
Table of Contents
When it comes to file sharing web applications, a well-designed user interface (UI) is crucial for providing a seamless and intuitive experience to users. The UI of a file sharing web app serves as the gateway through which users interact with the application, making it essential to prioritize usability, functionality, and aesthetics.
In this comprehensive guide, we will delve into the process of creating a file sharing web app UI using HTML, CSS, and JavaScript. Whether you are a seasoned developer or just starting with web development, this blog post will provide you with step-by-step instructions and practical examples to help you design an engaging and efficient UI for your file sharing web app.
A user-friendly UI design not only enhances the overall user experience but also contributes to increased user engagement and satisfaction. By focusing on intuitive navigation, clear visual cues, and streamlined interactions, you can ensure that your file sharing web app is easy to use and visually appealing.
Throughout this blog post, we will explore the fundamental concepts and techniques of UI design using HTML, CSS, and JavaScript. We will cover topics such as structuring the UI with HTML, applying styles and layouts with CSS, adding interactivity with JavaScript, implementing file upload and download functionality, creating a responsive design for mobile devices, and testing and debugging the file sharing web app UI.
By following the steps outlined in this guide, you will gain the knowledge and skills necessary to create a robust and user-friendly file sharing web app UI. Additionally, we will provide you with code snippets and practical tips to facilitate the implementation of each step.
Whether you are building a file sharing web app from scratch or looking to improve an existing UI, this blog post will serve as your comprehensive resource for creating an effective and visually appealing file sharing web app UI using HTML, CSS, and JavaScript. So, let's dive in and start designing a top-notch UI for your file sharing web app!
Join My Telegram Channel to Download the Projects Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Design & Code by: Aybuke Ceylan
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 file sharing web 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.
Here's a breakdown of the code:
<!DOCTYPE html>: This declaration specifies that the document type is HTML.
<html lang="en">: The <html> element is the root element of an HTML page. The lang attribute specifies the language of the document, in this case, English.
<head>: The <head> element contains meta-information about the HTML document, such as the title, character encoding, and CSS stylesheets.
<title>File Sharing Web App UI</title>: The <title> element sets the title of the web page, which appears in the browser's title bar or tab.
<meta charset="UTF-8" />: This <meta> tag specifies the character encoding for the HTML document, which is set to UTF-8 (a widely used character encoding).
<meta name="viewport" content="width=device-width" />: This <meta> tag sets the viewport width to the width of the device, ensuring proper rendering on different screen sizes.
<link rel="stylesheet" href="styles.css" />: This <link> tag links an external CSS file called "styles.css" to the HTML document, which is used for styling the web page.
<body>: The <body> element represents the main content of the web page.
<link href="https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap" rel="stylesheet">: This <link> tag links a Google Fonts stylesheet to the HTML document, specifying the font to be used for the text on the web page.
<div class="app-container">: This <div> element with the class "app-container" is a container for the entire web application.
Inside the app container, there are several <div> elements with different classes representing different sections of the web page, such as the left area, main area, and right area.
Throughout the code, there are various <a>, <button>, and <svg> elements with corresponding classes and attributes to create buttons, links, icons, and images.
The code also includes sections and divisions (<section>, <div>) to structure and organize the content of the web page.
At the end of the HTML code, there are two <script> tags that include external JavaScript files, "jquery.min.js" and "script.js", which provide additional functionality and interactivity to the web page.
This is the basic structure of our file sharing web app using HTML, and now we can move on to styling it using CSS.
How to Add Fixed Social Media Share Buttons to Your Website Using HTML and CSS (Source code)Step 2 (CSS Code):
Once the basic HTML structure of the file sharing web app is in place, the next step is to add styling to the file sharing web app using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our file sharing web app.
Let's go through the code section by section:
The universal selector * is used to apply the box-sizing property to all elements. The border-box value ensures that the specified width and height of elements include the padding and border, without affecting the overall layout.
The scroll-behavior property is applied to the html element, which enables smooth scrolling behavior when navigating to anchor links.
The html and body elements are styled to take up 100% of the viewport width and height (100vh). The margin is set to 0 to remove any default spacing.
The body element is further styled to set the font family, center the content vertically and horizontally using flexbox (display: flex; justify-content: center; align-items: center; flex-direction: column;), hide any overflowing content (overflow: hidden; overflow-x: hidden;), set a linear gradient background image, and add padding.
The :root pseudo-class is used to define custom CSS variables (--dark-font and --light-font) with their respective color values.
The a selector styles anchor links to remove text decoration and change the cursor to a pointer on hover.
The .app-container class is applied to a container element and styled with a relative position, border-radius, maximum width and height, background gradient, box shadow, and other properties.
The .left-area class represents a left sidebar area within the container. It is styled with padding, flex properties, background color, and a transition effect.
The .app-name class styles a heading element with a bold font weight, font size, color, and margin.
The .item-link class is used for styling links within the sidebar area. It has styles for color, margin, and a transition effect. The .active class is added dynamically to highlight the active link.
The .btn-logout class represents a logout button. It has styles for border, background color, color, margin, cursor, and a transition effect.
The .main-area class represents the main content area within the container. It has flex properties, a gradient background, border-radius, padding, and a position of relative.
The .main-area-header class styles a header element within the main area with padding and a gradient background.
The .search-wrapper class represents a search input wrapper. It has styles for border-radius, background color, padding, height, flex properties, color, box shadow, and overflow.
The .search-input class styles the search input element with border, flex, outline, height, padding, and font size.
The .right-area class represents a right sidebar area within the container. It has flex properties, a gradient background, transition effect, and overflow.
The .content-section class styles a block-level section within the main area with margin, padding, and overflow properties.
Various classes within the content section define styles for section headers, access links, icons, text, and other elements.
The .files-table class represents a table element with background color, box shadow, border radius, and padding. The table rows and cells are styled accordingly.
There are additional media queries included in the code to adjust the styles for different screen sizes. The styles inside these media queries override or modify the default styles based on the specified screen width ranges.
This will give our file sharing web 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.
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
html, body {
width: 100%;
height: 100vh;
margin: 0;
}
body {
font-family: "DM Sans", sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
overflow: hidden;
overflow-x: hidden;
background-image: linear-gradient(to top, #a3bded 0%, #6991c7 100%);
background-position: center;
background-size: cover;
padding: 20px;
}
:root {
--dark-font: #0f0f10;
--light-font: #79798c;
}
a {
text-decoration: none;
cursor: pointer;
}
.app-container {
position: relative;
border-radius: 10px;
width: 100%;
height: 100%;
max-width: 1200px;
max-height: 900px;
background: linear-gradient(180deg, #e0e9fd 0%, #e9ecf1 90%);
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4);
display: flex;
overflow: hidden;
}
.left-area {
padding: 32px;
flex-basis: 1 0 132px;
background-color: rgba(255, 255, 255, 0.9);
display: flex;
flex-direction: column;
align-items: center;
transition: all 300ms cubic-bezier(0.19, 1, 0.56, 1);
position: relative;
overflow: auto;
}
.left-area.show {
transform: translateX(0);
opacity: 1;
}
.app-name {
font-weight: 700;
font-size: 16px;
line-height: 24px;
color: var(--dark-font);
margin-bottom: 32px;
}
.item-link {
color: var(--light-font);
margin-bottom: 32px;
transition: 0.2s;
}
.item-link.active {
color: var(--dark-font);
}
.btn-logout {
border: none;
background-color: transparent;
color: var(--light-font);
margin-top: auto;
cursor: pointer;
transition: 0.2s;
}
.btn-logout:hover {
color: var(--dark-font);
}
.main-area {
flex: 1;
height: 100%;
overflow-y: auto;
background: linear-gradient(97deg, #f2f7fd 0%, #f0f4fd 90%);
border-radius: 0 10px 10px 0;
padding-bottom: 24px;
position: relative;
}
.main-area-header {
padding: 24px 40px;
background: linear-gradient(97deg, #f2f7fd 0%, #f0f4fd 90%);
}
.search-wrapper {
border-radius: 4px;
background-color: #fff;
padding-right: 12px;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--light-font);
box-shadow: 0 2px 6px 0 rgba(136, 148, 171, 0.2), 0 24px 20px -24px rgba(71, 82, 107, 0.1);
overflow: hidden;
}
.search-input {
border: none;
flex: 1;
outline: none;
height: 100%;
padding: 0 12px;
font-size: 12px;
}
.right-area {
flex-basis: 300px;
flex-grow: 0;
background: linear-gradient(180deg, #e0e9fd 0%, #e9ecf1 90%);
transition: all 300ms cubic-bezier(0.19, 1, 0.56, 1);
}
.right-area.show {
transform: translateX(0);
width: 100%;
opacity: 1;
}
.content-section {
display: block;
margin-top: 32px;
overflow-x: hidden;
padding: 0 40px;
}
.section-header {
font-size: 24px;
line-height: 32px;
margin-bottom: 16px;
}
.section-header-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
}
.section-header-link {
display: block;
font-size: 12px;
line-height: 16px;
color: #8683d6;
}
.access-links {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 0 -8px;
}
.access-icon {
width: 100%;
height: 100%;
border-radius: 12px;
padding: 20px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.access-icon svg {
width: 36px;
height: 36px;
}
.access-link-wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 8px;
}
.access-link-wrapper:nth-child(1) .access-icon {
background-color: #6166fe;
}
.access-link-wrapper:nth-child(2) .access-icon {
background-color: #6166fe;
}
.access-link-wrapper:nth-child(3) .access-icon {
background-color: #3275f7;
}
.access-link-wrapper:nth-child(4) .access-icon {
background-color: #3275f7;
}
.access-link-wrapper:nth-child(5) .access-icon {
background-color: #22244a;
}
.access-link-wrapper:nth-child(6) .access-icon {
background-color: #22244a;
}
.access-text {
color: var(--light-font);
font-size: 12px;
line-height: 24px;
}
.content-section-line,
.content-part-line {
display: flex;
justify-content: space-between;
}
.content-part-line {
height: 100%;
}
.content-section-line {
margin: 0 -8px;
}
.section-part {
flex-basis: 49%;
}
.image-wrapper {
border-radius: 12px;
overflow: hidden;
width: 100%;
height: auto;
position: relative;
flex-basis: 48%;
display: flex;
}
.image-wrapper img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: 0.2s ease-in;
}
.image-wrapper:hover img {
transform: scale(1.125);
}
.image-overlay {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(0, 16, 34, 0.8) 0%, rgba(240, 244, 253, 0.2) 90%);
padding: 12px;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
}
.video-info-text {
width: calc(100% - 40px);
}
.video-info-text p {
margin: 0;
}
.video-name, .video-subtext {
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.video-name.medium, .video-subtext.medium {
font-size: 14px;
line-height: 24px;
}
.video-name.tiny, .video-subtext.tiny {
font-size: 12px;
line-height: 16px;
}
.video-info {
width: 100%;
display: flex;
justify-content: space-between;
}
.video-subtext {
opacity: 0.8;
}
.files-table {
background-color: #fff;
box-shadow: 0 2px 6px 0 rgba(136, 148, 171, 0.2), 0 24px 20px -24px rgba(71, 82, 107, 0.1);
border-radius: 12px;
padding: 12px;
display: table;
table-layout: auto;
width: 100%;
}
.files-table-header {
display: table-header-group;
}
.files-table-row {
display: table-row-group;
}
.table-cell {
display: table-cell;
font-size: 12px;
line-height: 16px;
color: #000;
padding: 8px;
}
.column-header {
font-size: 12px;
line-height: 16px;
color: #888da9;
}
.name-cell {
width: 40%;
word-break: break-all;
}
.name-cell.pdf:before {
content: "PDF";
background-color: #e2e9f8;
color: #5a8ff7;
}
.name-cell.jpg:before {
content: "JPG";
background-color: #e4e2f1;
color: #302d7d;
}
.name-cell:before {
border-radius: 4px;
font-size: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
display: inline-block;
vertical-align: middle;
margin-right: 4px;
}
.size-cell {
width: 20%;
}
.more-action {
border: none;
background-color: transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23888da9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='feather feather-more-horizontal' viewBox='0 0 24 24'%3E%3Cdefs/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 24px;
height: 16px;
outline: none;
cursor: pointer;
}
.fixed.main-area-header {
position: sticky;
z-index: 2;
top: 0;
width: 100%;
padding: 12px 40px;
transition: 0.2s;
-webkit-animation: sticky 0.5s forwards;
animation: sticky 0.5s forwards;
}
@-webkit-keyframes sticky {
0% {
transform: translatey(-88px);
}
100% {
transform: translatey(0px);
}
}
@keyframes sticky {
0% {
transform: translatey(-88px);
}
100% {
transform: translatey(0px);
}
}
.video-time {
position: absolute;
z-index: 1;
border-radius: 10px;
padding: 4px 12px;
background-color: rgba(139, 156, 163, 0.5);
font-size: 10px;
right: 12px;
top: 12px;
color: #fff;
}
.btn-play {
border-radius: 50%;
background-color: #fff;
border: none;
box-shadow: 0 2px 6px 0 rgba(136, 148, 171, 0.2), 0 24px 20px -24px rgba(71, 82, 107, 0.1);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%2322244a' stroke='%2322244a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-play'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
width: 40px;
height: 40px;
flex-shrink: 0;
}
.right-area {
padding: 24px;
overflow: auto;
}
.right-area-header-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
}
.right-area-header-wrapper .more-action {
width: 24px;
height: 24px;
}
.download-item-line {
padding: 12px 0;
}
.line-header {
font-size: 12px;
line-height: 16px;
color: #888da9;
}
.download-area {
background-color: #eceffb;
border-radius: 12px;
padding: 8px;
display: flex;
align-items: center;
margin-top: 12px;
cursor: pointer;
}
.download-item-texts {
padding: 0 12px;
}
.download-item-texts p {
line-height: 16px;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 150px;
}
.download-text-header {
font-size: 12px;
}
.download-text-info {
color: #888da9;
font-size: 10px;
}
.download-text-info span {
margin-left: 8px;
}
.download-item-icon {
width: 32px;
}
.download-icon {
width: 24px;
fill: #4bc3a7;
}
.progress-bar {
height: 4px;
width: 100%;
overflow: hidden;
border-radius: 2px;
background-color: #dadff3;
margin: 6px 0;
}
.progress {
height: 100%;
width: 40%;
background-color: #4bc0dd;
display: block;
}
.received-item-line {
height: 150px;
width: 100%;
padding-top: 12px;
display: flex;
padding-left: 4px;
}
.progress-line {
height: 100%;
width: 2px;
background-color: #22244a;
display: flex;
justify-content: space-between;
flex-direction: column;
position: relative;
}
.progress-line:before, .progress-line:after {
content: "";
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #22244a;
transform: translateX(-50%);
left: 50%;
}
.progress-line:after {
bottom: 0;
}
.time {
margin-left: 12px;
font-size: 10px;
color: #888da9;
}
.received-items-content {
padding: 24px 10px;
}
.received-files {
display: flex;
height: 70%;
}
.received-files .image-wrapper {
margin-left: 6px;
display: flex;
}
.received-files-info {
font-size: 12px;
line-height: 16px;
margin-left: 12px;
margin-top: 12px;
}
.received-files-info span {
color: #7a8dc5;
}
.btn-show-left-area,
.btn-show-right-area {
position: absolute;
top: 24px;
width: 32px;
height: 40px;
border-radius: 4px;
background-color: #fff;
border: none;
display: flex;
align-items: center;
justify-content: center;
outline: none;
cursor: pointer;
display: none;
}
.btn-show-left-area {
left: 0;
border-radius: 0 4px 4px 0;
}
.btn-show-right-area {
right: 0;
border-radius: 4px 0 0 4px;
}
.btn-close-left,
.btn-close-right {
border: none;
background-color: transparent;
position: absolute;
top: 4px;
right: 4px;
color: var(--light-font);
outline: none;
cursor: pointer;
display: none;
}
.show .btn-close-left,
.show .btn-close-right {
display: block;
}
@media screen and (min-width: 850px) and (max-width: 1042px) {
.access-icon {
padding: 16px;
}
.access-icon svg {
width: 20px;
height: 20px;
}
}
@media screen and (max-width: 900px) {
.right-area {
transform: translateX(100%);
position: absolute;
opacity: 0;
z-index: 2;
height: 100%;
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4);
}
.btn-show-right-area {
display: flex;
}
.access-icon svg {
width: 36px;
height: 36px;
}
}
@media screen and (max-width: 768px) {
.left-area {
transform: translateX(-100%);
opacity: 0;
position: absolute;
z-index: 2;
height: 100%;
background-color: #fff;
background-image: none;
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4);
}
.btn-show-left-area {
display: flex;
}
.content-section-line,
.content-part-line {
flex-direction: column;
}
.image-wrapper {
margin: 10px 0;
}
.video-name.tiny, .video-subtext.tiny {
font-size: 16px;
line-height: 24px;
}
.access-link-wrapper {
width: 33.3%;
}
}
@media screen and (max-width: 520px) {
body {
padding: 0;
}
.app-container {
border-radius: 0;
}
.content-section {
padding: 0 20px;
}
.content-section-line {
margin: 0;
}
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript.
Let's break it down step by step:
1. $(document).ready(function () { ... });: This is a jQuery function that waits for the document (web page) to be fully loaded before executing the code inside the function. It ensures that the code is executed only when the DOM (Document Object Model) is ready to be manipulated.
2. $("a#pageLink").click(function () { ... });: This code selects the anchor element (<a>) with the ID pageLink and attaches a click event handler to it. When this link is clicked, the code inside the function will be executed.
- $("a#pageLink").removeClass("active");: This line removes the CSS class "active" from all anchor elements with the ID pageLink.
- $(this).addClass("active");: This line adds the CSS class "active" to the clicked anchor element ($(this) refers to the currently clicked element).
3. $(".btn-show-left-area").click(function () { ... });: This code selects the element with the class "btn-show-left-area" and attaches a click event handler to it. When this element is clicked, the code inside the function will be executed.
- $(".left-area").removeClass("show");: This line removes the CSS class "show" from all elements with the class "left-area".
- $(".left-area").addClass("show");: This line adds the CSS class "show" to all elements with the class "left-area".
4. $(".btn-show-right-area").click(function () { ... });: This code is similar to the previous one but targets elements with the class "btn-show-right-area". When clicked, it adds and removes the "show" class on elements with the class "right-area".
5. $(".btn-close-right").click(function () { ... });: This code selects the element with the class "btn-close-right" and attaches a click event handler to it. When this element is clicked, the code inside the function will be executed.
- $(".right-area").removeClass("show");: This line removes the CSS class "show" from all elements with the class "right-area".
6. $(".btn-close-left").click(function () { ... });: This code is similar to the previous one but targets elements with the class "btn-close-left". When clicked, it removes the "show" class from elements with the class "left-area".
7. $('.main-area').scroll(function () { ... });: This code selects elements with the class "main-area" and attaches a scroll event handler to them. When the scroll event occurs on these elements, the code inside the function will be executed.
- if ($('.main-area').scrollTop() >= 88) { ... }: This condition checks if the scroll position from the top of the ".main-area" element is greater than or equal to 88 pixels.
- $('div.main-area-header').addClass('fixed');: If the condition is true, it adds the CSS class "fixed" to the "div.main-area-header" element.
- $('div.main-area-header').removeClass('fixed');: If the condition is false, it removes the CSS class "fixed" from the "div.main-area-header" element.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
$(document).ready(function () {
$('a#pageLink').click(function () {
$('a#pageLink').removeClass('active');
$(this).addClass('active');
});
$('.btn-show-left-area').click(function () {
$('.left-area').removeClass('show');
$('.left-area').addClass('show');
});
$('.btn-show-right-area').click(function () {
$('.right-area').removeClass('show');
$('.right-area').addClass('show');
});
$('.btn-close-right').click(function () {
$('.right-area').removeClass('show');
});
$('.btn-close-left').click(function () {
$('.left-area').removeClass('show');
});
});
$('.main-area').scroll(function () {
if ($('.main-area').scrollTop() >= 88) {
$('div.main-area-header').addClass('fixed');
} else {
$('div.main-area-header').removeClass('fixed');
}
});Final Output:
Conclusion:
In conclusion, designing a file sharing web app UI using HTML, CSS, and JavaScript is a dynamic and creative process. By following the steps outlined in this guide and considering the best practices, you can create a user-friendly and visually appealing UI that enhances the overall experience of your file sharing web app.
Remember to prioritize intuitive navigation, clear visual cues, and responsive design to ensure that your UI is accessible and functional across various devices and screen sizes. Test your UI thoroughly, gather user feedback, and make iterative improvements to optimize its performance and usability.
By leveraging the power of HTML, CSS, and JavaScript, you have the tools at your disposal to create a seamless and efficient file sharing web app UI. Pay attention to the details, such as proper HTML structure, engaging CSS styles, and interactive JavaScript functionality, to provide a rich and engaging user experience.
Continuously stay updated with the latest UI design trends, technologies, and user expectations to keep your file sharing web app UI at the forefront of innovation. Embrace feedback from your users and iterate on your design to meet their evolving needs.
With the knowledge and skills gained from this guide, you are well-equipped to embark on your journey of designing a remarkable file sharing web app UI. So, go ahead, unleash your creativity, and build a UI that not only facilitates file sharing but also delights your users.
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 😊
