15 HTML & CSS only project Ideas  (Part -2)
Tags: webdev, html, css, codenewbie
Published: 2021-07-05 15:25:17

Here is the next part of our 15 HTML & CSS only projects list. Let us look into what else you can build with just HTML and CSS knowledge.
__PART 1__: https://dev.to/rajshreevats/15-html-css-only-project-ideas-part-1-17e1

------

##8. Interactive Resume
As a _web developer_, It is better to send your CV/Resume built with HTML & CSS rather than _pdf or doc file_. Building an interactive resume is one way to show your __foundational skills__ while also making your resume impressive to clients/employers.

__Here are some of the tutorials for your reference:-__
1. https://www.youtube.com/watch?v=fuGWSodlDDc
2. https://www.youtube.com/watch?v=hvcq8CeD6Wc
3. https://www.youtube.com/watch?v=riPiyepFXF0

------

##9. Create an E-mail newsletter
This project can help you if you are a __freelancer__ and you want to connect with clients using __e-mails__. You can custom design and share _e-mail newsletters_ with your target audience and clients. You can also monetize your e-mail developer skill after this.

__Here are some of the references:-__
1. https://www.crazyegg.com/blog/how-to-code-an-email-newsletter/
2. https://www.w3schools.com/howto/howto_css_newsletter.asp
3. https://www.youtube.com/watch?v=ZSSqsEVsChc

------

##10. Create CSS Animations
They’re easy to build and have fun, you can create them without even having to know _JavaScript_. You can change as many CSS properties you want, as many times as you want. To use CSS animation, you must first specify some __keyframes__ for the animation. An animation lets an element gradually change from one style to another.

__Here are some of the references:-__
1. https://www.educative.io/blog/animate-css-code
2. https://www.youtube.com/watch?v=gW0dwO2JNmE
3. https://www.youtube.com/watch?v=G34g7vcpN0s

------

##11. Video Background Site
Fullscreen images used as backgrounds have an amazing visual impact, but you can use _video background_ in exactly the same way and draw better attention. A good video background can easily make people stop and take notice, increasing the time they spend on the site. This works best for Travel and Restaurants landing pages.

__Here are some of the references:-__
1. https://www.youtube.com/watch?v=Gx_7GQtSdpc
2. https://redstapler.co/responsive-css-video-background/

------

##12. Create an Image Slider
 HTML image slider is remarkably efficient, reliable and engaging. This project can also be used in an _-e-commerce website__ to showcase products in an engaging way. 

__Here are some of the references:-__
1. https://www.w3schools.com/w3css/w3css_slideshow.asp
2. https://www.youtube.com/watch?v=FXznI0wVZ-8
3. https://www.youtube.com/watch?v=pMltE4J4UQM

------

##13. E-Voting Form Template
 Basics concepts of HTML and CSS like tags, ID, color, margin, padding, font, checkbox etc. are enough to build an E-Voting form. E- Voting system is used for online surveys and full system requires some _PHP and Javascript_ knowledge as well, but for now you can leave that part and build Layout for the system using HTML & CSS only.

__Here are some of the references:-__
1. https://ukdiss.com/examples/internet-based-web-application-electronic-voting.php
2. https://www.geeksforgeeks.org/build-a-survey-form-using-html-and-css/

------

##14. CSS Hamburger Menu 
Overlays are very similar to links, except they have a transparent background and appear on top of the original page. A hamburger menu is an icon used on a website that, when clicked, opens to reveal a navigation menu. You can add these additional features to your dummy site projects (restaurant, e-commerce etc.
).

__Here are some of the references:-__
1. https://www.w3schools.com/howto/howto_js_mobile_navbar.asp
2. https://www.youtube.com/watch?v=DZg6UfS5zYg
3. https://codepen.io/bradtraversy/pen/vMGBjQ

------

##15. CSS 3-D navigation page
You can build this to give your website a bold navigation and also show off your skills of better usability standards. Animated Navigations are key ingredients of the __user experience__. In this case a 3D menu can't just be fun. It has to be efficient. You can also check out my 3-D navigation landing page for reference here :- https://rajshreevats.github.io/3-d-navigation-bar.github.io/

__some other tutorials for reference:-__
1.https://www.youtube.com/watch?v=jLyqrjL3wUo
2. https://www.youtube.com/watch?v=3JwsdIMsjN0

------

Apart from these 15 projects, Even with just HTML and CSS skills, you can contribute to an open source project. You can find open source projects on hosting sites like GitHub.
Follow me on github :- https://github.com/RajshreeVats 
:)