The Easiest Way to Build Websites

00:00

after watching this video you will be

00:02

able to build better and profitable

00:04

websites plus you will make them faster

00:06

than ever

00:08

before there are two ways of building a

00:11

website the traditional way of building

00:14

by writing code and the other is using a

00:16

website builder like webflow or

00:19

WordPress this video applies to both

00:22

groups because it's the same

00:24

concept but I will focus on writing code

00:27

as it offers more creative freedom and

00:29

is

00:31

better so every time I say CSS it just

00:34

means styling options in website

00:36

Builders and every time I say code

00:38

editor it translates as WordPress or

00:42

webflow before I learned how to code I

00:45

used WordPress to build websites and I

00:47

made a lot of

00:48

mistakes I kept making those mistakes

00:51

even after I learned how to

00:53

code because YouTube taught me how to

00:56

use WordPress or how to write code but

00:59

no one ever taught me how to build a

01:00

website if that makes any sense tell me

01:04

if it's relatable you have to rewrite

01:06

the entire code again because you hate

01:08

how the final website looks and

01:11

function or you are staring at a blank

01:14

page with no idea where to

01:16

start what about your website is taking

01:19

10 seconds to load even on

01:21

4G or worst your client is asking for

01:24

revisions after revisions and nothing

01:26

seems to satisfy

01:28

them so here here is the solution to

01:31

make the best website possible with the

01:33

least amount of effort and

01:35

time you need to do two things number

01:38

one design first I am talking proper

01:41

design figure out who the audience is

01:44

and what problem this website will solve

01:46

for them design also includes content so

01:50

once you have figured out who the

01:52

audience is and what they want from your

01:54

website the right headings and powerful

01:56

images will come naturally to you not

01:59

just that you will be able to create the

02:01

right structure from the very

02:03

beginning you will know whether to use

02:06

cards or not if yes then how many cards

02:10

how big those cards should be because

02:13

you are now thinking in terms of what

02:14

the users want it becomes easier to help

02:18

them but design is only step one step

02:21

two is actually implementing that design

02:24

whether you use a no code tool or write

02:27

code manually it doesn't really matter

02:30

you just have to think and plan

02:32

everything in the phase one

02:33

itself so implementing those design will

02:36

become a piece of

02:38

cake just Beware of the limits of those

02:41

no code tools or your own coding skill

02:43

set you don't want to design something

02:46

which is a pain to implement because

02:48

most of the time the users don't even

02:50

notice the effort you put into a

02:53

website so we will look at some neat

02:55

tips and tricks that deliver superb user

02:58

experience but very easy to

03:00

implement speaking of easy first thing

03:03

you need to do is make a repeatable

03:06

design repeating design make things

03:09

consistent and look

03:11

satisfying here are some

03:22

examples another tip break your page

03:25

into

03:26

sections so you can focus on one thing

03:29

at a time

03:30

first section will be the hero section

03:33

some might say it's the most important

03:35

part of the website because an average

03:37

user spends seconds deciding whether to

03:39

stay or leave your website putting a

03:42

nice and Powerful heading upfront will

03:44

catch their

03:45

attention coming up with the heading is

03:47

easy your main heading should answer

03:49

this question what problem you are

03:51

solving that the user currently have

03:54

remember the user doesn't care about you

03:57

they care about the solution you are

03:59

providing

04:01

once you got their attention then you

04:02

need to expand on that heading with a

04:04

small paragraph ideally two or three

04:07

sentences and add an image video or a

04:10

product demo to complement The

04:13

Heading by combining a strong heading

04:15

and a paragraph with the right media you

04:17

make it very easy for the user to

04:19

understand your product or

04:21

service and once they get what you are

04:23

offering you need a call to action

04:26

whether it's a learn more sign up or buy

04:29

now button button whatever your goal is

04:32

put it right

04:34

there now there are two designs for a

04:36

hero section the two columns and one

04:39

column

04:40

