DEV Community: Vosidiy M.

Color & Gradient Tools for Web in 2025

Vosidiy M. — Sat, 08 Nov 2025 07:50:51 +0000

How to generate colorful backgrounds for app or website? Web gradients create visual depth and interest by blending multiple colors on backgrounds. They help in crafting dynamic user interfaces.

A list of tools to create stunning gradients and CSS patterns for website

Color and Gradient Tools Used by Top Designers:

https://uicolors.app/generate
Tailwind color generator. A color-system generator and preview tool that lets you build palettes for UI
https://supa-palette.com
Color palette generator for Figma. Offers Figma plugin.
https://photogradient.com
Online tool to generate smooth mesh gradients
https://storytale.io/browse/?categoryId=4
Part of Storytale’s illustration library, find graphics, artwork, backgrounds and design assets.
https://lumenloops.com
Animated hero illustrations and accent graphics (SVG, video formats) designed to elevate landing pages.
https://kigen.design/color
An interactive color generator for UI made for Kigen design system plugin: lets you produce full color systems from a base color

Save and Follow us.
Find more tools at http://finalui.com?ref=dev.to

[Boost]

Vosidiy M. — Wed, 30 Jul 2025 06:39:03 +0000

Product card with multiple thumbnail images (change on mouse hover)

Vosidiy M. ・ Jul 28

#css #html #coding #webdev

My article

Vosidiy M. — Wed, 30 Jul 2025 06:37:32 +0000

I made my CSS grid system that made my life much easy (No framework, no build process)

Vosidiy M. ・ Jul 28

#css #webdev #sass #scss

[Boost]

Vosidiy M. — Mon, 28 Jul 2025 13:38:06 +0000

Vosidiy M.

Jul 28 '25

I made my CSS grid system that made my life much easy (No framework, no build process)

#css #webdev #sass #scss

Comments

4 min read

I made my CSS grid system that made my life much easy (No framework, no build process)

Vosidiy M. — Mon, 28 Jul 2025 13:29:35 +0000

I was using Bootstrap CSS before, but I was never happy because of its lack of utility classes for margins, padding, and other sizings.
I tried to extend it by digging into its SCSS (Sass) files, but it was too complicated. Sass mixins and functions were dependent on each other; a small mistake might take hours to fix.

So, last year, I decided to build my own CSS framework for my products - Ecommerce Templates. (ecommerce-ui.com)

I used to create and sell e-commerce templates. My templates were built on Bootstrap 5. After creating my own CSS framework, I never looked back at Bootstrap. Also, I hate Tailwind due to its messy, long class names and its requirement for build processes. I don't like using the terminal for small changes on HTML.
So, I created a framework that combines elements of Tailwind and Bootstrap.

Here is my breakpoint configuration in scss (sass)

$breakpoints: (
  'sm': 'min-width: 641px',  // not mobile, - small tablet and up
  'md': 'min-width: 921px', // medium and up - larger tablet and up
  'lg': 'min-width: 1201px', // large and up - desktop and any widescreen
);

There's no need for too many breakpoints. Since most users browse on desktops or mobile devices. Even tablet users are not too many. we can streamline our code by targeting these key screen sizes.
First thing to create default classes for grid, without breakpoints

.row {
  --flex-gap-rows: 0px; // default gap // gap.scss file
  --flex-gap-cols: 20px; // default gap // gap.scss file
  gap:0!important; // css gap breaks flex column, it is good for css grid only
  row-gap:0!important; // css gap breaks flex column, it is good for css grid only
  column-gap: 0!important; // css gap breaks flex column, it is good for css grid only
  display: flex;
  flex-wrap: wrap;
  margin-left: calc( -0.5 * var(--flex-gap-cols));
  margin-right: calc( -0.5 * var(--flex-gap-cols));
  margin-top: calc(-1 * var(--flex-gap-rows));
}

.row > * { 
  flex: 0 0 auto;
  max-width: 100%;
  width: 100%;
  padding-right: calc(var(--flex-gap-cols)* 0.5);
  padding-left: calc(var(--flex-gap-cols)* 0.5);
  margin-top: var(--flex-gap-rows);
}

