Code Explained: front.end24 Edition

Posts

project name: clock

Hi, welcome to new and final JavaScript practice project "portfolio website" for beginners along with explaination. You can copy the code by clicking the button just above the code. Read the explaiantion for better understanding. let's get started with index.html file: index.html Clock 12 3 6 9 Click to Copy style.css: body { margin: 0; padding: 0; font-family: 'Courier New', Courier, monospace; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: rgb(230, 155, 225); } img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: auto; border-radius: 200px; z-index: 1; } .clock { width: 350px; height: 350px; background-co...

project name: tabs

Hi, welcome to new JavaScript practice project "tabs" for beginners along with explaination. You can copy the code by clicking the button just above the code. Read the explaiantion for better understanding. let's get started with index.html file: index.html tabs History Tour guide Pricing History of pyramids: Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum sint cumque quasi, amet impedit tempore necessitatibus iste. Ratione possimus perspiciatis sapiente, ex alias, ipsam sint beatae vel repellat aperiam corrupti porro et molestiae nobis itaque recusandae vitae atque! Reiciendis voluptatum molestiae autem consectetur corporis libero itaque quo mollitia quod! ...

Generate Random Emoji

Hi , welcome to new JavaScript practice project "Random Emoji" for beginners along with explaination. You can copy the code by clicking the button just above the code. Read the explaiantion for better understanding. let's get started with index.html file: index.html Random Emoji Click here Emoji Name Click to Copy style.css: body{ padding: 0; margin: 0; background: rgb(192, 113, 244); display: flex; flex-direction: column; justify-content: center; height: 100vh; align-items: center; font-family: cursive; } h2{ font-size: 2rem; color: aliceblue; } .section{ text-align: center; } .btn{ font-size: 4rem; border: none; background: rgb(255,255,255,.2); border-radius: 10px; padding: 15px; filter: grayscale(); transition: filter .2s ease-in-out; cursor: pointer; font-family: cursive; } .b...

project name:QUIZ

Hi Everone, welcome to my blog and in this blog post i will share the code of JavaScript practice project "QUIZ" for beginners along with explaination. You can copy the code by clicking the button just above the code. Read the explaiantion for better understanding. let's get started with index.html file: index.html Quiz Choose the correct capitals! Next Question Click to Copy style.css: * { padding: 0; margin: 0; box-sizing: border-box; } body { margin: 0; display: flex; min-height: 100vh; justify-content: center; align-items: center; font-family: cursive; background-color: rgb(179, 179, 38); } .quizContainer { background-color: rgba(255, 255, 255, 0.3); /* border: 1px solid blue; */ padding: 30px; border-radius: 50px; box-shadow: 0 10px 10px rgba(86, 65, 190, 0.3); width: 100%; margin: 10px; max-wid...

Fringe Salon

Hi Everone, welcome to my blog and in this blog post i will share the code of JavaScript practice project "Fringe Salon" for beginners along with explaination. You can copy the code by clicking the button just above the code. Read the explaiantion for better understanding. let's get started with index.html file: index.html fringe salon fringe salon Home Services contact Celebrating 5 years of fringe salon Get 50% off on: The deal ends in Book an appointment Click to Copy style.css: * { margin: 0; padding: 0; box-sizing: border-box; } header { width: 100%; height: 100vh; background-image: linear-gradient(rgba(0, 0,...

Sunray Coffee landing page

Hi Everone, welcome to my blog and in this blog post i will share the code of JavaScript practice project "Sunray coffee" for beginners along with explaination. You can copy the code by clicking the button just above the code. Read the explaiantion for better understanding. let's get started with index.html file: index.html Sunray Coffee landing page Sunray Coffee Home Menu About Contact Wake Up to the Best Coffee Our coffee is made from the finest beans from around the world. Try it today! Order Now Our Menu Espresso $2.00 Cappuccino $3.00 Americano $2.50 ...

Double landing page

Hi Everone, welcome to my blog and this blog post is about the code of "Double landing page" for beginners along with explaination. You can copy the code by clicking the button just above the code. Read the explaiantion for better understanding. let's get started with index.html file: index.html Double Landing page ray ban About this product Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nostrum perferendis odio quibusdam similique! Officiis magnam doloribus nisi nobis tenetur cupiditate dicta sit, modi similique! Buy Now prada About this product Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nostrum perferendis odio quibusdam similique! Officiis magnam doloribus nisi nobis tenetur c...

Dental House: A responsive design with animated scrolling

Hi Everone, welcome to my blog and in this blog post i will share the code of JavaScript practice project "Dental House" for beginners along with explaination. You can copy the code by clicking the button just above the code. Read the explaiantion for better understanding. let's get started with index.html file: index.html Dental House Dental House Home About Services Contact Welcome to Your Dental House Providing quality dental care for your family Schedule an Appointment About Us Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit necessitatibus error incidunt sapiente minima minus totam id placeat magni optio, dignissimos odio enim! Id quidem quisqu...

Log-In form with background color switcher

Hi Everone, welcome to my blog and in this blog post i will share the code of JavaScript practice project "Log in form with background color switcher" for beginners along with explaination. You can copy the code by clicking the button just above the code. Read the explaiantion for better understanding. let's get started with index.html file: index.html color switcher Your Feedback Name: Email: Enter your message: Color Scheme Switcher Click to Copy style.css: html { margin: 0; padding: 0; overflow-x: hidden; box-sizing: border-box; } .login { max-width: 300px; margin: 0 auto; height: 60vh; padding: 40px; background-color: transparent; border-radius: 5px; font-family: Arial, sans-serif; position...