DEV Community: devkoustav

Filtering and Retrieving in SQL

devkoustav — Sat, 16 Aug 2025 11:17:47 +0000

Dataset 1: Applications

| application_id  | user_id  | dob        | birth_certificate  | driving_license  |
| --------------- | -------- | ---------- | ------------------ | ---------------- |
| 1               | 3        | 2003-06-15 |     Y              | N                |
| 2               | 5        | 1999-09-21 |   N                |    Y             |
| 3               | 2        | 1995-03-10 | Y                  | Y                |
| 4               | 7        | 2000-12-05 |         N          | N                |
| 5               | 8        | 1992-01-28 | Y                  | N                |
| 6               | 1        | 2007-05-30 |   N                | Y                |
| 7               | 4        | 1998-07-19 | Y                  | Y                |
| 8               | 6        | 1998-02-19 |         Y          | Y                |

Dataset 2: Users

| user\_id | name         | email                 |
| -------- | ------------ | --------------------- |
| 1        | Koustav Das  | koustav.d@example.com |
| 2        | Aarav Sharma | aarav.s@example.com   |
| 3        | Priya Iyer   | priya.i@example.com   |
| 4        | Ananya Gupta | ananya.g@example.com  |
| 5        | Rohan Mehta  | rohan.m@example.com   |
| 6        | Sneha Reddy  | sneha.r@example.com   |
| 7        | Aditya Verma | aditya.v@example.com  |
| 8        | Kavya Nair   | kavya.n@example.com   |

Dataset 3: Application_Details

| application_id  | submitted_date  |
| --------------- | --------------- |
| 1               | 2023-04-12      |
| 2               | 2023-05-03      |
| 3               | 2023-05-18      |
| 4               | 2023-06-01      |
| 5               | 2023-06-15      |
| 6               | 2023-07-10      |
| 7               | 2023-07-21      |
| 8               | 2023-07-22      |

Your manager has assigned you an important task: identify the applicants whose submissions qualify for approval based on specific eligibility rules.

The final output should contain each eligible applicant’s name, email ID, and application date.

An application is considered approved only if all of the following conditions are met:

Age Requirement: Applicant must be at least 25 years old — born before 1st January 2000.
Timely Submission: Application must have been submitted on or before 21st July 2023.
Document Verification: Applicant must have both a birth certificate and a driving license.

Your goal is to filter out and prepare a clean, ready-to-approve list that meets these criteria.

SELECT
    U.name,
    U.email,
    D.submitted_date
FROM
    Applications AS A
INNER JOIN
    Users AS U
ON
    A.user_id = U.user_id
INNER JOIN
    Application_Details AS D
ON
    A.application_id = D.application_id
WHERE
    A.dob < '2001-01-01'
AND
    D.submitted_date < '2023-07-22'
AND
    TRIM(A.birth_certificate) = 'Y'
AND
    TRIM(A.driving_license) = 'Y'
ORDER BY
    D.submitted_date ASC;

Step 1: `SELECT`

The SELECT statement is used to specify which columns we want to display in the final result.
Here, we are fetching:
- U.name → The applicant’s name from the Users table.
- U.email → The applicant’s email address.
- D.submitted_date → The date on which the application was submitted.

Step 2: `FROM` and `JOIN` Clauses

The main table we are querying from is Applications (aliased as A).
Since the required data is spread across multiple tables, we use INNER JOIN to combine them:

Users AS U is joined with Applications AS A using user_id. This links each application with the corresponding user details.
Application_Details AS D is joined with Applications AS A using application_id. This links each application with its detailed submission data.
- Using aliases (A, U, D) makes the query shorter and more readable.

Step 3: `WHERE` Clause

This filters the records based on specific conditions:

A.dob < '2001-01-01' → Only applicants born before 2001 are considered.
D.submitted_date < '2023-07-22' → Only applications submitted before 22nd July 2023 are included.
TRIM(A.birth_certificate) = 'Y' → Ensures that the birth certificate is provided.

TRIM() is used to remove any accidental leading/trailing spaces in the column.
1. TRIM(A.driving_license) = 'Y' → Ensures that the driving license is also provided.

Together, this ensures that only valid applications with both required documents are selected.

Step 4: `ORDER BY`

Finally, we sort the results in ascending order of submitted date (ORDER BY D.submitted_date ASC).
This ensures that older valid applications appear first.

Python Time Module | Useful Functions | How to Use? | Applications in Real Models | 2 Real World Programs

devkoustav — Sun, 26 Mar 2023 07:15:58 +0000

Python's Time Module is here to save the day!

In this post, we'll explore how to use the Time Module and its various applications.
You can use the various functions in the Time Module to parse and format time-sensitive data, such as stock market data or weather forecasts.

📌 How to import Time Module in Python?

First things first, let's import the Time Module. The time module comes with Python’s standard utility module, so there is no need to install it externally.

import time

📌 What is epoch?

time.gmtime(0) Function in Python

Epoch is the point where the time starts and is platform-dependent.
For Windows and most Unix systems, the epoch is January 1, 1970, 00:00:00 (UTC), and leap seconds are not counted towards the time in seconds since the epoch.
To check the epoch of a given platform, we can use time.gmtime(0)

import time

print(time.gmtime(0))

Output:

time.struct_time(tm_year=1970, tm_mon=1, tm_mday=1, tm_hour=0, tm_min=0, tm_sec=0, tm_wday=3, tm_yday=1, tm_isdst=0)

The time before the epoch can still be represented in seconds but it will be negative. For example, 31 December 1969 will be represented as -86400 seconds

📌 How to get the current time in seconds since epoch?

time() Function in Python