//////////// ROW COLS
.row-cols-auto > * {width: auto; flex: 0 0 auto!important; }
.row-cols-1 > * { width: 100%; flex: 0 0 auto!important; }
.row-cols-2 > * { width: 50%; flex: 0 0 auto!important;}
.row-cols-3 > * { width: 33.33333333%; flex: 0 0 auto!important; }
.row-cols-4 > * { width: 25%; flex: 0 0 auto!important;}
.row-cols-5 > * { width: 20%; flex: 0 0 auto!important;}
.row-cols-6 > * { width: 16.66666667%; flex: 0 0 auto!important;}
.row-cols-7 > * { width: 14.285714%; flex: 0 0 auto!important;}
.row-cols-8 > * { width: 12.5%; flex: 0 0 auto!important;}
.row-cols-9 > * { width: 11.111111%; flex: 0 0 auto!important;}
.row-cols-10 > * { width: 10%; flex: 0 0 auto!important;}
.row-cols-11 > * { width: 9.09090909%; flex: 0 0 auto!important;}
.row-cols-12 > * { width: 8.33333333%; flex: 0 0 auto!important;}

Based on above configuration, we create loop to create grid system based on each breakpoint.
So it will iterate all classes for sm, md, lg

@each $breakpoint, $size in $breakpoints {

  @media ($size){
    // breakpoinst styles
    .#{$breakpoint}\:row-cols-auto > * { width: auto; flex: 0 0 auto!important;}
    .#{$breakpoint}\:row-cols-1 > * {  width: 100%; flex: 0 0 auto!important;}
    .#{$breakpoint}\:row-cols-2 > * {  width: 50%; flex: 0 0 auto!important;}
    .#{$breakpoint}\:row-cols-3 > * {  width: 33.3333333333%; flex: 0 0 auto!important;}
    .#{$breakpoint}\:row-cols-4 > * {  width: 25%; flex: 0 0 auto!important;}
    .#{$breakpoint}\:row-cols-5 > * {  width: 20%; flex: 0 0 auto!important;}
    .#{$breakpoint}\:row-cols-6 > * {  width: 16.6666666667%; flex: 0 0 auto!important;}
    .#{$breakpoint}\:row-cols-7 > * {  width: 14.285714%; flex: 0 0 auto!important;}
    .#{$breakpoint}\:row-cols-8 > * {  width: 12.5%; flex: 0 0 auto!important;}
    .#{$breakpoint}\:row-cols-9 > * {  width: 11.111111%; flex: 0 0 auto!important;}
    .#{$breakpoint}\:row-cols-10 > * { width: 10%; flex: 0 0 auto!important;}
    .#{$breakpoint}\:row-cols-11 > * { width: 9.09090909%; flex: 0 0 auto!important;}
    .#{$breakpoint}\:row-cols-12 > * { width: 8.33333333%; flex: 0 0 auto!important;}
    // end breakpoint
  }
}

So how you can use it?
You can easily create columns upto 12.
For example:
(On large screens, there will be 5 items in a row, on medium screens 4 items per row, and on mobile (default) 2 items per row)

<div class="row lg:row-cols-5 md:row-cols-4 row-cols-2">
  <div> Column 1 </div>
  <div> Column 2 </div>
  <div> Column 3 </div>  
  <div> Column 4 </div>  
  <div> Column 5 </div>
  <div> Column 1 </div>
  <div> Column 2 </div>
  <div> Column 3 </div>
  <div> Column 4 </div>
  <div> Column 5 </div>
</div>

You can create 7 column or 9 column very easily. Just by adding classes into parent element.

I made all of my components and utility classes using Sass. There's no build process and no dependency management. I love Codekit and Prepros; they convert any Sass (SCSS) file into CSS easily. Check out how I created all my other utility classes and components for eCommerce Templates You can Download here

