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:-
- https://www.youtube.com/watch?v=fuGWSodlDDc
- https://www.youtube.com/watch?v=hvcq8CeD6Wc
- 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:-
- https://www.crazyegg.com/blog/how-to-code-an-email-newsletter/
- https://www.w3schools.com/howto/howto_css_newsletter.asp
- 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:-
- https://www.educative.io/blog/animate-css-code
- https://www.youtube.com/watch?v=gW0dwO2JNmE
- 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:-
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:-
- https://www.w3schools.com/w3css/w3css_slideshow.asp
- https://www.youtube.com/watch?v=FXznI0wVZ-8
- 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:-
- https://ukdiss.com/examples/internet-based-web-application-electronic-voting.php
- 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:-
- https://www.w3schools.com/howto/howto_js_mobile_navbar.asp
- https://www.youtube.com/watch?v=DZg6UfS5zYg
- 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
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
:)
Top comments (2)
Can we talk at dev.to/connect ??
yeah..sure