• Respect exactly the provided layout
• If visiting the page on a Desktop, show an alert to the user that says to check the same page from a Mobile Device
• Provide the Mobile experience of Scrolling and Navigation of Details
• Details of the Doctors are mocked (e.g. No API is needed)
• The search input should filter the doctors by name
• Each Category should filter the doctors
• By clicking on a Doctor name, the user should see the details
• Test the layout on a real mobile device (check Browsersync for this)
• Deploy the project towards Netlify (www.netlify.com) connected to your GitHub Repo
• After the project is deployed, analyze it with https://web.dev

• Basic HTML
• CSS Flexbox
• CSS transitions and animations
• Responsiveness rules
• SVG integration
• External Fonts integration
• Figma Usage
• Browsersync Usage
• Npm Usage
• Javascript functions to filter the list and show the details
• Javascript functions to check the used device

1. A GitHub account
2. A Local IDE or Editor
3. Git Environment
4. A http://toggl.com/ account and Chrome Extension
5. A Netlify account

• Fork this repo into your own Github Account as a public Repository
• Create a Github Project connected to the repository
• Read carefully the task description
• Analyze the task, and create relative subtasks to track any requirement and knowledge needed
• Assign an estimate to each created subtask
• Define a deadline for the main task
• Provide a Flowchart within the project
• Where required, involve other members of the community to support you on the development
• When working on a task, move it to the In progress column and start tracking it
• After each task completion, move it to the "Done" column and stop tracking it
• After the main task completion, share the solution (e.g. your GitHub repo) over the community

Git and GitHub configuration and usage

Pseudo Code Methodology