Learn to Code via Tutorials on Repl.it!

← Back to all posts
Modern web design
h
ch1ck3n

modern website design

Modern website design is the type of website you see most commonly.

Modern websites are the trend nowadays for websites.

in this tutorial, i will teach you to make a modern website (no HTML though

characteristics of a modern webpage

Modern websites are/have:

1. minimalistic

Modern websites won't overdo stuff on design or the amount of stuff one single file has. Instead, it has a nice clean design with only one type of stuff on one page.

2. Parallax scroll animations

Parallax scroll animation is a good slideshow effect and also looks good.
But be sure not to overdo it so people won't get blind.

https://www.w3schools.com/howto/howto_css_parallax.asp

3. no crazy colors

Crazy colors make your website super hard to see and super unpretty.
Just stick to one theme of colors. there are a lot of those here: https://www.pixilart.com/palettes

4. add a lot of shadows

here is a website with shadows:

and here is one without:

It makes it much harder to see.

here is some css to make shadows:

box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%) !important

5. dark mode

White backgrounds make people go blind.

here is a difference to make you understand:

Much easier on the eyes, right?

6. Cartoon illustrations

Cartoons make your website more fun and fun.

anyways that's it for this tutorial on modern web design. i will make a reply to show all of these!

Voters
AarjavKavathia
ruiwenge2
ch1ck3n
Comments
hotnewtop
Bookie0

Modern website design is the type of website you see most commonly.

That's...very precise..

Modern websites won't overdo stuff on design or the amount of stuff one single file has. Instead, it has a nice clean design with only one type of stuff on one page.

That's a lot of the word 'stuff'. Consider replacing it with another synonym or group of words?

Parallax scroll animation is a good slideshow effect and also looks good.

What's a slideshow effect? How does it look good? How does it work? What does it consist of? Does it use Python? (lol I know what parallax is, but maybe you should explain a bit more in detail)

But be sure not to overdo it so people won't get blind.

What?

  1. add a lot of shadows

No. That kind of contradicts your minimalist point. Shadows are a good idea, and do make your site look cool (and sometimes easier to see), but if you overdo it, it just looks bad to see.

White backgrounds make people go blind.

Completely false.

Much easier on the eyes, right?

Also completely false. It's a matter of opinion.

Cartoons make your website more fun and fun.

Why did you repeat fun? And how do cartoons make it look funner? Is it because kids like it more?

Anyways, hope I wasn't too harsh, you have some good points but you should elaborate more on them! :)

LeahBrown111

There are many things you can do with a computer that has nothing to do with websites. You can design databases, write macros, or automate tasks. And there are various careers in programming. But if you want to be a website designer, you should specialize. If you are working with other people, specialization means finding a niche. Nowadays, having an up-to-date website is very important. People look for the best graphic designers to do that. And you've got to design it so that people find it valuable. See some examples from https://www.creative.onl/web-design-packages/.

ch1ck3n

@LeahBrown111 absolutely

DynamicSquid

Shadows!