hackyourfuture.dk

Assignment

Build & reflect on a Personal Portfolio

Task overview

Many people choose to have a personal portfolio website to showcase their projects, skills and experiences. It can be a nice website to share during job applications too, for hiring managers to get a quick and visual insight into who you are.

In this task, you will create the starting point of your very own portfolio. You will create a single, simple, styled page using HTML, CSS, and JavaScript with the support of GitHub Copilot. Along the way, you’ll practice writing prompts, evaluating Copilot’s outputs, and reflecting on responsible use of AI in learning.

For each step, remember to follow:

  1. The Prompting Template

  2. The AI Questions Framework

Part 1: Build the page

  1. Basic structure - Create a page with a heading "About Me", a short introduction paragraph about yourself, and a list of 3 interests/skills.

  2. Add styling - Add styling to the page to centre the heading, add a custom font, and a background color.

  3. Add interactivity - Add a fun button on the page that changes the background to a random color when it's clicked.

  4. Make it responsive - Use media queries to style the page for mobile and desktop size screens.

Part 2: Reflection

Answer the following questions with short answers (3-5 sentences):

  1. Identify and share 3 new things you learned from AI in the above task.

  2. Where did you have to tweak or correct Copilot’s suggestions to suit your needs?

  3. How would you explain the difference between using Copilot to generate code for you vs. using it as an effective learning partner?

  4. Identify 3 risks of relying too much on AI tools when learning at HackYourFuture.

Submission

Submit your code as usual, and create a text file named reflection.md alongside your code to write your answers to the above questions.

What next?

After you've submitted this assignment, feel free to continue building and updating your portfolio as you progress through the course.

If you need some ideas about what you can add, think about:

  • Project showcases - Describe and link to projects you build.

  • Skills and certifications - As your learn new skills in the course, or outside of HYF, add them to your portfolio so people know what you're experienced in.

  • Blog - A place to share your learnings, thoughts and write more about your projects.

  • A little personality - Add photos, mini biographies, and your own design style help visitors see a little more of your personality.

  • Play around and have fun - Your portfolio is a personal project that you can use to test out new technologies, tools, design ideas and fun features, so treat it like a playground to try new things.

  • Host it online - Later in the course you'll learn more about deploying projects to the web. If you're too excited to wait, look into trying GitHub Pages.

Need more inspiration? Find some online! Our very own mentor, Hossein, has a great example of a personal website at hossein.dk. There's also plenty of blog posts out there like "Top 23 Web Developer Portfolio Examples to Inspire Your Own", so start here and explore more yourself.

Last updated