BYU Student Author: @Kaden_Sandberg
Reviewers: @James_Behling, @Abraham_Reyes_Leon
Estimated Time to Solve: 30 Minutes
Need a program? Click here.
Overview
Professor Oak, a renowned finance professor at BYU, has never had a personal website but has long admired the online presence of a well-known finance professor. He sees how effectively a website can be used to share research, connect with students, and engage a broader audience. Inspired, he decides it’s time to create his own. Though he recognizes this may be outside your usual role as his research assistant, he asks for your help in designing a professional and user-friendly website that reflects his expertise.
Your challenge is to build his website from the ground up, using a reference screenshot as inspiration. Step by step, you will refine and modernize the design until it is polished and ready to be published. Follow Professor Oak’s instructions below to complete the transformation.
Instructions
Part 1: Recreate the Original Website
Your first task is to rebuild the website’s structure using HTML. Use ChatGPT 4o to generate the basic layout by following these steps.
-
Drop the .png file into chat and ask it to create a website based on that. Ask specifically for it to be as accurate as possible
-
Test the website in the preview mode that should appear in the top right corner of the code canvas
-
Instruct ChatGPT to refine elements that look different from the template. Make sure to include:
a. A navigation bar with links
b. A search bar at the bottom
c. A content box with Professor Oak’s description- For this description instruct ChatGPT generate you a two-paragraph introduction to Professor Oak’s website.
Part 2: Improve the Design
Now that the basic structure is in place, it’s time to make the website look more modern and professional. Update it with the following improvements:
- Enhance the navigation bar – make it a blue bar with bold white text
- Improve the content box – round the edges and add a subtle shadow for a cleaner look
- Move the action buttons (Follow, YouTube) inside the content box at the top right and make them black and red respectively
- Refine the search bar – center it and make it rounded for a sleeker appearance
Part 3: Add Dark Mode
Professor Oak wants his website to be easy to use at any time of day. Your final task is to add a Dark Mode toggle so users can switch between light and dark themes.
- Create a blue Dark Mode button that toggles the background and text colors
- Place the toggle on the inside of the content box next to the YouTube and follow buttons
- Ensure the navigation bar and content box adjust properly in both modes
- Test the switch to make sure everything remains easy to read
Part 4: Set yourself up for the rest
Now that you’ve created one page, you know you can easily create the rest! However, you may not know where to go from here. Ask ChatGPT to give you a brief 5 step plan on what else you need to do to finish building the rest of the website.
Don’t forget to post a screenshot of your HTML file and your 5 steps in the comments section!
Data Files
Suggestions and Hints
ChatGPT isn’t always great at conceptualizing what things look like. It helps to be very specific in your prompting about what you do and don’t want. This will likely take multiple iterations.
If you have access to ChatGPT o3-mini-high, consider copying your html code into a o3-mini-high conversation with suggestions for further steps! You can then paste the updated html code from the response into a 4o conversation to view it in preview mode. Alternatively, you can create a .html file on your computer and run it to view the results.
If ChatGPT gives you grief about copyright infringement, ask it to put spacer paragraphs instead of the paragraphs in the photo then fill them in later as the challenge instructs.
Solution
