Beginners quick guide for developing clean web pages

Beginners quick guide for developing clean web pages

ยท

3 min read

Intro ๐Ÿ˜ƒ

Hey folks! building awesome and pixel-perfect front-end projects have always been a thrilling drive for any web developer. So, here I am to share a successful approach to creating those web pages. ๐Ÿ“„โšก

Gray Geometric Business Creative Presentation.png

Writing the HTML structure in a planned way โœ

  • Make reusable structure

The below-given image has two sections and sub-section which are similar and reusable from a structural perspective

Group 1.png

It's a lot easier here to map data being fetched from some database having information about the recent posts and projects. Moreover, this approach reduces the time and space spent on writing the code.

  • Use clean and human-readable tags โœจ

for example:

    <!-- a clean approach -->
    <section>
        <article>
            <header>
                <p>

                </p>
            </header>
        </article>
    </section>

    <!-- a less human-readable approach -->
    <div class="section">
        <div class="article">
            <div class="header">
                <p>

                </p>
            </div>
        </div>
    </div>

PS: not against using classes here, it just varies from case-to-case, but using Semantic HTML is always a great way to write your HTML code. ๐Ÿ˜„

Styling CSS tips ๐Ÿ’…

  • Use percentage or viewport relative terms to define element size. Such that it contributes towards being a responsive design.
// prefer this
.container {
    width: 100%;
    height: fit-content;
}

// NOT THIS
.container {
    width: 1024px;
    height: 100px; 
}

Chase symmetry in design, it's really important.

Having a consistent, clean, and minimalistic web page gains more attraction and users over having a web page overpowered with content and animations.

  • Lastly, having a brand color impacts the feel and look of the web page.

  • Primary color, a secondary color, and text color.

  • Keep the above things consistent, have enough whitespace, let the code and design breathe!

Woah, had enough tips for this blog see you in the next post, stay tuned! ๐Ÿ‘จโ€๐Ÿ’ป Take care, happy coding folks! ๐Ÿ˜Ž

Follow me on Twitter@amaancodes๐Ÿ•Š