Food Website - Front end

I made a food website front end using HTML CSS & Javascript. This is responsive website. You can use this in any Screen Size.

Comment

Inspiration

I love food so much & more than that I ordered food so much. So viewing food website almost daily inspired me to my own food website. As a beginner I don't have much knowledge about back-end web development. So I thought at least try to make front-end . So next what? I started making front-end website Using HTML, CSS, & little Javascript ( I used Javascript code just for smooth scrolling ).

What it does

It is actually a front-end food website. Which contain Home, About, Category, Menu, Testimonials, Contact. This website is responsive website means you can use this in any screen size. It will work perfectly. As it is only front-end website, it does not do any work because it is an static website.

How we built it

We built it using HTML , CSS & Javascript. First I made an html page and then starting adding content which i want to display on my website. In this we made so many division and also give them classes so that we can apply CSS easily. Eg. I made nav division and give it class navbar to apply CSS on navbar, same we made for showcase-area, menu items, testimonial, about etc. After that I made an CSS file which i linked to html file. In CSS file first I made font size to 10px so that it will be easy for us to apply rem, em etc. Then I made some utility classes which we need to use many times. Like I made utility class container for width , & same i made for btn for buttons and many more. After that I started applying CSS on every division ( like navbar, food-menu, about, testimonials, contact etc.)
After apply CSS we applied media queries for different size screen to make website responsive. I use little Javascript code as well in html file only in order to make smooth scrolling.

Challenges we ran into

There are so many challenges I faced while making website. Such as while hamburger menu in media queries , my menu was not coming out properly because the Specificity of navbar above was higher due to which it creating issue , So I learned that always check the specificity. And there are so many small challenges I faced which I overcome successfully and i learned so much while making this project.

Accomplishments that we're proud of

I am proud of that I made this website in 3 days only. I gave my 100% in order to make this website beautiful. I learned so many new things while making this website.

What we learned

I have learned so many things while making this website. Like 1st How we should make utility classes for our own convenience which will make our whole project so easy. 2nd How to make responsive website using media queries. 3rd How to make hamburger-menu using CSS. I made hamburger-menu for small screen size.

What's next for Food Website - Front end

Next first I will learn back-end skills like PHP , MySQL ( I already know it little bit ) & will make a backend of this website . Then we will connect to front-end to make full stack website.

Built With

Share this project:

Updates