- 서브토픽
-
-
필터
-
Elements of Design: Color and Contrast
Use color and contrast to grab attention and gain brand trust.. “Elements of Design: Color and Contrast” is published by Kristi Pelzel in Upskilling.
-
UI/UX Design: 100% Remote Usability Testing with Maze
How to setup streamlined remote usability testing with maze.co, and get real, actionable results.
-
The Design Thinking Process
Design Thinking is a 5-step process to come up with meaningful ideas that solve real problems for a particular group of people. The process is taught in top design and business schools around the world. It has brought many businesses lots of happy customers and helped entrepreneurs from all around the world, to solve problems with innovative new solutions. #learn #designthinking
Never miss a new video with our mailing list:
http://eepurl.com/dNU4BQ
Join and support us!
www.patreon.com/sprouts
www.sproutsschools.com
Crash Course:
https://dschool.stanford.edu/resources/virtual-crash-course-video
Guide for Facilitators:
https://dschool.stanford.edu/resources/gear-up-how-to-kick-off-a-crash-course
Entire Script:
Step 1: Empathize
The purpose of step one is to conduct interviews that give you an idea about what people really care about. We need to empathize with their situation.
For example, if you want to help old people, you might find that they want to keep the ability to walk around. In your conversations, they might share with you different ways they can do that. Later into the interview you'll want to dig a little deeper, look for personal stories or situations where things became difficult. Ideally, you redo the process with many people with the same problem.
Step 2: Define the Problem
Looking at the interviews, you can now understand the actual needs that people are trying to fulfill with certain activities. One way to do that is to underline the verbs or activities that the people mentioned when talking about their problems: like going for a walk, meeting old friends for tea, or simply going grocery shopping around the corner store. You might realize it's not so much about going out, but more about staying in touch. After your analysis, formulate a problem statement: “Some elderly are afraid to be lonely. The want to stay connected.”
Step 3: Ideate
Now focus only on the problem statement and come up with ideas that solve the problem. The point is not to get a perfect idea, but rather to come up with as many ideas: like unique virtual reality experiences, senior friendly hover boards or a modified pushcart. Whatever it is, sketch up your best ideas and show them to the people you are trying to help, so you get their feedback.
Step 4: Prototype
Now take a moment to reflect on what you have learned from your conversations about the different ideas. Ask yourself, how does your idea fit in the context of people's actual lives. Your solution could be a combination of a new idea and what is already being used. Then connect the dots, sketch up your final solution and go build a real prototype that's just good enough to be tested.
Step 5: Test
Now test your prototype with actual users. Don't defend your idea in case people don't like it, the point is to learn what works and what didn't, so any feedback is great. Then go back to ideation or prototyping and apply your learning. Repeat the process until you have a prototype that works and solves the real problem. Now you are ready to change the world or open shop.
To experience design thinking first hand, do the free virtual design thinking crash course from Stanford’s D-School right now. You will learn to design a new gift giving experience. Find the link and a guide for facilitators in the description below. After you are done, share your experience and gift idea in the comment To learn more about creative and critical thinking, check out our other sprouts videos. And if you want to support our channel, visit http://patreon.com/sprouts. -
웹 사이트 디자인 개선을 위한 모범 사례 6가지
웹 디자인은 높은 소비자 특성과 미적 특성을 제공하기 위한 것이다. 방문자가 사이트에 머무르는 시간은 사이트가 얼마나 이해 가능하고 적응력 있고 매력적인가에 따라 다르다. 사용자가 올바른 사이트를 열었는지 확인하는 데 보통 15초 미만이 걸린다. 따라서 웹 디자인과 사이트 유용성은 전환율에 직접적인 영향을 미친다.
-
Fixing your BAD Alignment! Stop doing this one thing..
https://designcourse.com - Launching on January 4, 2022 (4 days!).
-- Today, I'm going to show you how to fix your improper alignment when designing layouts. It's a pet peeve of mine, and I see it often. Watch the video to find out what I'm talking about!
0:00 - Introduction
0:50 - First Example
2:15 - Second Example
4:11 - Final Example
5:46 - Recap
6:23 - Outro
Let's get started!
#alignment #ui #ux
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: https://designcourse.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter: http://twitter.com/designcoursecom
Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi! -
1 Design Trend in 2022 That I Think will be BIG! (7 Examples)
https://designcourse.com - Learn UI/UX with my Interactive Platform!
-- Today, I'm going to examine 7 fantastic websites to identify a key trend that I think we'll see more of in 2022. Let's just say, it has to do with movement!
0:00 - Introduction
0:25 - Learn UI Design
1:06 - Example 1
3:55 - Example 2
5:06 - Example 3
5:45 - Example 4
6:32 - Example 5
7:05 - Example 6
8:29 - Example 7
9:19 - Final Thoughts
Let's get started!
#ui #trends #2022
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: https://designcourse.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter: http://twitter.com/designcoursecom
Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi! -
![Create A Responsive Repair Service Website Design [ HTML / CSS / SASS / JavaScript ] From Scratch](https://i.ytimg.com/vi/9Qj3FjA4j7E/mqdefault.jpg)
Create A Responsive Repair Service Website Design [ HTML / CSS / SASS / JavaScript ] From Scratch
how to make a complete responsive repair services, computer repair, laptop repair, smartphone / mobile repair service website design using html css / sass and vanilla javascript step by step.
create a responsive single page repair service website design using html css / sass / scss and vanilla javascript tutorial for beginners.
the main feature of this website are:
✅ responsive header with toggle menu effect using vanilla javascript.
✅ responsive home section using css flexbox.
✅ responsive fun fact section using css grid.
✅ responsive about section using css flexbox.
✅ responsive services section using css grid.
✅ responsive lightbox gallery section using css grid.
✅ responsive facilities section using css grid.
✅ responsive team card section using css grid.
✅ responsive reviews section using css grid.
✅ responsive contact section using css flexbox.
✅ responsive footer section using css grid.
* SOURCE CODES *
DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):
https://drive.google.com/file/d/17CS69n43Jxem_8ncpSadnNJJlyPFAJ0O/view?usp=sharing
( *you are free to use this source code )
*How To Download*
Step 1 :- click the google drive link ☝☝☝
Step 2 :- click on download link in the google drive.
Step 3 :- extract the zip file into your desired folder.
Step 4 :- open the folder and then rename each coding files.
Step 5 :- convert each coding files example ( index.txt to index.html ) - ( style.txt to style.css ) - ( script.txt to script.js ).
Step 6 :- open the converted index.html file into your browser.
Step 7 :- open your editor and put your converted into it and then edit it as you like.
lightgallery.js official website:
https://sachinchoolur.github.io/lightgallery.js/
lightgallery.js cdn links:
https://cdnjs.com/libraries/lightgallery-js
font awesome cdn link:
https://cdnjs.com/libraries/font-awesome
google fonts:
https://fonts.google.com/specimen/Montserrat
clip-path generator:
https://bennettfeely.com/clippy/
Editor : - visual studio code with Laetus: Dark Vibrant Theme
Browser : - google chrome
UI Tool : - Figma
Images / Video / SVG : -
01 - https://www.freepik.com/
02 - https://storyset.com/
03 - https://undraw.co/
04 - https://pixabay.com/
05 - https://unsplash.com/
06 - https://pixabay.com/
07 - https://www.flaticon.com/
08 - https://pngtree.com/
09 - https://www.pngegg.com/
New To My Channel Subscribe Now And See More Stuff Like This:
https://www.youtube.com/c/MrWebDesignerAnas
Timestamp:
0:00 demo
2:57 file structure
4:04 header
22:55 home
28:02 fun fact
33:08 about
35:36 services
41:24 gallery
45:32 facilities
49:48 team
55:33 reviews
1:01:55 contact
1:08:10 footer
1:18:41 final demo
#FrontEnd
#RepairService
#SinglePage -
Create A Responsive Multipage Education Website Design - HTML / CSS / SASS / JavaScript From Scratch
how to make a complete responsive multi pages online education / university / college website design using html css / sass and vanilla javascript step by step.
create a complete responsive online education / online learning / e-learning / college / university / school website design using html css / sass and vanilla javascript tutorial for beginner.
the main feature of this website are:
✅ responsive header with toggle menu effect using vanilla javascript.
✅ responsive login / register form with toggle / switch effect using vanilla javascript.
✅ responsive home slider using swiper.js.
✅ responsive subjects slider using css grid.
✅ responsive home courses slider using swiper.js.
✅ responsive about section / page using css flexbox.
✅ responsive teacher section slider using swiper.js.
✅ responsive reviews / testimonial section slider using swiper.js.
✅ responsive courses section / page with load more button using css grid and javascript.
✅ responsive contact section / page using css flexbox.
✅ responsive FAQ section with accordion effect using vanilla javascript.
✅ responsive logo section slider using swiper.js.
✅ responsive footer section with css grid.
* SOURCE CODES *
DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):
https://drive.google.com/file/d/1ZFEuiasBfQRduPrPDmi_vo8QoxEEeGYd/view?usp=sharing
( *you are free to use this source code )
*How To Download*
Step 1 :- click the google drive link ☝☝☝
Step 2 :- click on download link in the google drive.
Step 3 :- extract the zip file into your desired folder.
Step 4 :- open the folder and then rename each coding files.
Step 5 :- convert each coding files example ( index.txt to index.html ) - ( style.txt to style.css ) - ( script.txt to script.js ).
Step 6 :- open the converted index.html file into your browser.
Step 7 :- open your editor and put your converted into it and then edit it as you like.
swiper.js link:
https://swiperjs.com/
font awesome cdn link:
https://cdnjs.com/libraries/font-awesome
google fonts:
https://fonts.google.com/specimen/Nunito
Editor : - visual studio code with Laetus: Dark Vibrant Theme
Browser : - google chrome
UI Tool : - Figma
Images / Video / SVG : -
01 - https://www.freepik.com/
02 - https://storyset.com/
03 - https://undraw.co/
04 - https://pixabay.com/
05 - https://unsplash.com/
06 - https://pixabay.com/
07 - https://www.flaticon.com/
08 - https://pngtree.com/
09 - https://www.pngegg.com/
New To My Channel Subscribe Now And See More Stuff Like This:
https://www.youtube.com/c/MrWebDesignerAnas
Timestamp:
0:00 demo
4:29 file structure
5:57 header
21:33 account form
37:02 footer
48:15 home
57:33 subjects
1:02:58 home courses
1:11:03 about
1:21:37 teachers
1:31:25 reviews
1:38:48 courses
1:50:30 contact
2:01:11 FAQ
2:09:49 logo slider
2:12:43 final demo
#EducationWebsite
#FrontEnd
#MultiPages -
Create A Responsive Coffee Shop Website Design Using HTML - CSS - SASS - JavaScript - Bootstrap
how to make a complete responsive coffee shop website design using html, css / sass, javascript and bootstrap 5 from scratch.
create a responsive coffee shop website design template using html css / sass vanilla javascript and bootstrap 5 tutorial for beginners.
the main feature of this website are:
✅ responsive header section with menu toggler effect using javascript.
✅ responsive login form.
✅ responsive home section.
✅ responsive about section.
✅ responsive menu section using css grid.
✅ responsive gallery section using css grid.
✅ responsive reviews section.
✅ responsive contact form section using css grid.
✅ responsive blogs / post / news card section using css grid.
✅ responsive fooder section.
* SOURCE CODES *
DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):
https://drive.google.com/file/d/13VtHLnlypbRM4ZfPMCn-Z21fkXxUhILW/view?usp=sharing
( *you are free to use this source code )
*How To Download*
Step 1 :- click the google drive link ☝☝☝
Step 2 :- click on download link in the google drive.
Step 3 :- extract the zip file into your desired folder.
Step 4 :- open the folder and then rename each coding files.
Step 5 :- convert each coding files example ( index.txt to index.html ) - ( style.txt to style.css ) - ( script.txt to script.js ).
Step 6 :- open the converted index.html file into your browser.
Step 7 :- open your editor and put your converted into it and then edit it as you like.
bootstrap cdn link:
https://cdnjs.com/libraries/bootstrap
font awesome cdn link:
https://cdnjs.com/libraries/font-awesome
google fonts:
https://fonts.google.com/specimen/Montserrat
clip-path generator:
https://bennettfeely.com/clippy/
Editor : - visual studio code with Laetus: Dark Vibrant Theme
Browser : - google chrome
UI Tool : - Figma
Images / Video / SVG : -
01 - https://www.freepik.com/
02 - https://storyset.com/
03 - https://undraw.co/
04 - https://pixabay.com/
05 - https://unsplash.com/
06 - https://pixabay.com/
07 - https://www.flaticon.com/
08 - https://pngtree.com/
09 - https://www.pngegg.com/
New To My Channel Subscribe Now And See More Stuff Like This:
https://www.youtube.com/c/MrWebDesignerAnas
Timestamp:
0:00 demo
3:31 file structure
5:05 header & login form
35:25 home
41:59 about
48:36 menu
53:59 gallery
59:29 reviews
1:03:49 contact
1:16:20 blog
1:22:29 newsletter
1:27:10 footer
1:31:37 final demo
#FrontEnd
#CoffeeShop
#SinglePage -
Create A Responsive Christmas Website Design - HTML CSS / SASS And Vanilla JavaScript - Step By Step
how to make a complete responsive animated Christmas ecommerce website design using html css / sass and vanilla javascript from scratch.
create a Christmas ecommerce / christmas decore / new year website design using html css / sass / scss and vanilla javascript template step by step for beginners.
the main feature of this website are:
✅ responsive header section with search icon and menu toggler using vanilla javascript.
✅ responsive home section with parallax scrolling effect using vanilla javascript.
✅ responsive about section using flexbox.
✅ responsive products section using grid.
✅ responsive services section using grid.
✅ responsive gallery section.
✅ responsive contact form section.
✅ responsive blogs section using grid.
✅ responsive footer section using grid.
* SOURCE CODES *
DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):
https://drive.google.com/file/d/1aLxFyyM_kfXvog9-NYKPWXbRcSvhhYyu/view?usp=sharing
( *you are free to use this source code )
*How To Download*
Step 1 :- click the google drive link ☝☝☝
Step 2 :- click on download link in the google drive.
Step 3 :- extract the zip file into your desired folder.
Step 4 :- open the folder and then rename each coding files.
Step 5 :- convert each coding files example ( index.txt to index.html ) - ( style.txt to style.css ) - ( script.txt to script.js ).
Step 6 :- open the converted index.html file into your browser.
Step 7 :- open your editor and put your converted into it and then edit it as you like.
AOS github:
https://github.com/michalsnik/aos
AOS website:
https://michalsnik.github.io/aos/
font awesome cdn link:
https://cdnjs.com/libraries/font-awesome
google fonts:
https://fonts.google.com/specimen/Nutito
clip-path generator:
https://bennettfeely.com/clippy/
Editor : - visual studio code with Laetus: Dark Vibrant Theme
Browser : - google chrome
UI Tool : - Figma
Images / Video / SVG : -
01 - https://www.freepik.com/
02 - https://storyset.com/
03 - https://undraw.co/
04 - https://pixabay.com/
05 - https://unsplash.com/
06 - https://pixabay.com/
07 - https://www.flaticon.com/
08 - https://pngtree.com/
09 - https://www.pngegg.com/
New To My Channel Subscribe Now And See More Stuff Like This:
https://www.youtube.com/c/MrWebDesignerAnas
Timestamp:
0:00 demo
3:17 file structure
4:32 header
27:22 home
41:45 about
46:56 products
56:26 services
1:01:35 gallery
1:03:32 contact
1:07:03 blogs
1:12:55 footer
1:24:00 AOS
1:29:15 final demo
#ChristmasWebsite
#FrontEnd
#SinglePage -
Responsive Burger Website Design Using HTML / CSS / SASS / JavaScript From Scratch
how to make a complete responsive single page burger / fast food / restaurant website design using html css / sass and vanilla javascript step by step.
create complete responsive animated burger website design template using html css and vanilla javascript tutorial for beginners.
the main feature of this website are:
✅ responsive home section.
✅ responsive service section using grid.
✅ responsive service section using grid.
✅ responsive menu section using grid.
✅ responsive about section using flex.
✅ responsive reviews section using grid.
✅ responsive contact section using flex.
✅ responsive blogs section using grid.
✅ responsive footer section.
* SOURCE CODES *
DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):
https://drive.google.com/file/d/1W3H-eciziZa74DzXbgqqehYYDeXgZ_Wj/view?usp=sharing
*How To Download*
Step 1 :- click the google drive link ☝☝☝
Step 2 :- click on download link in the google drive.
Step 3 :- extract the zip file into your desired folder.
Step 4 :- open the folder and then rename each coding files.
Step 5 :- convert each coding files example ( index.txt to index.html ) - ( style.txt to style.css ) - ( script.txt to script.js ).
Step 6 :- open the converted index.html file into your browser.
Step 7 :- open your editor and put your converted into it and then edit it as you like.
AOS github:
https://github.com/michalsnik/aos
AOS website:
https://michalsnik.github.io/aos/
font awesome cdn link:
https://cdnjs.com/libraries/font-awesome
google fonts:
https://fonts.google.com/specimen/Raleway
Editor : - visual studio code with Laetus: Dark Vibrant Theme
Browser : - google chrome
UI Tool : - Figma
Images / Video / SVG : -
01 - https://www.freepik.com/
02 - https://storyset.com/
03 - https://undraw.co/
04 - https://pixabay.com/
05 - https://unsplash.com/
06 - https://pixabay.com/
07 - https://www.flaticon.com/
08 - https://pngtree.com/
09 - https://www.pngegg.com/
New To My Channel Subscribe Now And See More Stuff Like This:
https://www.youtube.com/c/MrWebDesignerAnas
Timestamp:
0:00 demo
2:39 file structure
3:52 header
24:34 home
29:33 service
32:56 menu
38:28 about
43:36 reviews
47:08 contact
55:43 blogs
1:01:16 footer
1:04:51 AOS
1:09:43 final demo
#FrontEnd
#BurgerWebsite
#SinglePage -
How To Make A Responsive Online Education Website Design With HTML / CSS / SASS / Vanilla JavaScript
how to make a complete responsive online education / e-learning / online classes / college / online courses selling website design using html css / sass and vanilla javascript.
create a complete responsive online education website design template using html css / sass and vanilla javascript from scratch for beginners.
the main feature of this website are:
✅ responsive side bar menu with toggle effect using vanilla javascript.
✅ responsive home section using css flex.
✅ responsive info section using css grid.
✅ responsive grid section using css grid.
✅ responsive about section using css flex.
✅ responsive course section using css grid.
✅ responsive pricing table section using css grid.
✅ responsive contact section using css flex.
✅ responsive reivews section using css grid.
✅ responsive blogs section using css grid.
* SOURCE CODES *
DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):
https://drive.google.com/file/d/1ZGgSMOrWRd5cfN9oH_PFgwCXTpBYc-qT/view?usp=sharing
*How To Download*
Step 1 :- click the google drive link ☝☝☝
Step 2 :- click on download link in the google drive.
Step 3 :- extract the zip file into your desired folder.
Step 4 :- open the folder and then rename each coding files.
Step 5 :- convert each coding files example ( index.txt to index.html ) - ( style.txt to style.css ) - ( script.txt to script.js ).
Step 6 :- open the converted index.html file into your browser.
Step 7 :- open your editor and put your converted into it and then edit it as you like.
font awesome cdn link:
https://cdnjs.com/libraries/font-awesome
google fonts:
https://fonts.google.com/specimen/Montserrat
Editor : - visual studio code with Laetus: Dark Vibrant Theme
Browser : - google chrome
UI Tool : - Figma
Images / Video / SVG : -
01 - https://www.freepik.com/
02 - https://storyset.com/
03 - https://undraw.co/
04 - https://pixabay.com/
05 - https://unsplash.com/
06 - https://pixabay.com/
07 - https://www.flaticon.com/
New To My Channel Subscribe Now And See More Stuff Like This:
https://www.youtube.com/c/MrWebDesignerAnas
Timestamp:
0:00 demo
2:57 file structure
4:15 header
21:52 home
28:11 info
32:46 category
40:22 about
43:57 courses
52:47 pricing
59:56 contact
1:11:22 reviews
1:15:45 blogs
#FrontEnd
#OnlineEducation
#SinglePage
Music Credit :
"Scott the Pisces - Crazy About You (feat. RAENE)" is under a Creative Commons (CC BY 3.0) license.
Spotify: https://open.spotify.com/artist/2DDeX...
Soundcloud: https://soundcloud.com/scottthepisces
Music promoted by BreakingCopyright: https://youtu.be/LXgxSg5DIuI -
Create A Responsive Cosmetics Website Design Using HTML / CSS / SASS / JavaScript - Step By Step
how to make a complete responsive cosmetics / spa / makeup website design template using html css / sass and vanilla javascript from scratch.
create a complete responsive single page cosmetics website design using html css / sass and javascript tutorial for beginners.
the main feature of this website are:
✅ responsive header section with search bar using vanilla javascript.
✅ responsive home slider with split screen vanilla javascript.
✅ responsive category section using css grid.
✅ responsive about section.
✅ responsive shop / products section with touch slider using swiper.js.
✅ responsive lightbox gallery section with touch slider using lightbox-js.
✅ responsive team section using css grid.
✅ responsive reviews / testimonial section with touch slider using swiper.js.
✅ responsive service section with css grid.
✅ responsive blogs / news / posts section with touch slider using swiper.js.
✅ responsive footer section with css grid.
* SOURCE CODES *
DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):
https://drive.google.com/file/d/1tAZD4tGHPAXXQPIisKMCSwue2SYxJU7H/view?usp=sharing
*How To Download*
Step 1 :- click the google drive link ☝☝☝
Step 2 :- click on download link in the google drive.
Step 3 :- extract the zip file into your desired folder.
Step 4 :- open the folder and then rename each coding files.
Step 5 :- convert each coding files example ( index.txt to index.html ) - ( style.txt to style.css ) - ( script.txt to script.js ).
Step 6 :- open the converted index.html file into your browser.
Step 7 :- open your editor and put your converted into it and then edit it as you like.
lightgallery.js official website:
https://sachinchoolur.github.io/lightgallery.js/
lightgallery.js cdn links:
https://cdnjs.com/libraries/lightgallery-js
swiper.js link:
https://swiperjs.com/
font awesome cdn link:
https://cdnjs.com/libraries/font-awesome
google fonts:
https://fonts.google.com/specimen/Poppins
clip-path generator:
https://bennettfeely.com/clippy/
Editor : - visual studio code with Laetus: Dark Vibrant Theme
Browser : - google chrome
UI Tool : - Figma
Images / Video / SVG : -
01 - https://www.freepik.com/
02 - https://storyset.com/
03 - https://undraw.co/
04 - https://pixabay.com/
05 - https://unsplash.com/
06 - https://pixabay.com/
07 - https://www.flaticon.com/
New To My Channel Subscribe Now And See More Stuff Like This:
https://www.youtube.com/c/MrWebDesignerAnas
Timestamp:
0:00 demo
4:25 file structure
5:40 header
27:25 home
45:15 category
49:00 about
52:30 shop
1:10:12 gallery
1:15:29 team
1:23:49 arrivals
1:31:31 reviews
1:39:57 service
1:43:39 blogs
1:54:44 footer
2:07:57 final demo
#FrontEnd
#CosmeticsWebsite
#SInglePage -
Create A Responsive Christmas Website Design - HTML CSS / SASS And Vanilla JavaScript - Step By Step
how to make a complete responsive Christmas ecommerce website design using html css / sass and vanilla javascript from scratch.
create a Christmas ecommerce / christmas decore / new year website design using html css / sass / scss and vanilla javascript template step by step for beginners.
the main feature of this website are:
✅ responsive header section with search icon and menu toggler using vanilla javascript.
✅ responsive home section with slider using vanilla javascript.
✅ responsive category section using grid.
✅ responsive about section using flexbox.
✅ responsive shop section using grid.
✅ responsive banner section.
✅ responsive image gallery section using grid.
✅ responsive contact / message form section.
✅ responsive blogs section using grid.
✅ responsive service info section using grid.
✅ responsive footer section using grid.
* SOURCE CODES *
DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):
https://drive.google.com/file/d/1vlwIfkLB3JxKPPUN-dgSkGk_NIa_RIS1/view?usp=sharing
*How To Download*
Step 1 :- click the google drive link ☝☝☝
Step 2 :- click on download link in the google drive.
Step 3 :- extract the zip file into your desired folder.
Step 4 :- open the folder and then rename each coding files.
Step 5 :- convert each coding files example ( index.txt to index.html ) - ( style.txt to style.css ) - ( script.txt to script.js ).
Step 6 :- open the converted index.html file into your browser.
Step 7 :- open your editor and put your converted into it and then edit it as you like.
font awesome cdn link:
https://cdnjs.com/libraries/font-awesome
google fonts:
https://fonts.google.com/specimen/Poppins
clip-path generator:
https://bennettfeely.com/clippy/
Editor : - visual studio code with Laetus: Dark Vibrant Theme
Browser : - google chrome
UI Tool : - Figma
Images / Video / SVG : -
01 - https://www.freepik.com/
02 - https://storyset.com/
03 - https://undraw.co/
04 - https://pixabay.com/
05 - https://unsplash.com/
06 - https://pixabay.com/
07 - https://www.flaticon.com/
New To My Channel Subscribe Now And See More Stuff Like This:
https://www.youtube.com/c/MrWebDesignerAnas
Timestamp:
0:00 demo
3:41 file structure
4:51 header
22:54 home
36:16 category
40:31 about
46:39 shop
55:29 banner
59:39 gallery
1:06:00 message
1:10:44 blogs
1:19:20 service
1:22:20 footer
1:33:00 final demo
#FrontEnd
#ChristmasWebsite
#SinglePage -
How To Make A SEO Website Design Using HTML / CSS / SASS / JavaScript
how to make a complete responsive seo / website analytics website desing using html css / sass and javascript from scratch.
create a complete responsive search engine optimization / analytics website design template using html css / sass and vanilla javascript step by step from scratch.
the main feature of this website are:
✅ responsive header section with theme toggler using vanilla javascript.
✅ responsive home section with touch slider suing swiper.js.
✅ responsive services section css grid.
✅ responsive work section css columns.
✅ responsive pricing table section css grid.
✅ responsive reviews section css grid.
✅ responsive contact section css flexbox.
✅ responsive newsletter section css flexbox.
✅ responsive footer section css flexbox.
* SOURCE CODES *
DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):
https://drive.google.com/file/d/1IH-MAWLq4y4Q12ZjSUXfLGcWtzZdsMTu/view?usp=sharing
*How To Download*
Step 1 :- click the google drive link ☝☝☝
Step 2 :- click on download link in the google drive.
Step 3 :- extract the zip file into your desired folder.
Step 4 :- open the folder and then rename each coding files.
Step 5 :- convert each coding files example ( index.txt to index.html ) - ( style.txt to style.css ) - ( script.txt to script.js ).
Step 6 :- open the converted index.html file into your browser.
Step 7 :- open your editor and put your converted into it and then edit it as you like.
swiper.js link:
https://swiperjs.com/
font awesome cdn link:
https://cdnjs.com/libraries/font-awesome
google fonts:
https://fonts.google.com/specimen/Poppins
clip-path generator:
https://bennettfeely.com/clippy/
Editor : - visual studio code with Laetus: Dark Vibrant Theme
Browser : - google chrome
UI Tool : - Figma
Images / Video / SVG : -
01 - https://www.freepik.com/
02 - https://storyset.com/
03 - https://undraw.co/
04 - https://pixabay.com/
05 - https://unsplash.com/
06 - https://pixabay.com/
07 - https://www.flaticon.com/
New To My Channel Subscribe Now And See More Stuff Like This:
https://youtube.com/channel/UCKwgH3vASrD2brd1l2m6NHw
Timestamp:
0:00 demo
3:03 file structure
4:17 header
16:26 theme toggler
19:34 home
25:40 services
30:27 work
32:52 pricing
39:51 reviews
45:45 contact
56:12 newsletter
1:03:05 footer
1:10:40 scroll indicator
1:13:27 final demo
#FrontEnd
#SEOwebsite
#SinglePages -
Create A Responsive Multipage E-Commerce Website Design Using HTML / CSS / SASS / JavaScript
how to make a complete responsive multipages e-commerce website desing using html css / sass and javascript from scratch.
create a complete responsive multi-page ecommerce / online store / electronic store / electronic commerce website design template using html css / sass and vanilla javascript step by step from scratch.
the main feature of this website are:
✅ responsive header section with search bar using vanilla javascript.
✅ responsive side-bar menu section using vanilla javascript.
✅ responsive home section with touch slider suing swiper.js.
✅ responsive banner section css grid.
✅ responsive arrivals section css grid.
✅ responsive about section css flexbox.
✅ responsive FAQ / accordion section using vanilla javascript.
✅ responsive reivews section css with touch slider using swiper.js.
✅ responsive category section css grid.
✅ responsive products section css grid.
✅ responsive product banner section css flexbox.
✅ responsive contact info section css grid.
✅ responsive contact section css flexbox.
✅ responsive newsletter section css flexbox.
✅ responsive login and register section.
✅ responsive shopping cart section css grid.
✅ responsive footer section css flexbox.
* SOURCE CODES *
DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):
https://drive.google.com/file/d/1t1ToCp_CayI3taP8IJiW4D77jZU3jOR9/view?usp=sharing
*How To Download*
Step 1 :- click the google drive link ☝☝☝
Step 2 :- click on download link in the google drive.
Step 3 :- extract the zip file into your desired folder.
Step 4 :- open the folder and then rename each coding files.
Step 5 :- convert each coding files example ( index.txt to index.html ) - ( style.txt to style.css ) - ( script.txt to script.js ).
Step 6 :- open the converted index.html file into your browser.
Step 7 :- open your editor and put your converted into it and then edit it as you like.
swiper.js link:
https://swiperjs.com/
font awesome cdn link:
https://cdnjs.com/libraries/font-awesome
google fonts:
https://fonts.google.com/specimen/Poppins
clip-path generator:
https://bennettfeely.com/clippy/
Editor : - visual studio code with Laetus: Dark Vibrant Theme
Browser : - google chrome
UI Tool : - Figma
Images / Video / SVG : -
01 - https://www.freepik.com/
02 - https://storyset.com/
03 - https://undraw.co/
04 - https://pixabay.com/
05 - https://unsplash.com/
06 - https://pixabay.com/
07 - https://www.flaticon.com/
New To My Channel Subscribe Now And See More Stuff Like This:
https://youtube.com/channel/UCKwgH3vASrD2brd1l2m6NHw
Timestamp:
0:00 demo
5:43 file structure
8:09 header & side-bar section
33:36 footer section
43:41 home section
54:58 banner section
59:29 arrivals section
1:10:42 about section
1:3:57 faq section
1:22:08 reviews section
1:28:43 category section
1:34:29 products section
1:46:29 product banner section
1:50:55 contact info section
1:55:03 contact section
2:00:23 newsletter section
2:05:46 login
2:12:09 register
2:13:53 shopping cart
2:24:19 final demo
#FrontEnd
#eCommerce
#MultiPages
