Solution of this web assignment
-
Figma Design Analysis:
- Access the provided Figma design link.
- Analyze the design for layout, typography, colors, images, and responsiveness.
-
Setting Up Next.js Project:
- Initialize a new Next.js project using
npx create-next-app
. - Set up the project with TypeScript if required for better type checking.
- Initialize a new Next.js project using
-
Component Breakdown and Directory Structure:
- Identify and create reusable components (header, footer, sections, buttons, etc.).
- Organize the project using the following directory structure:
components/
: Contains all reusable components.pages/
: Includes Next.js pages, which are built from components.styles/
: Contains CSS or styled-components files.public/
: Holds static assets like images and fonts.
-
Development and Implementation:
- Start building the components by closely following the design specifications from Figma.
- Utilize Next.js features like Server-Side Rendering (SSR) or Static Site Generation (SSG) to optimize performance and SEO.
-
Styling:
- Implement styles to match the Figma design using CSS modules or styled-components.
- Ensure the design is responsive and looks good on various screen sizes.
-
Hosting:
- Deploy the website on Vercel by connecting the GitHub repository to Vercel and selecting the project for deployment.
- Verify the deployed site matches the Figma design.
-
Submission Requirements:
- Prepare the GitHub repository with well-documented code and a
README.md
file explaining setup and local running. - Share the live link to the Vercel-hosted website.
- Prepare the GitHub repository with well-documented code and a
-
Evaluation Criteria:
- Double-check design accuracy, component design, directory structure, code quality, and hosting against the assignment criteria.