Hanna Kronberg is a freelancing video editor based in Sweden. She has experience working for the two biggest Swedish TV broadcasters, TV4 and SVT.

You can find her new website here.

• As a user, I want to be able to understand what the page is about at a first look.
• As a user, I want to be able to see some of her work to decide if she is the right editor.
• As a user, I want to be able to access information about her prior work history.
• As a user, I want to be able to see the pricing on her work.
• As a user, I want to be able to contact her if I decide to book her.

• 'Playfair Display' is used for the headers as it is simple to read while adding a better style.
• 'Lato' is used for paragraphs and the table as it pairs well with the headers.

As a video editor, the main content on the page is the portfolio with her edits.

• The picture for the home section was taken by Hanna Kronberg herself
• The videos embedded in the portfolio section are examples of projects in which Hanna contributed

The main objective in creating this site was to make it easier for employers to find and contact her as a freelancer. I wanted her work to be the most present resource on the site to succeed in my objective.

All wireframes show designs for phone, iPad/tablet and desktop displays.

• Homepage wireframe
• Portfolio & About Me wireframe
• Pricing & Contact wireframe

At the start of the project the goal was to create three pages. While working on it I instead decided to create one scrollable page instead and split the Portfolio from About me and Pricing from Contact.

• All pages are fully responsive for:

  • below and to 480px: Mobile devices.
  • 481px — 768px: iPads, Tablets.
  • 769px — 1024px: Small screens, laptops.
  • 1025px — 1200px: Desktops, large screens.
  • 1201px and more — Extra large screens, TV.

• A navigation menu which transforms into a hamburger navigation menu for smaller screens.

• Fully playable integrated YouTube videos.

• Clicking on the "me" of the text "For more references just ask me." in the portfolio section will open a mailing program (if installed) for faster connectability

• Clicking on the email address in the contact section will open a mailing program (if installed) for faster connectability

• An online booking system linked to her calender for optimized booking process.
• A video playing as background of the home section.
• The TOS in the bottom right corner will open a window hovering over the website to show the TOS.

• HTML5
• CSS3
• JavaScript

• Balsamiq used to create wireframes.
• GitHub used to host repository.
• CodeAnywhere used as IDE.
• Font Awesome used for icons.
• Google Fonts used to import 'Playfair Display' & 'Lato' fonts.
• w3schools used to create the navigation bar.
• GitHub Pages used to deploy the site.
• Lighthouse for performance review.

Every day after finishing up I used the HTML and CSS validators to make sure I did not create errors.

latest test ~10:10 04.05.2023

latest test ~10:10 04.05.2023

• As a user, I want to be able to understand what the page is about at a first look.
  • The homepage covers Hanna Kronbergs name and job title. You can immediately see that you're on a website about her.
• As a user, I want to be able to see some of her work to decide if she is the right editor.
  • The Portfolio section holds currently five embedded YouTube videos that Hanna has edited
• As a user, I want to be able to access information about her prior work history.
  • The work history is written in the About Me section of the page.
• As a user, I want to be able to see the pricing on her work.
  • For the costs of booking Hanna for different times is a table created in the Pricing section.
• As a user, I want to be able to contact her if I decide to book her.
  • To contact Hanna I, embedded her email address in the contact section. On click on it, it will open the mail program (if installed).
  • Underneath the email address is a contact form to get in contact with Hanna.
  • As another way of contacting Hanna, you can each out to her on her socials in the footer.

As another testing method I used the following devices:

• Custom Build PC 1 (screen resolution 1920x1080)
  • Google Chrome ( incl. dev. tools)
    • iPhone SE
    • iPhone XR
    • iPhone 12 Pro
    • Pixel 5
    • Samsung Galaxy S8+
    • Samsung Galaxy S20 Ultra
    • iPad Air
    • iPad Mini
    • Surface Pro 7
    • Surface Duo
    • Galaxy Fold
    • Samsung Galaxy A51/71
    • Nest Hub
    • Nest Hub Max
  • Microsoft Edge
  • Opera
  • Mozilla Firefox

• Huawei P20 lite
  • Google Chrome
• Huawei P20
  • Google Chrome
• Samsung Galaxy S22
  • Samsung Internet

After deploying my website, I used Lighthouse as a tool to check for performance or accessibility issues.

latest test ~10:10 04.05.2023

• Performance
  • Lighthouse had no suggestions to optimize the performance of my website.
• Accessibility
  • Lighthouse had no suggestions to optimize the accessibility of my website.
• Best Practices
  • Lighthouse had no suggestions to optimize the practices of my website.
• SEO
  • Lighthouse had no suggestions to optimize the SEO of my website.

It might not yet be a valid source for testing, nonetheless I copied my code into ChatGPT and asked it to optimize the code once I was done. I got the following response:

The code seems to be relatively simple and optimized already. However, here are a few suggestions to improve it: [...] The CSS code provided is already well-organized and structured. Here are some minor optimizations that can be done to further improve the code: [...]

The suggestions and minor optimizations that ChatGPT gave me as a response felt unnecessary and I decided to not implement them.

• Videos were not able to load

  • Instead of using the YouTube links provided by Hanna, I opened the link and with a right click on the video copied the embed code directly and removed the frameborder property.
  • Instead of using Facebook videos, I asked Hanna to provide me with more YouTube links.

• Pagelayout broken for 320px width

  • The layout broke because I did not adjust the contact form in width for smaller screens which caused an overflow on the x-axis. I fixed this bug by applying the correct style to the contact form for the phone screen section.

• Background image too small for very big screens

  • The background image was too small for very big screens. To fix that I added the overflow: cover property to the background image.

1. Log in GitHub.
2. Open this repository.
3. Locate the settings cogwheel.
4. On the left hand side under "Code and automation" is the option pages located.
5. Under "Build and deployment" locate the "Branch" section.
6. Change the "None" dropdown to "main" and save.
7. After some time the site will be published and accessible.
8. The link can be found above the "Build and deployment" in the "GitHub Pages".

• I added in the example given by w3schools to help me create a navigation bar.

• The majority of the content was given to me by Hanna. I then took her content and gave it shape as a website.

• The picture was taken by Hanna Kronberg herself. It will be replaced later on with a short video.
• The YouTube videos embedded belong to their channels. Hanna Kronberg was involved in creating all of them.

Code Institude, for teaching me the languages needed to create this page.

w3schools, for so many helpful pages and tools to support learning the languages.

Hanna Kronberg, as the person I created this website for. I hope she can make good use out of it and clients can find her easier.

Coolors, helping me to create the color template used in Color Scheme.

Antonio Rodríguez, as my mentor. He was a great help and always replied when I needed him.