On the next lesson, I'll share how I created other utility classes. Please follow me on Medium
vosidiy.medium.com

Product card with multiple thumbnail images (change on mouse hover)

Vosidiy M. — Mon, 28 Jul 2025 12:56:19 +0000

Today, e-commerce is evolving rapidly. Users are lazy to click, that's why most websites implement a feature that displays multiple images without requiring a click on the product link.

User just hover on product and while moving the cursor, the image will change.

When you ask ChatGPT to create features like this, the code you get tends to be complicated and messy, often filled with CSS and JavaScript.

However, I decided to create the simplest CSS-only solution

In this example, I used css classes from ecommerce-ui.com. Just for basic structure, grid and utilities.

<figure class="card shadow overflow-hidden">
     <!-- Gallery start -->
     <div class="product-images">
        <div class="hover-zone zone1"></div>
        <img src="https://placehold.net/1.png" />
        <div class="hover-zone zone2"></div>
        <img src="https://placehold.net/2.png" />
        <div class="hover-zone zone3"></div>
        <img src="https://placehold.net/3.png" />
        <div class="hover-zone zone4"></div>
        <img src="https://placehold.net/4.png" /> 
     </div>
     <!-- Gallery end// -->
     <figcaption class="p-5">
        <h5>Product name </h5>
        <p class="mb-3 mt-2">$199.00</p>
        <button class="btn btn-default"> Add to cart </button>
     </figcaption>
</figure>

In the code above, you can see that we've divided it into four vertical zones (columns), with each column having its own image. All images overlap each other. We simply show or hide them according to the mouse hover on each zone.

Here is simple css

.product-images {
  position: relative;
  height: 260px;
  overflow: hidden;
  cursor: pointer;
}

.product-images img {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* Invisible horizontal zones */
.hover-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 25%;
  z-index: 10; 
  border-bottom:2px solid white; 
}

.zone1 { left: 0; }
.zone2 { left: 25%; }
.zone3 { left: 50%; }
.zone4 { left: 75%; }

.hover-zone:hover ~ img{ opacity: 0; visibility:hidden;  }
.hover-zone:hover + img{ opacity: 1; visibility:visible; }
.hover-zone:hover{ border-bottom-color:blue; }

You can see that, we changing opacity and visibility.

Here is full working example on codepen:
Check out this Pen I made!

Download e-commerce Templates and UI Kit
https://ecommerce-ui.com

Use these placeholder images to test your UI

Vosidiy M. — Sun, 06 Apr 2025 07:49:51 +0000

As a UI designer and developer, I often struggle to find suitable placeholder images. For example, when a product photo is unavailable, I prefer to display an empty box.
Similarly, for real estate websites, a grayscale or dummy image of a building's shape is preferable before the actual photo loads.

Yes, there are many stock photo libraries, requiring time-consuming searches, resizing, and optimization with tinypng.com. To solve this, I created a website and stored collection of images for common use cases.
You can use by downloading or just by adding url
for exampple:
https://placehold.net/default.svg
or
https://placehold.net/building-400x600.png

More placeholder images on placehold.net

What is placeholder image?

Placeholder photos are used by designers or developers to visualize a design or layout before the final image is replaced.

A placeholder image is essentially a substitute image used in website or application design while the actual images are being created or are not yet available. They serve a few key purposes:

Layout and Design:
Placeholder photos help visualize the final layout of your future website or app, ensuring that image spaces are properly allocated. This allows designers and developers to test how the design will look with images of different sizes and aspect ratios.

Performance:
Using lightweight placeholder images can improve page loading speed, especially during development when high-resolution images might slow things down.

Content Planning:
They help to indicate where images will be placed, making it easier to plan the content and flow of the page.

Testing Responsiveness:
With the increasing importance of responsive design, designers need to ensure that images look good on all devices. Placeholder images allow them to test how images will resize and adapt to different screen sizes.

There are many other placeholder image but all of them are boring images with texts like "No image" or just a shape of mountain & sun..

So, I wrote this post to spread the word. All for free
https://placehold.net

