Forem: Beginner Developer

Supercharge Your Website Search with Google's PSE!

Beginner Developer — Sat, 02 Mar 2024 12:09:34 +0000

Hey developers! Let's talk about enhancing your website's user experience with a powerful search bar. Today, we're diving into Google's Programmable Search Engine (PSE).

What is PSE?

PSE is a free service that empowers you to integrate a custom search engine directly into your website. It utilizes Google Search's technology, ensuring users receive fast and relevant results within the specific context of your website's content.

Key perks for developers:

Targeted Search: Define the search scope, directing users to specific websites or content you choose.
Customization: Craft the search bar and results page to match your website's design aesthetics.
User-Friendly Features: Implement features like search refinements, autocomplete, and promotions for an enhanced experience.
Easy Integration: Integrate the PSE code seamlessly into your website with minimal technical expertise.

Get started with PSE:

Head over to https://programmablesearchengine.google.com/about/ for comprehensive setup instructions and documentation.

1 line code to remove duplicate

Beginner Developer — Sat, 06 Jan 2024 11:43:31 +0000

I just learned a trick while solving a leet code problem.
duplicates from array can be removed from just 1 line of code 😀 without using default array_unique function

https://leetcode.com/problems/remove-duplicates-from-sorted-array/solutions/4517079/just-1-line-of-code-for-removing-dupllicate-from-an-array

Solved my first LeetCode question

Beginner Developer — Sat, 06 Jan 2024 07:05:42 +0000

Diving into LeetCode's Top 150 Interview questions to sharpen my problem-solving skills and prepare for coding challenges!

My solution beats 100% of the users with PHP solution

Done with my solution, but looking for ways to make it even better. Can you take a look and give me some ideas?
https://leetcode.com/problems/merge-sorted-array/submissions/1138229333?envType=study-plan-v2&envId=top-interview-150

Ejaaz Khan on LinkedIn: Top Interview 150 - Study Plan - LeetCode

Solved my first LeetCode question today! Solving questions from https://lnkd.in/dFeZqH8K My solution: https://lnkd.in/dRurstTk LeetCode

linkedin.com

Animated Forms: A New Way to Engage Users (CSS Animation)

Beginner Developer — Sun, 20 Aug 2023 09:07:12 +0000

Create an animated Form in HTML & CSS

Animated forms are a new way to engage users and make them more likely to complete your forms. By using animation, you can add a sense of movement and excitement to your forms, making them more visually appealing and easier to use.

There are many different ways to animate your forms. You can use simple animations, such as moving shapes or text, or you can create more complex animations, such as characters or objects that interact with the user. The type of animation you choose will depend on the purpose of your form and the target audience.

For example, if you are creating a form for children, you might use a fun and playful animation to keep them engaged. If you are creating a form for a business website, you might use a more professional animation to create a sense of trust and credibility.

No matter what type of animation you choose, make sure it is relevant to the content of your form and that it is easy to follow. The goal of animation is to make your form more user-friendly and enjoyable, so don't overdo it.

Here are some of the benefits of using animated forms:

Increased engagement: Animated forms are more visually appealing than static forms, which can lead to increased engagement from users.

Improved completion rates: Animated forms can help to improve completion rates by making the form more user-friendly and enjoyable.

Better user experience: Animated forms can provide a better user experience by making the form more interactive and engaging.

Increased brand awareness: Animated forms can help to increase brand awareness by creating a more memorable and engaging user experience.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Form</title>

    <!-- link style.css file -->
    <link rel="stylesheet" href="style.css">

    <!-- Boostrap 5 CDN Links, you can find it on boostrap website -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
        crossorigin="anonymous"></script>
</head>

