What are some beginner web development projects you can make with just HTML, CSS, and javascript?

Question

1.00/5 (2 votes)

See more:

Try the following:

- Build a tribute site for a favorite historical figure, rock band, TV series, or what have you. Use a lot of pictures and try to make it look nice.

- Make that site responsive (looks good on any size device)
Clone the Google homepage (appearance only, not as easy as it sounds)

- Create a quote machine that gives a random quote from a collection of stored quotes whenever the user clicks a button

- Utilize local storage to make it so the user never sees the same quote until at least five others display

- Create a professional portfolio page. Feel free to base yours on another one that you like, or on a template (not all of us can be designers). Deploy this site to GitHub Pages.

- Create a web-based calculator with all the functionality of a cheap desktop calculator

- Create a tic-tac-toe game that can beat a human opponent most of the time

If you build all of these projects you will understand the fundamentals of HTML, CSS, and JavaScript.

You should also learn how to use Git and Bootstrap while completing these projects.

From there, your next step would be to learn how to handle async data and work with 3rd-party APIs.

Good luck!

What I have tried:

Need more examples and demos any static website is made of the three programming languages you listed. You can do anything! (other than backend)

Posted 30-Aug-21 22:57pm

Daniel Smith Aug2021

Updated 31-Aug-21 1:21am

Add a Solution

Comments

Asif 7969814 31-Aug-21 5:58am

Hi here is the link for basic HTML, CSS, Js, Projects

https://hackr.io/blog/html-projects

https://skillcrush.com/blog/projects-you-can-do-with-javascript/

https://www.w3schools.com/default.asp

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard MacCutchan · Answer 1 · 2021-08-30T23:57:00

Solution 1

See the tutorials at W3Schools Online Web Tutorials[^]

Posted 30-Aug-21 23:57pm

Richard MacCutchan

Asif 7969814 · Answer 2 · 2021-08-31T01:21:00

Hi, Here is your google home page clone Code

<html>
<head>
<style>
#header-bar {
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  line-height: 30px;
  margin-top: 10px;
  font-family: arial, sans-serif;
  font-size: 13px;
  color: #222;
}

.header-left {
  padding-left: 15px;
  float: left;
}

.header-right {
  padding-right: 15px;
  float: right;
}

.sign-in-button {
  font-weight: bold;
  border: 1px solid #4285f4;
  border-radius: 2px;
  background-color: #4683ea;
  color: white;
  padding: 0 12px;
  line-height: 28px;
  margin-right: 15px;
  cursor: pointer;
}

#main {
  text-align: center;
  padding-top: 90px;
  font-family: arial, sans-serif;
}

#search-box-outer {
  display: flex;
  background-color: transparent;
  font: 16px;
  line-height: 34px;
  height: 34px;
  padding: 5px 8px 0 16px;
  margin: 20px auto;
  width: 584px;
  border: none;
  border-radius: 2px;
  box-shadow: 0 3px 8px 1px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.18);
}

.search-box-inner {
  border: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
  display: flex;
  flex: 100%;
  height: 33px;
  font-size: 18px;
}

.mic {
  width: 24px;
  height: 24px;
  background-size: 24px;
  vertical-align: middle;
  padding: 0px 0px 5px 0px;
  cursor: pointer;
}

input:focus {
  outline-width: 0;
}

#main-buttons-div {
  display: block;
  padding-top: 6px;
}

.search-button {
  align-items: flex-start;
  background-color: #f2f2f2;
  color: #757575;
  font-size: 13px;
  font-weight: bold;
  height: 36px;
  margin: 0px 4px;
  padding: 0px 16px;
  display: inline-block;
  border: solid;
  border-radius: 2px;
  border-width: 1px;
  border-color: #f2f2f2;
}

.search-button:hover {
  border-style: solid;
  border-radius: 2px;
  border-width: 1px;
  border-color: rgb(198, 198, 198);
  color: rgb(34, 34, 34);
  background-color: rgb(248, 248, 248);
  cursor: pointer;
}

#footer-bar {
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  right: 0;
  color: #5f6368;
  background-color: #f2f2f2;
  font-size: 13px;
  font-family: arial, sans-serif;
  line-height: 40px;
  border-top: 1px solid #e4e4e4;
}

.footer-left {
  padding-left: 27px;
  float: left;
}

.footer-right {
  padding-right: 27px;
  float: right;
}

.header-footer-link:hover {
  text-decoration: underline;
  cursor: pointer;
}
</style>
</head>
<body>
<header id="header-bar">
  About
  Store
  Sign In
  Options
  Images
  Gmail
</header>

<div id="main">
 <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google logo">
  
 <br>
  
 <form action="">
   <div id="search-box-outer">
     <input class="search-box-inner">
     <span><img class="mic" src="https://www.gstatic.com/images/branding/googlemic/2x/googlemic_color_24dp.png" alt="voice command button"</span>
   </div>
    
   <br>
    
   <div id="main-buttons-div">
     <input type="submit" class="search-button" value="Google Search">
     <input type="submit" class="search-button" value="I'm Feeling Lucky">
   </div>
 </form>
</div>
  
<footer id="footer-bar">
 Advertising
 Business
 Settings 
 Terms
 Privacy
</footer>
</body>
</html>

Rest of the work you can achieve by exploring links
https://hackr.io/blog/html-projects

https://skillcrush.com/blog/projects-you-can-do-with-javascript/

https://www.w3schools.com/default.asp

I hope this will help you