𝐁𝐚𝐛𝐢 ✨

Posted on Feb 14, 2022

5 Awesome HTML and CSS projects to build (with codepen preview)

#html #css #webdev #beginners

Coding is a fun and exciting practice but how do you measure your progress in your learning journey?

Here are some cool ideas your could build to put your skills to a test.

1. Survey Forms

Survey forms are very popular first projects and are a great way to test your skills on HTML form validation. Also, creating a survey form is a great way to test the different form elements (radio, checkboxes, textareas, etc.) all in one form.

You could start with a simple form like this:

and then move to forms with more styling and responsiveness like this survey form:

2. Tribute Page
A tribute page is one of the simplest web pages you could build as a beginner as it requires just basic skills in HTML and CSS

You could experiment with different concepts in CSS like adding images, links, paragraphs and then using CSS to beautify the page. This is an example of a simple responsive tribute page:

..and this is an example of a vibrant tribute page by Michael Schneider:

3. Landing pages

Creating a landing page is a delightful process. You let your imaginations fly. Also, you get to test several skills in HTML and CSS like positioning contents on the page, footers, creating columns and sections, color palettes and the list goes on.

You could start with something simple like Brad Traversy's video landing page

and then challenge your skill to build more complicated pages like this product landing page:

4. Technical Documentation

Even without javascript, it is possible to create a technical documentation page with just HTML and CSS. You have the freedom to create.

To build the technical documentation, you could use this sample freeCodeCamp provides.

With CSS, you could create sleek documentation page like Markus Lising's page

or may decide to spice up your page with animations like this documentation

5. Personal Portfolio

There is a temptation to want to create a portfolio only when you've built more skills or learned more technologies. Good news, you don't need to wait for a certain time in the future. You can do it now, with just HTML and CSS.

If you have doubts, here a some amazing portfolio's other have built...

credit: Thiago Ferreira

credit: Aaron Cuddeback

credit: Thomas Vaeth

Conclusion

Building project while studying definitely helps grasping knowledge, skills and also learning other things you might have skipped. These are some of the projects I worked on while starting out with HTML and CSS. I hope building them helped you as they helped me.

Happy coding! 🌱

Aside: All the pens I didn't reference are mine.

                                                      Babi💞

Top comments (18)

Cem coduroglu • Feb 14 '22

Hey thank you so much brother. I was finished my udemy course on html css. Before starting to javascript i want to do some web pages and now i see your topic. Good timing for me. I appreciate it

Cem coduroglu • Feb 14 '22

God damn man. Its really challenging 😅 i started with the first one already stuck the same place like 30min. Can't even put the text under the input. But i love challenging thinks! Lets goo

𝐁𝐚𝐛𝐢 ✨ • Feb 14 '22 • Edited

More courage 💪

Gaurav Soni • Feb 14 '22

focus on flex box and position property mainly for css

Cem coduroglu • Feb 14 '22

I text the first name under the input section and its fixex 😅 thanks man

PassiveTools • Feb 15 '22

It's always great to create a portfolio of your practice programming.
Not only is it good for personal use, but others can learn as well

𝐁𝐚𝐛𝐢 ✨ • Feb 15 '22

@passivetools I totally agree

Steven Mcleod • Jun 21 '22

Thank you, I am building your projects with other projects. I really appreciate your lessons.

Andrew Baisden • Feb 19 '22

Good list.

𝐁𝐚𝐛𝐢 ✨ • Jul 4 '22

Thanks sir!

Cem coduroglu • Feb 17 '22

𝐁𝐚𝐛𝐢 ✨ • Jul 4 '22

Done to perfection! Nice!

Cem coduroglu • Feb 15 '22

Finally i did the first one. And its felt really good. When i do this i also get more used to on class and divs. Thank you very much Babi!

𝐁𝐚𝐛𝐢 ✨ • Feb 15 '22

That's awesome @cem_coduroglu! If you did it on codepen could you share the link in this comment section?

Cem coduroglu • Feb 16 '22

I don't now how to send it. But i will copy paste here

HTML was ;

<!DOCTYPE html>

Survey Forms

integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

Employee Satisfaction Survey

    <section>
        <div class="name">
            <p>Name</p>
        </div>
        <div class="input-area">
            <div class="input1">
                <input style="width:300px;" type="text" name="First Name" placeholder="Fill your first name"><br>
                <label>First Name</label>
            </div>
            <div class="input2">
                <input style="width:300px;" type="text" name="Last Name" placeholder="Fill your first name"><br>
                <label>Last Name</label>
            </div>
        </div>
        <div class="questions">
            <p class="question1">
                How yould you describe your overall level of job satisfaction?
            </p>
            <p id="question-items">
                <input class="sections" type="radio" name="answers"> Very satisfied <br>
                <input class="sections" type="radio" name="answers"> Somewhat satisfied <br>
                <input class="sections" type="radio" name="answers"> Neutral <br>
                <input class="sections" type="radio" name="answers"> Somewhat dissatisfied <br>
                <input class="sections" type="radio" name="answers"> Very dissatisfied <br>
            </p>
            <p class="question1">
                Do you have the resources you need to perform your job well?
            </p>
            <p id="question-items2">
                <input class="sections" type="radio" name="answers2"> Yes <br>
                <input class="sections" type="radio" name="answers2"> No
            </p>
        </div>

        <div class="questions">
            <p class="question1">
                If No, Please Explain
            </p>
            <div class="text-area">
                <textarea name="textarea" id="" cols="85" rows="10" placeholder="Type here..."></textarea>
                <br><br>
                <p class="question1">
                    Please Provide Any Additional Feedback
                </p>
                <textarea name="textarea" id="" cols="85" rows="10" placeholder="Type here..."></textarea>
            </div>
        </div>
        <hr>

    </section>
    <div class="button">
        <button class="btn btn-danger">Submit</button>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
    integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
    integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
    crossorigin="anonymous"></script>

CSS ;

{ width: 100%; }

.container {
margin-left: 30px;
margin-right: 30px;
height: auto;

}

header {
text-align: center;
margin-top: 20px;
}

.name {
font-weight: bold;
margin-top: 30px;
margin-left: 30px;
}

.input-area {
margin-left: 30px;
display: flex;

}

label {
margin-top: 10px;
}
.input2 {
margin-left: 40px;
}

.questions {
margin-left: 30px;
margin-top: 40px;
}

.question1 {
font-weight: bold ;
}

.sections {
width: 30px;
}

.button {
text-align: center;
}

.btn {
text-align: center;
margin-bottom: 70px;
width: 120px;
}

𝐁𝐚𝐛𝐢 ✨ • Feb 16 '22

Hello @cem_coduroglu! You could share the link to the pen.

I checked it out and it's awesome!

𝐁𝐚𝐛𝐢 ✨ • Feb 16 '22

Create an account on codepen.io
Then you can create a pen and do your work on it. You'll always have your code available on your dashboard

Cem coduroglu • Feb 16 '22

Oh thank you very much. I will open it

View full discussion (18 comments)

DEV Community

5 Awesome HTML and CSS projects to build (with codepen preview)

Top comments (18)

Employee Satisfaction Survey

Read next

Building a Free Online Music Creator: Free Incredibox Sprunki

Create a Dynamic Code Playground with SandPack + React!

Decoding StyleX: Meta's Cutting-Edge Styling System

5 Essential SQL Skills Learned from a Decade of Experience