Chronicles of Supermarket website

My mistake

In the previous year, I learn a lot but in haste as well as in vain. I didn’t realize how and when the imposter syndrome sieged my determined mindset. It was indeed a big blunder to mock and neglect learning the fundamentals — HTML, CSS & vanilla JS); I never considered advice from great youtubers, so I it took me months of physical trial to realize this on my own.

The new site

Let bygones be bygones. This year I started afresh, learning the basic building blocks of web development with a rather cautious mindset. Starting up with plain HTML5 and CSS3, I have built a mini supermarket app with only these two technologies. Apologies in advance if your eyes pain and you cringe seeing so much newbie code; I tried to keep it as simple as possible. You can view the production site here.

⚠️ I have used some names and terms in the local language of my area of residence

Having accomplished this first stage, without any responsive design, any framework, any javascript, or any complicated sauce in this simple cookout, just with html and css, I still learnt quite a few interesting facts I want to share.

Key lessons

1. Set a specific height and width on a div and overflow-y: auto/scrollto allow scrolling inside the div, if its content is larger/more than its size
2. margin: auto makes a div centered in its parent. To horizontally center a child div in its parent, use margin-left; margin-right: auto. Similarly for vertical only centering, margin-top; margin-bottom: auto

3. Attributes you will use everytime with <input>:
   

   <input
       id="for ref to label tag"
       name="for ref in js code"
       value="to be sent to server"
       title="global att, text shown when pointer hovers over elem" />
   

4. Place <input> inside <label> tags to automatically relate to the label without using the same id with for attribute
   

   <label>
       <input type="text" />
   </label>
   
   <label>
       <textarea cols="35" rows="10" />
   </label>
   
   

My Request

That’s a few of them. It’s just the beginning of this marathon. Please feel free to admire or roast (criticize) me on any blunders, I am eager to see your suggestions, as Industry experts, on how I can improve this site, its design, its implementation etc.

Lots of Love,

Rinidh 😉