Featured

My First Blog Post

Today we are going to learn how to create a login form using HTML and CSS.

<!DOCTYPE html>
<html>
<head>
    <title>Login Form UI</title>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600|Work+Sans:400,500&display=swap" rel="stylesheet">

</head>
<body>
    
    <form class="form">
        <div class="form__image-box">
            
            <img src="https://i.imgur.com/cMZHiw8.png" class="form__image-box__icon"></img>
            
            <h1 class="form__image-box__heading">
                pixel labs
            
            </h1>
        </div>

        <div class="form__fields">
            
            <h3 class="form__fields__heading">
                Name
            </h3>
            <input type="text" class="form-field text-field" placeholder="Enter Your Name">
            
            <h3 class="form__fields__heading">
                Username
            </h3>
            <input type="text" class="form-field user-field" id="username" 
            placeholder="Choose Username">
            <label class="user-field-label" for="username">pixel.io/</label>

            <h3 class="form__fields__heading radio-heading">
                Who are you?
            </h3>
            <input type="radio" name="opt" id="opt1" class="form-radio">
            <label for="opt1" class="radio-label">
                <i class="fa fa-diamond" aria-hidden="true"></i>
                <span>Designer</span>
            </label>
            
            <input type="radio" name="opt" id="opt2" class="form-radio">
            <label for="opt2" class="radio-label">
                <i class="fa fa-code" aria-hidden="true"></i>
                <span>Developer</span>
            </label>

            <h3 class="form__fields__heading">
                Email Id
            </h3>
            <input type="email" class="form-field text-field" placeholder="Enter Your Email Address">    
            <h3 class="form__fields__heading">
                Password
            </h3>

            <input type="password" class="form-field text-field" placeholder="Enter Your Password">    
            <a href="#" class="btn">SUBMIT</a>

        </div>
    </form><br>
    
    <a href="https://youtu.be/XSWnKTiWYHg" target="_blank" class="link-yt">My Youtube Channel</a> 

</body>
</html>

Introduce Yourself (Example Post)

This is an example post, originally published as part of Blogging University. Enroll in one of our ten programs, and start your blog right.

You’re going to publish a post today. Don’t worry about how your blog looks. Don’t worry if you haven’t given it a name yet, or you’re feeling overwhelmed. Just click the “New Post” button, and tell us why you’re here.

Why do this?

  • Because it gives new readers context. What are you about? Why should they read your blog?
  • Because it will help you focus you own ideas about your blog and what you’d like to do with it.

The post can be short or long, a personal intro to your life or a bloggy mission statement, a manifesto for the future or a simple outline of your the types of things you hope to publish.

To help you get started, here are a few questions:

  • Why are you blogging publicly, rather than keeping a personal journal?
  • What topics do you think you’ll write about?
  • Who would you love to connect with via your blog?
  • If you blog successfully throughout the next year, what would you hope to have accomplished?

You’re not locked into any of this; one of the wonderful things about blogs is how they constantly evolve as we learn, grow, and interact with one another — but it’s good to know where and why you started, and articulating your goals may just give you a few other post ideas.

Can’t think how to get started? Just write the first thing that pops into your head. Anne Lamott, author of a book on writing we love, says that you need to give yourself permission to write a “crappy first draft”. Anne makes a great point — just start writing, and worry about editing it later.

When you’re ready to publish, give your post three to five tags that describe your blog’s focus — writing, photography, fiction, parenting, food, cars, movies, sports, whatever. These tags will help others who care about your topics find you in the Reader. Make sure one of the tags is “zerotohero,” so other new bloggers can find you, too.

Create your own website, free on WordPress.com.Create your own website.
Start free