CSS (Cascading Style Sheets) and HTML (HyperText Markup Language) are the cornerstones of contemporary web development. While HTML specifies the structure and architecture of the web, CSS specifies its style, look, and feel. Here we provide a few CSS coding challenges with solutions useful for beginners of web development. Explore what our CSS course syllabus has in store for you.
CSS Coding Challenges and Solutions
You can level up by practicing these HTML and CSS code challenges. Just choose a task, set up your workspace, and begin coding to get started.
1. Develop a Survey Form
Challenge: In web development, knowing how to connect interactive controls to create a form is helpful. In the absence of forms, any web application would be lacking. They demand critical and strategic thinking in design.
- Online data collection is typically done through forms.
- Building them will therefore test your ability to use various inputs.
You can work on creating the following forms, among others:
CSS Code Solution:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Registration Form</title>
<link rel=”stylesheet” href=”styles.css” />
</head>
<body div class=”outline”>
<h1>Introduction To Programming</h1>
<p id=”descriptrion”>This form attempts to quantify learner satisfaction with SLA. The feedback will be used to improve the curriculum.</p>
<form method=”post” action=’https://register-demo.freecodecamp.org’>
<fieldset div class=”personal-info”>
<label for=”name”>Name:</label><br>
<input id=”name-label” name=”name” type=”text” placeholder=”John Doe” required><br>
<label for=”email”>Email:</label><br>
<input id=”email-label” name=”email” type=”email” placeholder=”[email protected]” required><br>
<label for=”age”>Age(optional):</label><br>
<input id=”age-label” name=”age-label” type=”number” placeholder=”Enter your age” min=”18″ max=”100″
required><br>
<label for=”number”>Enter your phone number:</label><br>
<input id=”number-label” type=”tel” placeholder=”123-45-678″ min=”7″ max=”10″
pattern=”[0-9]{3}-[0-9]{2}-[0-9]{3}” required><br>
</fieldset>
<fieldset div class=”salary”>
<label>What best describes your current salary?</label>
<select id=”dropdown”>
<option value=”above £30K”>above £30k</option>
<option value=”less than £30k”>less than £30K</option>
</select>
</fieldset>
<fieldset div class=”current-role”>
<label>What best describes your current role?</label>
<select id=”” dropdown”>
<option value=”Student”>Student</option>
<option value=”Unemployed”>Unemployed</option>
<option value=”Employd Full Time”>Employed Full Time</option>
<option value=”Employed Part Time”>Employed Part Time</option>
</select>
</fieldset>
<fieldset div class=”prog-styles”>
<p>Type of programming interested in:</p>
<label for=”functional”>Functional<input type=”radio” id=”functional” name=”programming-style”
value=”Functional”></label><br>
<label for=”declarative”>Declarative<input type=”radio” id=”declarative” name=”programming-style”
value=”Declarative” </label><br>
<label for=”object-oriented”>Object Oriented<input type=”radio” id=”object-oriented”
name=”programming-style” value=”Object Oriented” </label><br>
</fieldset>
<fieldset div class=”languages”>
<p>Programming Languages of Interests:</p>
<input type=”checkbox” id=”C++” value=”C++” name=”C++”>
<label for=”C++”>C++</label><br>
<input type=”checkbox” id=”Fortran” value=”Fortran” name=”Fortran”>
<label for=”Fortran”>Fortran</label><br>
<input type=”checkbox” id=”Java” value=”Java” name=”Java”>
<label for=”Java”>Java</label><br>
<input type=”checkbox” id=”Pascal” value=”Pascal” name=”Pascal”>
<label for=”Pascal”>Pascal</label><br>
<input type=”checkbox” id=”Ruby” value=”Ruby” name=”Ruby”>
<label for=”Ruby”>Ruby</label><br>
<input type=”checkbox” id=”C#” value=”C#” name=”C#”>
<label for=”C#”>C#</label><br>
<input type=”checkbox” id=”Python” name=”Python” value=”Python”>
<label for=”Python”>Python</label><br>
<input type=”checkbox” id=”PHP” name=”PHP” value=”PHP”>
<label for>PHP</label><br>
</fieldset>
<fieldset div class=”more-info”>
<label for=”additional-info”>Additional Information:</label><br>
<textarea id=”additional-info” name=”additional-info” rows=”6″ cols=”50″
placeholder=”Do you have anything else to add?”></textarea>
</fieldset>
<input type=”submit” value=”Submit”>
</form </body>
</html>
Train your brain with our CSS interview questions and answers.
2. Develop a Product Landing Page
When promoting things online, a landing page is crucial. Your user experience design process will be enhanced by developing a product landing page. To appeal to its target audience, the page must be visually appealing, educational, and easy to read.
Challenge: You will practice designing columns, aligning content, splitting sections, adding a header and footer, and more. You will take care with styling, though, to make sure that no elements overlap.
CSS Code Solution:
<!– header section starts –>
<header>
<section class=”nav”>
<!– We can also insert any logo here –>
<!– We can also insert any logo here –>
<div class=”logo”>
<a href=”#”><i class=”fas fa-utensils”></i>food</a>
</div>
<!– checkbox to control the icon’s state –>
<input id=”menu-toggle” type=”checkbox” />
<label class=’menu-button-container’ for=”menu-toggle”>
<div class=’menu-button’></div>
</label>
<!– main menu –>
<ul class=”menu”>
<li><a href=”#home”>Home</a></li>
<li><a href=”#speciality”>About</a></li>
<li> <a href=”#popular”>Popular</a></li>
<li> <a href=”#review”>Contact</a></li>
<li> <a href=”#order” class=”order”>Menu</a></li>
</ul>
</section>
</header>
<!– header section ends →
Enroll in our CSS online course for a promising career in web development.
3. Create a page of search results using only HTML and CSS
Challenge: Make a mimic of a Google search page. Ten search results with clickable links and navigation buttons to the next page should be included at the bottom of the page.
Code Solution:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet”
type=”text/css”
href=”styles.css” />
<script src=
“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”>
</script>
<script src=”app.js”
type=”text/css”>
</script>
</head>
<body>
<h1 id=”top”>
LearnwithSLA
</h1>
<h1>
Wikipedia Viewer
</h1>
<div class=”container-new”>
<div id=”searchBox”>
<input type=”text”
id=”search”
autocomplete=”off”
placeholder=”Search here” />
</div>
</div>
</body>
</html>
CSS:
body {
text-align: center;
}
#top {
color: green;
}
h1 {
margin-top: 30px;
}
p {
background-color: rgb(153,
225,
155);
}
#randomPage {
color: white;
}
input[type=”text”] {
border-radius: 15px;
text-align: center;
height: 50px;
width: 600px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=”text”]:focus {
width: 100%;
}
.searchTitle {
font-weight: bold;
margin-bottom: 3px;
}
.searchResult {
background-color: rgb(153,
225,
155);
color: rgb(18, 17, 17);
height: 60px;
padding: 10px;
margin: 2px;
}
.searchResult:hover {
cursor: pointer;
background-color: white;
color: black;
}
Gain expertise with basic web development through our CSS tutorial for beginners.
4. Develop a Tribute Page
One popular task that teaches you how to include images, links, lists, and paragraphs is the Tribute Page task.
Challenge: Create this page by choosing a picture of someone you respect, adding their name or title, adding a caption, and creating a list-based timeline of their life. Use CSS to add some styling to make the project look better.
Code Solution:
<!DOCTYPE html>
<html lang=”en”>
<head>
<style>
body {
background-color: #f0f5f3;
margin: 20%;
}
#title {
text-align: center;
text-shadow: 5px 5px 10px white;
font-size: 8vh;
}
img {
display: inline-block;
width: 100%;
}
#caption {
font-size: 19px;
font-family:sans-serif;
color: black;
}
div#tribute-data {
background-color: rgb(46, 139, 87, 0.25);
box-shadow: 20px 20px 20px #96c996;
font-family: ‘Gill Sans’, ‘Gill Sans MT’, Calibri, ‘Trebuchet MS’, sans-serif;
padding: 25px 25px;
margin: 11px;
margin-top: 50px;
}
h1.title-vk {
font-size: 35px;
color: white;
text-align: center;
text-shadow: 5px 6px 10px black;
}
</style>
</head>
<body>
<main id=”main”>
<!– Title of the web page tributing MS.Dhoni –>
<h1 id=”title”>
MS.Dhoni – Captain Cool
</h1>
<div id=”img”>
<!–Image of MS.Dhoni–>
<img src=”vk.jpg” id=”image”
alt=”Error in the image”>
<small id=”caption”>
. The best-ever Indian cricket team captain.
</small>
</div>
<div id=”tribute-data”>
<h1 class=”title-vk”>
About Captain Cool/MS Dhoni
</h1>
<p>
☛Dhoni, who was born in Ranchi, debuted for Bihar in his first class in 1999. He played his first test match for the Indian cricket team against Sri Lanka a year after making his debut in an ODI match against Bangladesh on December 23, 2004. <br><br>
☛ Dhoni plays for Chennai Super Kings (CSK) in the Indian Premier League (IPL), and he has led the team to the final ten times and won it five times (2010, 2011, 2018, 2021, and 2023).<br><br>
☛ In 2010 and 2014, he also guided CSK to two Champions League T20 championships. In addition to being the first wicketkeeper to reach the 5,000-run mark in the IPL, Dhoni is one of the few batsmen to do so.<br><br>
☛ The Government of India presented Dhoni with the Major Dhyan Chand Khel Ratna Award, India’s highest sporting accolade, in 2008. 2009 saw him win the fourth-highest civilian honor, the Padma Shri, and 2018 saw him win the third-highest civilian honor, the Padma Bhushan. <br><br>
☛ In 2011, the Indian Army awarded Dhoni the honorary title of Lieutenant Colonel in the Indian Territorial Army’s Parachute Regiment. He is among the most well-liked cricket players worldwide.<br><br>
☛ Among the most well-liked cricket players worldwide is Dhoni.[159] He represents over 35 brands in a variety of markets as a brand ambassador.<br><br>
</p>
</div>
<br>
</main>
</body>
</html>
Learn CSS developer salary and kickstart your learning journey.
5. Develop a Personal Portfolio
By putting up a portfolio project, you may demonstrate your proficiency with HTML and CSS.
Challenge: Include your resume, completed projects, and a photo on one page of the portfolio. Additionally, provide a top menu with links to any additional pages you want to include, such as GitHub, contact, and about pages.
Code Solution:
HTML Code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Create a Personal Portfolio Website using HTML and CSS | Codehal</title>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css”>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<header>
<h2 class=”logo”><span>J</span>oe.</h2>
<nav class=”navigation”>
<a href=”#”>Home</a>
<a href=”#”>About</a>
<a href=”#”>Portfolio</a>
<a href=”#”>Blog</a>
<a href=”#”>Contact</a>
</nav>
<a href=”#” class=”btn-talk”>Let’s Talk</a>
</header>
<section class=”home”>
<div class=”content”>
<h2>Hi, I’m <span>Joe Greyson</span></h2>
<h4>Frontend Developer</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A esse totam provident voluptas similique.
Impedit incidunt atque recusandae rem quam.</p>
<div class=”btn-group”>
<a href=”#”>Hire Me</a>
<a href=”#”>See Projects</a>
</div>
<div class=”social-icons”>
<a href=”#”><i class=”fa-brands fa-linkedin-in”></i></a>
<a href=”#”><i class=”fa-brands fa-facebook-f”></i></a>
<a href=”#”><i class=”fa-brands fa-twitter”></i></a>
</div>
</div>
</section>
</body>
</html>
CSS Code:
@import url(‘https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap’);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Poppins’, sans-serif;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.logo {
font-size: 2em;
color: #555;
cursor: default;
}
.logo span {
color: #7d2ae8;
}
.navigation {
margin-left: -300px;
}
.navigation a {
font-size: 1.1em;
color: #555;
text-decoration: none;
margin-right: 40px;
font-weight: 500;
transition: .3s;
}
.navigation a:hover {
color: #7d2ae8;
}
.btn-talk {
color: #fff;
text-decoration: none;
padding: 8px 35px;
background: #7d2ae8;
border-radius: 10px;
border: 2px solid #7d2ae8;
font-weight: 500;
transition: .3s;
}
.btn-talk:hover {
color: #7d2ae8;
background: transparent;
}
.home {
position: relative;
width: 100%;
height: 100vh;
background: url(‘background.jpg’);
background-size: cover;
background-position: center;
display: flex;
align-items: center;
padding: 30px 100px;
}
.content {
max-width: 500px;
color: #555;
}
.content h2 {
font-size: 3em;
}
.content h2 span {
color: #7d2ae8;
}
.content h4 {
font-size: 2em;
}
.content p {
padding: 10px 0 40px 0;
}
.btn-group a {
color: #fff;
text-decoration: none;
padding: 10px 40px;
background: #7d2ae8;
border-radius: 10px;
border: 2px solid #7d2ae8;
font-weight: 500;
transition: .3s;
}
.btn-group a:hover:nth-child(1) {
color: #7d2ae8;
background: transparent;
}
.btn-group a:nth-child(2) {
color: #7d2ae8;
background: transparent;
margin-left: 30px;
padding: 10px 30px;
}
.btn-group a:hover:nth-child(2) {
color: #fff;
background: #7d2ae8;
}
.social-icons {
position: absolute;
bottom: 50px;
}
.social-icons a {
display: inline-block;
width: 35px;
height: 35px;
background: #7d2ae8;
border-radius: 50%;
margin-right: 22px;
text-align: center;
line-height: 35px;
border: 1px solid #fff;
outline: 2px solid #7d2ae8;
transition: .3s;
}
.social-icons a:hover {
transform: translateY(-5px);
}
.social-icons a i {
color: #fff;
}
Explore all software courses at SLA and decide your career path.
6. Develop a Scientific Calculator
Challenge: This challenge’s primary advantage is that it will help you become more proficient in programming.
Code Solution:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>
Scientific Calculator using HTML, CSS and Js
</title>
<script src=
“https://cdnjs.cloudflare.com/ajax/libs/mathjs/10.6.4/math.js”
integrity=
“sha512-BbVEDjbqdN3Eow8+empLMrJlxXRj5nEitiCAK5A1pUr66+jLVejo3PmjIaucRnjlB0P9R3rBUs3g5jXc8ti+fQ==”
crossorigin=”anonymous”
referrerpolicy=”no-referrer”>
</script>
</head>
<body>
<h1 style=”color: green; text-align: center;”>
Scientific Calculator</h1>
<form>
<table>
<tr>
<td colspan=”6″>
<input id=”display” type=”text”>
</td>
</tr>
<tr>
<td><input type=”button” value=”1″
onclick=”display.value += ‘1’”></td>
<td><input type=”button” value=”2″
onclick=”display.value += ‘2’”></td>
<td><input type=”button” value=”3″
onclick=”display.value += ‘3’”></td>
<td><input type=”button” value=”C”
onclick=”display.value = ””></td>
<td><input type=”button” value=”⌫”
onclick=”backspace()”></td>
<td><input type=”button” value=”=”
onclick=”calculate()”></td>
</tr>
<tr>
<td><input type=”button” value=”4″
onclick=”display.value += ‘4’”></td>
<td><input type=”button” value=”5″
onclick=”display.value += ‘5’”></td>
<td><input type=”button” value=”6″
onclick=”display.value += ‘6’”></td>
<td><input type=”button” value=”-“
onclick=”display.value += ‘-‘”></td>
<td><input type=”button” value=”%”
onclick=”display.value += ‘%'”></td>
<td><input type=”button” value=”cos(“
onclick=”display.value += ‘cos(‘”></td>
</tr>
<tr>
<td><input type=”button” value=”7″
onclick=”display.value += ‘7’”></td>
<td><input type=”button” value=”8″
onclick=”display.value += ‘8’”></td>
<td><input type=”button” value=”9″
onclick=”display.value += ‘9’”></td>
<td><input type=”button” value=”x”
onclick=”display.value += ‘*'”></td>
<td><input type=”button” value=”!”
onclick=”display.value += ‘!'”></td>
<td><input type=”button” value=”sin(“
onclick=”display.value += ‘sin(‘”></td>
</tr>
<tr>
<td><input type=”button” value=”.”
onclick=”display.value += ‘.'”></td>
<td><input type=”button” value=”0″
onclick=”display.value += ‘0’”></td>
<td><input type=”button” value=”,”
onclick=”display.value += ‘,'”></td>
<td><input type=”button” value=”+”
onclick=”display.value += ‘+'”></td>
<td><input type=”button” value=”/”
onclick=”display.value += ‘/'”></td>
<td><input type=”button” value=”tan(“
onclick=”display.value += ‘tan(‘”></td>
</tr>
<tr>
<td><input type=”button” value=”E”
onclick=”e()”></td>
<td><input type=”button” value=”pi”
onclick=”pi()”></td>
<td><input type=”button” value=”^”
onclick=”power()”></td>
<td><input type=”button” value=”(“
onclick=”display.value += ‘(‘”></td>
<td><input type=”button” value=”)”
onclick=”display.value += ‘)'”></td>
<td><input type=”button” value=”log(“
onclick=”base10Log()”></td>
</tr>
<tr>
<td><input type=”button” value=”sqrt(“
onclick=”squareRoot()”></td>
<td><input type=”button” value=”ln2″
onclick=”display.value += Math.LN2″></td>
<td><input type=”button” value=”log10(“
onclick=”base10Log()”></td>
<td><input type=”button” value=”l2e”
onclick=”display.value += Math.LOG2E”></td>
<td><input type=”button” value=”l10e”
onclick=”display.value += Math.LOG10E”></td>
<td><input type=”button” value=”exp(“
onclick=”display.value += ‘exp(‘”></td>
</tr>
</table>
</form>
</body>
</html>
CSS Code:
table {
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}
input[type=”button”] {
width: 100%;
padding: 20px 40px;
background-color: green;
color: white;
font-size: 24px;
font-weight: bold;
border: none;
border-radius: 5px;
}
input[type=”text”] {
padding: 20px 240px;
font-size: 24px;
font-weight: bold;
border: none;
border-radius: 5px;
border: 2px solid black;
text-align: left;
}
display {
text-align: left;
}
Upgrade your web development skills with our MEAN Stack job seeker program.
Conclusion
We hope this article helps you understand the basic HTML and CSS codes. Try these CSS coding challenges and solutions and kickstart your web development career. Hone your skills with our CSS training in Chennai.
