DEV Community

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

𝐁𝐚𝐛𝐢 ✨ on February 14, 2022

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 ...

Read full post

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