Chill Out & Cone-quer


Project Overview

overview of the current project

This is an icecream shop static site, where most of the copy and even name came from ChatGPT as filler text. Essentially I wanted this project to showcase my vanilla HTML, CSS and JavaScript and prove that I do not just rely heavily on frameworks to build stuff. Also during my interview process, I came across vanilla DOM manipulations such as a carousel, that I have not done in awhile for front end. I want this to serve as a reference point and even a learning guide to show friends who want to get into front end. I make heavy use of semantic HTML, modern design.

Technology Used:

  • HTML 5
  • CSS 3
  • JavaScript (ES 6+)
  • ChatGPT (for content)



It is beginning of summer 2023 and I thought the theme was appropriate. Basically this whole project was a freestyle with no design in mind. However I did have a few objectives I wanted to convey in building the site.

Objective 1: Modern design, effective CSS and semantic HTML

I wanted to try HTML elements and APIs that I do not often use. Such as iframe

Objective 2: Should be a simple site that is easy to follow along

For DOM manipulations, there is only so much I can do. I wanted simple actions and even notes for when I do encounter a frontend interview round that is a vanilla project, I have some sort of reference. Also something I can send to friends or newbies that need a reference of a site that is responsive as well.


With the help of Google and taking advantage of ChatGPT specifically ways to improve my code I written to simplify, I was able to learn a few new things and methods of doing things. For example, I want to add multiple pages. I could just use the normal way of multiple HTML files but that would be copying code specifically navigation elements. there is nothing wrong with that and I may have a released version that does that on the github repo, but I think it will be great practice to use native JavaScript here as opposed to jQuery or any frameworks.

  1. Ways to render 'components' to abide by DRY (Do not Repeat Yourself)
  2. Use HTML APIs and tags that I do not normally use.


Right now, I plan to gradually build this site out. Truth is there is only so much I can do with this. But I do plan on having two versions. Specifically of differing of how the multiple pages are rendered out either using a folder with HTML classes and a way to use JavaScript to render the page. Two released versions, with the JavaScript way being the main version and the folder way being the learning released version.

As such I want to make sure everything else is cleared and implemented before deviating between versions. So for that purposes, the JavaScript rendering way will be at a later cost once I figure out all I want to do for the site.


One new thing I did with this project is that up until now, most of my projects have been hosted with Netlify. But, for this project I want to do the hosting in Github Pages just to get used to other options I normally do not use. This site will remain there as I do not plan on purchasing a domain name, and this whole project was just used to showcase my vanilla HTML, CSS and JavaScript skills to employers.

view siteview githubReturn to Top