Categories
Website Design

How To Create Advanced CSS Dropdown Menus [Video]

FREE CSS Selector Cheat Sheet: https://webdevsimplified.com/specificity-cheat-sheet.htmlDropdown menus are one of the more common things you will create as a developer, but most developers create boring looking dropdowns. In this video I will show you have to create and advanced CSS dropdown that can include things such as forms or advanced navigation.📚 Materials/References:FREE CSS Selector Cheat Sheet: https://webdevsimplified.com/specificity-cheat-sheet.htmlStarting GitHub Code: https://github.com/WebDevSimplified/advanced-dropdown/tree/starting-codeGitHub Code: https://github.com/WebDevSimplified/advanced-dropdownAsync Vs Defer Video: https://youtu.be/BMuFBYw91UQAsync Vs Defer Article: https://blog.webdevsimplified.com/2019-12/javascript-loading-attributes-explainedJavaScript Data Attribute Article: https://blog.webdevsimplified.com/2019-10/do-not-use-class-selectors-in-javascript🌎 Find Me Here:My Blog: https://blog.webdevsimplified.comMy Courses: https://courses.webdevsimplified.comPatreon: https://www.patreon.com/WebDevSimplifiedTwitter: https://twitter.com/DevSimplifiedDiscord: https://discord.gg/7StTjnRGitHub: https://github.com/WebDevSimplifiedCodePen: https://codepen.io/WebDevSimplified⏱️ Timestamps:00:00 – Introduction00:20 – Demo/Starting Code00:56 – Dropdown CSS07:50 – JavaScript11:25 – Advanced Menu HTML/CSS#Dropdown #WDS #CSS

Categories
Website Design

How To Create A Hastebin Clone [Video]

Hastebin is an incredibly popular site for quickly sharing code. It may seem complex at first, but it is actually incredibly easy to implement your own version of Hastebin. In this video I will show you exactly how to do just that and best of all this makes for a perfect beginner full stack project.📚 Materials/References:GitHub Code: https://github.com/WebDevSimplified/hastebin-cloneExpressJS Crash Course: https://youtu.be/SccSCuHhOw0Emmet Tutorial: https://youtu.be/V8vizNQKtx0Async/Await Tutorial: https://youtu.be/V_Kr9OSfDeU🌎 Find Me Here:My Blog: https://blog.webdevsimplified.comMy Courses: https://courses.webdevsimplified.comPatreon: https://www.patreon.com/WebDevSimplifiedTwitter: https://twitter.com/DevSimplifiedDiscord: https://discord.gg/7StTjnRGitHub: https://github.com/WebDevSimplifiedCodePen: https://codepen.io/WebDevSimplified⏱️ Timestamps:00:00 – Introduction00:26 – Demo01:04 – Initial Setup07:20 – Setting up the frontend12:20 – CSS Styles15:40 – Finishing the HTML/CSS28:17 – Connecting the frontend and database#ExpressJS #WDS #Hastebin

Categories
Website Design

How To Accept Payments With Stripe [Video]

JavaScript Simplified Course: https://javascriptsimplified.comAccepting payments is one of the most important parts of any application, but getting started with accepting payments can be very daunting. In this video I will show you how to easily get started accepting payments with Stripe.📚 Materials/References:GitHub Code: https://github.com/WebDevSimplified/stripe-checkout-simpleJavaScript Simplified Course: https://javascriptsimplified.comStripe Checkout Article: https://blog.webdevsimplified.com/2021-07/stripe-checkoutMap Video: https://youtu.be/yJDofSGTSPQ?t=558Map Article: https://blog.webdevsimplified.com/2020-12/javascript-mapsFetch Video: https://youtu.be/cuEtnrL9-H0Async Await Video: https://youtu.be/V_Kr9OSfDeUCors Video: https://youtu.be/PNtFSVU-YTICors Article: https://blog.webdevsimplified.com/2021-05/cors🌎 Find Me Here:My Blog: https://blog.webdevsimplified.comMy Courses: https://courses.webdevsimplified.comPatreon: https://www.patreon.com/WebDevSimplifiedTwitter: https://twitter.com/DevSimplifiedDiscord: https://discord.gg/7StTjnRGitHub: https://github.com/WebDevSimplifiedCodePen: https://codepen.io/WebDevSimplified⏱️ Timestamps:00:00 – Introduction00:35 – Demo01:45 – Setting Up Express Server05:52 – Stripe On One Server19:08 – Stripe With Separate Client/Server#StripeCheckout #WDS #JavaScript