The time() function returns the current system time in seconds since the Unix epoch (January 1, 1970, 00:00:00 UTC). You can use the time() function to benchmark the performance of your code and identify areas that need optimization.

from time import time

time = time()
print(time)

Output:

1679730367.4577837

You can use the time() function to set specific times for tasks to run

📌 How to get time in string from seconds?

time.ctime() Function in Python

The function time.ctime() returns a 24 character time string but takes seconds as argument and computes time till mentioned seconds. If secs is not provided or None, the current time as returned by time() is used. It can be used to get the date, time and day of the week.

import time

timeNow = time.ctime(1679724175.2855277)
print("Current Date, Time:", timeNow)

Output:

Current Date, Time: Sat Mar 25 11:32:55 2023

📌 How to calculate execution/running time of a Python Program?

We can determine the elapsed time by recording the time just before the algorithm and the time just after the algorithm, and computing their difference.

from time import time
startTime = time() # record the starting time
# run algorithm
endTime = time() # record the ending time
elapsed = endTime − startTime # compute the elapsed time

📌 How to delay execution of a python program?

sleep() Function in Python

The sleep() function suspends the execution of the current thread for a specified number of seconds. It's a great way to add delays in your code, whether it's for animation or to prevent overloading a server.

import time

print("This message will appear immediately")
time.sleep(5)
print("This message will appear 5 seconds later")

import time 

for i in range(5):
    time.sleep(i)
    print(i)  # Each number i will be printed after i seconds

📌 How to converts a tuple representing a time as returned by `gmtime()` to a specific format?

time.strftime() function in Python

time.strftime() function converts a tuple representing a time as returned by gmtime() or localtime() to a string as specified by the format argument. If t(time in number of seconds to be formatted ) is not provided, the current time as returned by localtime() is used. The format must be a string. ValueError is raised if any field in t is outside of the allowed range.

from time import gmtime, strftime

# using simple format of showing time
s = strftime("%a, %d %b %Y %H:%M:%S + 1010", gmtime())
print("Example 1:", s)

print()

# only change in this is the full names
# and the representation
s = strftime("%A, %D %B %Y %H:%M:%S + 0000", gmtime())
print("Example 2:", s)

print()

# this will show you the preferred date time format
s = strftime("%c")
print("Example 3:", s)

print()

# this will tell about the centuries
s = strftime("%C")
print("Example 4:", s)

print()

# % R - time in 24 hour notation
s = strftime(" %R ")
print("Example 5:", s)

print()

# % H - hour, using a 24-hour clock (00 to 23) in Example 1, 2, 3
# % I - hour, using a 12-hour clock (01 to 12)
s = strftime("%a, %d %b %Y %I:%M:%S + 0000", gmtime())
print("Example 6:", s)

print()

# % T - current time, equal to % H:% M:% S
s = strftime("%r, %T ", gmtime())
print("Example 7:", s)

print()

# % u an % U use (see difference)
s = strftime("%r, %u, %U")
print("Example 8:", s)

print()

# use of % V, % W, % w
s = strftime("%r, %V, %W, %w")
print("Example 9:", s)

print()

# use of % x, % X, % y, % Y
s = strftime("%x, %X, %y, %Y")
print("Example 10:", s)

print()

# use of % Z, % z
s = strftime("%r, %z, %Z")
print("Example 11:", s)

Output:

Example 1: Sat, 25 Mar 2023 09:32:00 + 1010

Example 2: Saturday, 03/25/23 March 2023 09:32:00 + 0000

Example 3: Sat Mar 25 15:02:00 2023

Example 4: 20

Example 5:  15:02

Example 6: Sat, 25 Mar 2023 09:32:00 + 0000

Example 7: 09:32:00 AM, 09:32:00

Example 8: 03:02:00 PM, 6, 12

Example 9: 03:02:00 PM, 12, 12, 6

Example 10: 03/25/23, 15:02:00, 23, 2023

Example 11: 03:02:00 PM, +0530, India Standard Time

📌 How Python Time module is used in Building time-based animations?

You can use the sleep() function to add delays between animation frames, or use the time() function to set specific frame rates.

📌 How to make a stopwatch using Python Time Module?

from time import time

while True:
    startTime = 0
    endTime = 0
    elapsedTime = 0
    user = input("Type s to start the STOPWATCH\nType x to stop the STOPWATCH\t").strip()
    if user == "S" or user == "s":
        startTime = time()
        print("STOPWATCH started")
        user2 = input()
        if user2 == "x" or user2 == "X":
            endTime = time()
        elif user2 == "s" or user2 == "S":
            print("STOPWATCH already started. You can stop it by typing x")
        else:
            print("Invalid input. Please try again.")
        elapsedTime = endTime - startTime
        print(f"Total time elapsed: {elapsedTime} seconds")
        break
    elif user == "x" or user == "X":
        print("STOPWATCH not yet started. You can start it by typing s")
    else:
        print("Invalid input. Please try again.")

📌 How to implement a Pomodoro Timer using Python Time Module

 import time
import os

work_time = 25 * 60
break_time = 5 * 60
long_break_time = 15 * 60
session_count = 0

def start_timer(duration, message):
    for i in range(duration, 0, -1):
        minutes = i // 60
        seconds = i % 60
        timer_display = f"{minutes:02d}:{seconds:02d}"
        print(f"\r{message} ({timer_display})", end="")
        time.sleep(1)

    print("\nDone!")
    os.system("say 'Time's up!'")

while True:
    user_input = input("Press 's' to start a Pomodoro session or 'q' to quit: ")

    if user_input == 's':
        session_count += 1
        if session_count % 4 == 0:
            start_timer(long_break_time, "Long Break")
        else:
            start_timer(work_time, "Work")
            start_timer(break_time, "Short Break")

    elif user_input == 'q':
        print("Goodbye!")
        break

    else:
        print("Invalid input. Please try again.")

And we are -

Happy Coding! 😃
Share this with someone who would need it! 💚
Follow for more ⚡

The Need for Speed: HTML & CSS Tips to Boost Your Page Loading Time by 10x

devkoustav — Wed, 02 Nov 2022 05:19:02 +0000

We all hate it when our page loads this slow right! 😔

Infact website conversion rates drop by an average of 4.42% with each additional second of load time (between seconds 0–5). The first five seconds of page-load time have the highest impact on conversion rates. (Portent, 2019)

But you can increase the Page Load Speed of your website by making changes in your HTML and CSS Files without needing the best hosting services in the most hard way! Read along…

(For this article we will be concerned about making the page speed faster using our HTML and CSS files only.)

1. Lazy Loading

Lazy loading is a strategy to shorten the length of the critical rendering path, which translates into reduced page load times.

a) Splitting CSS File

CSS must be thin, delivered as quickly as possible, and the usage media types and queries are advised to unblock rendering. What do I mean by thin? -Split your CSS File so that the whole CSS is not executed at all screens.

<!-- Loading and parsing styles.css is render-blocking -->
<link rel="stylesheet" href="styles.css" />

📌 For Print media use-

<!-- Loading and parsing print.css is not render-blocking -->
<link rel="stylesheet" href="print.css" media="print" />

📌 For Mobile Screens use-

<!-- Loading and parsing mobile.css is not render-blocking on large screens -->
<link
  rel="stylesheet"
  href="mobile.css"
  media="screen and (max-width: 480px)" />

📌 For Tablet Screens use-

<!-- Loading and parsing tablet.css is not render-blocking on large screens -->
<link
  rel="stylesheet"
  href="tablet.css"
  media="screen and (max-width: 1080px)" />

📌 For mobile screens in different orientation use different CSS Files

<!-- Loading and parsing portrait.css is not render-blocking on landscape screens -->
<link href="portrait.css" rel="stylesheet" media="(orientation:portrait)" />

By separating out the CSS into multiple files, the main render-blocking file, in this case styles.css, is much smaller, reducing the time that rendering is blocked thereby increasing the page load speed by a lot.

b) `font-display` property of CSS

Applied to the @font-face rule, the font-display property defines how font files are loaded and displayed by the browser, allowing text to appear with a fallback font while a font loads, or fails to load. This improves performance by making the text visible instead of having a blank screen, with a trade-off being a flash of unstyled text.

@font-face {
  font-family: "nunito", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}

c) Images in the HTML File

The user can see(needs to see) only the images at the top at the first second. Then why to make them wait for the image at the end to load? Use loading="lazy" so that the image only loads when it is needed. This decreases the Page Loading Speed to a lot.

<img src="my-logo.png" alt="KOUSTAV" loading="lazy" />

2. Choosing the right Image Format

Make your images in .webp format. It is recommended as the image format standard for the web.

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25–34% smaller than comparable JPEG images at equivalent SSIM quality index. Lossy, lossless and transparency are all supported in animated WebP images, which can provide reduced sizes compared to GIF and APNG.

WebP vs PNG Image Format

WebP vs JPEG Image Format

With all this tests it is proved that webp images are much more compressed even after being lossy therefore decreasing the page load speed by a lot!

You can also check image format .avif which in few cases is better than .webp but it is new to the market (released on 2019) so not many browsers supports the .avif format yet!

📌 Use `<picture>` element for the images

a) For cropping or modifying images for different media conditions (for example, loading a simpler version of an image which has too many details, on smaller displays).
b) Offering alternative image formats, for cases where webp format is not supported.
c) Saving bandwidth and speeding page load times by loading the most appropriate image for the viewer's display.

If providing higher-density versions of an image for high-DPI (Retina) display, use srcset on the <img> element instead. This lets browsers opt for lower-density versions in data-saving modes, and you don't have to write explicit media conditions.

<picture>
  <source srcset="my-logo-wide.webp" type="image/webp" media="(min-width: 600px)" />
  <source srcset="my-logo-wide.jpeg" type="image/jpeg" type="image/jpeg" media="(min-width: 600px)" />
  <source srcset="my-logo-narrow.webp" type="image/webp" /> 
  <img src="my-logo-narrow.png" alt="KOUSTAV" loading="lazy" />
</picture>

3. Rendering Images

As images are loaded asynchronously and continue to load after the first paint, if their dimensions aren't defined before load, they can cause reflows to the page content. For example, when text gets pushed down the page by images loading. For this reason, it's critical that you set width and height attributes so that the browser can reserve space for them in the layout.
For any background-image, it's important you set a background-color value so any content overlaid is still readable before the image has downloaded.

4. Minifying HTML and CSS Files

Minification is removal of all unnecessary characters from code so as to reduce the size. Unneeded white space characters like space, newline, tab, etc. and comments are removed.

Use minifying tools like CodeBeautify, CSS Minifier, and many more to minify your HTML and CSS Files. These will help giving your website a better page load speed.

And we are -

This changes will definitely give your website a10x faster page loading speed now!

Happy Coding! 😃
Share this with someone who would need it! 💚
Follow for more ⚡

How a VS Code Extension "Todo Tree" can make your coding easier | Todo Tree Configuration | Highlighting Comments in VS Code

devkoustav — Thu, 27 Oct 2022 05:27:21 +0000

Highlighting Comments with Todo Tree VS Code Extension

The Todo Tree extension quickly searches your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the activity bar. The view can be dragged out of the activity bar into the explorer pane (or anywhere else you would prefer it to be).

