In this article, We will be sharing some tips on how to design a grocery delivery website by using just HTML and CSS.
HTML and CSS are two of the core technologies for building Web pages. HTML(Hypertext Markup Language) is the language used to describe the structure of Web pages whereas CSS(Cascading Style Sheet) is the language used to describe the presentation of Web pages that includes colors, layout, and fonts.
A Web page is a hypertext document that is provided by a website and displayed in a web browser whereas a Website is a collection of publicly accessible, interlinked Web Pages that share a single domain name.
Therefore, building a webpage using HTML and CSS is quite simple.
Let's get started
Step-1: Creating the Login page
Any text editor can be used to write the HTML or CSS code, here Sublime Text Editor is used. Inside the index.html we need to write the HTML code for the login page of the website. A login page must consist of Sevices, Clients, About Us and a Contact Us page.
Link your style.css by adding a reference in index.html.
Now we need to write the code for CSS in the same style.css file that we have attached in the link tag as shown in the previous step.
Now save the code and open with live server/chrome and refresh the web page. Our login page is ready! This section refers to the Home page which consist of a navigation bar at the top onto which all the buttons are placed. Also the logo for the page is placed at the top left corner of the page. A small catchy description is mentioned on the page followed by a "Shop now" button which will navigate you to the other page.
This section refers to "Our Services" page in which various services are neatly displayed in different sections and each section is attached with an appropriate picture.
This section is all about entering the contact details. Also the "Sign in" and "Login" button will navigate to the main page of the website which will be discussed in Step-II. And it also includes copyright bar at the bottom.
Step-2: Creating the Main Page
Firstly, we need to write an HTML code for the Main page defining each section one after the other as shown below.
Next in order is styling the main page.
Voila! The Main page is ready.
By using the same theme as Login page, Main page includes the navigation bar with Home, Category, Search, Offers and Cart buttons on it followed by a search bar which also stores the history of previously searched items. The section below that displays the latest offer of the day containing the "Shop now" button which will navigate the viewers to that specific page where the products are available for that offer.
A "Shop-by-Category" section is created which allow the viewers to shop according to their intrest.
A whole different section for offers is created which will display all the possible offers available at that specific day.
Furthermore, a section called "Get-social-with-us" is created where viewers can connect with us through any social media platform. And lastly to complete the webpage, copyright bar is placed at the bottom.
Step-3: Creating a My-Cart Page
mycart.html
stylemycart.css
Finally "My-Cart" page is completed. A drop down list is created where viewers can select their state and enter their addresses. A "Start Shopping" button is displayed which will navigate you to "Main" page.
Conclusion
In this article we learned about HTML, CSS, what websites and webpages are, how to design webpages, how to style webpages using CSS.
Happy learning!
Written by Sidra Sana Shareef.