Projects > Project 3: Coded website using HTML and CSS
Unofficial website for Victoria Velásquez: coded website using HTML and CSS
Table of contents
Project description
ATTENTION: The following project is a work of fiction and is not made for commercial purposes. This website is not affiliated with Victoria Velásquez.
Victoria Velásquez is a Danish politician and a member of the Parliament in Denmark for the red-green-party, Enhedslisten. I was tasked with coding a website about Victoria, highlighting her key issues as well as provide more information about her.
Website for Victoria Velásquez, 2024
Homepage, 2024
Coded site in Visual Studio Code, screenshot from browser
The solution
The website consists of a homepage as well as four sub-pages, each accessible from the navigation-tab. On mobile-format, the navigation-bar moves to the bottom of the screen to allow easier access between pages with your thumb as opposed to on top of the page.
The homepage is broadly introducing Victoria and what she stands for. Every other information about her and her work can be found on the sub-pages:
Mærkesager (key values-page): Find out more about Velásquez's political strategy, her most important key values and what hot topics she will bring into parliament.
Kalender (calender-page): For any of Velásquez's upcoming events, go to the calender-page to get an overview of what events she will participate in as well as a map showing where each event takes place.
Om mig (about me-page): To learn more about Velásquez, the about-me-page provides a quick biography of the politician and her career-achievements.
Kontakt (contact-page): If you want to get in touch with Velásquez, this page shows her contact information and social media profiles.
Website for Victoria Velásquez, 2024
Homepage, desktop and mobile, 2024
Coded site in Visual Studio Code, screenshot from browser
Website for Victoria Velásquez, 2024
Key values-page, desktop and mobile, 2024
Coded site in Visual Studio Code, screenshot from browser
Website for Victoria Velásquez, 2024
Calender-page, desktop and mobile, 2024
Coded site in Visual Studio Code, screenshot from browser
Website for Victoria Velásquez, 2024
About-page, desktop and mobile, 2024
Coded site in Visual Studio Code, screenshot from browser
Website for Victoria Velásquez, 2024
Contact-page, desktop and mobile, 2024
Coded site in Visual Studio Code, screenshot from browser
The process
Unlike a website for an entire political party, a website for a politician is tailored personally to the specific person. There is room to go more in depth with who they are, what their key values and future plans are, as well as any additional information, they want to bring attention to. It goes without saying, that a website for Victoria Velásquez should adhere to this also.
The IA of the website is structured in a simple sitemap. The website has pages that are not unfamiliar to anyone who browse the internet such as an about me-page and a contact-page.
However, a new element brought in to the website is the calender-page. It gives an overview of the political events Victoria is going to participate in, which anyone can join. This can be anything from high-school debates to fundraising on the street. This allows transparency and welcomes the everyday-voter to discover more about her outside of election-day.
Website for Victoria Velásquez, 2024
Sitemap for website for Victoria Velásquez, 2024
Screenshot from Google Docs
The website is made using HTML and CSS only. The code is made in a structural manner, beginning with the general basics for the entire page, then starting from the top of the page at the header moving down to the footer at the bottom. The code is made with semantic HTML and has relevant comments to make it readable.
The website is made from Mobile First-approach. This means that the website was made for mobile-format first before scaling up. All styling is made in an external stylesheet using CSS only.
Once developed, the website was scaled up and made for tablet and later desktop. Using responsive design, the layout change with respect to the device its being viewed on. This includes the text, images, header and navigation.
The elements are organised on the page, so they align with each other and give structure to the site. The styling is inspired by the red-green-party's existing styleguide. As the name suggest, the party uses these two colors as their primary colors. However, as to not only use the political party's colors, the green is substituted for a lilac color, an analogous color to red. The color is analogous to red, creating a harmonious design with a low color contrast.
The making of the website has been an iterative process allowing for trial-and-error. Afterwards the website was tested on a test-group. The test-group, existing of fellow students, gave feedback and the website was improved accordingly.
Website for Victoria Velásquez, 2024
Contact-page, desktop and mobile, 2024
Screenshots from Enhedslistens Designmanual
