Jovian
Sign In
Learn practical skills, build real-world projects, and advance your career
6 months ago

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

print('Hello World')