Main Points
This Google Mockup Assignment is an easy way for new frontend developers to learn the basics of Vue.js and frontend development. This is how I started, and I give this task to basically all aspiring frontend developers at iVue as an intro task for the iVue Website Development Team. This doesn’t have any prerequisites except a desire to learn.
Here is a link to the website: https://www.google.com/
This mockup must be coded in Vue.js. There is a guide on the website to help you get started (https://vuejs.org/guide/quick-start.html).
Except for the points below, everything must look and operate THE EXACT SAME as the initial website.
The mockup doesn’t need to have any search functionality. The main point to get out of this is User Interface development, not full on functionality.
The settings button at the bottom right doesn’t need to have a popup. Instead, it should turn the app between light and dark mode.
Restrictions
- Make sure to do this ON YOUR COMPUTER. You will need to install Node.js and Visual Studio Code, on top of learning how to configure them for developing a Vue.js app. The Vue.js website can help.
- Do not code this online on something like StackBlitz.
- You are not allowed to use any Artificial Intelligence except for ChatGPT, Deepseek, Gemini, or Meta AI. Other models like Claude and Bolt will not help you learn, which is the main point of this assignment.
Reports
- Each week, you must make a report on your progress to me. These will include screenshots of your code AND how the User Interface looks.
- At the end, please make an Account on GitHub, make a new public project for your google mockup, then send me the repository link so I can review your code.
Reach out to me with any questions you might have. While you’ll receive minimal help from me, I will answer your questions with “go to ChatGPT” or an actual answer, so don’t hesitate to ask me anything should you feel that you require my assistance.
Good Luck! Make sure you work diligently on this so you don’t fall behind.