How To Create Shopping Website Using HTML CSS And jQuery
In this post, you will learn how to make a shopping website using HTML, CSS, and jQuery.You can Easily create an E-Commerce shopping website using HTML, CSS, and jQuery. Beginners easily learn about HTML in this tutorial. I also provide you the youtube video tutorial which helps you to understand this tutorial better way. How to make E-Commerce shopping using the HTML tutorial link is given below.
How To Make a Responsive Shopping Website Using HTML, CSS, And jQuery
- 0.0 — 2.40 min : Intro
- 2.40 — 104.14 min: Create an E-Commerce Shopping Website Using HTML, CSS and jQuery.
This is the basic HTML which is important for all HTML files. I import Poppins in this HTML file using Styling from google because most people do not have Poppins font on their devices.
I create the Navigation Bar for the E-commerce website using HTML, CSS, and Javascript to show the search bar, login, and Sign up box when clicking on their icons. There has the logo of the website on the left side of the navigation, the menu on the center of the navigation, and some icons for show search and login on the right side. This navigation has been fixed with the window when we scroll down the page. All secitons HTML and CSS code is given below.
➤Navigation Bar HTML Code have given below.
➤ Font Awesome Link
➤Navigation Bar CSS Code is have given below.
Search Bar
➤Search Bar HTML Code have given below.
➤ Search Bar CSS Code is have given below.
➤JQuery Link
➤Search Bar JavaScript
Login And Sign Up Form
➤Side Login and Registration Form Bar HTML Code have given below.
➤ Login and Sign Up Form CSS Code is have given below.
➤Login and Sign Up JavaScript Code
Full Slider
➤Full Slider HTML Code have given below.
➤Light Slider Files
➤Full Slider CSS Code is have given below.
➤Full Slider JavaScript Code
FEATURED CATEGORIES
➤Featured Categories Slider HTML Code have given below.
➤Featured Categories Slider CSS Code is have given below.
➤Featured Categories Slider JavaScript Code
Product List-1
➤Product list-1 HTML Code have given below.
➤Product list-1 CSS Code is have given below.
Sale Offer Boxes
➤Sale Offer Boxes HTML Code have given below.
➤ Side Login and Registration Form CSS Code is have given below.
Product List-2
➤Product Box List-2 HTML Code have given below.
Sale Banner
➤Sale Banner HTML Code have given below.
➤Sale Banner CSS Code is have given below.
Services Box and Footer
➤Services Box and Footer HTML Code have given below.
➤Services Box and Footer CSS Code is have given below.
Making Navigation Fix When Scroll
➤JavaScript Code For Fix Navigation
➤CSS Code For Fix Navigation
Making Website Responsive
➤ Side Login and Registration Form CSS Code is have given below.
Верстка интернет-магазина: список товаров
Требования к верстке каталогов интернет-магазинов имеют свойство повторяться из проекта в проект. Поэтому у меня выработался набор стандартных приемов, которыми я хочу поделиться в этой статье.
Некоторые приемы уже были рассмотрены в различных статьях. Однако у меня возникло желание объединить их и проиллюстрировать отдельными демо. Надеюсь, в таком виде наработки окажутся полезны верстальщикам, которым часто приходится работать над интернет-магазинами.
В качестве примера мы будем верстать список товаров для интернет-магазина комнатных растений. Демо готового каталога можно посмотреть по ссылке. В результате должен получиться список растений с фото, описаниями и всплывающими кнопками. Кроме того, вид списка можно будет переключать: товары будут выглядеть либо как плитка, либо как таблица.
Адаптивная сетка
Итак, начнем с создания адаптивных плиток — будущих карточек товаров. У нас будет 8 комнатных растений:
Оберткой для товаров послужат блоки, занимающие 100% ширины родителя на мобильных устройствах.
Теперь используем медиа-запросы, чтобы разместить по две, три и четыре плитки в ряд при больших разрешениях монитора.
И зададим стили карточек товаров.
Из-за того, что карточки имеют margin-right равный 20px , весь список имеет нежелательный отступ справа.
Исправим это с помощью отрицательного значения margin-right у родителя.
Теперь все в порядке. Посмотреть на получившуюся сетку можно на страничке демо. Для наглядности блокам в демо задана фиксированная высота.
Фото товаров
Следующим интересным моментом является верстка блоков с фотографиями растений. Разметка в данном случае будет такой:
Сделаем родителя тега img квадратом с помощью свойства padding-bottom со значением 100%. Вот все стили для данного блока.
В указанном блоке расположим картинку таким образом, чтобы при любых размерах она не выходила за пределы родителя, и отцентрируем ее горизонтально и вертикально.
Осталось немного увеличивать фото при наведении.
Как все это работает можно посмотреть на примере демо.
Описание товара
Нам нужно, во-первых, задать описанию товара высоту в четыре строки, а во-вторых, сделать конец последней строки слегка размытым.
Первую задачу можно решить, задав высоту параграфа с описанием, равную четырем line-heigth .
А эффекта размытия последних букв четвертой строки мы добьемся с помощью псевдоэлемента :after с линейным градиентом в качестве фона.
Перечеркнутые цены
Чтобы перечеркнуть цену линией отличной по цвету от текста, задаем блоку с ценой значение color равное #ff3535 и text-decoration — line-through . При этом устанавливаем для вложенных элементов серый цвет текста.
Всплывающие кнопки
Что касается кнопки «Быстрый просмотр», ее реализация сравнительно проста. Кнопка абсолютно позиционирована относительно блока с классом .product-photo , скрыта с помощью opacity: 0 и немного сдвинута вниз за счет transition: translateY(2em) . При наведении курсора на карточку товара стили кнопки меняются следующим образом.
Несколько сложнее дело обстоит с кнопками «В корзину» и «Купить в 1 клик». Здесь внешний контейнер .product-buttons-wrap абсолютно позиционирован в блоке .product и равен родителю по ширине и высоте.
Далее мы стилизуем псевдоэлемент .product-buttons-wrap:before таким образом, чтобы он вытеснял любой контент блока вниз, под нижнюю границу, блока-родителя.
Теперь можно добавить собственно контент — кнопки, размещенные в блоке .buttons .
Благодаря правилу float: left у псевдоэлемента .product-buttons-wrap:before , кнопки расположены ниже основного контента, и блок .buttons занимает всю площадь карточки.
Чтобы лучше разобраться с кнопками, можно посмотреть это демо.
Переключение вида карточек товаров
Для переключения между плиткой и табличным видом каталога мы создаем две кнопки.
По клику на кнопки у списка товаров удаляется и добавляется класс .table-layout .
Таким образом, прописав стили для карточек-дочерних элементов блока ul.table-layout , мы можем «превратить» список в таблицу только с помощью CSS, без перезагрузки страницы. Для этого задается ширина карточек равная 100%. А вложенные блоки теперь займут только часть ширины карточки, например:
Далее абсолютно позиционированные элементы занимают свое «естественное» положение. Например, так происходит с кнопками.
Это был последний момент, которым хотелось с вами поделиться. С праздниками и всего доброго.
Hello Everyone��
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.
Let’s have a look at my code��
All Web pages are divided into three main sections — <HEADER> <BODY> <FOOTER>. We simply change the text in between the HTML tags based on each section.
What is this Header��
We use the <header> tag as a container for introductory content or a set of navigational links. We use the<nav> tag only for the major block of navigation links.
We use the <img> tag to embed an image on an HTML page. We use “src” to specify the path to the image. Here I want to display the logo of my web page. To apply CSS functionalities, I have to specifically recognise that. For that, I have defined a class called “logob”.
We use the <ul> tag to define an unordered list. We start the list item with the <li> tag. We use the <a> tag with its “href” attribute to create a hyperlink to web pages or anything else a URL can address. <a> tag should indicate the link's destination.
We use the <div> tag as a container for HTML elements. Here I have defined a div class called “intro”. <h1> to<h3> tags define the headings.
Let’s see how I make this header an attractive one using CSS. Here I am going to show you some code parts only��
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.
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��
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?��
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��
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.
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.
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��
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.
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 <img src> tag. I have inserted the product description by using a <p> tag. I have used a div class called “rating” to display the stars. I have used a div class called “price” to display the price.
Let’s see how I make this product display an attractive one using CSS.��
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.
How to make an e-commerce website with HTML, CSS and JS — 01
Hello, Today in this article, we’ll learn to create an e-commerce website using HTML, CSS and JS. This is a part of full stack e-commerce website. In this part we’ll only create front end page’s UI. We’ll create 4 pages in this tutorial — Home page, Product Page, Search Page and 404 page.
To see demo or you want full coding tutorial video for better understanding. You can watch the tutorial below.
Video Tutorial
I appreciate if you can support me by subscribing my youtube channel.
You can see below, our project’s folder structure.
So let’s start coding.
Home Page
Write basic HTML 5 template in index.html . And link home.css file to index file. Now, create navbar.
Exit fullscreen mode
Open home.css file. And inside it before start styling. As we’ll have same navbar and footer in all pages. I thought of making their styles as a separate file. So import nav.js file inside home.css .
Exit fullscreen mode
And do navbar related styles inside nav.css .
Nav.css
Exit fullscreen mode
Output
Now create links below the navbar.
Exit fullscreen mode
Above code is inside navbar element.
Exit fullscreen mode
Output
Great! but as we want navbar in all pages. I am don’t like to copy the code. So let’s make this navbar with JS dynamically. Open nav.js file. And make a createNav function inside it.
Exit fullscreen mode
If you see the above code, Inside the function first I am selecting nav element using querySelector method. And then writing its HTML using innerHTML . And the value of innerHTML is the same HTML elements that we have made in index.html file. You can now remove the HTML elements from there and also import nav.js .
Exit fullscreen mode
Output
Now, let’s make its header.
Exit fullscreen mode
Home.css
Exit fullscreen mode
Output
Now, we have to make product card slider. For that code this.
Exit fullscreen mode
Note- we are inside index.html file.
Home.css
Exit fullscreen mode
Output
Now make product card.
Exit fullscreen mode
We’ll make these product cards with JS and database dynamically later.
Home.css
Exit fullscreen mode
Output
Now make, pre and next button of course.
Exit fullscreen mode
Exit fullscreen mode
Output
Now, let’s make the slider working. Open home.js file. And code this.
Exit fullscreen mode
In the above code, I am simply selecting all product containers, next buttons, pre buttons using querySelectorAll method. And then just looping through each container. And adding click event to next button and pre button.
Import the home.js file inside index.html .
Exit fullscreen mode
We are done with product cards also. Let’s make collections section now.
Exit fullscreen mode
Exit fullscreen mode
Output
Now you can copy the product section 2 more times after collection element. And you can also change the images and data. Don’t worry we’ll make the cards dynamically with database in future.
After done copying product section. The only thing left in our page is footer. So let’s make it.
Exit fullscreen mode
As we did for navbar. Import footer.css inside home.css file.
Home.css
Exit fullscreen mode
Footer.css
Exit fullscreen mode
Output
Make info elements inside footer.
Exit fullscreen mode
Footer.css
Exit fullscreen mode
Output
Great Work. As we did for navbar. Let’s make this footer also with JS dynamically. Open footer.js file and do the same thing, that we did for navbar.
Exit fullscreen mode
Now you can delete the footer elements from the the index file. And import the footer.js file.
index.html
Exit fullscreen mode
Output
Great! We are done with homepage. Now, let’s create product page.
Product page.
In product page. Write HTML 5 template. And link home.css , product.css file.
Exit fullscreen mode
And import these JS files.
Exit fullscreen mode
And now you can just make a navbar and footer by adding nav and footer element inside body .
Exit fullscreen mode
Output
Isn’t that simple. You can also copy the product container element from home page to here. After done copy the cards. Let’s make product detail section. Make it after navbar .
Exit fullscreen mode
Product.css
Exit fullscreen mode
Output
Make details section in the right now.
Exit fullscreen mode
Exit fullscreen mode
Output
Now just a simple section we have to make. A detail description section. Make is outside product-details
Exit fullscreen mode
Exit fullscreen mode
Output
Now make the image slider working, and size button toggle-able. Open product.js file.
Exit fullscreen mode
And then code this.
Exit fullscreen mode
Great Work! we are done with product page also. Now we have to make search page which is very simple.
Search Page
As we made navbar and footer in the product page. Do the same for this page also. Link these files to it.
Exit fullscreen mode
Now make the product cards. First make the heading.
Exit fullscreen mode
Search.css
Exit fullscreen mode
Output
For cards, we’ll use the same card we made for homepage. Just copy the product-container element from homepage and paste it inside search-results .
But we are using flex box which will make the cards go side by side. But we don’t want that for our search page. So just over write the product-container elements property.
Product.css
Exit fullscreen mode
Output
Now, we are almost done. The only page we have to create is 404 page.
404 Page
Do the same for this page also to make navbar. I didn’t made footer in this page but if you want you can make it too. After making navbar. Link 404.css file. And let’s code the page.
Exit fullscreen mode
Footer.css
Exit fullscreen mode
Output
So that’s sit for today. Great work. I know it was a lot. But e-commerce website is not that simple. Don’t forget to follow me on youtube and dev.to if you don’t want to miss the next part of this series.
I hope you understood each and everything. If you have doubt or I missed something let me know in the comments.
Articles you may find Useful
I really appreciate if you can subscribe my youtube channel. I create awesome web contents.
Your donation really motivates me to do more amazing tutorials like this. Support me on patreon, Buy me a coffee, Donate me on paypal
Thanks For reading.
Top comments (40)
Cool stuff but some of the practices shown are not the best ones. Example you are using ‘@import’ inside a CSS file. Which is not that good for performance. In simple HTML, CSS and JS site, its better if you have multiple CSS being request using the traditional link href method, especially if your host is http2 ready.
Also, HTML being handled in JS. That also is not the best separation of concerns. I know, in frameworks/libraries like React for example you write HTML (in React’s case. JSX) inside JS but those apps are built like that, that the state builds the UI and you need to tie up really close the UI and components with the state for the app to work as expected.
On this scenario we dont have this kind of requirement.
Not saying it does not work. It works and it works well. Is it a good thing to mix technologies though like this? Probably not.
Just some personal opinions. Hope on the next articles in the series you will improve these suggestions.