📌 So let's first download and enable it from the extensions.

It's now downloaded and has default configurations. But let's make custom ruleset.

📌 Go to the Manage Option in VS Code

📌 Now Click on settings

The settings file opens.

📌 Now we have to open the settings.json File. Click on the button at the top right corner.

📌 Now you can paste the below code there and make your custom changes in it!

{
  "todo-tree.highlights.defaultHighlight": {
    "icon": "alert",
    "type": "text-and-comment",
    "foreground": "black",
    "background": "white",
    "opacity": 50,
    "iconColour": "blue",
    "gutterIcon": true
  },
  "todo-tree.highlights.customHighlight": {
    "TODO": {
      "icon": "checkbox",
      "foreground": "black",
      "background": "yellow",
      "iconColour": "yellow"
    },
    "NOTE": {
      "icon": "note",
      "foreground": "white",
      "background": "cornflowerblue",
      "iconColour": "cornflowerblue"
    },
    "USEFUL": {
      "icon": "verified",
      "foreground": "black",
      "background": "mediumaquamarine",
      "iconColour": "mediumaquamarine"
    },
    "COMMENT": {
      "icon": "comment",
      "foreground": "white",
      "background": "gray",
      "iconColour": "white"
    },
    "LEARN": {
      "icon": "bookmark",
      "foreground": "white",
      "background": "hotpink",
      "iconColour": "hotpink"
    },
    "FIXME": {
      "icon": "tools",
      "foreground": "crimson",
      "background": "burlywood",
      "iconColour": "burlywood"
    },
    "RECHECK": {
      "icon": "codescan",
      "foreground": "white",
      "background": "chocolate",
      "iconColour": "chocolate"
    },
    "INCOMPLETE": {
      "icon": "alert",
      "foreground": "white",
      "background": "mediumvioletred",
      "iconColour": "mediumvioletred"
    },
    "BUG": {
      "icon": "bug",
      "foreground": "white",
      "background": "crimson",
      "iconColour": "crimson"
    },
    "SEE NOTES": {
      "icon": "note",
      "foreground": "white",
      "background": "teal",
      "iconColour": "teal"
    },
    "POST": {
      "icon": "share",
      "foreground": "white",
      "background": "green",
      "iconColour": "green"
    },
    "[ ]": {
      "icon": "check",
      "foreground": "black",
      "background": "white",
      "iconColour": "yellow"
    },
    "[x]": {
      "icon": "check",
      "foreground": "white",
      "background": "green",
      "iconColour": "green"
    }
  },
  "todo-tree.general.tags": [
    "BUG",
    "SEE NOTES",
    "HACK",
    "FIXME",
    "RECHECK",
    "INCOMPLETE",
    "TODO",
    "NOTE",
    "POST",
    "USEFUL",
    "LEARN",
    "COMMENT",
    "[ ]",
    "[x]"
  ],
  "todo-tree.regex.regex": "(//|#|<!--|;|/\\*|^|^\\s*(-|\\d+.))\\s*($TAGS).*(\\n\\s*//\\s{2,}.*)*"
}

📌 Here is the final result-

📌 Every Comment comes as a object in this json file. The structure of the object is-

📌 You can add more objects based on this structure and include the object name in-

Few things to know before editing the configuration

icon - used to set a different icon in the tree view. Must be a valid octicon.

iconColour - used to set the colour of the icon in the tree. If not specified, it will try to use the foreground colour or the background colour.
gutterIcon - set to true to show the icon in the editor gutter.
Foreground and background-color can be specified using HTML/CSS colour names (e.g. "Salmon"), RGB hex values (e.g. "#80FF00"), RGB CSS style values (e.g. "rgb(255,128,0)")
fontWeight, fontStyle, textDecoration - can be used to style the highlight with standard CSS values.

And we are-

Share it💚 with someone who may benefit from this
❤️ Happy Coding!
Follow for more!

10 UI and UX Principles while styling with CSS

devkoustav — Sat, 22 Oct 2022 10:27:51 +0000

Yes, I can understand there are times when coding goes well but the design doesn't

So, here are 10 UI and UX Principles while styling with CSS

a) Use appropriate icon set for all buttons. If you do not have proper icons, you can download or use link in stylesheet from Google Fonts.

Or you can use octicons.

You can also use icons in emoji format. If you want to know the hex code of the emojis you can refer to W3 Schools Emoji Reference. You can also use some shortcuts for emojis
For Windows: Windows + .
For MacOS: CMD + CTRL + space
This will increase the accessibility of the website.

b) Put a help button. It should direct the user to any documentation, video tutorial of the product, map of the website or the Customer support of the website.

c) Be consistent with colors. Instead of using multiple colors in multiple places decide a color theme for your website. Make sure that the colors make a sharp difference.

Here’s a color theme as an example-

:root {
     --primary-color: #F0F0F0;
     --secondary-color: #FFFFFF;
     --text-color: #121212;
     --success-color: #2CE840;
     --danger-color: #FF5252;
}
.dark-mode {
     --primary-color: #121212;
     --secondary-color: #4B4B4B;
     --text-color: #FFFFFF;
     --success-color: #2CE840;
     --danger-color: #FF5252;
}

Here, var(--primary-color) will be the background-color, var(--secondary-color) will be the background-color of elements and var(--text-color) will be the text color.
If you are not sure which colors to use you can take help from Color Hunt. Use :root {} and define in it the colors and use var(--colorname) to use the colors. This will also help you while making the dark mode of the website. You can also get help for selecting colors from Adobe Colors

d) Be consistent with fonts. Use a maximum of 4 fonts and a minimum of 4 fonts for your projects. Give a different font for your heading and body text.
You can check Google Fonts for this purpose. You can get a lot of free fonts from there.

