Holy Grail Layout
What are competencies?
Effort:
Minor
EXP:
300
Holy Grail Layout
General requirements
Your solution should retain the structural integrity of the starter kit while introducing functional enhancements and visual refinements to elevate the user experience. The default port should be 3000 for react problems.
Task for students
UI reference & demo
- Final UI - Small Screen
- Final UI - Large Screen (colors are reduced due to compressed screenshot)
- Final UI (scrolled down) - Dark Mode
- Final UI (scrolled down) - Light Mode
How to zip & upload your project
- You must start the project by first downloading the starter kit file attached to this project & make changes in those files only. You should not start from scratch by creating your own files.
- Use the given starter kit file and do not make any changes in the package.json and the already provided versions of the dependencies.
- Delete your package.lock.json and node modules before submitting the zip of the project.
- Project folder name should not contain characters like +, (, / etc.
- Project must be in a root folder which must be zipped and then submitted for evaluation.
- Watch this video to see how to upload your project or problem -
Evaluation
- After submission, your project will be evaluated automatically based on tasks defined above.
- Upon successful completion of all the tasks/requirements, you will get a full score, otherwise you will get a partial score based on the tasks completed successfully.
- You can work on your failed test cases & resubmit the project.
- Your project evaluation may take a few minutes to get evaluated after submission.
- After completing certain projects, you will be rewarded with badges for defined competencies
Do’s & don’t
- Use the given code structure in editor and do not make any changes.
- Do not modify existing classes or tags.
- Focus on correct React structure and class names.
Query & feedback
- In case of any query/feedback on this project, please fill this form & we will soon get in touch with you to resolve.
Best of luck, developers!