Goal
To apply knowledge of Tailwind or Bootstrap and SASS to build a responsive front end for a social media application.
Brief
You are tasked with creating 3 pages in HTML using Tailwind or Bootstrap and SASS:
- Authentication page (
/index.html) - Feed Page (
/feed/index.html) - Profile page (
/profile/index.html)
The authentication page should have a form to login to or register with the application. Be sure to include HTML form validation and use /profile as the form action attribute. The password must have a minimum length of 8 characters.
The feed page should have a list of posts thumbnails, a search bar, sort options and a form to create a new post. You may add additional UI elements beyond these requirements.
The profile page should have a profile image, username, list of user posts, follow button and an area to display following/followers.
There is no requirement for JS functionality beyond things like making sure the mobile menu works.
Create a new repo and perform all your work on a branch called css-frameworks.
Ensure package.json includes a development script that uses tools like watch for real-time updates, and a deployment script for building the production-ready code.
Submi a PR from your css-frameworks branch to the original branch (main/master).
Process
- Create a prototype for each page. You don’t need to submit the prototype.
- Create a new git branch for this project called css-frameworks.
- Choose either of the CSS frameworks and install any required NPM packages.
- Complete any required configuration.
- Add relevant scripts in package.json
- Implement the responsive UI with the chosen library.
- Create and share a Pull Request and request peer reviews on Teams.
- Implement any suggestions. You can commit to the same PR.
- Review your peers’ PRs.
Delivery
Submit a link to your open PR. Make sure the repo is public.
Be sure to exclude node_modules in a .gitignore file.