The project was based on the challenge provided by Frontend Mentor.
This is a solution to the Time tracking dashboard challenge on Frontend Mentor.
- User Stories
- Features
- Technologies Used
- Design
- Bugs
- Testing
- Deployment
- Author
- Credits
- Acknowledgments
I was using design files provided for this challenge in order to make the result look as similar as possible to the provided images.
I have also added various breakpoints in order to provide the best user experience.
The solution to this challenge can be accessed by this link
- As a First Time Visitor, I want to easily understand the main purpose of the website, so I can learn more about this website.
- As a First Time Visitor, I want to be able to easily navigate through the website, so I can find the content.
- As a First Time Visitor, I want to find the website useful.
- As a Frequent User, I want to get countries information, so I can learn about countries'.
- As a Frequent User, I want to have a chance click on the neighboring countries, so I can learn about neighboring countries.
- As a Frequent User, I want to have a chance so select and search countries, so I can easily find a country needed.
-
-
Represent:
- the time tracking dashboard.
-
Consist:
-
Navbar with the incentive, and mode control to pick the theme.
-
Search panel to search for a country.
-
Select dropdown menu to select countries by continent
-
summary about each country with its flag.
-
When clicking a country card, the user can learn more about this country, click on boarder countries to be redirected to another country, or go back to the main page.
-
-
- HTML - was used as the foundation of the site.
- CSS - was used to add the styles and layout of the site.
- CSS Flexbox - was used to arrange items symmetrically on the pages.
- CSS Grid - was used to make "gallery" and "contact" pages responsive.
- CSS roots - was used to declaring global CSS variables and apply them throughout the project.
- VSCode - was used as the main tool to write and edit code.
- Git - was used for the version control of the website.
- GitHub - was used to host the code of the website.
- GIMP - was used to make and resize images for the README file.
- JS - was used to display content on the page.
- async functions - were used to fetch the data from the local json file.
-
The design, color scheme and font-family were provided by Frontend Mentor.
-
Family: Nunito Sans (Weights: 300, 600, 800).
- Solved bugs
- The previous version of the REST COUNTRIES API was not available and the recent one has overwhelming data. Since I was aware of the issues with this data base happening before, I made a decision to use local JSON file + svg images from free source: Flagpedia.net to keep my code running regardless of the availability of rest countries API.
-
Unsolved bugs
- The size of the flags were changed due to the requirements to keep cards with the same size. But in order to make flags more realistic, there is a solution:
Change width of the .data__card to max-width
-
The app was tested on the following browsers: Chrome, Firefox, Brave, Edge:
- Chrome:
- Firefox:
- Brave:
- The app was checked by devtools implemented on Firefox and Chrome browsers.
-
The app was checked by devtools implemented on Firefox and Chrome browsers.
-
The app was checked with Responsive Website Design Tester.
- Mobile Screens:
- Mobile 320x480, 320x568, 360x640, 375x667, 384x640, 411x731, 414x736:
- Tablets Screens:
- Tablet 600x960, 768x1024, 800x1280, 1366x1024, 1600x900, 1680x1050, 1920x1080, 1920x1200:
- Desktop Screens:
- Desktop 1024x600, 1024x800, 1366x768, 1440x900:
-
The functionality of the links in the app was checked as well by different users.
-
-
No errors or warnings were found when passing through the official W3C validator.
- Main Page:
-
-
- No errors were found when passing through the official W3C (Jigsaw) validator:
- The warnings shown are all regarding the use of webkits. However, the website works normally without any issues.
No errors or warnings were found when passing through the official JSHint validator:
- The site was deployed to GitHub pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab
- From the source section drop-down menu, select the Main Branch, then click "Save".
- The page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
The live link can be found here
In order to make a local copy of this project, you can clone it. In your IDE Terminal, type the following command to clone my repository:
git clone https://github.com/IuliiaKonovalova/frontend-mentor-rest-countries-api.git
- Website - Iuliia Konovalova
- Frontend Mentor - @IuliiaKonovalova
-
- Frontend Mentor had provided all necessary content and design that was used in order to complete this challenge.
-
- Flagpedia.net had provided a free access to flags of all countries around the world.
-
- Google Fonts was used in order to implement required font.
- Frontend Mentor for inspiring to improve my skills.
-
Desktop:
-
Mobile:
