Forem: Faria Waseer

Bootstrap Framework lets start learn together

Faria Waseer — Sun, 26 Jun 2022 11:58:53 +0000

Frameworks mean easy & quick results,
I started learning the Bootstrap framework created by the Twitter company.

In bootstrap we have
✨ Layout
✨ Typography
✨ Form Layout
✨ Buttons
✨ Icon Fonts
✨ Navigation Menu
✨ Responsiveness
✨ Pagination
👉 From today I share bootstrap informative tweets,
So could you stay connected with me ☕?

👉 How to use Bootstrap CSS
We can First, visit Bootstrap's official website
link: https://getbootstrap.com
On which website First we see current version which is 5.2
If you want to use previous version, you can

We can implement bootstrap files by CDN and also download source files of Css

We always link a bootstrap file top & below write personal CSS file then we easily rewrite bootstrap classes and change css don't make any changes in the bootstrap file.

🎯 Free Icons sites for web Developers

Faria Waseer — Wed, 22 Jun 2022 05:37:05 +0000

✨jam-icons. com
✨smashicons. com
✨streamlineicons. com
✨www.flaticon. com
✨feathericons .com
✨tablericons. com
✨entypo. com
✨evil-icons. io
✨fontisto. com
✨iconmonstr. com
✨icons.pixsellz. io
✨icons8. com
✨ font-Awesome

How to create hamburger menu using HTML & CSS!

Faria Waseer — Tue, 21 Jun 2022 12:33:19 +0000

Its easy to create hamburger menu using Html and css,
first we build HTML structure of hamburger menu

     <div class="hamContainer">
        <input type="checkbox">
        <div class="hamLines">
            <span class="line line1"></span>
            <span class="line line2"></span>
            <span class="line line3"></span>
        </div>
        <div class="hamItems">
            <ul>
                <li><a href="home">home</a></li>
                <li><a href="home">about</a></li>
                <li><a href="home">content</a></li>
                <li><a href="home">about</a></li>
                <li><a href="home">privacy</a></li>
                <li><a href="home">download</a></li>
            </ul>
        </div>
     </div>

Structure is done now we write Css

*{
  padding: 0;
  margin: 0;
  box-sizing: content-box;
}
body{
  background-color: blueviolet;
  display: flex;
  justify-content: center;
  align-content: center;
}

.hamContainer{
  margin-top: 5%;
  width: 30rem;
}

.hamContainer input{
  height: 50px;
  width: 50px;
  z-index: 3;
  opacity: 0;
}

.hamContainer .hamLines{
   width: 50px;
   height: 50px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-content: center;
   position: absolute;
   top: 10%;
   z-index: -1;
   /* opacity: 0; */
}

.hamContainer .hamLines span{
  height: 5px;
  width: 65px;
  background: black;
}

.hamContainer .hamItems{
     height: 25rem;
     width: 20rem;
     background: #ffff;
     display: flex;
     justify-content: center;
     align-content: center;
     display: none;
     padding: 1rem;
     border-radius: 30px;
}
.hamContainer .hamItems ul{
     list-style: none;
     text-decoration: none;
     text-transform: capitalize;
     font-size: 2em;
}
.hamContainer .hamItems ul li{
     margin: 1.5rem 0 0 2rem;
}
.hamContainer .hamItems ul li a{
     text-decoration: none;
     color: black;
}
.hamContainer .hamItems ul li a:hover{
      background: #6666;
      padding: 0.3rem 0.5rem;
      border-radius: 30px;
      border: 3px solid black;
}
.hamContainer  .hamLines .line1{
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}
.hamContainer .hamLines .line2{
  transition: transform 0.4s ease-in-out;
}
.hamContainer .hamLines .line3{
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}
.hamContainer input[type="checkbox"]:checked ~ .hamItems{
  display: block;
}
.hamContainer  input[type="checkbox"]:checked ~ .hamLines .line1{
  transform: rotate(45deg);
}
.hamContainer  input[type="checkbox"]:checked ~ .hamLines .line2{
  transform: scaleY(0);
}
.hamContainer  input[type="checkbox"]:checked ~ .hamLines .line3{
  transform: rotate(-45deg);
}

