Web Projects: 40 Projects to Build Your CV

Name: Web Projects: 40 Projects to Build Your CV
Rating: 4.5 (53 reviews)

Build web projects with modern HTML, CSS, and JavaScript for your dream portfolio.

Created byTaha Karakaya

Last updated 12/2023

English

What you'll learn

You will master languages with 40 web projects.
Get prominent in job postings thanks to your projects.
Design stunning projects for your portfolio
Become an advanced HTML , CSS and JAVASCRİPT developer

Course content

2 sections • 42 lectures • 15h 30m total length

Important Note0:19
Intro2:31
Learn html, css, and javascript by completing 40 web projects across two parts, building your cv-ready portfolio and advancing your software development career.
Subscription-Form31:52
Tabs21:37
Learn to build a simple tabs UI using HTML and CSS, with radio inputs and labels to switch content, apply styling, colors, fonts, and responsive tweaks.
ScrollBar12:48
Accordion Pages19:53
Menu15:52
Learn to build a responsive menu using HTML and CSS. Apply container layout, list styles, and link styling, then create a CSS animation with before/after, hover effects, and transforms.
Kinetic Loading10:23
Learn to build a kinetic loader with HTML and CSS, set up a project, create a kinetic div with before and after elements, and animate rotation using CSS keyframes.
Card9:31
Create an interactive card animation using css and html, building a card container with content, header, paragraph, and a hover-enabled link, and applying transitions and colors.
Rotating Text16:03
Pricing Cards28:04
Craft responsive pricing cards using HTML and CSS with Font Awesome icons. Showcase a basic plan, feature lists, and a get started button, enhanced by borders, shadows, and hover transitions.
Profile Card25:16
Create a stylized profile card using HTML and CSS, integrating Font Awesome icons via CDN, a user image, and social links with a gradient background and responsive flexbox layout.

Dark Mode16:01
Create a dark mode feature using a JavaScript toggle, CSS styling for light and dark states, and local storage to remember user preference.
Random Quote Generator19:00
Todo App34:57
Build a to-do list web app using JavaScript, CSS, and HTML, with an input, add button, and dynamic item list rendered via the document object model and box icons.
Clock21:55
Build a digital clock project using HTML, CSS, and JavaScript, display hours, minutes, and seconds with AM/PM, format values with zero padding, and update every second in real time.
Button14:51
Create a button with a JavaScript and CSS animation in a web project, using create element and click events to animate a generated span, previewed via live server.
Animated Circles32:24
Learn to build animated circles from scratch using HTML, CSS, and JavaScript. Create divs with circle classes, apply rotation and percent-based styling, and display on a CV website.
Color Board21:06
Gradient Color Generator26:48
Build a gradient color generator with HTML, CSS, and JavaScript, featuring a gradient box, color inputs, and a copy button, and preview the 45 degree linear gradient in real time.
Stopwatch22:05
Design and implement a browser stopwatch using HTML, CSS, and JavaScript, featuring start, pause, and reset controls and a live time display with minutes, seconds, and milliseconds.
Captcha Generator33:43
Auto Text17:29
Create an auto text typing effect by wiring HTML, CSS, and JavaScript, using DOMContentLoaded, querySelector, and a words array with a typing delay to reveal text character by character.
Booklist30:34
Copy And Move30:23
Create a dynamic copy and move JavaScript project by building an interactive HTML/CSS/JS interface with a container, copy and move buttons, text areas, and an output area.
Emoji Generator9:16
Popup Form33:41
Build a popup form as a modal using web technologies, including name, email, password, and confirm password fields with a submit button and close control.
Progress Steps36:25
Dictionary App33:23
Calculator15:19
Build a simple calculator with HTML, CSS, and JavaScript in Visual Studio Code, featuring number inputs, an operator selector, a result display, and a switch-driven calculation using an event listener.
Rounded Navbar19:22
Weather Forecast36:39
Calculator-220:04
QR Code Generator19:42
Create a qr code generator with html css and javascript in Visual Studio Code, using a text input and a button to generate a sized qr code via an API.
Calendar16:14
3D Navbar36:06
Build a 3D navbar using JavaScript and CSS, implementing perspective, transform animations, toggles, and page transitions for Home, About, and Projects sections in a Visual Studio Code workflow.
Google Dinosaur Game21:30
Create a Google dinosaur game using HTML, CSS, and JavaScript in Visual Studio Code, including a dino and cactus setup, jump animation, and collision logic for a complete offline-ready project.
Tic Tac Toe30:45
Build a tic tac toe game in JavaScript with HTML and CSS, featuring a 3x3 grid, current player tracking, a restart button, and win-detection using predefined combinations.
Pomodoro20:01
Password Generator26:16
Loan Generator24:07
Build a dynamic loan calculator using html, css, and javascript, with font awesome icons and inputs for amount, interest, and months, showing monthly payments and total interest.
Real-Time Character Counter15:49

Requirements

You need to know html css and javascript languages
You don’t need to buy any software
One computer

Description

Ladies and gentlemen, welcome to the new course. In this course, we are developing 40 wonderful projects using HTML, CSS, and JavaScript languages for you. We have a total of 40 projects, and all lessons are taught in English. If you have any questions, you can message me privately at the end of the video. After completing this course, you will have mastered HTML, CSS, and JavaScript languages. You will also have finished 40 projects for your portfolio and will always stand out in job listings. If you wish, you can share your projects on GitHub. So why are we learning HTML, CSS, and JavaScript? Because HTML, CSS, and JavaScript are currently some of the most important web development languages in the world. Additionally, learning JavaScript thoroughly will be very useful in the future for learning frameworks like React and Angular.

What is HTML?

Hypertext Markup Language is the standard markup language used to create web pages. This language, which is indispensable for websites, serves as a framework.

What is CSS?

CSS is used for styling the HTML structure, making it visually appealing.

What is JavaScript (JS)?

JavaScript is a programming language used in conjunction with HTML and CSS. More than 97% of websites use JavaScript on the client side for web page interactivity. It enables websites to become dynamic and interactive.

Who this course is for:

Students who want to enter the world of web development
Students who want to consolidate the software languages they learn

Web Projects: 40 Projects to Build Your CV

What you'll learn

Explore related topics

Course content

Html - Css12 lectures • 3hr 14min

Html - Css - Javascript30 lectures • 12hr 16min

Requirements

Description

Who this course is for: