Compa
Login
3
@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