Well in my case I generally use some of these fonts based on the project-
'Roboto', sans-serif
'Nunito Sans', sans-serif
'Montserrat', sans-serif
'Source Code Pro', monospace
'Playfair Display', serif
'Rajdhani', sans-serif
'Aref Ruqaa', serif
'Amatic SC', cursive

Firefox has written a wonderful article on choosing fonts, font sizes, etc.

You should be clear about the importance of each text and arrange it in font10, font20, ... and so on

e) Follow color standards. A warning message should have red background. A note message should have a yellow background. A success message should have a green background. A tips message should be in blue background.

f) Don’t make it messy. Use proper word-spacing, letter-spacing, padding and margin.
The padding should be enough.
The background-color here var(--primary-color) should not visible a lot. Instead, the elements should have enough blank space which covers up over the background.

g) Try to make the buttons rectangular. So when the word is small, use more horizontal padding than vertical padding.

h) Use :hover and :active pseudo classes on buttons The background-color difference between the normal state and the :hover state should have a sharp contrast whereas the :hover state and :active state should have less contrast.

i) Use user-select: none; on buttons so that when the user double clicks it doesn't select the content within the button.

j) Use :focus pseudo class for inputs. The :focus state should have a border.

Here's one extra-

k) Use loading="lazy" in the images. For eg. <img src="/images/sky.png" loading="lazy">. This way only the picture which are needed at the moment will only load. The loading time of the website will decrease a lot then!

Check out the whole series!
Share it💚 with someone who may benefit from this
❤️ Happy Coding!
Follow for more!

3 ways to display content on hovering over an element using only CSS

devkoustav — Fri, 14 Oct 2022 03:44:05 +0000

Method 1 : Using `<dfn>..</dfn>` Tag in HTML with the `title` attribute and styling the `title` attribute with CSS

HTML

<dfn title="Official website is dev.to">Dev</dfn> is a community 
of software developers getting together to help one another out.

The text(Here Dev) within the <dfn> tag will be in italic by default.
We will style title="Official website is dev.to" attribute to our requirements.

CSS

dfn[title] {
    position: relative;
}
dfn[title]::after {
    content: attr(title);
    position: absolute;
    display: block;
    background-color: #121b22;
    color: #c8cccf;
    font-size: 16px;
    bottom: 100%;
    white-space: nowrap;
    padding: 10px;
    border-radius: 6px;
    left: 30%;
    transform: scale(0);
    transition: ease-out 300ms;
}
dfn[title]:hover::after {
    transform: scale(1);
}

Method 2 : Using Only Pseudo Elements `::before` or `::after` with Pseudo class `:hover`

We will display a text over the word dev.

HTML

<span id="dev-describe">Dev</span> is a community of software developers getting together to help one another out.

We will use this sequence -
element --> on hover --> display ::before or ::after

CSS

#dev-describe:hover::before {
    content: "Official website is dev.to";
    background-color: #ff746b;
    color: #ffffff;
    position: absolute;
    bottom: 10px;
    padding: 6px 12px;
    border-radius: 6px;
}

And then position your content as per your requirements!

Method 3 : Using the attribute `data-*` for the element

HTML

<a  href="https://dev.to/"  data-explain="A community of software developers getting together to help one another out">Dev</a>

CSS

a[data-explain] {
    position: relative;
}
a[data-explain]::after {
    content: attr(data-explain);
    position: absolute;
    display: block;
    background-color: #121b22;
    color: #c8cccf;
    font-size: 16px;
    bottom: 100%;
    white-space: nowrap;
    padding: 10px;
    border-radius: 6px;
    left: 30%;
    transform: scale(0);
    transition: ease-out 300ms;
}
a[data-explain]:hover::after {
    transform: scale(1);
}

Check out the whole series!
Share it💚 with someone who may benefit from this
❤️ Happy Coding!
Follow for more!

Responsive Log In + Sign Up Form | Day 4 | 50 Days of Intermediate HTML and CSS Projects

devkoustav — Thu, 01 Sep 2022 14:45:01 +0000

Making a Responsive Login Form with HTML & CSS

What will we come up with? 💚

Let's create it🎯🔥

🎯 Body Structure

HTML

<form>

    <h2>Login Here</h2>

    <label for="username">Username</label>
    <input type="text" placeholder="Enter your User " id="username">
    <label for="password">Password</label>
    <input type="password" placeholder="Enter a 8+ character password" id="password">

    <button>Log In</button>

    <div class="sociallogin">
      <div class="go"><b class="fab fa-google"></b> Google</div>
      <div class="fb"><b class="fab fa-facebook"></b> Facebook</div>
    </div>

  </form>

📢 Tip💡

If you want to put the * mark to show required -

use - <sup>*</sup>

CSS

Some fixed values.

* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

Styling the body....🔥

body {
    background-image: url("https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0bo50etkr3xgjgjcp4z8.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    font-family: 'Nunito', sans-serif;
  }

📢 Tip 💡

To make the form look cool💚 use-

::selection {
    color: #003300;
    background-color: #e6ffe6;
  }

By the way I have covered this ::selection in Day 2. If you haven't read it yet...give it a look...!

Let's style the form..💚

form {
    height: 520px;
    width: 400px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
    padding: 50px 35px;
  }

  form * {
    color: #ffffff;
    letter-spacing: 0.5px;
    outline: none;
    border: none;
  }

transform: translate(-50%, -50%); is used to bring the form in center
blur is used to give the frosted glass effect over the background image.
We will use position: absolute;

Let's style Login Here 💚

form h2 {
    font-size: 32px;
    font-weight: 500;
    line-height: 42px;
    text-align: center;
    font-family: 'Playfair Display', serif;
  }

Now comes the label

label {
    display: block;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 500;
  }

Now input💚

input {
    display: block;
    height: 50px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.07);
    border-radius: 3px;
    padding: 0 10px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 300;
  }

