Disclaimer. Please access this technical project from a desktop or laptop computer. The formatting may not display optimally on mobile or tablet devices and could hinder your understanding of the design, layout, and visual structure.
This project showcases my practical application of HTML and CSS for website design, including layout structure, navigation, typography, spacing, and visual styling. The project was developed as part of coursework from Jonas Schmedtmann’s Udemy course, and some source images were provided through the course materials. I am not affiliated with Jonas Schmedtmann or Udemy in any way.
While the project began as a course exercise, I customized the final website with new copy, revised content, updated layout choices, navigation improvements, and design refinements to make it distinct from the original course example. This project is an independent educational and portfolio demonstration.
Technical Website Design using HTML & CSS
Business Overview
Media Agency & CO.
Global Marketing Agency for Modern Brand Growth:
• North America • Europe • Australia
A global media agency partnering with brands to deliver digital strategy, campaign execution, and CRO support across international markets.
Yearly Revenue: $2,500,000
Introduction
This project focused on applying foundational HTML, CSS, and JavaScript to design polished webpage experiences for a global media agency serving clients across the world. I used front-end design principles to create clean layouts, strengthen visual hierarchy, improve readability, and guide users more clearly through each page. The work emphasized how structure, spacing, typography, imagery, and interaction design can directly influence usability, brand perception, and overall website experience.
Objective
Create visually clear, easy-to-navigate webpages that strengthen usability, support engagement, and deliver a more professional digital experience.
My Role
I designed and built the webpage layouts using HTML, CSS, and JavaScript, focusing on structure, navigation, typography, spacing, and interaction details to create polished, user-friendly experiences.
Website Methodology
These webpages were designed using foundational HTML and CSS principles to create clean, structured, and visually balanced layouts. Each design decision focused on improving readability, visual flow, and the overall user experience across multiple page examples.
-
Typography was refined to make each page easy to scan and understand. Headings, paragraph text, font weights, and line spacing were adjusted to create a clear reading experience.
-
Each page uses a focused color palette to support the brand style and guide attention. Primary colors were applied to key elements such as buttons, icons, borders, and highlighted sections.
-
Images were styled to support the purpose and visual direction of each page. CSS adjustments such as sizing, cropping, object-fit, border radius, and spacing helped the visuals feel intentional.
-
Whitespace was used to separate sections, group related content, and improve readability. Spacing adjustments helped each page feel clean, polished, and easier to navigate.
-
Each layout was structured so the most important content stands out first. Font size, weight, color, spacing, imagery, and calls to action were used to guide visitors through the page.
Navigation and Page Structure
The navigation and page structure were built to help visitors move through each webpage with clarity and ease. Simple labels, clear calls to action, and organized content sections were used to make each page feel intuitive and professional.
-
Where included, the search bar was styled to support a more realistic browsing experience. Its size, border, spacing, and placement were adjusted so it fit naturally within the navigation.
-
Brand names and logos were positioned to create a clear visual anchor. Alignment, spacing, and sizing were refined so each page felt balanced and easy to recognize.
-
Navigation links were kept simple, direct, and easy to scan. The labels were selected to help visitors quickly find important content such as products, services, reviews, or contact information.
-
Each page includes a clear primary call to action that stands out from the surrounding content. Button color, size, placement, and spacing were used to guide visitors toward the next step.
-
Each webpage was organized into clear content sections that support a natural page flow. Hero areas, supporting details, visuals, testimonials, product or service sections, and footer content were arranged to keep the experience structured and easy to follow.