Multi-page website using HTML, CSS, and Vanilla JavaScript

6 min readApr 17, 2024

Revolutionizing Web Development: A Code-Fueled Journey (Is this real?)

Imagine a website that loads so fast, it’s ready before you can even finish blinking — an online space where every pixel is fine-tuned for optimal speed and user experience. This goal was not just a flight of fancy; it was a concrete objective as I set out on my quest to create a sophisticated website from the ground up.

Project Overview

Motivated to construct a website that adheres to today’s SEO standards, I embarked on a venture using the foundational web development tools: HTML, CSS, and Vanilla JavaScript. The design was initially inspired by an online course, but the execution was entirely my own, powered by my enthusiasm to explore and excel.

Project Goal

My aim was clear and bold: to develop a quick-loading, responsive website that could rival professionally designed sites and eclipse those built on platforms like Wix. My intention was to illustrate the capabilities of custom coding and to highlight the progress in my skills as an emerging developer.

Technology Used

To bring this project to life, I utilized a variety of technologies and tools, each contributing significantly to the final product:

HTML/CSS: These technologies provided the fundamental structure and style of the site.
SCSS: I used SCSS for more sophisticated styling, which allowed for better organization and efficiency in CSS management.
JavaScript: This was crucial for adding interactive and dynamic elements to the site.
Flickity: Employed to create a responsive and consistently height-adjusted testimonial slider.
TinyPNG: Used for compressing images to speed up the website’s loading time without compromising visual quality.

Throughout the project, AI tools (Chat GPT) were also employed to refine the writing of this case study :) Sorry but I am bad at writing, ensuring that both the narrative was polished to a high standard.

Creative Process

The process of creating the website was both demanding and enlightening, involving several detailed steps:

Starting with HTML and CSS:

The project began by laying down the basic framework and applying initial styles to shape the site’s appearance. Contrary to what many people say about CSS being easy, I found that perfecting it to make the design both nice and precise is truly a mastery of art. It took me around three weeks to complete.

Website Structure:

I have created a total of six pages, including Home, About, Pricing, Blog, Blog Detail, and Contact Us. Check out the design here: Figma

Optimizing Images:

I used TinyPNG to reduce the file sizes of images, which helped decrease load times and maintain high-quality visuals across the site.

Implementing SCSS:

To avoid redundancy and enhance style management across the website, I adopted SCSS. This tool helped me organize the code and reduce the need to repeat it. For example, I only needed to write one set of code for the footer, navigation bar, header, and other reusable components and variables that could be used across multiple pages.

I then combined all these elements in the style.scss file to create a complete stylesheet.

From there, I minimized the size by creating a style.min.css file and linking it to the HTML. This step is important because it helps the website load faster, even though I have extensive styling in CSS.

Enhancing the User Interface with JavaScript (the fun game begins):

I integrated a “scroll to top” button to improve user navigation. (All pages)
The navigation bar was designed to start transparent and gain color as the user scrolls down, adding a dynamic visual effect. (All pages)
Modal videos and popup features were added to increase user interaction and engagement. (Home page)
I also developed a tab functionality that allows users to switch between blog categories without the need to reload the page. (Blog page)
Form validation features were included to ensure users input correct information, enhancing the site’s usability. (Contact Us Page)
Using Libraries and Plugins: I implemented the Flickity library to ensure that all testimonial sliders maintained a consistent height regardless of content length.

Mastering the Blog Detail Page:

For the blog detail page, I wrote code that adheres to SEO standards. I used the <article> tag for the blog details, <figure> for images, <h2> for titles, <p> for paragraph, and <figcaption> for image captions. These elements help optimize the page’s visibility on Google, maximizing the likelihood that it will appear prominently in search results.

Ensuring Responsive Design Across All Devices:

The challenge here is ensuring the website is responsive across all devices, not just specific ones. I tested it on a variety of devices with different dimensions, from an iMac Retina to an iPhone 4, to ensure optimal functionality on each device. You can use the inspect tool to adjust the view and see the responsiveness.

Pushing the Project to GitHub:

I created a GitHub repository to host my project, initializing my local project directory with Git and connecting it to the remote repository. I then pushed all my files, including the complete website structure and code, to GitHub using Git commands. This allows me to manage and track versions of my project efficiently.

Please click here to connect with me: Github Link

Or maybe we could link up on LinkedIn? I’ll be posting all my projects there, so connect with me to catch my next big adventure in coding! My LinkedIn

Final Project

The final product is a high-performance website that showcases what can be achieved with modern web development techniques. Check out my project here and experience firsthand the effectiveness of sophisticated coding.

Reflection

Did I meet my project goals? Indeed, the project not only met but exceeded my expectations in terms of speed and responsiveness, setting a new standard for my future projects.

What main challenges did I face? The greatest challenges were managing the complex codebase and troubleshooting various unexpected bugs. At times, these challenges were so daunting that they nearly led me to give up on the project.

What did I learn about my chosen topic/project area? This project deepened my understanding of web performance, user experience, and the intricacies of browser behavior, enlightening me on how each line of code influences the user’s interaction with the site.

What did I learn about myself? The project reaffirmed my resilience and commitment. Despite numerous obstacles, my passion for web development and problem-solving drove me to persevere and complete the project, confirming that I can tackle and overcome challenges.

Want a front-row seat to my coding adventures? Let’s connect and you can be part of the action! Find me on:

LinkedIn: LinkedIn Profile — For professional scoops.
Facebook: Facebook Profile — For a mix of work and play.
GitHub: GitHub Profile — Where the magic happens!

Can’t wait to see you there!