Categories
Ecommerce

React Table Tutorial: Sort and Group Products In ECommerce Website [Video]

React Table Tutorial: Sort and Group Products In ECommerce Website👉 Source Code: https://github.com/basir/react-table-app👉 Demo App : https://basir.github.io/react-table-app🔥 Build Full ECommerce Website Using My Free Course:https://codingwithbasir.com/p/free-mern-ecommerceReact Table App: List ECommerce Products For Sorting and GroupingIn this episode of my coding series about ecommerce website tools and utilities, I’m going to introduce react-table package. It is a package to build and design powerful datagrid experiences while retaining 100% control over markup and styles.We are going to fetch sample products from a fake api and render them as datagrid with sorting and grouping capabilities.Table Of Content00:00 Introduction00:34 1 Source and Demo00:01:06 2 Create React App00:03:39 3 Fetch Product From API00:04:51 4 Define Table Columns00:06:29 5 Create Product Table Component00:07:38 6 Render Table00:11:47 7 Check Result—Follow me on:👉 Website: https://codingwithbasir.com👉 Twitter: https://twitter.com/basrijd👉 Linkedin: https://www.linkedin.com/in/basir-j👉 Github: https://github.com/basir

Categories
Ecommerce

React js Tutorial # 69| Search Products Filter by Ratings in ReactJs |E-Commerce site [Video]

#react.js #react ecommerce #react tutorial #react tutorial for beginners #postman #api testinggIthub HTML & CS link:https://github.com/saifi84/shopit-html/tree/main/shopit-html-masterPlease Subscribe our channel for latest update https://www.youtube.com/channel/UCFLO5hMVd–tFFtTJ4AJsugLike Facebook pagehttps://web.facebook.com/quotesislamic1/For new Updates and information you can Follow me on:Facebook: https://www.facebook.com/saifi8484Instagram: https://www.instagram.com/saifi_sFor new Updates and information you can Follow me on:Facebook: https://www.facebook.com/saifi8484Instagram: https://www.instagram.com/saifi_sr

Categories
Ecommerce

React js Tutorial # 65| How to Add Pagination in ReactJs |E-Commerce site [Video]

#react.js #react ecommerce #react tutorial #react tutorial for beginners #postman #api testinggIthub HTML & CS link:https://github.com/saifi84/shopit-html/tree/main/shopit-html-masterPlease Subscribe our channel for latest update https://www.youtube.com/channel/UCFLO5hMVd–tFFtTJ4AJsugLike Facebook pagehttps://web.facebook.com/quotesislamic1/For new Updates and information you can Follow me on:Facebook: https://www.facebook.com/saifi8484Instagram: https://www.instagram.com/saifi_sFor new Updates and information you can Follow me on:Facebook: https://www.facebook.com/saifi8484Instagram: https://www.instagram.com/saifi_sr

Categories
Ecommerce

React js Tutorial # 68| Search Products Filter by Category in ReactJs |E-Commerce site [Video]

#react.js #react ecommerce #react tutorial #react tutorial for beginners #postman #api testinggIthub HTML & CS link:https://github.com/saifi84/shopit-html/tree/main/shopit-html-masterPlease Subscribe our channel for latest update https://www.youtube.com/channel/UCFLO5hMVd–tFFtTJ4AJsugLike Facebook pagehttps://web.facebook.com/quotesislamic1/For new Updates and information you can Follow me on:Facebook: https://www.facebook.com/saifi8484Instagram: https://www.instagram.com/saifi_sFor new Updates and information you can Follow me on:Facebook: https://www.facebook.com/saifi8484Instagram: https://www.instagram.com/saifi_sr