Make the UI stand out until the real image comes along.
Thanks!

List of useful tools & widgets for website to boost marketing

Vosidiy M. — Wed, 31 Jan 2024 12:02:02 +0000

There are some online tools you can integrate by just adding few lines of code, and improve marketing and sales on your website

Forms are everywhere!

I think that, <FORM> element is one of top inventions of human being :-)
There are many purposes of using form elements: For ex: Registration form, Feedback form, Appointment form, Client proposal form, Product submission form, Booking form, Survey form, Voting form, Event booking form and so on.

Here is a real-life example: if you need a loan from bank, You visit website of bank, You will find a loan calcualtor form with few input elements, where you can choose number of month and loan amount. Then, website instantly gives you all the detail about monthly installments. So, this kind of forms can be found on many websites and in every industry.

Today, every business have a website. And website should have some interactivity to give proper information. Visitor may want to order your service directly from website. Anyways, main purpose of website is usually generating leads — receiving orders or communicating with clients.

Here are some tools which adds interactivity to any website. And makes your website lead generating magnet. You can also integrate these tools with messengers like Telegram or WhatsApp to get notification if new order received.

jotform.com
One of the most used tool, You can create and share contact form or order form pages even without having a website. You can also accept payments, add conditions based on users selection.

fillout.com
This is one of my favorite form builder. You can create any kind of interactivity to you form. Even it can create price estimator or cost calculator form where users input their request and instantly get costs based on your formula.

stepform.io
This is also my go to solution when it comes to creating a form where visitors can generate estimated price. Its formula element is so powerful. You can create multi step form.

formcarry.com
This tool can be integrated with any HTML form elements, You just create any form in your website and then add special url link to <form action=url>, That’s it. all easy, You don’t need any coding.

formspark.io
This is very basic tool to convert your html form elements into working form where users can submit order or contact from your site.

Discount generator

Some countries has low salaries per month. Your digital product might be expensive for some countries with low income. This tool can generate discount based on country.
paritydeals.com
Generate discount automatically based on visitor’s country.

Newsletter, email & sms marketing

Here are some proven tools which used by many creators.
Newsletter always help to keep your audience informed about new updates.

convertkit.com
mailjet.com
mailerlite.com
brevo.com
drip.com
flodesk.com
yespo.io
formspark.io
loops.so
zoho.com/marketingautomation/

Notification alerts, Popup, Upsell

optinmonster.com
privy.com
onesignal.com
wisepops.com

Email and SMS marketing

sendlane.com This is tool is perfect choice if your business growing fast and you need more automation for marketing

Chat and messaging

drift.com
dixa.com
tawk.to
chatra.com
helpscout.com
freshworks.com
crisp.chat

Customer engagement

trustpulse.com Sometimes you can see on some websites informing about “X user just purchased this product” or “Someone just booked service”. This kind of information gives more trust to new users.

That’s it for now…

Follow me on Linkedin
I write about online tools, web design, UX/UI Design

Designing navigation menu for web

Vosidiy M. — Sat, 16 Apr 2022 08:39:18 +0000

Introduction

Website navigation menu is an essential part of UI. It’s like a foundation of any website. That’s why you shouldn’t ignore this article if you are a web designer or web developer.

There is no so called “best website navigation”. Menu always depends on website. For ex. For some websites it is enough simple horizontal menu. For more complex websites you may need a large mega-menu. Here is tutorial for megamenu with bootstrap. Most of e-commerce websites has multi level menus like treeview. so it depends on your website’s structure and number of pages.

How to design better website menu

First of all you should create a sitemap or structure tree of your website based on importance of every link. Some links should be always visible at the top header or at the bottom — footer, but some other links are linked with other pages. For example: Pages like — About, Products, Plans, Contact, and Blog pages should be visible at the top header. To access the History of company and Team pages, you need to click the About page first, then go to inner pages.

In this tutorial I will share all possible menu variants with examples. These are mostly horizontal menus. These information are useful for both web designers and front-end developers. At the end I will share a link to download html css code.

