5-must visit useful websites for developers..

Neha Choudhary — Fri, 31 Dec 2021 16:30:51 +0000

Today I came across some amazing websites🙂 and thought to share it with everyone. Actually, there are many websites all around which we might not be aware of.
Here are some amazingly-killer websites for developers.😁

So, are you always wondering and searching about roadmaps on google, YouTube and many more.🤔 Then this website is basically for you..

roadmap.sh

Roadmap.sh is a storehouse of numerous roadmaps, guidelines and also other educational content which you could easily refer to and choose an appropriate path to achieve your goals.

(This is a screenshot of the website for reference)

Now, if you are learning frontend and getting hands dirty with CSS then you really need some cool css-tricks.🤩

CSS-Tricks

We know that CSS is to make our web look beautiful but this website makes working with CSS even more beautiful and amazing. You can get amazing content on this website as it contains videos, guides, books and articles related to the same.😌👇

SmartMockups

SmartMockups enables you to create high resolution mockups directly inside the browser across multiple devices. It is comparatively quite easy as compared to photoshop and also very user-friendly.

Profile Pic Maker

In today's world, profiles pictures have become very important as we do need them all around like on social media - Facebook, Instagram etc. And also sometimes a professional profile photo is also needed. So, this website creates a profile for a photo and is very user-friendly i.e. easy to use.

Learning any programming language is not that hard as to remember each and every syntax or details of it and hence a reference is required for its quick overview.🤭 If yes, then overAPI is one of the best websites for it.

overAPI

overAPI contains cheatsheet of almost every programming language and technologies.🤩

So, this was all about the 5-amazing websites. Hope you liked it!!😇

Animated and responsive SIGNUP page

Neha Choudhary — Wed, 29 Dec 2021 11:20:13 +0000

Basic signup pages seems to be boring??

For me too😕..

So, that's why I designed a responsive, animated signup page with a multi-colored button using HTML and CSS.

But this would require some basic knowledge of HTML and CSS. Here I'll explain the main concept along with blocks of the code snippets from which you could copy the code but for the complete code you would have to click the button at the end of the blog and download the code.
So, let's get our hands dirty with code!!

[the animation couldn't be seen in an image, you could just click on the link at the end of the blog and refer to the animated signup page on GitHub pages]

So basically, as you could see in the above image that at the very first we are supposed to design a box and let us name it box-form. So in that box-form we made two parts- left and the right.
In the left part we are supposed to add a background image which will be added through CSS i.e. the stylesheet and then the text is written on the top of it. So a different class named 'overlay' is to be created using HTML and then the text and the social media buttons are added to it.
Let's have a look at this code snippet-

<div class="box-form">
    <div class="left">
       <div class="overlay">
      <h1>Hey techie!!</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Curabitur et est sed felis aliquet sollicitudin</p>
        <div class="buttn">         
         <a href="#" class="facebook"><i class="fa fa-facebook" aria-hidden="true"></i> Login with Facebook</a>
         <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i> Login with  Twitter  </a>
        </div>
      </div>
    </div>
</div>

In the same way if the right part of the box-form is written then it would include the input types for email, username and password along with the checkbox of remember me and a multicolored button with signup option.
So the code snippet for the same would be-

<div class="box-form">
  <div class="right">
    <h5>SIGNUP</h5>
    <p>Already have an account? <a href="#">Login</a></p>
     <div class="inputs">
       <input type="email" placeholder="Enter your email address">
       <input type="text" placeholder="Username">
    <br>
       <input type="password" placeholder="Enter your password">
       <input type="password" placeholder="Confirm your password">
    </div>
   <br><br>
     <div class="remember-me-">
    <label>
       <input type="checkbox" name="item" checked/>
       <span class="text-checkbox">Remember me</span>
    </label>
     </div>
         <br>
      <button>SignUp</button>
  </div>
</div>

Now moving towards the CSS part....
Let's have a look how to make the background animated and for the rest of the code please download the code from the link at the end of the blog. So, here linear-gradient is used to set linear gradient at the background image and the background-position is adjusted accordingly.

body {
    background-image: linear-gradient(135deg, #8ac1ef, #ca6ce9, #8ac1ee, #e93356);
    animation: gradient 10s ease infinite;
    background-size: 400% 400%;
    font-family: "Open Sans", sans-serif;
    color: #333333;
}

@keyframes gradient{
    0%{
        background-position:0% 50%;
    }
    50%{
        background-position:100% 50%;
    }
    100%{
        background-position:0% 50%;
    }
}

So, this was all about an animated and responsive login web page. The code for the responsive part is present in the file to be downloaded and also in case of any discrepancy you can mention in the comment section.

DOWNLOAD CODE

Note: Click on the download code button , a GitHub repository would open and then download the code from the repository and if feel to change something then all the suggestions and improvements are welcomed!!

Forem: Neha Choudhary

5-must visit useful websites for developers..

Animated and responsive SIGNUP page