Forem: siddharth pandey

CSS Neomorphism design -easy steps to create

siddharth pandey — Mon, 15 Feb 2021 13:57:37 +0000

Original Post - Click Here

Hello coders! in this post we will see some steps to create a CSS Neomorphism design very easily. We are going to design a neomorphism login form, that help us to easily understand the concept of Nemorphism design. So let’s see what we are going to create in this post (the snapshot is given above).

Steps to create a neomorphism design

Here are some steps that help us to create a neomorphism design.

Choose same background color for both parent(page) and child element (like a box).
The elements should have two shadow – dark and light.
If we choose rounded edges then design will look pretty cool.
Elements can have an optional subtle border to improve contrast and make the edges a bit sharper.

So let’s start coding our Neomorphism Form…

HTML code

Below is the HTML code to design a neomorphism design.

<div class="container">
        <div class="title">Login</div>
        <div class="inputs">
            <label>EMAIL</label>
            <input type="email" placeholder="enter your email here" />
            <label>PASSWORD</label>
            <input type="password" placeholder="enter your password" />
            <button type="submit">LOGIN</button>
        </div>
</div>

CSS code

Now the real work begins to design a Neomorphism design.

First let see basic css code that help us to arrange our elements on the center of the page.

body {
        margin: 0;
        width: 100vw;
        height: 100vh;
        background: #ecf0f3;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        place-items: center;
        overflow: hidden;
        font-family: poppins;
 }

Now we start adding the neomorphism feature to our form container.

.container {
        position: relative;
        width: 350px;
        height: 400px;
        border-radius: 20px;
        padding: 40px;
        box-sizing: border-box;
        background: #ecf0f3;
        box-shadow: 14px 14px 20px #cbced1, -14px -14px 20px white;
 }

Now it’s time to do CSS for others elements like title, inputs, labels and button.

.title {
        margin-top: 10px;
        font-weight: 900;
        font-size: 1.8rem;
        color: #1DA1F2;
        letter-spacing: 1px;
        }

.inputs {
        text-align: left;
        margin-top: 30px;
}

label, input, button {
        display: block;
        width: 100%;
        padding: 0;
        border: none;
        outline: none;
        box-sizing: border-box;
}

label {
        margin-bottom: 4px;
        }

label:nth-of-type(2) {
        margin-top: 12px;
}

input::placeholder {
        color: gray;
}

input {
        background: #ecf0f3;
        padding: 10px;
        padding-left: 20px;
        height: 50px;
        font-size: 14px;
        border-radius: 50px;
        box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
}

button {
        margin-top: 20px;
        background: #1DA1F2;
        height: 40px;
        border-radius: 20px;
        cursor: pointer;
        font-weight: 900;
        box-shadow: 6px 6px 6px #cbced1, -6px -6px 6px white;
        transition: 0.5s;
}

button:hover {
        box-shadow: none;
}

Last word

Hope you enjoy this short tutorial on CSS Neomorphism.
Must visit- Our BLog

what is web scraping | complete guide

siddharth pandey — Sun, 20 Dec 2020 10:22:15 +0000

ORIGINAL POST

in this time we and our business should be on internet means we should use internet to grow our business. In this article which topic we have chooses has a connection with Business. Yes we are talking about Web Scraping . In this post we will see what is and what its use.

Web Scraping

Web scraping is a technique that is used to fetch data from a website. For gathering data of a website we use this technique that is called as Web Scraping . We use this technique for many reasons .

Uses of this technique

we use web scraping can be used of own or business purpose. we use web scraping for following reasons-

Lead generation

Lead generation is refers to the process of identifying potential customer for your product or service. to generate lead we collect contact detail like email, mobile number of customers to grow our business . For this purpose we use web scraping.

Reputation and brand monitoring

To actively build brand intelligence and monitoring perception we use it . For understanding how customer feel about our product or services and how to give them a better products or services we use it.

machine Learning

Machine learning is about teaching computers how to learn from data to make decisions .For machine learning e requires a lot of data . For gathering a lot of data we use a lot of web pages of websites.
For gathering a lot of data from various website pages we use scraping.

Analysing competitors

If your are in a business then you should know what our competitors are doing and not. To extract competitors data , customers etc in a structured and usable format we use it.

building a price comparison website

If you are a website developer and thinking about to develop a website that compare prices between various sites then you have to collect product details like price , description , and images for analysing we should use.

Other uses

Financial data analysis
building product catalog
map compliance
social media analyze
news monitoring
For SEO etc.

React js learning path for 2020 | perfect guide

siddharth pandey — Tue, 15 Dec 2020 13:18:28 +0000

For Oringinal Post click here
Hello guys , in this post we are going to discuss about a very useful topic what is the perfect React js learning path in 2020. If you are a beginner are just going to start journey with a trending JavaScript Library called as React js, then it is the right place.

Topics going to cover

Let’s see what are the topics that we are going to cover in this post. First we will see what is React js. Then we will see what is the perfect roadmap to learn React efficiently.

What is React js

React js is a JavaScript library introduce by the facebook . ReactJS ia an open source JavaScript library used to develop User Interfaces. React JS is concerned with the component that utilizes the JavaScript with a HTML like syntax called JSX. It is a component based JavaScript library.

To learn more about React js checkout my previous post – Introduction to React

React js learning path

We are divided the roadmap or learning path in three sub-path. In first part we discuss the topics from where we will start our journey with React.js. Then we will see the Advance topics and last , we will discuss some eco systems of React js.

Fundamentals

To master the fundamentals , we should learn following topics –

*How to create a React app or How to initialize a React Project.
*What is a Component.
*Types of component such as – Functional Component and Class based component.
*JSX
*Props and State
*Conditional rendering
*List and key
*Lifecycle Methods
*Building some simple Forms

Advance

After complete above fundamentals topics, we should start learning these topics-
*Context API
*Higher Ordered Component
*Rendering Props
*Refs
*Error boundaries
*Making HTTP Request
*Some Hooks such as – useEffect , UseState , useRef , useMemo ,
Custom Hooks

EcoSystem

After complete above Advance topics, we should start learning these topics-
*State management – Redux or Mobx
*Styling – Styled component / Material UI /Tailwind CSS or *Reactstrap
*Routing – React Router
*Form – Formik
*Testing – JEST or React testing Library

Next Step

After completing above topics properly you can start learning these technologies-
*Gatsby
*Next.js
*React Native

Conclusion

So finally we have seen a complete learning path for React js. I hope now will master the React js.

Thank you.

Keep Coding , Keep Learning.