1. Simple horizontal menu with dropdown

You’ve already seen such menus everywhere on the internet. Dropdown menu can opened by click or on hover, or both. On bootstrap framework it is clickable only. But you can make it open on hover with few line of css code.

2. Multi level menu design.

Multilevel web menu is also called tree-view menu. When you open a dropdown and bring mouse cursor one of the item of dropdown, another dropdown appears from left or right side. Here is example image:

3. Megamenu design samples.

Mega-menu is mostly used on e-commerce sites. It can show all catalogue of products on single dropdown window. You can put large content inside mega-menu, like showing all categories of products, many links, banners inside it. It is a bit complex menu to create and make responsive. Here is some design examples of mega menu:

Here is another megamenu style for ecommerce web sites, each category list has its heading and icon:

Even, you can show product promotions or offers inside mega-menu block. Here is sample:

4. Mega-menu with tab menu inside

That kind of megamenu is mostly for e-commerce websites, It is same as above large full width megamenu but, It has vertical (sometimes horizontal tabs). Tabs can be clickable or hoverable as well. Here is example:

5. Dropdown with large submenu.

Another variant of menu is dropdown with large submenu on the right side.

5. Large dropdown menu design.

It is same as normal dropdown but it has larger width, Similar to Ebay.

Conclusion

Helping visitors to navigate throughout website pages should be a priority for every website. The website menu design should work well for both desktop and mobile users.

Follow me:
https://www.linkedin.com/in/vosidiy

Ways of creating an online shop website (technical side of e-commerce)

Vosidiy M. — Wed, 06 Apr 2022 17:23:40 +0000

The volume of online sales in the world has grown dramatically in recent years. I worked with many people who started online business. Some of them failed, some of them selling online successfully. Some of them spent a lot money and time to create a website, some of them running business without having own website, but selling online. I also started an online store business. After a while, I gave it up. Because my partner who gave me this idea, he couldn’t supply products.

Briefly about myself…

I became interested in IT and programming in 2010 ( I was 20). I first learned PHP and Wordpress and made several online store websites and product catalog websites. When I was a student at university, I earned money by creating e-commerce websites. At that time, websites was very simple: There was a product catalog, categories, cart, order forms and admin panel…
Later, I chose web design field, Creating an interfaces was interesting for me rather than programming. Until now I designed hundreds of online stores and marketplace websites. Sometimes I also convert my designs into responsive HTML / CSS pages.
In the process, I learned all technical aspects of e-commerce business. Now, I decided to write about it.

Ways of selling online

It all starts with asking a question:
What do you want to sell?
Where do you want to sell? Who do you want to sell to?
Actually, there are two main options selling items in your city (without online):
Option 1: You buy land and build a shop.
Option 2: You rent a place in a big market or supermarket.
The same is true in the world of the internet:
Method 1: You get a hosting server (a database, GB or MB space) and program everything as you want or hire a programmer to do job.
Method 2: You register on a big marketplace websites and start selling. Such sites are also called multi vendor e-commerce sites. For example, amazon.com, alibaba, etsy.com and so on.
In this article, we will talk about Method 1 — how to create your own e-commerce website.

How to start a shopping website?

There is an endless debate among programmers: “Is PHP better or Python?”, “Laravel or Yii framework?”, “Wordpress or other CMS?” and so on. There are also many online web constructors, just like LEGO, you can create your own website by combining the elements you need. For example Squarespace, Webflow, Wix and so on. They also allow you to create a website with your custom design.

If you are far from the IT and programming, then you may ask someone to guide you. And he or she will tell you “do it this way or that way” based on his or her own experience. You trust him. Because, he is a programmer! Then if you ask another programmer, he will recommend the method he knows well. And you start taking risks. In most cases, programmers prefer to start from scratch, Or to build based on previously written code.

Creating a website is still half of the way :-), there is still a lot of work you have to do: Integrating with payment system (Paypal, Visa or your country’s local bank), integration with delivery service, future improvements like UX / UI design, code optimization,…, content filling, constant updating product catalog, such as taking images of products, writing detailed information and so on. Apart from that, marketing and online advertising is also important (this is another big topic).

