Compa
Login
2
@notgr
• 
<!doctype html>

When learning to create websites, as a beginner, it may be unclear where to start from. In this post, I’ll like to share what I’ve learned over the years and how to produce good looking sites with enough content.

Inspiration

Always gather inspiration first. You need to get an idea of what the site should look like. You can gather inspiration from multiple sites and choose to use the navbar from one, the footer from another, the layouting, etc.

Sketch

After this step, don’t go straight to coding. Sketch out with a pen and paper what you want the site to look like. If you think the direction you’re going doesn’t look good, start over.

Don’t stray too far from your inspiration.

At this stage you’ll also realize that kind of content, images and navigation links required.

If you have no idea what content to use, try drawing inspiration from the sites you visited.

Continued in comments…

3
1 person

You must be logged in to comment.

2
@notgr
•

CSS

As a beginner, CSS will break you. Always use a CSS library like Bootstrap, bulma, tailwind, etc.

You can google best css libraries

I will personally recommend Bootstrap.

Regardless of the choice you make, they have very good documentation that are also visual. Read through them (especially the components section) to get an idea what’s inside.

Normally, you can copy these examples from the docs into your code and edit them to see what they look like. But as a beginner who wants to understand , I’ll advise against it.

Code

You can start coding now. With all that you’ve gathered, you’ll go through this process with ease.

Here are some tips though:

Always use .container for the top level layout.

This will constraint your site to a maximum with regardless of device so you have minimal space to work in. Doing this will save you lots of hassle when it comes to responsiveness.

0
1 person
1
@notgr
•

Use grids

Grids are automatically responsive when you use some CSS libraries like bootstrap or bulma. You should use them.

Images

When you want images, you can use a site called Unsplash.

0
1 person
1
@notgr
•

If you need help or have any questions, you can add a comment and I’ll reply.

0
1 person