Introduction
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.
List of CSS Coding Challenges faced by beginners
- Develop a Survey Form
- Develop a Product Landing Page
- Create a page of search results using only HTML and CSS
- Develop a Tribute Page
- Develop a Personal Portfolio
- Develop a Scientific Calculator
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=”johndoe@something.com” 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>
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 →
Students can learn easily at our CSS Tutorial for beginners.
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;
}
Check your knowledge level with our smart Knowledge Assessment Tool
- Instant skill evaluation with accurate scoring
- Identify strengths and learning gaps easily
- Designed for students and working professionals
- Smart assessment to guide your career growth
Take Your Eligibility Report Instantly
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>
Ace your interviews with our CSS interview questions and answers.
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;
}
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;
}
Explore salary details at our CSS Salary for Freshers and Experienced.
FAQS
1. What is a coding challenge?
A coding challenge is a problem that tests how well you can code. It helps you think in ways to solve real problems and get better at coding.
2. What are some common CSS mistakes?
People who are new to CSS make mistakes like forgetting semicolons and using the selectors. They also do not understand the box model. Use IDs too much. Some people even forget that their code needs to work on browsers. They get margin and padding mixed up.
3. What is difficult in CSS?
Many developers struggle with CSS positioning. This includes flexbox and grid layouts. It’s hard to center elements and manage specificity conflicts. Making designs work on all screen sizes can be frustrating.
4. How to find a problem in CSS?
To find a problem in CSS you can use your browsers DevTools. Inspect the element. See which styles are working and which are not. Try removing code until the problem goes away.
5. What are 5 common coding errors?
There are five coding errors. These are syntax errors, logic errors, runtime errors, off-, by-one errors and null reference errors. Most coding problems are one of these.
6. What are the three levels of coding?
The three levels of coding are beginner, advanced. Beginners learn the basics of coding. Intermediate coders build projects. Advanced coders design systems, make them work faster and help coders.
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. For more info on our training and placement feature, visit our Best Placement and Training Institute.