🎯 Tip 💡

Use the :focus for cool look...
The style will be shown when user clicks on the input section to type.

input:focus {
    border-style: solid;
    border-color: rgb(0, 179, 0);
    border-width: 1px;
    box-shadow: 0 4px 8px 0 rgb(0, 179, 0, 0.3),
      0 6px 20px 0 rgb(0, 179, 0, 0.2);
  }

The placeholder

::placeholder {
   color: #e5e5e5;
 }

Here's the Log In button💚

button {
    margin-top: 50px;
    width: 100%;
    background-color: #ffffff;
    color: #080710;
    padding: 15px 0;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
  }

Styling the social icons - Google & Facebook

.social {
    margin-top: 30px;
    display: flex;
  }
.social .fb{
  margin-left: 25px;
}
.social b{
  margin-right: 4px;
}
.social div {
   background: red;
   width: 150px;
   border-radius: 3px;
   padding: 5px 10px 10px 5px;
   background-color: rgba(255, 255, 255, 0.27);
   color: #eaf0fb;
   text-align: center;
}

🎯 Tip 💡

To give some cool look let's use-

:hover - when mouse is placed over the
:active - when the div is clicked

. button div:hover {
    background-color: rgba(255, 255, 255, 0.47);
  }
.button div:active {
    background-color: rgba(255, 255, 255, 0.60)
.social div:hover {
    background-color: rgba(255, 255, 255, 0.47);
  }
.social div:active {
    background-color: rgba(255, 255, 255, 0.60)
  }

CONGRATULATIONS✨ WE MADE

A Responsive Login Form

Now it's your turn 🎯

🎯 Task of the Day🔥
1.

Try this

Sign Up Form

Credits
Images - Unsplash
Fonts - Google Fonts

Check out the whole series!
Share it💚 with someone who may benefit from this
❤️ Happy Coding!
Follow for more!

Making a Responsive & Interactive Banner Ad with CSS

devkoustav — Tue, 30 Aug 2022 08:51:00 +0000

Let's make better banner ads!

Our Aim

Making Responsive Banner Ad with HTML and CSS

👉🏻 Here's what we will come up with-

on hover

🎯 Let's Plan

👉🏻 Our body structure

card

card-body

card-pic
card-describe

card-describe>p:nth-child(1)
card-describe>p:nth-child(2)
card-describe>p:nth-child(3)

card-coupon

Now let's do it

🎯 HTML

<div class="card">
    <a href="https://dev.to/koustav/" id="ad-card">
        <div class="card-body">
            <div class="card-pic">
                <img loading="lazy" src="https://doodleipsum.com/150/flat?i=982653932eabcb86283b22f6dee0aec2"
                    alt="advertising image" />
            </div>
            <div class="card-describe">
                <p>30% Off on all Courses... 🔥</p>
                <p>50 days of Intermediate HTML and CSS Projects on dev.to</p>
                <p>Use Coupon Code: <span id="card_coupon">devkoustav</span></p>
            </div>
        </div>
    </a>
</div>

📢 Tip 💡

Use <a> ... </a> over the whole card, so that the user can move to that page by clicking anywhere on the card. That's a good UX practice. But wait don't put <a> ... </a> outside the whole card element. This way if your card is not acquiring the full width, then clicking on any blank side of the card will redirect the user to the website.
Use loading="lazy" in images so that the image is loaded when needed. This way the images which are at the starting loads first and therefore the loading time decreases.

🎯 CSS

Let's put some values in :root which we will use later

:root {
  --font-family-aref: "Aref Ruqaa", serif;
  --font-family-rajdhani: "Rajdhani", sans-serif;
  --font-family-source: "Source Code Pro", monospace;
}

📌 class card which contains whole banner

.card { 
    border-radius: 7px;
    padding: 7px;
    width: fit-content;
    margin: 20px auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
    z-index: 1;
    overflow: hidden;
}

Don't put user-select: none; in the card. The users might want to copy the coupon code!

📌 Now let's style the class card-body which contains the content of the banner

.card-body {
  display: flex;
  gap: 15px;
}

When you do display: flex; the default is flex-direction: row;

Now we want that when the user hovers on the card the a text comes over the card telling - See the Courses >>

We will user ::after and :hover::after for this

.card-body::after {
  content: "See the Courses >> ";
  font-size: 18px;
  font-family: var(--font-family-rajdhani);
  font-weight: 600;
  position: absolute;
  backdrop-filter: blur(10px);
  padding: 4px 8px;
  color: red;
  transform: scale(0);
  transition: ease-out 200ms;
}
.card-body:hover::after {
  transform: scale(1);
}

The content: "See the Courses >> "; is made to transform: scale(0); and when the user hovers transform: scale(1); is applied.

📌 Now let's style the <a>

We want to remove the default text-decoration and color of the browser.

a#ad-card {
  text-decoration: none;
  color: #121212;
}

📌 class card-pic contains the ad image..

.card-pic {
    border-radius: 7px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.02), 0 6px 20px 0 rgba(0, 0, 0, 0.09);
}

📌 class card-describe contains all the written content..

.card-describe {
    line-height: 20px;
}

📌 1st paragraph contains the headline of ad [Here 30% off]

.card-describe>p:nth-child(1) {
    color: red;
    font-size: 27px;
    font-family: var(--font-family-rajdhani);
    font-weight: 600;
}

.card-describe>p:nth-child(1) means 1st paragraph under class card-describe

📌 2nd paragraph contains the topic of ad

.card-describe>p:nth-child(2) {
    font-size: 18px;
    font-family: var(--font-family-aref);
    font-weight: 500;
}

📌 3rd paragraph contains the coupon code

.card-describe>p:nth-child(3) {
    color: green;
    font-size: 20px;
    font-family: var(--font-family-source);
    font-weight: 500;
}

📌 id card-coupon contains the coupon code...

#card-coupon {
    background-color: red;
    padding: 4px 8px;
    color: white;
    border-radius: 4px;
}

📌 Now we will add some :hover effect, :active effects to make the card look more lively..

.card:hover {
    transform: scale(1.03);
}
.card:active {
    color: red;
}

And we are

🎯 Task of the Day

👉🏻 Make these-

2.
Image of Carbon Ad from getbootstrap.com

📢 Tip of the Day 💡

Want great color scheme for your website?
Use these-

👉🏻 Few Credits
Fonts - fonts.google.com
Image - Doodleipsum

Check the series!
❤️ Happy Coding!
Follow up for more!

Text Selection CSS Effects | Color, Background, Shadow, Prevent Selection | Day 2 | 50 Days of Intermediate HTML + CSS Projects

devkoustav — Mon, 29 Aug 2022 06:44:00 +0000

Style your webpage according to your theme by changing the Text Selection Effects🔥

👉🏻 We will use the parent class change within which we will define 4 classes to know the text selection CSS-

change-background-color - to change background color
change-color - to change text color
change-shadow - to change text shadow color
change-color-shadow-background - to change text color, shadow and background color.

Default text selection without CSS styling

HTML

<p>
  <b>SELECT ME :</b> This is the default text selection styling.
</p>

👉🏻 Here's how it will come up-

🎯 Changing text selection color using CSS

HTML

<p class='change change-color'>
  <b>SELECT ME :</b>
  Now the text will show different text color on selection.
</p>

We will use the pseudo element
::selection for the <p>

CSS

.change-color::selection {
  color: rgba(3, 218, 198, 1);
}

👉🏻 Here's how it will come up- 🔥

🎯 Changing text background color on selection using CSS

HTML

<p class='change-background-color'>
  <b>SELECT ME :</b>
  Now the text will show different text background color on selection.
</p>

CSS

.change-background-color::selection {
  background-color: #ff8080;
}

👉🏻 Here's how it will come up-

🎯 Changing text shadow on selection using CSS

HTML

<p class='change-shadow'>
  <b>SELECT ME :</b>
  Now the text will show different text-shadow on selection.
</p>

CSS

.change-shadow::selection {
  text-shadow: 1px 1px 0 #ff1a1a;
}

👉🏻 Here's how it will come up-

🎯 Changing text background color, text color and text shadow on selection using CSS

HTML

<p class='change-color-shadow-background'><b>SELECT ME :</b>
  Now the text will show different text-color, text-shadow and text-background-color on selection.
</p>

CSS

.change-color-shadow-background::selection {
  text-shadow: 1px 1px 0 #27ae60;
  color: white;
  background-color: #ffd24d;
}

👉🏻 Here's how it will come up-

🎯 Using Universal `::selection`

Instead of using ::selection in every object, use it only once for the whole body. Make sure your styling is according to your theme.

CSS

::selection
{
  background-color: #121212;
  color: #fffffff;
}

❌ Preventing user from selecting text using CSS❗

CSS

{
 -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

Task of the Day 💡

Make a page in dark mode and a page in light mode and customize the page according to the theme.

Tip of the Day 💡

Using Chrome?
Use these extensions to make your web styling better-

WhatFont - Check font styles used in any webpage.

ColorZilla - Get the color of any pixel on the page.

Check the series!
❤️ Happy Coding!
Follow up for more!

Creating Styled Boxes for Errors, Success, Examples, Notes and Tips | Day 1 | 50 Days of Intermediate HTML + CSS Projects

devkoustav — Fri, 19 Aug 2022 21:52:00 +0000

Creating Styled Boxes for Success, Errors, Notes, Warnings, Examples, and Tips

👉🏻 Want to make boxes like-

This is a box from GitHub

🎯 OBJECTIVE
Making-

👉🏻 We will make a parent div of class outside, giving us the background and a child div of class inside having the content.
👉🏻 We will style it by CSS to get attractive boxes.

🎯 Process 1

HTML

<div class="outside outside-tip">
   <div class="inside inside-tip">
      <div id="head">&#128161; Tip : </div>
         <ul>
             <li>Try this on your own.</li>
             <li>Try playing with the CSS.</li>
         </ul>
    </div>
</div>

CSS

body
{
    color: #000000;
    font-size: 19px;
    font-family: 'Nunito Sans', sans-serif;
}
#head
{
    font-weight: 700;
    font-family: 'Chivo', sans-serif;
    font-size: 20px;
    color: #987a00;
}
.outside-tip
{
    border: solid 2px #ffd500;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    line-height: 25px;
    overflow: hidden;
    padding: 15px 60px;
    background-color: rgb(255, 249, 208);
    margin: 60px;
}

It will come up as...

🎯 Process 2

HTML

    <div class="outside outside-warning">
        <div class="inside inside-warning">
            <div id="head">&#128683; Warning : </div>
               Stay away from frauds..
        </div>
    </div>

CSS

body
{
    color: #ff4444;
    font-size: 19px;
    font-family: 'Nunito Sans', sans-serif;
}
#head
{
    font-weight: 700;
    font-family: 'Chivo', sans-serif;
    font-size: 20px;
    color: #ff0a0a;
}
.outside-warning
{
    border: solid 2px #ff4444;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    line-height: 28px;
    overflow: hidden;
    padding: 10px 60px;
    background-color: rgb(255, 235, 235);
    margin: 60px;
}
.inside-warning
{
    border-left: solid 3px #ff4444;
    padding-left: 20px;
}

It will come up as...

🎯 Process 3

HTML

    <div class="outside outside-note">
        <div class="inside inside-note">
            <div id="head">Note : </div>
            <ul>
                <li>This is HTML code.</li>
                <li>It is styled by CSS.</li>
            </ul>
        </div>
    </div>

CSS

body
{
    color: #000000;
    font-size: 19px;
    font-family: 'Nunito Sans', sans-serif;
}
#head
{
    font-weight: 700;
    font-family: 'Chivo', sans-serif;
    font-size: 20px;
    color: #0078c2;
}
.outside-note
{
    background-color: #f0f7fb;
    border-left: solid 4px #3498db;
    line-height: 25px;
    overflow: hidden;
    padding: 12px;
    margin: 60px;
}

It will come up as...

Give a Shadow Effect 💡

Give a shadow effect around the boxes to give it a 3D look. Use the css to the parent div -

CSS

{
    box-shadow: 0 1px 2px rgba(0,0,0,0.07), 
                0 2px 4px rgba(0,0,0,0.07), 
                0 4px 8px rgba(0,0,0,0.07), 
                0 8px 16px rgba(0,0,0,0.07),
                0 16px 32px rgba(0,0,0,0.07), 
                0 32px 64px rgba(0,0,0,0.07);
}

Colors and their Visual Symbols 💡

Keep in mind the accessibility while choosing your colors.

Red is used for warnings and to indicate danger
Orange can be used for cautions as well
Notes can be blue
Examples can be green
Tips can be yellow

🎯 Try these by Yourself --

1.

2.

3.

📢 Tip of the Day 💡

Want free images and logos for your next project?

Use-

Check out the whole series!
Share it💚 with someone who may benefit from this
❤️ Happy Coding!
Follow for more!

DEV Community: devkoustav

Filtering and Retrieving in SQL

Step 1: SELECT

Step 2: FROM and JOIN Clauses

Step 3: WHERE Clause

Step 4: ORDER BY

Python Time Module | Useful Functions | How to Use? | Applications in Real Models | 2 Real World Programs

📌 How to import Time Module in Python?

📌 What is epoch?

time.gmtime(0) Function in Python

📌 How to get the current time in seconds since epoch?

time() Function in Python

📌 How to get time in string from seconds?

time.ctime() Function in Python

📌 How to calculate execution/running time of a Python Program?

📌 How to delay execution of a python program?

sleep() Function in Python

📌 How to converts a tuple representing a time as returned by gmtime() to a specific format?

time.strftime() function in Python

📌 How Python Time module is used in Building time-based animations?

📌 How to make a stopwatch using Python Time Module?

📌 How to implement a Pomodoro Timer using Python Time Module

The Need for Speed: HTML & CSS Tips to Boost Your Page Loading Time by 10x

1. Lazy Loading

a) Splitting CSS File

b) font-display property of CSS

c) Images in the HTML File

2. Choosing the right Image Format

WebP vs PNG Image Format

WebP vs JPEG Image Format

📌 Use <picture> element for the images

3. Rendering Images

4. Minifying HTML and CSS Files

How a VS Code Extension "Todo Tree" can make your coding easier | Todo Tree Configuration | Highlighting Comments in VS Code

Highlighting Comments with Todo Tree VS Code Extension

10 UI and UX Principles while styling with CSS

3 ways to display content on hovering over an element using only CSS

Method 1 : Using <dfn>..</dfn> Tag in HTML with the title attribute and styling the title attribute with CSS

HTML

CSS

Method 2 : Using Only Pseudo Elements ::before or ::after with Pseudo class :hover

HTML

CSS

Method 3 : Using the attribute data-* for the element

HTML

CSS

Responsive Log In + Sign Up Form | Day 4 | 50 Days of Intermediate HTML and CSS Projects

Making a Responsive Login Form with HTML & CSS

HTML

CSS

A Responsive Login Form

Sign Up Form

Making a Responsive & Interactive Banner Ad with CSS

Making Responsive Banner Ad with HTML and CSS

🎯 Let's Plan

🎯 HTML

🎯 CSS

📢 Tip of the Day 💡

Text Selection CSS Effects | Color, Background, Shadow, Prevent Selection | Day 2 | 50 Days of Intermediate HTML + CSS Projects

Style your webpage according to your theme by changing the Text Selection Effects🔥

Default text selection without CSS styling

HTML

🎯 Changing text selection color using CSS

HTML

CSS

🎯 Changing text background color on selection using CSS

HTML

CSS

🎯 Changing text shadow on selection using CSS

HTML

CSS

🎯 Changing text background color, text color and text shadow on selection using CSS

HTML

CSS

🎯 Using Universal ::selection

CSS

❌ Preventing user from selecting text using CSS❗

CSS

Task of the Day 💡

Tip of the Day 💡

Step 1: `SELECT`

Step 2: `FROM` and `JOIN` Clauses

Step 3: `WHERE` Clause

Step 4: `ORDER BY`

📌 How to converts a tuple representing a time as returned by `gmtime()` to a specific format?

b) `font-display` property of CSS

📌 Use `<picture>` element for the images

Method 1 : Using `<dfn>..</dfn>` Tag in HTML with the `title` attribute and styling the `title` attribute with CSS

Method 2 : Using Only Pseudo Elements `::before` or `::after` with Pseudo class `:hover`

Method 3 : Using the attribute `data-*` for the element

🎯 Using Universal `::selection`