Posts

Showing posts from March 17, 2024

Portfolio landing page

Image
Create personal portfolio landing page in html CSS and for beginner. this is animated landing page the animation should appear on reloading the page. Following are the main steps of making this landing page 1 showing footage of landing page 2 Demo to landing page 3 overview to code 4 checking the responsiveness of landing page however this not fully responsive landing page if you would like to make it fully responsive then say in comment I would be make responsive for you. HTML code <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     <!-- ================ Font awesome CDN ================ -->     < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />     < title > Portfolio landing page </ title &g

Making Copy Text button

Image
Creating functional copy text button in html CSS and JavaScript which copy the text form input field and paste the text any other document file it like just working copy and cut button. Basic steps of creating copy text button I overview to copy text button II open VS code and creating files III creating basic structure of copy text button in html IV style the html document with CSS V Add JavaScript for functionality VI Get final output of creating copy text button HTML code < div class = "container" >         < div class = "pro" >             < h1 > Creating Text copy button </ h1 >             < div class = "inbtn" >                 < input type = "text" placeholder = "text copy" value = "" id = "myInput" >                 < button onclick = " myFunction ()" > Copy </ button >             </ div >         </ div >     </ div >

Caps Lock Detection

Image
Create a logic that detect caps lock is on when caps lock is on an alert message will be display to the user whenever caps lock is of the display message will be return . this is due to JavaScript built in function. following are the main process to make this caps lock detection I Demo to caps lock detection II Open vs code editor and create files III Code in index.html file to create the structure of caps lock detection IV Code in CSS file to style the caps lock detection V Add JavaScript code to add detection functionality Watch video for more details

How to add Bootstrap CDN?

Image
A dd bootstrap CDN in html document to use bootstrap classes optimize the code and minimize the styling instead off CSS Bootstrap is one of the most popular CSS framework which mostly used for fast web development. It is very easy for beginner to add bootstrap CDN in html Document just go to the bootstrap official website and Copy the CDN. For more details watch the video Copy Bootstrap CDN from official site Bootstrap CDN

Multi Steps form

Image
Creating multi step form in html CSS and JavaScript. this multi step form is include five basic steps at the bottom of form form no represented by number which is clearly mention in details whenever a user click on next button the form will be move to one step forward. Structure of Multi Step form 1 five step form which include personal data, address, contact password 2 next and previous button were added for moving the form 3 save button are added at the center between next and previous button to save the current data of the user 4. form number were showing at the bottom of page Watch video for more details HTML Structure of Multi steps form < form id = "regForm" action = "/" >   < div class = "boundary" >     < h1 > Multi Steps Form </ h1 >   <!-- One "tab" for each step in the form: -->   < div class = "tab" > < h2 > Name </ h2 >     < p >< input placeholder = &qu