This is a small project that is ice cream shop theme. A very simple site using HTML, CSS, and Vanilla JavaScript. Highlight of just using semantic HTML for responsive design and simple DOM manipulations.
- Git clone this repository to your files.
- (Preferred) You can get a Live Server if you are using Visual Studio Code. Once downloaded right-click 'index.html' and launch the server to view the page.
Or once downloaded, just click the index.html file in the downloaded folder as everything is contained in the folder.
It has been quite some time since I have coded in regular vanilla HTML, CSS and JavaScript. While I have not forgotten it in the lands of frameworks, it's important to not rely heavily on frameworks.
I hope this site to evolve in time to create things listed below in features. I just want a snapshot in time of a
responsive, semantic, HTML site and that uses good naming conventions and functions of vanilla JavaScript. As for
the CSS I figure this is a perfect environment and playground to get used to tailwind CSS. I am confident in my natural CSS
abilities, and since it is just styling, I figure this will be a good time to use it. Tailwind is very time-consuming
and is just writing inline CSS with more steps. I will be writing my own, keeping it vanilla.
I also hope that making this public, people, friends and strangers I come across that are new to front end can use this as a reference for DOM manipulation and semantic HTML (no div soups!!)
While a long way and this is something I will do in my spare time as I prep for interviews would be:
- ✔
responsive design with appropriate breakpoints and media queries - ✔
Body that has semantic HTML. - ✔
basic click events JavaScript. - ✔
build a Carousel. - ✔
modern look.
- HTML5
- CSS3
- JavaScript (ES 6+) aka vanilla JS
- ChatGPT for content and filler text
- Pexel imagery for imagery
As fun as this was to do in vanilla HTML, CSS and JavaScript I must get back to my current studies. I will gradually add more to this when I figure out how I want to do this site as I am mainly freestyling. I do hope this accomplishes two things:
- That I can do projects in vanilla and I do not rely heavily on frameworks, that this shows mastery of DOM manipulation.
- It can help newcomers for a simple static site.
Some things to look forward to in the future:
- simple API integration, maybe a calendar of sort. Nothing too complicated.
- Since this is a fictional shop, maybe a timer to show when it is open / closed on holidays in dynamic way?
- Ice Cream builder
- This is just heavy CSS and would be desktop only. Mostly CSS art.