Chill Out & Cone-quer
Project Overview
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)
Ideation
Background
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.
Research
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.
- Ways to render 'components' to abide by DRY (Do not Repeat Yourself)
- Use HTML APIs and tags that I do not normally use.
Iteration
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.
Summary
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.