<body>
    <div class="main-div">
        <div class="card">
            <div class="border-animation"></div>
            <div class="card-body p-5 text-white">
                <h5 class="card-title mb-5">Login</h5>
                <div class="mb-3 input-div position-relative">
                    <input type="email" class="form-control input-class">
                    <label for="email" class="text-secondary small">Email</label>
                </div>
                <br>
                <div class="mb-3 input-div position-relative">
                    <input type="password" class="form-control input-class">
                    <label for="password" class="text-secondary small">Password</label>
                </div>
                <div class="form-check">
                    <input type="checkbox" class="form-check-input">
                    <label for="password" class="form-check-label">Remember me</label>
                </div>
                <button class="btn btn-primary float-end" type="submit">Submit</button>
            </div>
        </div>
    </div>
</body>

</html>

Explanition

The code is for an HTML form that uses Bootstrap 5 to style it. The form has three input fields: an email field, a password field, and a checkbox for remembering the user's login information. The form also has a submit button.
The code starts with the <!DOCTYPE html> declaration, which tells the browser that the document is an HTML5 document. The tag specifies that the language of the document is English.
The <head> section of the document contains the metadata for the document, such as the title, charset, and links to CSS and JavaScript files.
The <body> section of the document contains the main content of the document. In this case, the main content is the form.
The form is wrapped in a <div class="main-div"> element. This element is used to give the form a certain width and margin.
The form itself is a <div class="card"> element. This element is used to give the form a card-like appearance.
The form has a <div class="border-animation"> element inside it. This element is used to create a border animation around the form.
The form also has a <div class="card-body p-5 text-white"> element inside it. This element is used to give the form a white background and some padding.
The form has three input fields: an email field, a password field, and a checkbox for remembering the user's login information. These input fields are all wrapped in a <div class="mb-3 input-div position-relative"> element. This element is used to give the input fields some margin and to position them relative to each other.
The submit button is a <button class="btn btn-primary float-end" type="submit">Submit</button> element. This element is used to submit the form data to the server.
The code also uses Bootstrap 5 CDN links to style the form. These links are used to import the Bootstrap CSS and JavaScript files into the document.

body{
    background-image: url(https://images.wallpaperscraft.com/image/single/eclipse_moon_circle_138151_1600x900.jpg);
}
.main-div{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.main-div .card{
    background-color: transparent;
    overflow: hidden;
}
.main-div .card-body{
    z-index: 9;
    background-color: #000;
    width: 99.2%;
    margin: 0.8px auto;
    max-height: 360px;
}
.input-div label{
    position: absolute;
    top: 18%;
    left: 9px;
    transition: 0.5s;
}
.input-class:focus ~ label{
    top: -28px;
    left: 0;
    transition: 0.5s;
    color: #fff !important;
}
.input-class{
    z-index: 9;
}
.main-div .border-animation{
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    border: 2px solid #fff;
    animation: spin 10s linear infinite;
}
@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

Explanation

The body element has a background-image property that is set to the URL of an image. This will set the background image of the body element to the image specified by the URL.

The main-div element has a display, justify-content, and align-items properties that are set to flex, center, and center respectively. This will make the main-div element a flex container with its children centered both horizontally and vertically.

The main-div .card element has a background-color property that is set to transparent. This will make the card element transparent, so that the background image of the body element can be seen through it.

The main-div .card-body element has a z-index property that is set to 9. This will make the card-body element the topmost element in the card element, so that it will be displayed above the other elements in the card.

The input-div label element has a position property that is set to absolute. This will make the label element positioned absolutely, so that it will be positioned relative to the parent element.

The input-class:focus ~ label selector will apply the following styles to the label element when the input element is focused:

The top property is set to -28px.
The left property is set to 0.
The color property is set to #fff.
The input-class selector will apply the following styles to the input element:

The z-index property is set to 9.
The main-div .border-animation element has a position, width, height, content, and border properties that are set to absolute, 100%, 100%, "", and 2px solid #fff respectively. This will create a border animation around the card-body element.

The animation property of the border-animation element is set to spin 10s linear infinite. This will make the border animation rotate 360 degrees every 10 seconds, and it will loop infinitely.

The @keyframes rule defines the animation steps for the spin animation. The 100% step will rotate the border 360 degrees.

Preview

Blog:- https://beginners-developer.blogspot.com

Semantic HTML: The importance of using semantic tags for SEO and accessibility

Beginner Developer — Sun, 26 Mar 2023 11:00:22 +0000

In the world of web development, there's a lot of talk about the importance of using semantic HTML. But what exactly is semantic HTML, and why is it so important for SEO and accessibility? In this blog post, we'll explore the answers to these questions and look at some best practices for using semantic HTML in your web development projects.

What is Semantic HTML?
At its core, HTML is a markup language that is used to structure content on the web. But not all HTML is created equal. Some HTML tags have semantic meaning, which means they convey more than just visual formatting. Semantic HTML tags are designed to describe the meaning of the content they surround, rather than just how it should look.

For example, consider the following two lines of code:

<p><strong>Important message:</strong> PHP is not Dead.</p>
<div class="important-message">PHP is not Dead.</div>

The first line of code uses semantic HTML: the <strong> tag is used to indicate that the text within it is important. The second line of code, on the other hand, uses a generic <div> tag with a class of "important-message". While this might achieve the desired visual effect, it doesn't provide any semantic meaning to assistive technologies like screen readers or search engines.

Why is Semantic HTML Important?

Using semantic HTML is important for two main reasons: SEO and accessibility.

SEO (Search Engine Optimization): Search engines like Google use complex algorithms to determine which pages to display in search results. One of the factors that these algorithms consider is the semantic structure of a web page. By using semantic HTML tags to describe the content of your page, you can help search engines understand what your page is about and rank it more appropriately in search results.

Accessibility: Assistive technologies like screen readers rely on the semantic structure of a web page to provide users with a meaningful browsing experience. By using semantic HTML tags, you can help these technologies understand the content of your page and provide an accessible experience for users with disabilities.

Best Practices for Using Semantic HTML
So how can you use semantic HTML effectively in your web development projects? Here are some best practices to keep in mind:

Use the right tags for the job: When choosing HTML tags to use, consider the meaning of the content you're trying to convey. For example, use <header> to mark up the header section of your page, <nav> for navigation menus, <main> for the main content area, and so on.
Avoid using generic tags: As much as possible, avoid using generic tags like <div> or <span> to mark up content. While these tags can be useful in certain situations, they don't provide any semantic meaning on their own.
Avoid using generic tags: As much as possible, avoid using generic tags like <div> or <span> to mark up content. While these tags can be useful in certain situations, they don't provide any semantic meaning on their own.
Don't sacrifice usability for semantics: While it's important to use semantic HTML where possible, it's also important to prioritize usability. Don't sacrifice user experience just to achieve perfect semantic structure.

In conclusion, using semantic HTML is essential for creating web content that is both accessible and SEO-friendly. By following these best practices and prioritizing semantic structure in your web development projects, you can create content that is meaningful, usable, and inclusive.

Create Animated India flag in HTML and CSS

Beginner Developer — Sun, 11 Sep 2022 16:17:21 +0000

Design a beautiful animated India Flag in HTML and CSS.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>India Flag</title>
    <link rel="stylesheet" href="style.css" >
</head>
<body>
    <div class="main-content">
        <div class="flag-stand"></div>
        <ul>
            <li class="orange"></li>
            <li class="white">
                <div class="ashoka-chakra-div">
                    <img src="ashoka-chakra.svg" alt="ashoka-chakra" class="ashoka-chakra">
                </div>
            </li>
            <li class="green"></li>
        </ul>
    </div>
</body>
</html>

style.css

body{
    background-image: url(https://images.wallpaperscraft.com/image/single/bench_sky_clouds_113412_1280x720.jpg);
    background-size: cover;
}
.main-content{
    position: absolute;
    bottom: 9.2%;
    left: 45%;
}
.flag-stand{
    width: 10px;
    height: 350px;
    background: #587a0a;
    float: left;
}
ul{
    list-style: none;
    margin: 0;
    float: left;
    padding: 0;
}
li{
    width: 180px;
    height: 35px;
    animation-name: stretch;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}
@keyframes stretch {
    0% {
      transition: all 0.75s ease-in-out;
      width: 185px;
    }
    50% {
      transition: all 0.75s ease-in-out;
      width: 195px;
    }

    100% {
      transition: all 0.75s ease-in-out;
      width: 205px;
    }
  }
.orange{
    background: #f96232;
}
.white{
    background: #fff;
}
.green{
    background: #006000;
}
.ashoka-chakra-div{
    width: 35px;
    height: 35px;
    margin: 0 auto;
    animation: rotate 2s linear infinite;
}
.ashoka-chakra{
    height: 100%;
    animation-delay: 9s;
}
@keyframes rotate{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

Blog:- Beginner Developer

Animated Card (CSS Animation)

Beginner Developer — Sun, 24 Jul 2022 11:24:00 +0000

Create an animated card in HTML & CSS

To change the styling of a card based on the element's hover state, focus state, or any of its descendants state, use the pseudo-class selectors :hover and :focus-within.

Using overflow:hidden, hide the extra content of the card and show it on hover.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Card</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="background-image"></div>
    <div class="card">
        <img src="https://images.wallpaperscraft.com/image/single/honda_s2000_honda_car_322685_1280x720.jpg"/>
        <h3>Hover Me</h3>
        <div class="focus-content">
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet quia fugit labore dolores sint reiciendis perspiciatis<br/>
        </div>
    </div>
</body>
</html>

CSS Code

body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.background-image {
    position: fixed;
    left: 0;
    right: 0;
    display: block;
    background-image: url(https://images.wallpaperscraft.com/image/single/honda_s2000_honda_car_322685_1280x720.jpg);
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
    width: 100%;
    height: 100%;
    background-size: cover;
}
.card {
    width: 300px;
    height: 280px;
    padding: 0;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
    border-radius: 8px;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #fff;
    z-index: 1;
  }

  .card * {
    transition: 0.3s ease all;
  }

  .card img {
    margin: 0;
    width: 300px;
    height: 224px;
    object-fit: cover;
    display: block;
  }

  .card h3 {
    margin: 0;
    padding: 12px 12px 48px;
    line-height: 32px;
    font-weight: 500;
    font-size: 20px;
  }

  .card .focus-content {
    display: block;
    padding: 8px 12px;
  }

  .card p {
    margin: 0;
    line-height: 1.5;
  }

  .card:hover img, .card:focus-within img {
    margin-top: -80px;
  }

  .card:hover h3, .card:focus-within h3 {
    padding: 8px 12px 0;
  }

Output

Preview

Blog:- https://beginners-developer.blogspot.com

Productivity is just about minimising waste of your time.

Beginner Developer — Sun, 17 Jul 2022 17:19:02 +0000

Cool CSS Animation Libraries

Beginner Developer — Sun, 07 Nov 2021 17:56:29 +0000

1. Animista

Animista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use.
With Animista, you can experiment with a variety of pre-made CSS animations, tweak them, and get only those you need.

2. Infinite

3. Izmir

The Izmir CSS library allows you to quickly create beautiful image hover elements.

You can then add the element markup combined with the style classes of your choice to create your perfect hover effect by simply loading the CSS library into your project.

4. CSS WAND

Easy copy-paste beautiful CSS that can be easily customized further at your discretion

5. Animate.css

Animate.css provides ready-to-use, cross-browser animations for your web projects.
It is perfect for emphasis, home pages, sliders, and attention-guiding hints.

6. Vivify - css

7. Minimamente CSS

.
A Magic CSS animation is a set of simple animations you can use in your web or app project.

8. CSShake

9. Animatopy

10. cssanimation{io}

7 Useful CSS code snippet Websites

Beginner Developer — Sun, 31 Oct 2021 16:18:07 +0000

1. Code My UI

There are 453 CSS UI Design Examples on Code My UI
You'll find pure CSS examples or HTML elements created with only CSS to give it some sassy effects.
Typically, one would use JS or other things to achieve similar effects, but CSS alone can be used.

There are a lot of CSS only code snippets in here, ranging from accordions to sliders to dropdown menus.
You can recreate these effects on your website without any coding knowledge by using the code snippets in this section.

2. Codepad

Codepad is a place where developers can share code snippets (PHP, Java, Bash, C, C++, Python and more).
Create your HTML, CSS and JS Demos.

3. CSS Deck

4. Design Bombs

Design Bombs is an online publication providing well-researched guides, tutorials, exclusive deals, and other useful content.

5. CSS-Tricks

All things related to web design and development, including CSS, HTML, JavaScript, and more.

6. Snipt

Code snippets for teams and individuals.

7. 30 seconds of code

It covers techniques for creating commonly-used layouts, styling and animating elements, as well as snippets for handling user interaction.

My Blog:- Beginner Developer Blog

Tools for turning code snippets into images

Beginner Developer — Sun, 24 Oct 2021 15:52:03 +0000

1. Ray.so

Ray.so is an online tool that lets users create a beautiful code snippet image with gradient backgrounds.
You can highlight up to 50+ programming languages.

2. Snappify

Snapify comes with 6 predefined styles to create aesthetically pleasing snapshots of your code without spending hours on styling.

3. CodeKeep

4. Codeimg

CodeImg is a wonderful tool for preparing code snippets to be displayed in images.

5. Carbon

Create and share beautiful images of your source code. Start typing or drop a file into the text area to get started.

6. SRC to PNG

My Blog:- Beginner Developer Blog

Animated Navigation

Beginner Developer — Sun, 17 Oct 2021 17:57:08 +0000

HTML and Javascript

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Animated Navigation</title>
  </head>
  <body>
    <nav id="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Blog</a></li>
      </ul>
      <button class="icon" id="toggle">
        <div class="line line1"></div>
        <div class="line line2"></div>
      </button>
    </nav>
    <script>
        const toggle = document.getElementById('toggle')
        const nav = document.getElementById('nav')

        toggle.addEventListener('click', () => nav.classList.toggle('active'))
    </script>

    <!-- Dribbble link: https://dribbble.com/shots/2427219-Header-Navigation-Day-053-dailyui -->
  </body>
</html>

CSS

body {
    background: #9796f0;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #fbc7d4, #9796f0);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #fbc7d4, #9796f0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    height: 100vh;
    float: right;
    font-family: system-ui;
  }

  nav {
    background-color: #fff;
    padding: 10px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: width 0.6s linear;
    overflow-x: hidden;
  }

  nav.active {
    width: 350px;
    padding: 20px
  }

  nav ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 0;
    transition: width 0.6s linear;
  }

  nav.active ul {
    width: 100%;
  }

  nav ul li {
    transform: rotateY(0deg);
    opacity: 0;
    transition: transform 0.6s linear, opacity 0.6s linear;
  }

  nav.active ul li {
    opacity: 1;
    transform: rotateY(360deg);
  }

  nav ul a {
    position: relative;
    color: #000;
    text-decoration: none;
    margin: 0 10px;
  }

  .icon {
    background-color: #fff;
    border: 0;
    cursor: pointer;
    position: relative;
  }

  .icon:focus {
    outline: 0;
  }

  .icon .line {
    background-color: #5290f9;
    height: 2px;
    width: 30px;
    transition: transform 0.6s linear;
  }

  .icon .line2 {
    margin-top: 10px;
  }

  nav.active .icon .line1 {
    transform: rotate(-765deg) translateY(5.5px);
  }

  nav.active .icon .line2 {
    transform: rotate(765deg) translateY(-5.5px);
    margin-top: 5px;
  }

Output

My Blog:- Beginner Developer Blog
Website:- https://ejaazrkhan.github.io/portfolio