Assignment 1 - Design Mockup to Web Page

As a professional web developer, you will often be given a detailed design mockup created by UI/UX designers for building web pages. In this assignment, your goal is to turn the following design mockup into a web page: https://www.figma.com/file/HhvdvhNdE5S96HGwVqgAM8/Personal-Website-Design-(Community)?node-id=1-2

Step 1: Inspect the design mockup using Figma

• Open the above link and create an account or sign in to view the page in Figma
• Inspect the dimensions and styles of various components by following this guide
• Identify the fonts used on the page and find them on Google fonts for later use
• Export the images on the page as PNG or JPEG files for use within your web page

Step 2: Set up basic page structure and styles

• Create a folder on your desktop, and open it up in VS Code
• Create an index.html file, aa styles.css file, and copy over images
• Add basic HTML tags (head, title, link, body, section-wise divs etc.)
• Set up basic styles (header & body font family, text size, background, etc.)

Step 3: Implement the web page section by section

• Add the content for each section one by one using HTML
• Use Figma's "Inspect" tab to check values of CSS properties
• Add styles for each completed section one by one using CSS
• Try to replicate the mockup as closely & precisely as possible

Step 4: Deploy your web page to the cloud and submit below

• Create a ZIP file by compressing your project folder
• Visit https://static.app and upload the ZIP file
• Create a new account and verify your email to deploy
• Verify that the site is deployed and submit the link below

NOTES

• Avoid copy-pasting styles directly from Figma. See https://jovian.com/learn/web-development-with-html-and-css/knowledge/dont-copy-paste-styles-from-figma-500

• Avoid common mistakes by reviewing our feedback on previous submissions here: https://drive.google.com/drive/u/0/folders/1PT_Jmb4SuF_IkOACHURujFh5sDF_mr6-

• If you have previously deployed a website using https://static.app, you will need to delete your previous site or create a new account to deploy the assignment website for free.

• (Optional) Once you're done building the web page, try implementing this extended design mockup which contains two more sections and several background elements.