DEV Community

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

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

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:

form pic

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💞 
Enter fullscreen mode Exit fullscreen mode

Top comments (20)

Collapse
 
cem_coduroglu profile image
Cem coduroglu

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

Collapse
 
cem_coduroglu profile image
Cem coduroglu

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

Collapse
 
babib profile image
𝐁𝐚𝐛𝐢 ✨ • Edited

More courage 💪

Collapse
 
gauravsoni97 profile image
Gaurav Soni

focus on flex box and position property mainly for css

Thread Thread
 
cem_coduroglu profile image
Cem coduroglu

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

Collapse
 
passivetools profile image
PassiveTools

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

Collapse
 
babib profile image
𝐁𝐚𝐛𝐢 ✨

@passivetools I totally agree

Collapse
 
369gtech profile image
Steven Mcleod

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

Collapse
 
andrewbaisden profile image
Andrew Baisden

Good list.

Collapse
 
babib profile image
𝐁𝐚𝐛𝐢 ✨

Thanks sir!

Collapse
 
cem_coduroglu profile image
Cem coduroglu

Collapse
 
babib profile image
𝐁𝐚𝐛𝐢 ✨

Done to perfection! Nice!

Collapse
 
cem_coduroglu profile image
Cem coduroglu

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!

Collapse
 
babib profile image
𝐁𝐚𝐛𝐢 ✨

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

Collapse
 
cem_coduroglu profile image
Cem coduroglu

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;
}

Thread Thread
 
babib profile image
𝐁𝐚𝐛𝐢 ✨

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

I checked it out and it's awesome!

Thread Thread
 
babib profile image
𝐁𝐚𝐛𝐢 ✨

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

Thread Thread
 
cem_coduroglu profile image
Cem coduroglu

Oh thank you very much. I will open it

Top Heroku Alternatives (For Free!)

Recently Heroku shut down free Heroku Dynos, free Heroku Postgres, and free Heroku Data for Redis on November 28th, 2022. So Meshv Patel put together some free alternatives in this classic DEV post.