This is my first article in the medium. Today I am
going to talk about how to create a small E-Commerce website by using HTML and CSS.
An E-Commerce website is an online store that allows you to buy and sell various products through the Internet. We use HTML to create the structure and the content of our webpage. We should attract the hearts of our users. For that, we use CSS. CSS helps us to make our website an
eye-catching one by using different colours, layout, and fonts.
Let’s see how my website looks like😃
Let’s watch a demo of my web page.
Demo of my website
Let’s have a look at my code😃
Codings of my website
All Web pages are divided into three main sections —
What is this Header🤔
Photo of headerHTML code of the header
We use the tag as a container
for introductory content or a set of navigational links. We use the tag only for the major block of navigation links.
We use the
CSS code of “logob”
CSS can be added to HTML documents in 3 ways. They are inline,
internal and external CSS. Here I have used an external CSS file. The class selector selects HTML elements with a specific class attribute. We use (.) character, followed by the class name.
On page load, there will be some layout shifts. To avoid that, we set width and height attributes. The “cursor” property highlights the mouse cursor to be displayed when pointing over the element.
CSS code of “intro”
The above code part shows how I have used CSS functionalities for “intro” div class. We use the "overflow” property to specify whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area. Here I have used “hidden” as the value. It means that the overflow is
clipped, and the rest of the content will be invisible. We use the “position” to highlight the type of positioning method used for an element. As you can see here I have used a background image and have changed the properties according to my preference.
Have you ever noticed when you are moving the cursor upon some elements, their colour is changing🤔
CSS Codes
We use “:hover” to select elements when you mouse over them. Here I have used the colour attribute to get him to know that he has clicked on the navigation elements.
Do you want to know how I created this button?😉
ButtonCSS code I used for it
When we are Comparing to “display: inline”, the major difference is that “display: inline-block ”allows us to set a width and height on the element. We use
the "border-radius” property defines the radius of the element's corners. I use orange as the background colour of the button. The “box-shadow” property attaches one or more shadows to an element. We use “padding” property to create space around an element’s content or inside borders. The “font-weight” property says how the characters should be displayed, thick or thin.
Let’s have a glimpse at the
body of my website😃
Photo of the benefits section
I know you are eagerly waiting to get to know how I create these icons. It’s simple. Let’s have a look at the code.
HTML Code of benefit section
I have defined a section called “section benefits”. Under that, I have defined a div class called “benefit-center box”. Under that, I have defined a div class called “benefit”. Under that, I have defined a span class called “icon”. Here I have imported box icons.
CSS code of benefit section
As you can you can see I have applied CSS to my div and span
classes separately. As you can see here I have used a grid layout. The CSS “Grid Layout” offers a grid-based layout system, with rows and columns, making it easier to design web pages. The “flex-direction” property specifies the direction of the flexible items.
Let’s see how I display a product in my website😁
Photo: How I display a product
As you can see in the photo, I have mentioned the name of the product, how many stars it has and its price. When I move the cursor around the product, the product is appearing to be increasing its size. Let’s look at the code to get a more detailed idea.
HTML code
Here I have defined a div class called “ac”. Under I have defined a div class called “img-cover”. I have inserted an image using the
CSS Code
As you can see, I have applied CSS to my div and span classes separately. We use “:hover” to increase the size of the product when the user moves the cursor over it. The “transition” effect could typically occur when a user hovers over an element. The
“transform” property allows you to rotate, scale, move your elements.
We display our products using the grid layout. Let’s see an example of how I used the grid layout.
Grid layout example- CSS
Let’s move to the footer😃
Photo of the footer
This is a photo of the “footer” of my web page. Here you can see some links and icons. Let’s see how I made this.
HTML Code of the footer
I have defined a section id called “footer”. Under that, I have defined a div class called “foot”. I have used the
tag
to get an unordered list. I start the list item with the tag. We use the tag with its “href” attribute to create a hyperlink to web pages. The tag should indicate the link’s destination. I have defined another div class called “social-links”. I have imported the font-awesome icons.CSS Code of the footer
You can see how I have applied CSS functionalities to the footer section and the other tags also.
That’s all about creating a small website using HTML and CSS. So I think you got some basic knowledge about creating a website. Thank you for spending your valuable time to read this.
If you think this blog enriches your knowledge, please do not forget to give me a clap, leave a comment and share this with your colleagues. Follow me for more
interesting articles.
How do I create a shopping page in HTML?
Allow the user to empty the cart by one click..
Step 1: Creating a card. HTML: ... .
Step 2: Adding card header. HTML: ... .
Step 3: Adding a product details. HTML: ... .
Step 4: Creating a counter. HTML: ... .
Step 5: Adding a price section. HTML: ... .
Step 6: Duplicate cart item. ... .
Step 7: Creating a checkout section..
Can I make a website just using HTML and CSS?
The short answer is yes, you can build a simple website with just HTML and CSS. However, if you want to start building some really cool websites, and have more flexibility in what you can do, you need to use JavaScript, a backend language, web hosting, and databases.