If you ask an architect about building methods, he will tell you about several ways to build a simple building. Whether brick or cement, wooden board or aluminum profile, and so on. The same is true in the field of programming.

What does an online store website consist of?

Front-end part (Visible part for users or clients). For example, Home page, Catalog page, Product information page, etc. Site design.
Database.
Admin control panel. To add, delete items, receive orders. This is usually used by administrator or operator.

Method #1. Creating everything from scratch (from zero)

Many websites (including online stores) are written in PHP. But nobody writes code in pure PHP. Because it would be very time consuming. There are many so called “code libraries” (also called Frameworks) based on PHP.

Most widely used PHP frameworks are Laravel, Yii, or Codeigniter. Remember: A programmer usually doesn’t work with all programming languages. Even PHP programmers have their own preferred Frameworks. Some prefer to use Laravel framework, others prefer the method they like. So, you select a programming language (PHP for ex.) to build your future website, and then select a Framework based on that language. That’s it!

There are some advantages and disadvantages of creating all from scratch.
Bad news is: You will spend more time and money. Many unexpected bugs (errors) may occur during creation. Need to test all functionality before you launch business.
Good news is: You can create whatever you want without limits. Anytime you can expand your website’s functionality.

Steps to create it all from scratch.

Planning and designing. Hire a web designer to create interface of your future website. This also take some time depending how professional your designer is. But now there are ready-made design libraries — pre-made web elements. Also known as Design library or UI Kit. For example: https://ecommerce-uikit.com
This can save 80% of the time of designer.
HTML/CSS coding. So once you’ve got a detailed design of your future website, you need to convert them into html / css files.
Here’s what you need to know. There are many ready-made html templates for e-commerce you can find on the Internet. If you use a ready-made html template, then there is no need to hire a designer.
You can find many beautifully designed templates: For example: https://themeforest.net/category/site-templates?term=ecommerce
I would also like to mention the html template I created:
https://bootstrap-ecommerce.com
You can easily customize the color and style. It consists of ready-made blocks. It is enough to know Bootstrap, CSS and SASS to customize according to your style.
Check also https://bootstrap-ecommerce.com/templates.html
Creating a database. Mysql, postgresql, mongodg and others can be used.
Integrate your html pages with database.
Testing and fixing errors.
Upload to server and launch.

So, the process of creating all from scratch is completely up to you. Only money, time and an experienced programmer is needed.

Method #2. Using ready-made code

There is another way that saves a lot of time and effort. If someone created a site from scratch with PHP or other language, then you can get a copy of that code to speed up the process. For ex. you can ask a programmer if he/she already worked on similar project, may be he can re-use that code for you. On the internet there are many open-source codes. On github.com you can find many of them. There are also paid options available on this site:
https://codecanyon.net/category/php-scripts/shopping-carts
You can also search Google for “online shop script” or “ecommerce php script”. Hundreds of people have already created similar project. Why reinvent the wheel. All you have to do is adapt it to your needs. Anyways, you can save 90% of time.

Method #3. Use of CMS systems

CMS (Content Management System). This is also a ready-made code similar to the above method. But it is not a code created by “someone”, but a community with its own ecosystem and support team. An example of this is the Wordpress CMS.
Wordpress is also a system created in PHP. In other words, it is a ready-made website created in PHP and has its own admin panel and front view. Usually CMS systems have additional plug-ins. Plugin — it is a set of additional codes which can enhance the capabilities of system. For example, Wordpress was actually designed for simple blog websites. But it has a plugin called Woocommerce (woocommerce.com) that allows to create an online store.

Another popular CMS system is opencart (opencart.com), a ready-made system for online shopping. To use them, you just need to get a hosting (web server — a place for a database) and buy a domain name (www. something .com).

