Web and App Development is becoming more popular and complicated due to the rapid release of frameworks like Flutter, React Native, React JS, Angular JS, Vue JS, Next JS and many more.
A decade ago, websites only comprised of HTML, CSS and JavaScript which made it easy to create static web pages without adding advanced dynamic functionalities that frameworks make possible.
Having a good knowledge of bare HTML, SCSS, CSS and JavaScript can give you the willpower to easily transition into more advanced frameworks and libraries.
If you have been struggling to build a beautiful landing page website with HTML, SCSS, CSS and JavaScript then I will advise you to follow this article from the beginning to the end to understand some of the tips and tricks in HTML5 and CSS3.
In this tutorial, we’ll build a food ordering website step by step for a fictional company called FDelivery. You’ll leverage the power of SCSS to create this beautiful Food Ordering Website from a Figma File Design.
At the End of this Article, you will learn:
- How to setup SCSS in your project
- How to build a Navigation Menu with a search form
- How to add sliders with the SwiperJS library
- How to build a custom slider with JavaScript
In a previous article in this series, How to Build a Squid Game Landing Page, You’ll learn how to build a Squid Game Landing Page Website with HTML, CSS and JavaScript.
The name of our fictional Food Ordering Company is FDelivery, its purpose is to deliver food or groceries to customers.
The purpose of creating this static landing page for the Food Ordering Company is to allow their customers to register for an account and make orders through the website.
After completing this tutorial, I will be glad if you add more sections and features to the food ordering website to further solidify the knowledge you obtained from this article.
The source code of the food ordering website will be provided at the end of the article so feel free to download and play with it.
Folder Structure
I designed the folder structure to follow the convention that most frontend developers use when working on SCSS projects.
The folder structure is quite simple since we are not building multiple pages having different styles, this project has only one page which is the homepage.
First, download the starter files on GitHub, extract the project from the zip file and open the project with your favourite text editor which in my case is Visual Studio Code.
The folder structure consists of four folders and two files in the root directory. The Data folder contains two JSON files that will serve as our database.
The SCSS folder also consists of an SCSS file that we will later compile to a CSS file in the CSS folder using an NPM package.
The JavaScript folder consists of three JS files that will help us make the food ordering website dynamic.
Finally, we have an images folder containing all the images we’ll need throughout the project.
In the index.html file, you can see the HTML boilerplate code snippets with the project outline in the comments.
I have also linked the external stylesheet, the three JavaScript files and the SwiperJS script and CSS.
External Libraries We Need
Here is a list of external libraries we are going to include in this project to save us time instead of reinventing the wheel.
- Google Fonts – to get the font used in the Figma file design
- SwiperJS – for the slider
- Boxicons – for the icons
- Favicon.io – for the website favicon
The Food Ordering Website Figma File Design
As a web developer, you must have the skills to convert any design whether Figma file, PSD file, Illustrator file, adobe XD file to code using HTML, CSS, SCSS, and JavaScript.
Sometimes we want to keep our code DRY (Don’t Repeat Yourself) so we choose CSS frameworks or libraries like Bootstrap, Tailwind CSS, Material UI and so on.
This project has a Figma File design that you can take a look at to have a picture of what we are actually working towards.
The HTML Boilerplate of the Food Ordering Website
The basic HTML boilerplate looks like this:
I decided to use the section by section approach in building the food Ordering website so it doesn’t become complicated to comprehend.
How to Setup SCSS in the Food Ordering Website
There are a lot of benefits that you get when you use SCSS or SASS in your projects instead of using plain CSS.
Throughout this tutorial, we’ll be writing the styles in SCSS and also the font we are using is Poppins.
I have also included all the SCSS variables, reset code, Poppins font, and some reusable SCSS snippets in the styles.scss file.
I assume you already have a good understanding of how to use the various HTML tags and how to select those tags in CSS.
If you are not comfortable with HTML, CSS and SCSS then please take a break and search for some tutorials on HTML and SCSS on YouTube to get your hands dirty.
Once you feel you are confident and comfortable with the basics of HTML and SCSS then you can come back to this tutorial.
In the SCSS snippet above, I’ve removed the default margin and padding assigned to every element by browsers.
How to Compile SCSS to CSS
Step 1: Download the SASS package and install it as a global package. You need to add the -g flag to install the package globally.
Step 2: Run this command in the terminal to compile the SCSS to CSS and add the watch flag so that the SASS package will recompile the SCSS code whenever we save an SCSS file.
After running the above command, a new CSS folder will be created with a styles.css file containing the compiled SCSS code.
How to Add a Navigation Menu to the Food Ordering Website
When you get stuck at any point in the tutorial, please download the source code of the food ordering website and compare your code to find the mistake or error.
Now, let’s begin by creating the navigation menu of the food ordering website by looking at how it is implemented in the Figma file design.
The navbar will have a logo at the far left, the navigation menu in the middle, and a search bar at the right with some buttons.
For the logo, we are going to use the logo image I downloaded from the Figma file instead of using pure SCSS to achieve the same design.
Copy and paste the HTML snippets within the header element. I also included the hamburger icon that will be hidden on desktop screens and visible on mobile devices.
Now, open the project in the browser with the live-server extension if you are using VS Code.
The navbar looks ugly so we need to add some styles to make it resemble the one in the design.
We’ll use CSS Flexbox to position the logo, nav menu, and search bar horizontally.
Here is how it looks like in the browser
Since we are not using a CSS framework like Bootstrap or Tailwind CSS, we need to write the styles ourselves and make them responsive.
To make the nav menu responsive on all devices, we are going to utilize the old-school CSS positioning property and Flexbox.
On large screens, I’ve set the left property to -100% to hide the nav menu, and on smaller screens like mobile devices, I’ve set the left property back to zero to make it visible.
With the help of JavaScript, we’ll dynamically add a show class to the .nav-list class whenever the hamburger icon is clicked.
When the .nav-list class has a second class of .show then we want to make the nav menu visible.
Here is the JavaScript to toggle the .show on the nav-list. Copy and paste the JavaScript snippets below into the main.js file.
Here is what it looks like:
How to Add a Hero Header to the Food Ordering Website
The hero section will contain an image at the right and some text content at the left.
The text content will consist of a span with an image, an H1, a paragraph, and a call-to-action button.
You need to copy and paste the HTML for the hero section immediately after the navbar HTML within the header tag.
Here are the styles for the Hero section. In the SCSS I used CSS Grid layouts instead of Flexbox to make our lives simple.
I also included the media queries to make the hero section adapt to any screen size.
Here is a preview in the browser
How to Add A Registration and Login Form to the Food Ordering Website
Here is the HTML for the Login Form, I decided to exclude the registration form to make things simple.
Once you know how to code the Login Form then the registration form will be similar, you just need to add a password confirm field and other relevant fields you want.
Here are the SCSS styles for the Login Form. When a user lands on the website, the login form will be hidden but once they click on the sign-in button on the navbar then the login form will appear with some animations.
Here are the JavaScript snippets to hide and show the login popup when we click on the sign-in button on the navbar.
Here is the preview of the login form popup in the browser
How to Make the Services Section
The services section will do what the name implies – it details what services the fictional food ordering company will provide to customers.
The services section consists of four columns comprising text content and three services cards.
The HTML of the services section
The SCSS styles for the services section are somehow unique since I utilized CSS Grid minmax() to make the cards responsive without media queries.
Also, the cards have some nice colorful borders around them, and the way I achieved that was through the CSS ::before selector.
Here is what it looks like in the browser:
How to Make the About Section
The about section contains important information about the fictional food ordering website.
Customers who visit the food ordering website will like to know the history of the fictional food ordering company without asking anyone.
The about section consists of two columns with an image at the left and some content at the right.
Here is the HTML for the about section:
We are going to give the about section some background color and with the help of CSS Grid, we will align the image and the text content horizontally.
The content on the right side of the about section will have an H2 with a paragraph text and four cards below it.
Here is what it looks like:
How to Make the Special Recipes Section with Animations
The recipes section can be considered a products section on an e-commerce website.
The recipes section consists of a slider of different recipes in our fictional food delivery company and their respective prices and names.
Since the recipes section has a slider, I decided to use a library called SwiperJS to implement the slider in an easier way.
There are other libraries I could have used like GlideJS which is also written in pure JavaScript.
Here is the HTML of the recipes section
You can see how simple the recipes section HTML is because later we will use JavaScript to fetch the recipes data from the JSON file and dynamically display them on the screen.
Here are the styles for the recipes section:
To implement the slider with SwiperJS, we need to create an instance of the Swiper class and pass two arguments, the class selector of the slider in the HTML and the options object to further customize the slider.
Here is the JavaScript to fetch the recipes data from the JSON file, display it on the screen and add some filtering.
Am so happy we successfully implemented the recipes section, here is what it looks like in the browser
How to Build the Testimonials Section
The testimonials section is another difficult part of the food ordering website and requires a similar implementation to the recipes section.
Most websites have a testimonial section where some of the most relevant reviews left by customers who enjoyed the service are displayed to attract new customers.
This is the HTML code for the testimonials section
Similar to the recipes section, we are going to use JavaScript to dynamically fetch the testimonials from the JSON file and display them on the screen.
Here are the SCSS styles for the testimonials section
Here is the JavaScript code to fetch, display and filter the testimonials.
JavaScript snippets to fetch the testimonials from the JSON file
Here are the JavaScript snippets to display the testimonials on the screen
Here are the JavaScript snippets to filter the testimonials
function filter() {
const testimonial = [...document.querySelectorAll('.testimonial')];
for (let i = 0; i < cards.length; i++) {
cards[0].classList.add('active');
testimonial[0].classList.add('active');
cards[i].onclick = function () {
for (let x = 0; x < cards.length; x++) {
cards[x].classList.remove('active');
}
this.classList.add('active');
const filter = this.getAttribute('data-filter');
for (let z = 0; z < testimonial.length; z++) {
testimonial[z].style.bottom = '-80%';
testimonial[z].style.opacity = 0;
if (testimonial[z].getAttribute('data-id') === filter) {
testimonial[z].style.bottom = '0%';
testimonial[z].style.opacity = 1;
}
}
};
}
}Here is the preview in the browser
How to Build the Download App Section
The app section is the place where customers who want to download the fictional company’s app can either download the android or IOS app.
Here is the HTML of the App Section
Here are the SCSS styles of the App Section
Here is what it looks like in the browser
How to Build the Footer Section
Now we have come to the last section of the food ordering website.
The footer has four columns which will align horizontally on large viewports using CSS Grid and give them one column on mobile devices.
The footer has links to navigate to other pages of the food ordering website and some social buttons leading to the respective social media handles.
Here is the HTML for the footer
Here are the styles for the footer section. I used CSS Grid to put the different columns into five on desktop screens and one on mobile devices
Here is what the footer looks like in the browser
Conclusion
In this tutorial, you have learned how to make a:
- a navigation menu with a search bar
- responsive landing page
- Add sliders with SwiperJS
- testimonials section with data from a JSON file
This is how you can create a responsive food ordering website using HTML, SCSS, CSS, and JavaScript. You can easily integrate these functionalities into new or existing projects to make them modern.
If you find this article helpful, please don’t hesitate to share it on any social media network.
Click on the button below to download the complete source code of the food ordering website.
Note: You need to run the food ordering website with a live server extension in your text editor before all the functionalities can work properly in the browser.