Demo: Hamburger
Main thing is checkbox when checkbox is click the navitems display otherwise they will hide according to checkbox clicked hamLines Line1 Line2 & line3 transform rotate according to given degree! & line2 hide & line1 line3 change into cross.

More Stuff follow me on Twitter
Open Source Projects follow on gitHub
If You looking for cool Css animations Follow me on CodePen

Coffee Shop website> Using HTML & CSS.

Faria Waseer — Mon, 20 Jun 2022 12:30:53 +0000

Coffee Shop

Sites where you can get free hosting

Faria Waseer — Sun, 12 Jun 2022 14:47:36 +0000

🎇Netlify.com
🎇Firebase
🎇Vercel.com
🎇GitHubPages
🎇Surge.sh
🎇Render.com
🎇Amazone Web hosting
🎇Google cloud hosting
🎇Glitch.com
🎇Fleek.co
🎇Begin.com
🎇Cloudaccess.net
🎇Infinityfree.net

How to add some security, that anyone not copy your text ? Using CSS!

Faria Waseer — Sat, 11 Jun 2022 16:12:26 +0000

It is very common that everyone can easily copy texts from websites, with and the minor problem is that if anybody touches screen for a while automatically test select and options occurs -- select all copy past extra, its seems come time ugly & if you want to add some security to text that anyone don't copy than you use this also.
Now write to need little bit css!

.container{
    User-select:none;
}

I hope you will enjoy this CSS Tip💡

Media Queries in CSS

Faria Waseer — Fri, 10 Jun 2022 12:57:40 +0000

Media queries are one of the main source behind our trending moderns websites. It is use to create responsive websites.
Responsive That websites adjust in all media screens, Mobiles screens Tablets iPad tv desktops etc.
As we know @Media is one of the most powerful property in css. This property use with Three main parameters
1 Print in this parameter
When someone want to take print of our website or specific Area when this media query apply
For Example: without CSS media query print is like that 👇

than we applied sab media querry on body

@media print{
    *{
        color: blue;
    }
}

after that the result of prink is like that 👇

2 Speak Speak media query is not have a common use in all websites it is mostly used accessible website for all blinds & eye sight weak people. In this developers do some JavaScript with the help of JavaScript website content read automatically in voice as blind people can easily understand.

3 Screen This media is commonly use in all websites today era, by the help of screen media query we can create responsive website.
Responsive Means fit in all screen types laptops, mobiles, desktops tv and other large screen.
In this developer use Hight width of different devices and than style web page according to width & height,

 @media screen and (max-width: 480px){
     .container{
        margin: 2rem;
        padding: 4rem;
        background: rgba(220, 67, 98, 0.277);
     }
     .container h1{
        font-size: 2rem;
     }
 }

In upper given code max-width defines mobiles devices.

and tablets are

 @media screen and (min-width: 481px) and (max-width:768px){
     .container{
        margin: 2rem;
        padding: 4rem;
        background: rgba(133, 67, 220, 0.277);
     }
     .container h1{
        font-size: 2.5rem;
     }
 }

this one is styling for tablets

some useful breakpoints are

↪ 320px --- 480px Mobile devices
↪ 481px --- 768px iPads Tablets
↪ 769px --- 1024px small screen laptops
↪ 1025px --- 1200px Desktops large Screens
↪ 1201px --- and more Extra large screens Tv etc.

Which is your best tutorial or website to learn javaScript?

Faria Waseer — Tue, 07 Jun 2022 16:31:53 +0000

Any Suggestion and Advise for beginners to learn javaScript easily!

Faria Waseer — Tue, 07 Jun 2022 16:29:18 +0000