Categories
Ecommerce

React js Tutorial # 54| How to Setup Homepage React Js | ecommerce site [Video]

#react.js #react ecommerce #react tutorial #react tutorial for beginners #postman #api testinggIthub HTML & CS link:https://github.com/saifi84/shopit-html/tree/main/shopit-html-masterPlease Subscribe our channel for latest update https://www.youtube.com/channel/UCFLO5hMVd–tFFtTJ4AJsugLike Facebook pagehttps://web.facebook.com/quotesislamic1/For new Updates and information you can Follow me on:Facebook: https://www.facebook.com/saifi8484Instagram: https://www.instagram.com/saifi_sFor new Updates and information you can Follow me on:Facebook: https://www.facebook.com/saifi8484Instagram: https://www.instagram.com/saifi_sr

Categories
Ecommerce

React js Tutorial # 52| Create Api |How to install react js | ecommerce site [Video]

#react.js #react ecommerce #react tutorial #react tutorial for beginners #postman #api testingPlease Subscribe our channel for latest update https://www.youtube.com/channel/UCFLO5hMVd–tFFtTJ4AJsugLike Facebook pagehttps://web.facebook.com/quotesislamic1/For new Updates and information you can Follow me on:Facebook: https://www.facebook.com/saifi8484Instagram: https://www.instagram.com/saifi_sFor new Updates and information you can Follow me on:Facebook: https://www.facebook.com/saifi8484Instagram: https://www.instagram.com/saifi_sr

Categories
Ecommerce

React Ecommerce Dashboard Tutorial | Beginner React JS Project Website | Dark/Light Mode [Video]

React Ecommerce Dashboard Tutorial | Beginner React JS Project Website | Dark/Light Mode📁 AssetsImages and Icons: https://github.com/CodeFocusChannel/mestore/tree/master/src/assetsFonts: https://fonts.google.com/specimen/Mulish?query=mulishGitHub Repo: https://github.com/CodeFocusChannel/mestoreIn this project we use React, Context API, Chart.js, and SASS.Follow along on my coding journey, subscribe today! (:https://www.youtube.com/channel/UCQo_1uyUB4wf-5u7OsVIGHg⏱️ Timestamps0:00 Intro/Demo0:18 Setup3:40 Variables8:10 App Bar25:26 Switch Component33:30 Context API / Theme setup44:10 Dashboard Custom Scroll52:40 Dashboard Header1:05:12 Dashboard Totals1:13:20 Dashboard Earnings1:22:32 Earnings Chart1:31:30 Dashboard Bottom1:38:25 Sales Table1:46:30 Customers List1:52:10 Small Fix1:52:25 Outro👍 Thanks for watching!Make sure to like and subscribe for more.

Categories
Ecommerce

Complete Responsive E-Commerce Website design || HTML || CSS || JavaScript [Video]

#ecommerce #webdevelopment #htmlcss #javascriptHello Everyone..In this tutorial we will make Complete Responsive E-Commerce Website using HTML ,CSS and JavaScript..Images : https://drive.google.com/drive/folders/16ZHLCY57yZTqFWPNyDwatx7iz1_yVu4b?usp=sharing**************React projects Playlist********https://www.youtube.com/playlist?list=PL-h5aNeRKouFZMxutJUxt74hyHR08ZnNyJavaScript for Beginners.https://i.ytimg.com/vi/5gqjq1zoyxI/default.jpg15 JavaScript Projects in 3 hours 🙂 https://youtu.be/OLyudRnhYN815 JavaScript Projectshttps://youtu.be/dmFM4V676Ys10 JAVASCRIPT PROJECTS in 1 hour :)https://youtu.be/4wthAV0skOw12 JavaScript Projects.https://youtu.be/EFIrG3qkEicComplete Responsive Website Tutorial || +2 projects https://youtu.be/BHRp-CxPR5A10 PHP projectshttps://youtu.be/Tug81T3fZcs15 CSS tricks || Simple and easy || HTML and CSShttps://youtu.be/PeLnf_4YfUAThanks and Regards K Khanam