Design Your Personal COVID-19 Dashboard
Hey there! Hope you all are safe and utilising the quarantine period for learning new technology or skill 🙋🏻♂️.
Alright so today we’re going to create our own website. Excited?
✅ Idea:
Design a COVID-19 website displaying total cases in your area, relevant news, other nearby states and inter-country comparison of stats.
✅ What do you need?
Most importantly excitement of learning something new!
Tech Stacks:
- HTML
- CSS
- BootStrap 4
- Some bits and pieces of UI Design and Color Theory
✅ Description:
We are creating a simple, one page website depicting all of the important information you need to know on a single page.
So, we would cover the following format:
✅ Enough talk. Now Code
Before we begin I want you to quickly import the Bootstrap CDN(get here) inside the <head> of your HTML file index.html . I’ve also added Google Fonts API link for beautiful fonts, jQuery CDN and font-awesome CDN.
Bootstrap could be visualised as ready made HTML that helps us to build beautiful websites quickly.
Refer the code below for reference —
Now let’s start adding elements — navbar, sections of our website & footer(as displayed in description above 👆🏻)
There are several Bootstrap elements which we would be using — Cards, Grid, Tables.
And your final index.html file should look somewhat like this —
It’s a long 400+ code. Don’t worry Bootstrap is for the rescue! 😅
✅ Let’s add some CSS & UI elements
CSS has the power to turn a rock into Gold!
And that’s what we would be discovering today. Although you could see in the above 👆🏻index.html file I’ve also added a few inline CSS.
You can refer the below file style.css for custom CSS.
🔴 IMPORTANT 🔴
One thing to remember is while putting your link for style.css put it below Bootstrap CDN as it follows succeeding principle — the thing placed below can overwrite on the previous above it.
And you’ve got your personal COVID-19 Dashboard ready!
Check the website here: https://covid19dhairya.netlify.app/
Designing with Bootstrap is ❤️ both your mobile and web version gets created!
GitHub repo link: https://github.com/dhairyaostwal/COVID-19-Dashboard
✅ Now, the challenge for you is to create:
- A light theme based version for the website
- Use graphs and other media objects to display statistics
Tag me @dhairyaostwal on Instagram/LinkedIn/Twitter/Medium. Definitely super excited to see your work!
Hey, I am Dhairya Ostwal. Hope my above story was useful to you and did inspire you to create something for yourself. Would love to hear your views 😄