The advantage of CMS is, it takes 5 minutes to create your basic online store with essential functionalities. But…. you spend some time customizing it for your needs, such as changing design, adding extra features, and connecting to a payment system. For such tasks you need to find a programmer who already has experience in this system. Usually a programmer who is expert in PHP may not know Wordpress at all. Although Wordpress is also built on PHP :-).

Method #4. Use of SAAS systems

This is the easiest and quickest method. SAAS means Software as a service. You need to open account and start uploading your products.
Most popular SAAS system is shopify.com. It gives all essential functionality with pre-made design templates for your website. Or you can create your own design also.There is only monthly fee to run your shop.

Benefit of the SAAS system is, you don’t need to worry about hosting server, finding programmer, security, payment systems and so on. Shopify has already integrated with Paypal and Visa, Master Card.

Method #5. Create based on Headless CMS or API

Usually modern javascript is used for this method. For ex. ReactJS, VueJS or other libraries. It means that, your front-end (visual part for user) and back-end (admin control) parts are totally separate. They communicate via API (Aplication programming interface) or special code to retrieve any information (for example, Product Name and Picture) from the database.
You can create your website with PHP + Larevel using this method. Or you can use ready made codebase.
Here is one of the example: vuestorefront.io
It provides all you need (Admin control, Database, …) but without front-end (visual part of your website). You will use their API to integrate with your custom html template. Sometimes this method called also SPA (Single Page Application)

Advantages of this method:

Performance will be high. There is no page reload on each click. Only certain part of website will change when you click on any button or link.
The front-end and Admin parts of the website are completely separate from each other, which makes them easier to manage or extend later.
It is also possible to create a mobile application of the your website using the API. Because mobile apps communicate with server via API code. Note: When creating a mobile version of the online store, I’d recommend the following ready-made design and html template for your app: https://bootstrap-ecommerce.com/templates/mobile/website/index.html

Which method should I choose?

The choice depends on your situation and future plans.

If you do not have a large number of products for sale, then do not rush to open your own shopping website. It would be better to join marketplace websites (where many users can register and sell items). for example Amazon, Ebay, Etsy. You may find local marketplaces in your country also, For ex: market.yandex.ru in Russia. abad.uz, sello.uz in Uzbekistan.
On marketplaces you don’t have to worry about coding or integrating with a payment system. All you have to do is to create a profile and add your products.

If you are planning to sell a large number of products and you don’t have experience in online business. In that case, I recommend methods #2 or #3. Using ready-made code or CMS will save your time and money. Because you don’t know if sales will grow or not, it helps to test your business idea.
Start using Opencart or Wordpress + Woocommerce. Then connect payment systems. Only one programmer is enough to do this job.

Later, when your business grows and you will need a custom website with many functionalities. For example, advanced search functionality, which can auto-correct words, or multi alphabet search functionality and so on. So in that case you will need to hire a professional programmer and start from scratch (as mentioned above in method #1).
In fact, custom features can be added to CMS-based sites as well. Only if you find an expert who can do it.

Payment system

There are many payment gateways. For ex. stripe.com, braintreepayments.com or paypal.com and others. You can check the list of the countries which supported by those payment systems. There might be local payment gateways in your country. For ex: yookassa.ru in Russia, merchant.payme.uz in Uzbekistan

Marketing and advertising

In fact, it’s a big topic. In short, hire someone to do social media marketing (SMM — facebook and instagram), Video advertising (Youtube), Search engine (Google ads, SEO). In many Asian countries Telegram app channels are very popular.

About success…

Success in any business is not easy. Here are some important rules I understood from my experience:

Start small. Forget about having a huge business empire all of a sudden. The long journey also begins with the first step.
Work with constant patience and attention.
It is very important to respond every user’s (or client’s) message or call. The list goes on and on. In the next articles I plan to write to you on the following topics.
Sale of digital products (sale of e-books, software products, creative developments)
Creating a mobile version of the online store (for smartphones).
Useful microservices for wesbite which may boost sales growth.

Follow me for more articles:
https://www.linkedin.com/in/vosidiy
https://dribbble.com/vosidiy
https://behance.net/vosidiy