design two columns are more popular

04:43

because it's easier to implement for any

04:44

screen size but you can get away with

04:47

one column as well just make sure that

04:50

the design works on all screens and not

04:52

just on computers and

04:55

laptops once you have a strong and

04:57

engaging hero section the next section

05:00

should provide more information about

05:01

your product or

05:03

service once again no fluff just

05:06

straight to the point the more

05:08

transparency the better you have

05:11

someone's attention now you need to win

05:13

their trust so if it's a product explain

05:17

the features and benefits explain the

05:19

pricing and make it easier for them to

05:21

choose you over the

05:23

competition keep asking this question to

05:26

yourself what is the purpose of this

05:28

section

05:30

if it's to explain something just do

05:33

that in as simple words as you can if

05:36

it's to show off do that in confidence

05:40

whatever words you use they must answer

05:42

a question that a lot of your users have

05:45

to know those questions you can talk to

05:47

your users and look at your

05:49

competition most of the time a good

05:52

heading is an offer that the competition

05:54

doesn't

05:55

have imagine a website that have this

05:58

heading Unlimited downloads Unlimited

06:01

fun and the competition doesn't have any

06:04

feature like that you could also try to

06:07

answer a very common question in your

06:10

industry here is an example for a

06:12

heading that is actually an

06:15

answer no ads no privacy

06:18

risks imagine a social media website

06:21

telling this on their signup

06:23

page now if you mix headings like these

06:26

with some crisp illustrations or bold

06:29

images you are

06:31

golden there are plenty of free websites

06:33

out there I am sure you will find

06:36

them but the key thing is you haven't

06:39

written a single line of code and yet

06:41

you're so far ahead in the

06:47

process like most things website

06:49

building also follows the classic 8020

06:52

rule think and plan before building the

06:55

website and save yourself from a lot of

06:58

pain I have learned this the hard way

07:01

now coming to colors and fonts you need

07:04

at least four colors including black and

07:06

white you can use variations of black

07:09

and white but don't go too

07:11

far the next two are your accent colors

07:14

they will be used to add a bit of

07:16

character and style use them to design

07:18

your buttons borders and

07:21

gradients the last part is fonts and

07:24

it's best to just stick with one font

07:26

per website if you have experience then

07:29

you can use two or maximum three fonts

07:31

per

07:32

website but don't worry about fonts and

07:34

colors we will use CSS variables to

07:37

build our website in no code tools you

07:39

can set them as Global colors and fonts

07:43

the neat thing about variables is later

07:45

you can change them and the results will

07:47

apply to the whole website check it out

08:04

if you are planning to use a dark mode

08:06

toggle that will also be much easier

08:08

with

08:12

variables once we have our variables we

08:15

need to assign the same classes to the

08:16

repeating

08:18

design because we don't want to write

08:20

the same CSS over and over

08:23

again speaking of writing less CSS by

08:27

using the same classes and variables it

08:29

becomes very easy to build and modify

08:32

the website at any stage we

08:34

want I used to directly jump into

08:36

WordPress or vs code and start building

08:39

the website from scratch with no design

08:41

or content in mind the end result was an

08:45

ugly and useless website that needed to

08:47

be rebuilt again or worst keep adjusting

08:50

colors and design till the client was

08:53

satisfied so now I design first with all

08:57

the final content and repeatable Design

08:59

planned out and once I am happy with the

09:02

design and content I open VSS code which

09:05

is the best code editor for me speaking

09:08

of best I promised some easy tips and

09:11

tricks to deliver an exceptional user

09:14

experience so for those of you who

09:16

stayed till the end here they are

09:19

Dynamic heading size

09:30

flexible

09:40

cards SPG icons

10:09

snap scrolling

10:33

scale up or

10:42

down there you have it the easiest and

10:45

fastest way to build powerful websites

10:48

feel free to add a tip or suggestion in

10:50

the comment section just below the like

10:53

And subscribe button