DEV Community: mohiyaddeen7

Mastering Error Boundaries in React: Why & How 🚨

mohiyaddeen7 — Sat, 09 Nov 2024 05:07:59 +0000

Why Use Error Boundaries?

Why Use Error Boundaries?

React applications, like any software, are prone to runtime errors—especially in production. Errors can cause parts of your app to crash, disrupting the user experience. React’s Error Boundaries let you catch these errors gracefully, allowing you to handle them without bringing down the entire application.

Since React 16, Error Boundaries have helped developers capture errors in the component tree and provide fallback UIs, making your app more resilient.

What Are Error Boundaries? 🤔

By default, if your application throws an error during rendering, React will remove its UI from the screen. To prevent this, you can wrap a part of your UI into an error boundary. Error Boundaries are special components that catch JavaScript errors in their child component tree, log them, and display a fallback UI. They prevent the error from “bubbling up” and crashing the entire app. However, they only catch errors in lifecycle methods, render methods, and constructors of child components.

Creating an Error Boundary

To create an Error Boundary, define a class component with two lifecycle methods:

static getDerivedStateFromError(error): Update state when an error is caught.
componentDidCatch(error, info): Log the error.

Example Implementation :

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Log the error to an error reporting service
    console.error("Error caught in ErrorBoundary:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Render a fallback UI
      return <h1>Oops! Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Example Usage :

import React, { useState, useEffect } from 'react';
import ErrorBoundary from './ErrorBoundary';

function UserProfile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // Simulating an error (e.g., a failed API request)
    throw new Error("User data failed to load!");
  }, []);

  return <div>{user ? user.name : "Loading..."}</div>;
}

function App() {
  return (
    <ErrorBoundary>
      <UserProfile />
    </ErrorBoundary>
  );
}

export default App;

In this example:

If UserProfile throws an error (like an error from useEffect), the Error Boundary will catch it and render the fallback UI. **

Real-World Scenario 🌍

Imagine you have a dashboard component that displays user data. Occasionally, the API may fail, causing your UserProfile component to throw an error. By wrapping it in ErrorBoundary, you ensure that a friendly message is shown while you troubleshoot the issue.

Limitations:

Error Boundaries don't catch errors in event handlers, asynchronous code (like promises), or in code that happens outside the rendering lifecycle.
If you want to catch errors inside event handlers or asynchronous code in functional components, you would need to wrap those specific operations in try-catch blocks or use a different error handling method (e.g., error boundaries for asynchronous code).

Wrapping Up

Error Boundaries provide a safety net for handling unexpected errors, letting you manage and recover gracefully. Try adding them around crucial components, especially where data is fetched or critical features are rendered.

Let's connect on LinkedIn 🚀

Happy coding✌🏻

Please don't hesitate to ask doubts in the comments section—I'll be sure to respond promptly. Your inquiries are greatly welcomed and will receive a swift and thorough reply.❤️

Linear Regression : From Theory to Practice

mohiyaddeen7 — Wed, 06 Nov 2024 10:38:51 +0000

In this guide, we’ll explain linear regression, how it works, and walk you through the process step-by-step. We’ll also cover feature scaling and gradient descent, key techniques for improving your model’s accuracy. Whether you’re analyzing business trends or diving into data science, this guide is a great starting point.

Introduction
Understanding Supervised Learning
What is Linear Regression?
Simple Linear Regression
Multiple Linear Regression
Cost Function
Feature Scaling
Gradient descent
Gradient descent for simple linear regression
Gradient descent for multiple linear regression

Introduction

Linear regression is a simple yet powerful tool used to understand relationships between different factors and make predictions. For instance, you might want to know how your study hours impact your test scores, how much a house could sell for based on its size and location, or how sales might increase with more advertising. Linear regression allows us to examine data points — like hours studied or advertising spend — and draw a straight line that best predicts an outcome, such as test scores or sales figures. This technique is valuable in many areas, helping us make informed decisions based on data.

Understanding Supervised Learning

Before diving into linear regression, it’s essential to understand supervised learning, a machine learning approach that uses labeled data to train models. In supervised learning, we provide the model with training examples that include features (input variables) and their corresponding labels (correct outputs).

There are two main types of supervised learning tasks:

Regression: This predicts a continuous value from an infinite range of possible outputs. For example, predicting house prices based on various features.
Classification : This differs from regression by predicting a class or category from a limited set of possible categories. For instance, determining whether an email is spam or not.

What is Linear Regression?

Linear regression is a supervised learning method used in statistics and machine learning to understand the relationship between two types of variables: independent variables (the factors we think influence an outcome) and a dependent variable (the outcome we want to predict).

The goal is to find the best-fit line that represents this relationship using a linear equation. By analyzing labeled data (data with known outcomes), linear regression helps us understand how changes in the independent variables influence the dependent variable.

Terminology

Simple Linear Regression

Simple linear regression examines the relationship between one dependent variable and one independent variable. It aims to model the relationship by fitting a straight line to the data points, which can be expressed with the equation:

In this equation:

y_hat(or f_wb(x)) :The dependent variable, which represents the outcome being predicted. This is the value we aim to estimate based on the input from the independent variable.
b : This is the intercept of the regression line. It signifies the expected value of the dependent variable y when the independent variable x is zero. The intercept allows the regression line to adjust vertically to better fit the data.
w : The coefficient of the independent variable x. This coefficient indicates how much the dependent variable y_hat changes for a one-unit change in x. A positive w suggests that as x increases, y_hat also increases, while a negative w indicates an inverse relationship.
x : The independent variable, which serves as the predictor in the model. This variable is the input used to estimate the outcome represented by y_hat.

Multiple Linear Regression

Multiple linear regression extends the concept of simple linear regression by examining the relationship between one dependent variable and two or more independent variables. This approach allows us to model more complex relationships and understand how multiple factors influence the outcome.

Where :

n : Total number of features (independent variables)

Cost Function

The cost function, also known as the loss function, quantifies the difference between the expected (true) values and the predicted values generated by the model. It measures how well the model performs on a given dataset.In simple linear regression, the most commonly used cost function is the Mean Squared Error.

Where :

m is the number of training examples
y_hat is the predicted value
y is the actual or expected value

Feature Scaling

Feature scaling is a crucial step in the preprocessing of data, especially when working with algorithms that rely on distance calculations or gradient descent optimization, such as linear regression, logistic regression, and support vector machines. The purpose of feature scaling is to standardize the range of independent variables or features in the data to ensure that they contribute equally to the model’s learning process.

Common Techniques for Feature Scaling

Mean Normalization

Mean normalization involves adjusting the values of features to have a mean of zero.

Characteristics

Data ranges from approximately [−1,1] or close to it.
Sensitive to outliers, which can skew the mean and affect the normalization.

Use Cases

Linear Regression : Helps in improving convergence during training.
Gradient-Based Algorithms : Neural networks and other gradient-based algorithms often converge faster when data is centered around zero.
Datasets without Significant Outliers : Particularly effective for datasets with similar ranges and no extreme outliers.

Min-Max Scaling

Min-Max scaling is a technique used to re-scale features to a fixed range, typically [0,1] or [−1,1].

Characteristics

Fixed Range : Scales data to a specific range, usually [0,1].
Sensitivity to Outliers : It can be affected significantly by outliers, which may distort the scaling of the other values.

Use Cases

Image Processing : Commonly used in deep learning models like Convolutional Neural Networks (CNN’s), where pixel values are scaled to [0,1].
Distance-Based Algorithms : Essential for algorithms that rely on distance calculations, such as k-nearest neighbors (KNN), k-means clustering, and support vector machines (SVM), to ensure equal contribution from all features.
Tree-Based Models : Although less critical for tree-based models (like decision trees and random forests) compared to other algorithms, it can still help in scenarios where features have vastly different scales.

Z-Score Standardization

Z-score standardization, also known as standard scaling, transforms features to have a mean of zero and a standard deviation of one. This technique is particularly useful for algorithms that assume normally distributed data.

Where :

sigma is the standard deviation of the feature.

Characteristics

Mean Centered : Centers data at zero.
Unit Variance : Ensures a standard deviation of one.
Robustness to Outliers : More robust compared to Min-Max scaling but still sensitive to extreme outliers.

Use Cases

Neural Networks : Enhances performance and speeds up convergence during training.
Principal Component Analysis (PCA) and Linear Discriminant Analysis (LDA) : Required for these techniques to ensure all features contribute equally.
Gaussian Naive Bayes: Improves classification performance by normalizing input features.

Robust Scaling

Robust scaling is a technique used to scale features based on the median and interquartile range (IQR). This method is particularly useful for datasets with significant outliers, as it reduces the influence of these outliers on the scaled values.

Where :

IQR(x) is the interquartile range of the feature, defined as the difference between the 75th and 25th percentiles of the training set

Characteristics

Median Centered : Centers the data around the median instead of the mean, making it more resilient to outliers.
Interquartile Range (IQR) : Scales the data using the IQR, which is the difference between the 75th percentile (Q3) and the 25th percentile (Q1) of the training data. This helps preserve the distribution’s robustness.

Use Cases

Data with Outliers : Effective in scenarios where outliers are present.
Finance: Useful in financial datasets that may contain extreme values.
Environmental Data : Applies well to environmental datasets where measurements can vary widely.

Gradient Descent

Gradient descent is a powerful optimization algorithm used to train machine learning models, including linear regression. Its primary goal is to minimize the error between expected and predicted values.

Initially, the slope of the cost function may be steep at a starting (arbitrary) point. As the algorithm iterates and updates parameters, the slope gradually decreases, guiding the model toward the lowest point of the cost function, known as the point of convergence or local minima. At this convergence point, the cost function reaches its minimum value, indicating that the model predictions are as close as possible to the actual values. Once the parameters reach this point, further updates yield minimal changes to predictions, demonstrating that the optimization process has effectively identified the best-fitting parameters for the data.

The process involves the following key steps:

Initialization : Start with random values for the model parameters (e.g., the intercept b and coefficients w).
Calculate the Gradient : Compute the gradient of the cost function with respect to the model parameters. This gradient represents the direction and rate of change of the cost function.
Update Parameters : Adjust the model parameters in the opposite direction of the gradient to reduce the error. The update rule is given by:
Iterate : Repeat the process until the changes in the cost function are minimal or a specified number of iterations is reached.

TIPS : Plot iterations (x-axis) versus cost (y-axis). If the plot shows a smooth, downward trend, your implementation is likely correct.

Types of Gradient Descent

Batch Gradient Descent

Advantages : Provides a stable and accurate estimate of the gradient since it uses the entire dataset. It can converge directly to the global minimum for convex functions.
Disadvantages : Can be very slow for large datasets since it processes all samples in every iteration.
Use Cases : Often used in scenarios where the dataset is small enough to fit in memory, such as linear regression or logistic regression on tabular data.

Stochastic Gradient Descent (SGD)

Advantages : Faster updates since it processes one sample at a time, which can lead to quicker convergence. It can help escape local minima due to its inherent noise.
Disadvantages : Convergence is more erratic and may oscillate around the minimum, making it less stable.
Use Cases : Commonly applied in online learning scenarios, real-time prediction, or when dealing with large datasets that cannot be processed in their entirety, such as training neural networks on image data.

Mini-batch Gradient Descent(MBD)

Advantages : Combines the advantages of both batch and stochastic gradient descent. It leads to faster convergence than batch gradient descent and more stable convergence than SGD. It can also leverage vectorization for efficient computation.
Disadvantages : Choosing the size of the mini-batch can be challenging and may affect convergence speed and stability.
Use Cases : Frequently used in deep learning applications, especially when training on large datasets, such as image classification tasks in convolutional neural networks (CNN's) or natural language processing models.

Gradient Descent for Simple Linear Regression

Gradient Descent Steps for Simple Linear Regression

Initialization Start with initial values for the model parameters. These values can be chosen randomly or set to zero.

Calculate the Gradient Compute the gradient of the cost function with respect to the model parameters. This gradient represents the direction and rate of change of the cost function.

Update Parameters Adjust the model parameters in the opposite direction of the gradient to reduce the error. The update rule is given by:

where :

J(w, b) is the cost function, which is the mean squared error (MSE) used above.
Alpha is the learning rate, a small positive number between 0 and 1. It controls the size of the step that gradient descent takes downhill to reach the point of convergence or a local minimum.

TIPS : Start with a small learning rate (e.g., 0.01) and gradually increase it. If the cost decreases smoothly, it’s a good rate. If it fluctuates or diverges, reduce the learning rate. A learning rate that’s too large can cause gradient descent to overshoot, never reach the minimum, and fail to converge.

Iterate : Repeat the process until the changes in the cost function are minimal or a specified number of iterations is reached.

Python Implementation of Gradient Descent for Simple Linear Regression

Gradient Descent for Multiple Linear Regression

Gradient Descent Steps for Multiple Linear Regression

Initialization Begin with random values for each parameter, including the intercept b and the weights w for each feature.

Calculate the Gradients Compute the gradient of the cost function with respect to the model parameters.

Vector Form

Where :

x_subscript_j_superscript_i is the j_th feature of the i_th training example
x_superscript_T is the transpose of vector x

Update Parameters Adjust the model parameters in the opposite direction of the gradient to reduce the error. The update rule is given by:

Iterate Repeat the process until the changes in the cost function are minimal or a specified number of iterations is reached.

Python Implementation of Gradient Descent for Simple Linear Regression

Conclusion

Congratulations!! 💫 In this post, we’ve explored the fundamentals of linear regression and multiple linear regression, walked through the process of implementing gradient descent, and discussed key techniques like feature scaling to optimize model performance. By understanding how to initialize model parameters, compute gradients, and iteratively update weights, you’re now well-equipped to implement linear regression algorithms and boost their performance on real-world datasets.

Whether you’re working with simple linear regression or navigating the complexities of multiple features, mastering gradient descent and grasping its core principles will significantly enhance your ability to develop accurate and efficient machine learning models. Keep experimenting, refining your skills, and embracing the learning process — it’s just as important as the results themselves!

Stay tuned for more insights into machine learning techniques and web development topics. Happy learning as you continue exploring and building smarter models! 💫💫

Let's connect on LinkedIn 🚀

"This article was originally posted on Medium, where I share more insights on data analysis, machine learning, and programming. Feel free to check it out and follow me there for more content!"

Please Like, Share and Follow 🙏.

Feel free to ask any questions in the comments section—I'll respond promptly and thoroughly to your inquiries. Your doubts are warmly welcomed and will receive swift and comprehensive replies. ❤️

🎨 The Ultimate Guide to Web Design : (Typography, colors, icons, images, shadows, border, white space, and visual heirarchy)

mohiyaddeen7 — Wed, 09 Aug 2023 16:06:15 +0000

Hello, fellow developers and designers! Are you ready to take your web design skills to the next level? In this post, we'll dive into 10 essential web design rules that can help you create outstanding user experiences. Whether you're a seasoned pro or just starting out, these principles will serve as a solid foundation for crafting visually appealing and user-friendly websites.

Let's get started🚀

Overview :

Prioritize User-Centered Design: Forge connections by understanding your users' needs, preferences, and behaviors. Craft interfaces that resonate and cater to their unique experiences.
Effective Typography: Choose readable fonts and sizes. Use typography to convey hierarchy and guide users through your content.
The Psychology of Colors: Delve into the psychology of colors. Understand how different colors evoke emotions, influence behavior, and shape user perceptions.
High-Quality Imagery: Images can speak louder than words. Use high-quality visuals that align with your brand and enhance the user experience.
Unleash the Power of Icons: Discover the impact of icons. Use them to enhance user understanding, convey information succinctly, and inject personality into your design.
The Magic of Shadows: Explore the Allure of shadows. Employ subtle drop shadows to create depth, contrast, and realism, adding a touch of elegance to your design.
Curves of Elegance Mastering Border Radius: Discover the allure of border radius. Play with rounded corners to soften edges, create visual interest, and add a touch of elegance.
Use White Space Wisely: White space, or negative space, gives your design room to breathe. It enhances readability and guides users' focus.
Visual Hierarchy: Arrange elements strategically to guide users' attention. Use size, color, and placement to establish a clear visual hierarchy.
Nurturing an Exceptional User Experience (UX): UX is at the heart of design. Craft intuitive navigation, minimize friction, and ensure every interaction delights users, fostering a seamless and enjoyable experience.

Prioritize User-Centered Design

When it comes to web design, the concept of giving a website a personality is a powerful way to establish a unique and memorable online presence. Just like people, websites can convey distinct personalities that resonate with users, evoke emotions, and leave a lasting impression.

Here's an overview of the different website personalities you can consider:

Serious/Elegant: Channeling luxury and refinement, this personality is characterized based on thin serif typefaces, golden or pastel colors, and big high-quality images.

Minimalist/Simple: Embracing simplicity, this personality centers around the essential text content, using small or medium-sized sans-serif black text, lines, and few images and icons

Plain/Neutral: Design that gets out of the way by using neutral and small typefaces, and a very structured layout. Common in big corporations

Bold/Confident: Makes an impact, by featuring big and bold typography, paired with confident use of big and bright colored blocks

Calm/Peaceful: For products and services that care, transmitted by
calming pastel colors, soft serif headings, and matching images/illustrations

Startup/Upbeat: Widely used in startups, featuring medium-sized sans-serif typefaces, light-grey text and backgrounds, and rounded element

Playful/Fun: Colorful and round designs, fueled by creative elements like hand-drawn icons or illustrations, animations, and fun language

Effective Typography

In the realm of design, effective typography plays a pivotal role in conveying messages, setting the tone, and guiding users through content.

Use only good and popular typefaces and play it safe: Serif,sans-serif
It’s okay to use just one typeface per page! If you want more, limit to 2 typefaces.

Serif Typeface :

Creates a traditional/classic look and feel
Conveys trustworthiness
Good for long text

Popular Serif Fonts :

Sans-serif typeface :

Modern look and feel
Clean and simple
Easier to choose for beginner designer!

Popular Sans-serif Fonts :

FONT SIZES AND WEIGHTS :

When choosing font-sizes, limit choices! Use a “type scale” tool or other per-defined range.
Use a font size between 16px and 32px for “normal” text
For long text (like a blog post), try a size of 20px or even bigger
For headlines, you can go really big (50px+) and bold (600+), depending on personality
For headlines, you can go really big (50px+) and bold (600+), depending on personality
Keep responsiveness in mind. Utilize relative units like "em" or "rem" for font sizes to ensure they adapt well to different screen sizes and maintain a harmonious visual balance across devices.
Aim for a line length that falls within the range of 50 to 75 characters for optimal readability. Lines that are too short can make the text appear fragmented, while lines that are too long can strain the reader's eyes and make it challenging to maintain focus.
Proper line spacing (line height) improves legibility. Set line height to around 1.4 to 1.6 times the font size, allowing content to breathe and reducing eye strain.
Don’t center long text blocks. Small blocks are fine

Good Design :

Bad Design :

In both designs, we have designed it with a font size of 16 px and a line height of 1.6, but the difference is that in the good design, we have not centered text blocks as text blocks are big, therefore it is comparatively better than the bad design.

The Psychology of Colors

Colors have a profound impact on human emotions, perceptions, and behaviors, making them a powerful tool in design and communication. Understanding the psychology of colors can help you create visually compelling and emotionally resonant experiences.

Here's a glimpse into how different colors influence our perceptions:

Red : draws a lot of attention, and symbolizes power, passion, and excitement. Making it suitable for calls to action and high-impact elements.

Blue : is associated with peace, trustworthiness, and reliability. Often used by brands aiming to convey professionalism and stability.

Yellow : Radiates warmth, optimism, and cheerfulness. It can promote positivity and draw attention, but excessive use may lead to visual strain.

Green : Symbolizes growth, harmony, and nature. Often associated with health, wealth, and sustainability.

Purple : Represents luxury, creativity, and spirituality. Darker shades can evoke elegance, while lighter shades exude whimsy.

Orange : Signifies enthusiasm, vitality, and friendliness. It can create a sense of excitement and encourage action.

Pink : Conveys sweetness, playfulness, and femininity. It's often used to target a youthful or romantic audience.

Black : Symbolizes sophistication, power, and formality. Can add an air of mystery and elegance to design.

White : Represents purity, simplicity, and cleanliness. Creates a sense of space and can be used to highlight other colors.

Brown : Reflects earthiness, stability, and reliability. Often associated with natural and organic themes.

Multi color : Vibrant combinations can evoke playfulness and diversity, while harmonious combinations create a sense of balance.

Maintain a focused color palette to prevent overwhelming users with excessive colors.
Align the main color with your website's personality to evoke the desired emotional response.
A balanced color palette includes at least two essential colors: a main color and a complementary gray shade.
As your expertise grows, consider introducing accent (secondary) colors to add depth and vibrancy (use color tools for precision).
Enhance diversity by crafting lighter and darker variations (tints and shades) of your chosen colors.
Use your main color to draw attention to the most important elements on the page
Elevate design impact by using colors to highlight specific components or sections, creating visual interest.
Opt for legibility by avoiding overly heavy or completely black text. Experiment with lighter tones to invite readability.
Strike a balance: Avoid making text too light, ensuring proper contrast with the background. Leverage tools to confirm a contrast ratio of at least 4.5:1 for standard text and 3:1 for larger text (18px+).
Ensure your chosen color palette remains consistent across various platforms and devices. Consistency fosters brand recognition and a seamless user experience, whether users are accessing your website on a desktop, tablet, or smartphone.

See how Yellow as my main color Radiating warmth and cheerfulness. And drawing attention.

High-Quality Imagery

In the realm of web design, the use of high-quality imagery can transform a mundane interface into a captivating visual journey. These carefully selected visuals have the power to evoke emotions, convey messages, and create a memorable impression. Here's how to harness the potential of high-quality imagery to enhance user experience:

Every image should tell a story or convey a message that aligns with your brand or content. Thoughtful imagery can captivate users and draw them into your narrative.
Select images that align with your brand's values, personality, and aesthetic. Consistency in imagery strengthens brand recognition and recall.
High-quality images convey professionalism and attention to detail. Blurry or pixelated visuals can detract from your website's credibility.
While high-quality imagery is essential, optimize images for web to ensure they load quickly. Large file sizes can slow down your website, affecting user experience.
Whenever possible, use original imagery that sets your website apart. Custom visuals can reinforce your brand's uniqueness.
Ensure images are responsive and adapt to different screen sizes. Responsive images prevent distortion and ensure a consistent experience.
Incorporating images of real people is a compelling strategy to evoke user emotions and establish a genuine connection.

Types of images with respect to web design and development :

Photographs: Real-life images captured through photography. They can depict products, people, places, and events, By incorporating these visuals, your website gains a sense of genuineness and realism.

Illustrations: Hand-drawn or digitally created visuals that add a unique and artistic touch to your design. Illustrations can simplify complex concepts or contribute to a playful atmosphere.

Hero Images: Large, attention-grabbing images placed prominently at the top of a webpage. Hero images often include text and call-to-action buttons.

Product Images: High-quality visuals showcasing products from various angles. Product images are essential for e-commerce websites to help users make informed purchase decisions.

Interactive Images: Images with interactive elements, such as clickable hot-spots or hover effects. They engage users and provide additional information.

Background Patterns: Repeating images used to create textured or patterned backgrounds. Patterns can add depth and visual interest to a webpage.

Decorative Images: Images used for visual appeal, such as dividers, borders, or ornaments. They enhance the aesthetics of a webpage without conveying specific content.

Stock Images: Professionally captured images available for licensing. Stock images are a convenient option when you need visuals but lack original content.

Important, useful, and powerful tools related to images:

Free High Quality Stock Images : Unsplash

Free High Quality Stock Images : Pexels

Free Beautiful Illustrations : DrawKit

Best Free Illustrations : unDraw

Ultimate image optimizer that allows you to compress and compare images with different codecs in your browser : Squoosh can reduce file size and maintain high quality.

Unleash the Power of Icons

Icons, those small yet impactful visual elements, possess a remarkable ability to enhance user experiences and convey information efficiently. By strategically integrating icons into your design, you can unlock a world of communication possibilities. Here's how to harness the power of icons effectively:

In the realm of design, the right set of icons can transform your creations, adding depth, clarity, and personality to your user interfaces. Luckily, there's an abundant array of free icon packs available, each offering a treasure trove of visual elements that can take your design to new heights.
Choosing a single, high-quality icon pack and sticking to it throughout your project offers numerous benefits that contribute to a polished and cohesive design.
When it comes to incorporating icons into your design, the choice of file format plays a significant role in ensuring optimal performance, scalability, and accessibility. SVG (Scalable Vector Graphics) and icon fonts offer distinct advantages over bitmap image formats like .jpg and .png.
Icons are not just visual elements; they are extensions of your design's personality and typography. By customizing their roundness, weight, and style, you can create a seamless integration that resonates with your overall design language.
when to use icons : Use icons to provide visual assistance to text
Icons can transform product feature blocks into visually engaging and informative sections, capturing users' attention and conveying key information at a glance.
Maintaining Icon Neutrality: Match the Color to Text. For Enhanced Focus: Opt for Contrasting Colors.
Preserve Icon Proportions: Avoid Enlarging Beyond Design. Consider Placing Icons within Shapes When Resizing Required.

Important, useful, and powerful tools related to Icons:

Best Free Icons : Phosphor icons

Free Icons, Photos, Illustrations, music : Icons8

Best Free Icons : Ionicons

And many more...

The Magic of Shadows

Shadows, often overlooked yet profoundly impactful, have the ability to transform two-dimensional designs into immersive and dynamic experiences. The artful use of shadows can add depth, contrast, and a touch of elegance, elevating your design to new heights. Here's a glimpse into the magic of shadows and how they can enhance your creations:

Creating Depth: Shadows add a three-dimensional quality to your design, making elements appear as if they're floating above the surface. This depth creates visual interest and engages users.
use shadows in small doses and resist the urge to apply them to every element.
The key to a visually appealing and balanced composition lies in using shadows with a delicate touch. Here's a reminder: go light on shadows and refrain from making them overly dark.
When considering the application of shadows in your design, remember that their use should be purposeful and aligned with the personality of your website.
Less shadows : SERIOUS / ELEGANT, More Shadows : PLAYFUL / FUN
For smaller components that deserve prominence, consider harnessing the charm of small, subtle shadows.
For larger areas that warrant heightened attention, consider embracing medium-sized shadows.
When you seek to make elements truly appear to float above the interface, consider the impactful use of large shadows.

Curves of Elegance Mastering Border Radius

Border radius, a subtle yet impactful design element, has the power to transform the look and feel of your website. By skillfully incorporating rounded corners, you can infuse your design with a touch of sophistication and visual appeal. Here's how to master the art of border radius and create a truly elegant user experience:

Softening Edges: Border radius offers a graceful way to soften sharp edges, lending a friendly and approachable vibe to your design. Apply gentle rounding to buttons, images, and containers to create a more inviting atmosphere.
Visual Interest: Experiment with varying degrees of curvature. Larger border radii can draw attention and add intrigue, while subtler curves contribute to a harmonious aesthetic.
When it's time to infuse a touch of playfulness and break away from a serious tone, border radius becomes your creative ally.
Subtle Pop of Color: Integrate border radius with color for added impact. Experiment with colored borders or background hues to amplify the visual effect.
Button Hover Effects: Add a slight increase in border radius on button hover to create a subtle, interactive effect that engages users.

Use White Space Wisely

White space, also known as negative space, is the unoccupied area between design elements. Contrary to its name, white space doesn't have to be white – it can be any color that separates and enhances your content. By utilizing white space thoughtfully, you can create a visually pleasing and impactful design. Here's how to make the most of it:

Enhanced Readability: Ample white space around text and other elements improves legibility. It prevents visual clutter and makes it easier for users to focus on the content.
Visual Breathing Room: White space provides room for your design elements to "breathe." It helps prevent overcrowding and ensures that each element has its own space to shine.
Focus and Emphasis: White space draws attention to important elements. By surrounding key content with empty space, you guide users' eyes to what matters most.
Incorporating ample white space between sections is a design approach that enhances clarity, readability, and user engagement. By giving each section its own breathing space, you create a seamless and visually pleasing browsing experience.
Integrating substantial white space between groups of elements is a design strategy that fosters clarity, organization, and a refined user experience. By purposefully creating room around distinct groups of elements, you enhance visual coherence and guide users through your content with ease.
The principle of proximity in design states that elements that are related or belong together should be visually grouped by placing them in close proximity to one another. This fundamental design principle enhances organization, readability, and user understanding.
When incorporating prominent elements like big text or large icons, allocating sufficient white space around them is essential.
Small text and images, less space.
Adopting a consistent spacing guideline based on multiples of 16px can enhance your design's cohesiveness and efficiency.

let's combine all the key principles we've covered so far to create a well-rounded and effective design approach:

Visual Hierarchy

Visual hierarchy is a fundamental principle in design that guides users through content, emphasizing key elements and facilitating effortless comprehension. By manipulating factors like size, color, contrast, and spacing, you can create a clear path for users to follow. Here's a breakdown of how visual hierarchy works:

Size and Scale: Larger elements naturally draw more attention. Use size to distinguish headings, subheadings, and important content from secondary details.

Color and Contrast: Vibrant colors and high contrast attract the eye. Utilize color to highlight focal points and guide users to critical information.

Typography: Vary font styles and weights to establish a hierarchy. Bold fonts for headers, regular fonts for body text, and italics for emphasis help organize content.
Spacing and Alignment: Proper spacing separates elements and contributes to a clean layout. Consistent alignment helps maintain order and aids readability.
Z-Pattern Reading: Follow the natural reading pattern (left to right, top to bottom) to guide users through content. Place critical elements along this path.
Positioning: Place vital content at the top, left, or center, where users' eyes naturally start. Important items should be above the fold or within a "golden triangle" for optimal visibility.

Visual Elements: Icons, illustrations, and graphics can convey meaning at a glance. Use these elements strategically to support your hierarchy.
White space: Allow ample white space around important elements to give them breathing room and make them stand out.
User Flow: Consider the user's journey and what you want them to see first, second, and so on. Align your hierarchy with the desired user flow.
Use images mindfully, as they draw a lot of attention (larger images get more attention).
White space creates separation, so use white space strategically to emphasize elements.
For text elements, use font size, font weight, color, and white space to convey importance.
What components should I emphasize? Testimonials, call-to-action sections, highlight sections, preview cards, forms, pricing tables, important rows and columns in tables, etc.

Nurturing an Exceptional User Experience (UX)

Congratulations!🥳 I assume you have read all the above principles. Now we will see The Use cases and how to apply them according to different web personalities.

The 7 web personalities we previously discussed :

Serious/Elegant: Channeling luxury and refinement, this personality is characterized based on thin serif typefaces, golden or pastel colors, and big high-quality images.
Minimalist/Simple: Embracing simplicity, this personality centers around the essential text content, using small or medium-sized sans-serif black text, lines, and few images and icons.
Plain/Neutral: Design that gets out of the way by using neutral and small typefaces, and a very structured layout. Common in big corporations.
Bold/Confident: Makes an impact, by featuring big and bold typography, paired with confident use of big and bright colored blocks.
Calm/Peaceful: For products and services that care, transmitted by calming pastel colors, soft serif headings, and matching images/illustrations.
Startup/Upbeat: Widely used in startups, featuring medium-sized sans-serif typefaces, light-grey text and backgrounds, and rounded element.
Playful/Fun: Colorful and round designs, fueled by creative elements like hand-drawn icons or illustrations, animations, and fun language.

Serious/Elegant :

Industries: Real estate, high fashion, Art and Collectibles, jewelry, luxury products or services.
Typography: Serif typefaces (especially in headings), light font weight to maintain an airy elegance, complemented by a small body font size that exudes subtlety and sophistication.
Colors: Gold, pastel colors, black, Emerald Green, dark blue or grey.
Images: Big, high-quality images are used to feature elegant and expensive products.
Icons: Icons are typically kept minimal within this style, yet thin icons and delicate lines can be subtly incorporated to enhance the design's sophistication and provide a touch of understated elegance.
Shadows: Usually no shadows.
Border-radius: no border-radius.

Visit : evalendel

Minimalist/Simple :

Industries: Fashion, portfolios, Lifestyle Blogs, Coffee Shops/Cafés, minimalism companies, software startups.
Typography: Boxy/squared sans-serif typefaces, small body font sizes.
Colors: Usually black or dark grey, on pure white background. Usually just one color throughout the design.
Images: Few images, which can be used to add some color to the design. Usually no illustrations, but if, than just black.
Icons: Usually no icons, but small simple black icons may be used.
Shadows: Usually no shadows.
Border-radius: no border-radius.

Visit: Daniel

Plain/Neutral :

Industries: Well-established corporations, Financial Institutions, companies that don’t want to make an impact through design.
Typography: Neutral-looking sans-serif typefaces are used, and text is usually small and doesn’t have visual impact.
Colors: Safe colors are employed, nothing too bright or to washed-out. Blues and blacks are common.
Images: Images are frequently used, but usually in a small format.
Icons: Usually no icons, but small simple black icons may be used.
Shadows: Usually no shadows.
Border-radius: no border-radius.

Visit: facebook

Bold/Confident :

Industries: Digital agencies, software startups, travel, “strong" companies.
Typography: Boxy/squared sans-serif typefaces, big and bold typography, especially headings. Uppercase headings are common.
Colors: Usually multiple bright colors. Big color blocks/sections are used to draw attention.
Images: Lots of big images are usually displayed.
Icons: Usually no icons.
Shadows: Usually no shadows.
Border-radius: no border-radius.

Visit: ranks

Calm/Peaceful :

Industries: Healthcare, all products with focus on consumer well-being.
Typography: Soft serif typefaces frequently used for headings, but sans-serif headings might be used too (e.g for software products).
Colors: Pastel/washed-out colors: light oranges, yellows, browns, greens, blue.
Images: Images and illustrations are usual, matching calm color palette.
Icons: Icons are quite frequent.
Shadows: Usually no shadows.
Border-radius: Some border-radius is usual.

Visit : Drugs.com

Startup/Upbeat :

Industries: Software startups, and other modern-looking companies.
Typography: Medium-sized headings (not too large), usually one sans-serif typeface in whole design. Tendency for lighter text colors.
Colors: Blues, greens and purples are widely used. Lots of light backgrounds (mainly gray), gradients are also common.
Images: Images or illustrations are always used. 3D illustrations are modern. Sometimes patterns and shapes add visual details.
Icons: Icons are very frequent.
Shadows: Subtle shadows are frequent. Glows are becoming modern.
Border-radius: Border-radius is very common.

Visit : Groww

Playful/Fun :

Industries: Child products, animal products, food.
Typography: Round and creative (e.g. handwritten) sans-serif typefaces are frequent. Centered text is more common.
Colors: Multiple colors are frequently used to design a colorful layout, all over backgrounds and text.
Images: Images, hand-drawn (or 3D) illustrations, and geometric shapes and patterns are all very frequently used.
Icons: Icons are very frequent, many times in a hand-drawn style.
Shadows: Subtle shadows are quite common, but not always used.
Border-radius: Border-radius is very common.

Visit: Babymoo

Congratulations!👏 You've reached the end. I hope you've gained valuable knowledge. Remember to keep practicing and innovating. Keep up the great work!

Let's connect on LinkedIn 🚀

✨May your journey through learning be as endless as the possibilities it unveils. Keep your curiosity alive, your passion burning, and your creativity flowing. As you embrace each challenge, remember that every step forward is a step toward new horizons. Keep exploring, keep growing, and let your innovative spirit shine brightly in all you do. The world awaits your unique contributions. Keep learning, keep soaring, and never stop believing in the magic of your own potential.✨

See you next time for more amazing guides.

Happy coding✌🏻

Please Like, Share and Follow 🙏.

Check out my DEV post on CSS Layouts: https://dev.to/mohiyaddeen7/mastering-layout-in-css-a-comprehensive-guide-for-developers-31om

Tansforms, Transitions and Animations : Elevating User Experiences with CSS Transitions and Animations🚀

mohiyaddeen7 — Sun, 06 Aug 2023 17:04:59 +0000

In the ever-evolving landscape of web development, creating captivating user experiences is a paramount goal. Cascading Style Sheets (CSS) offer a range of tools to enhance interactions and engage users. In this article, we'll dive into the realm of CSS Transforms, Transitions, and Animations, uncovering their potential to transform static designs into dynamic and immersive web experiences.

Let's get started🚀

Tranforms
Transitions
Animations

Transforms

It is a CSS property that is used to rotate, scale, move, skew, etc. elements.

2D Methods That are used With the transform property are :

translate
rotate
scale
skew
matrix

translate(x,y) :

This property is used to move an element along the X and/or Y axes within its containing element without affecting the normal flow of the document or the layout of surrounding elements.

Syntax :

.box1{
  tansform: translate(30px,100px);
}

NOTE : translate(x,y): the first value should be offset from the x-axis, and the second value should be offset from the y-axis.

In the above codepen we have created a box with a height of 10vh (viewport height) and a width of 10vw (viewport width). Using the translate property, we have moved the box 30 px from the x-axis (offset from left) and 100 px from the y-axis (offset from top).

Single-value Syntax for translate :

.box1{
  tansform: translateX(30px);
}

/*OR*/

.box1{
  tansform: translateY(100px);
}

/*OR*/

.box1{
  tansform: translateX(30px) translateY(100px); /*This will work same as translate(30px,100px) */
}

For more information on translate property visit :
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate

rotate :

The CSS rotate property is used to rotate an element (such as an image, text, or a container) around a specified point or axis. It allows you to change the visual orientation of an element, giving it a rotated appearance.

The rotation is specified in degrees, and positive values rotate the element in a clockwise direction, while negative values rotate it in a counterclockwise direction. The default rotation point is the center of the element, but you can also specify a different point using the "transform-origin" property.

transform-origin property :

The CSS transform-origin property determines the point around which an element is rotated, scaled, or transformed in other ways using the transform property. It allows you to control the pivot point or axis of the transformation, influencing how the element visually changes.

The property takes values that specify the horizontal and vertical offsets from the element's top-left corner, or you can use keywords like center, top, bottom, left, and right to define the origin relative to the element's edges.

NOTE : The transform-origin property must be used with the transform property.

Syntax for rotate :

.box1{
  tansform: rotate(45deg);
}

Syntax for tranform-origin :

.box1{
  transform-origin: top right; 
  tansform: rotate(45deg);
}

In the above codepen, we have rotated the box 45 degrees from the center origin (which is by default) using the rotate property.

Now let us try rotating the box by different origins using the transform-origin property.

You can adjust the transform-origin values to control the pivot point and achieve the desired transformation effect.

NOTE : | transform-origin: x y | The first value should be offset from the x-axis, and the second value should be offset from the y-axis.

For more information on rotate property visit :
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate

For more information on transform-origin property visit :https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

scale :

This property is used to change the size of an element, making it appear larger or smaller while maintaining its proportions.

The "scale" property takes one or two values, representing the scaling factor along the horizontal and vertical axes. A single value scales both axes equally, while two values allow you to scale them independently.

Values less than 1 decrease the size (shrink), and values greater than 1 increase the size (enlarge).

Syntax :

.box1{
  tansform: scale(2,0.5);
}

Exercise : Try placing (hovering) your cursor on the arrow image in the above codepen.

See how it changed its size. This was achieved using the "scale" property and the "hover" property.

Single-value Syntax for scale :

.box1{
  tansform: scaleX(2);
}

/*OR*/

.box1{
  tansform: scaleY(0.5);
}

For more information on scale property visit:https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

skew :

This property is used to distort the shape of an element by tilting it along the horizontal and/or vertical axes.

The skew property takes one or two angles as values, representing the amount of skewing along the x-axis (horizontal) and y-axis (vertical). Positive angles tilt the element in a certain direction, while negative angles tilt it in the opposite direction.

Syntax :

.box1{
  tansform: skew(45deg, 20deg);
}

In the above codepen, we have skewed "box 2" along the x-axis by 45 degrees.

For more information on skew property visit:https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew

matrix :

This property takes 6 parameters. With the help of these parameters, we can rotate, scale, move (translate), and skew elements.

Syntax :

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

.box1{
  tansform: matrix(2, 45deg, 12deg, 0.5, 10px, 150px);
}

For more information on matrix property visit:https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix

3D Methods That are used With Transform property are :

translate3d
rotate3d
perspective

When the translate and rotate properties for the z-axis are set, the perspective property must also be set on the parent element before we can see any effect.

The perspective property determines the distance between the object and the viewer. A smaller value creates a stronger 3D effect, making the object appear closer and more pronounced, while a larger value reduces the perceived 3D effect, making the object seem farther away.

When setting the perspective property for an element, it is the CHILD elements that acquire the perspective view rather than the element itself.

Syntax :

.container{
  perspective:100px;
}
.box1{
  tansform: translateZ(10px) rotateZ(45deg);
}

For more information on perspective property visit:https://developer.mozilla.org/en-US/docs/Web/CSS/perspective

For more information on transform property visit:https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Now the interesting part starts 😎

Transitions

The CSS transition property is used to create smooth and animated changes in an element's style over a specified duration when a property is modified. It allows you to control the speed and ease of the transition between the element's initial and final states.

The transition property is a powerful tool for creating smoother user experiences and adding visual polish to web interactions.

Transition properties are :

transition-property : name of the property that is to be transitioned
transition-duration : duration of the overall transition 3.transition-timing-function : This is used to define the acceleration and deceleration patterns of a transition animation.
transition-delay : delay in transition

Syntax :

.box1{
  background-color: blue;
}

.box1:hover{
  background-color: blue;
  transition-property: background-color;
  transition-duration: 3s;
  transition-timing-function: ease-in;
  transition-delay: 1s;  
}

Exercise :

Try changing the transition-duration property in the above codepen
Try clearing all the transitions from the box1 element and just running the code with only the hover effect. You will see the changes, but they will not be as smooth when transition is used. so we can achieve smoothness in transitions with transition properties.

IMPORTANT NOTE : Instead of using all the above properties individually, we can use them all in one property, i.e., a shorthand property for the transition property.

tp - transition-property
td - transition-duration
ttf - transition-timing-function
tdy - transition-delay

Syntax :
transition : tp td ttf tdy;

Example for shorthand property of transition property :

.box1{
  background-color:black;
}

.box1:hover{
  background-color:orange;
  transition : background-color 2s ease-in 1s;
}

For more information on transition property visit: https://developer.mozilla.org/en-US/docs/Web/CSS/transition

transition triggers :

Transition triggers in CSS determine when a transition effect should occur on an element. These triggers are events that initiate the transition from one style state to another, creating smooth and visually appealing animations. Common transition triggers include:

:hover -> The transition is triggered when the user hovers the cursor over the element.

:focus -> The transition occurs when the element receives focus.

:focus-within -> The transition occurs when the element or any descendant of it receives focus.

:target -> Applies when the ID of the element matches the fragment of the current URL.

class ADD/Remove -> Adding or removing a specific class from the element triggers the transition. This is often used in combination with JavaScript for dynamic animations.

For more information on transition triggers visit:https://web.dev/learn/css/transitions/#transition-triggers

Animations

CSS animations allow you to create dynamic and visually engaging effects on web elements. They enable smooth and controlled transitions between different styles or states, enhancing the user experience.

To create a CSS animation, you define the animation using the @keyframes rule, which specifies the intermediate steps (keyframes) of the animation. Then, you apply the animation to an element using the animation property, specifying the animation's name, duration, timing function, and other optional settings.

Why use animations when we could do the same thing with transitions?
-> Because while using transition, we can only travel from the start state to the end state. But when we use animations, we can define as many states as we need and change the styles of elements precisely for every state.
And another main difference between these two properties is that for transition properties, a transition trigger is required, but for animations, they don't require any trigger. and also that animations can loop while transitions can't.

animation properties :

animation-name : name of the animation (custom name)
animation-duration : duration of the overall animation 3.animation-timing-function : This is used to define the acceleration and deceleration patterns of a animation.
animation-delay : delay in animation
animation-iteration-count : number of times the animation should run
animation-direction : defines the direction of the animation

values for animation properties :

animation-name : custom name (can be anything you like)
animation-duration : s (second) or ms (milliseconds). 3.animation-timing-function : ease-in, ease-out, ease-in-out, linear(default), etc.
animation-delay : s (second) or ms (milliseconds).
animation-iteration-count : infinite, number.
animation-direction : reverse, alternate, alternate-reverse.

Syntax for animation :

.box1{
  background-color:black;
  animation-name: animatebox1;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-delay: 1s;
  animation-iteration-count: infinite; 
}


@keyframes animatebox1{
  from{
    background-color:black;
  }
  to{
    background-color:orange;
  }
}

In the above codepen, we have created a progress bar using the "animation" property.

Shorthand for animation property :

an - animation-name
ad - animation-duration
atf - animation-timing-function
ad - animation-delay
aic - animation-iteration-count
adc - animation-direction

Syntax :

animation : an ad atf ad aic adc;

Using percentage values to define states in animation :

Using percentage values to define states in CSS animations is a powerful technique that allows you to precisely control an element's appearance and behavior at different points during the animation's progression. By specifying keyframes using percentages, you can create smooth and intricate animations that smoothly transition between various states.

Syntax :

@keyframes animatebox1{
  0%{
    background-color:black;
  }
  20%{
    background-color:green;
  }
  60%{
    background-color:orange;
  }
  80%{
    background-color:blue;
  }
  100%{
    background-color:yellow;
  }
}

Percentage-based keyframes give you fine-grained control over an animation's behavior at specific moments. You can define intermediate states, control properties like opacity and color, and create intricate effects that smoothly transition between different styles.

By utilizing percentage values in your keyframes, you can craft visually appealing animations that enhance your web design and user experience.

For more information on animation property visit:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations

Let's connect on LinkedIn 🚀

✨Embrace the canvas of code and the palette of design. As web developers and designers, we weave innovation and creativity into pixels and pixels into experiences. Together, we craft the digital world, where every line of code and stroke of design is a brushstroke on the canvas of possibility. Let's paint a masterpiece of the web, one pixel at a time.🎨💻🌐✨

See you next time for more amazing guides. Until then, stay tuned.

Happy coding✌🏻

Please don't hesitate to ask doubts in the comments section—I'll be sure to respond promptly. Your inquiries are greatly welcomed and will receive a swift and thorough reply.❤️

CSS Layouts : A comprehensive guide for developers 🔥

mohiyaddeen7 — Fri, 04 Aug 2023 14:26:30 +0000

Creating a visually appealing and responsive website layout is a cornerstone of web development. With the ever-growing range of devices and screen sizes, mastering CSS layout techniques is crucial for delivering a seamless user experience. In this article, we will delve into the key concepts and best practices for creating robust and flexible layouts using CSS.

Let's get started🚀

There are 3 ways of building layouts with CSS, and they are:

Float Layouts
Flexbox
CSS Grid

Float Layouts

Layouts using the float property in CSS involve positioning elements horizontally within a container. It can contain values left or right.

Syntax :

.box1{
  height:30vh;
  width:30vw;
  background-color:red;
  float:right;
}

In the above codepen, we have created 2 boxes and floated box1 to the right, and by doing this, it also allows other elements to float to the left side of it. This is because floated elements are taken out of the normal document flow, and the content that follows will wrap around the floated element.

For more info on float property visit : https://developer.mozilla.org/en-US/docs/Web/CSS/float

If you want to prevent this wrapping behavior and ensure that certain elements do not float beside the floated element, you can use the "clear" property.

Syntax :

.box1{
  height:30vh;
  width:30vw;
  background-color:red;
  float:right;
}
.box2{
  clear:right;
  height:30vh;
  width:30vw;
  background-color:red;
}

In the above codepen, we have applied the "clear" property to box 2, and by doing this, we have achieved a box on whose right side no elements can be floated.

For more info on clear property visit : https://developer.mozilla.org/en-US/docs/Web/CSS/clear

NOTE : Initially intended for simple text wrapping around images, float gained popularity as a layout tool. However, its behavior can be challenging to control, leading to unexpected results in complex layouts. It has limitations in creating modern, responsive, and complex layouts.

Flexbox

With Flexbox, we can easily create complex arrangements of elements in a single direction (either horizontally or vertically). By defining a parent container as a flex container, you gain precise control over the alignment, distribution, and spacing of child elements. This approach eliminates the need for float-based layouts and intricate positioning, making it an essential tool for crafting component layouts.

Syntax :

.flex-container{
  display:flex;
}

Flex properties for parent (flex container) are:

flex-direction
flex-wrap
justify-content
align-items
align-content

flex-direction :
It is used to define the direction in which the items are laid out. The values for this property can be row, row-reverse, column, or column-reverse. By default, the value for flex-direction is "row".

Syntax :

.container{
  display:flex;
  flex-direction:column;
}

For more information on flex-direction property visit : https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

flex-wrap :

The flex-wrap property defines whether the flex items should wrap or not. The values for this property can be wrap, no-wrap, or wrap-reverse.

Syntax :

.container{
  display:flex;
  flex-wrap:wrap;
}

Exercise : For the above codebox, try changing the orientation by sliding from left to right.

For more info on flex-direction property visit : https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

justify-content :

It is used to define flex items along the main axis. The values for this property can be flex-start, flex-end, center, space-between, space-around, and space-evenly.

Syntax :

.container{
  display:flex;
  justify-content:center;
}

In the above codepen we have created a simple NAVBAR using flex and justify-content.

For more information on justify-content property visit : https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

align-items :

It is used to define flex items along the cross axis. The values for this property can be flex-start, flex-end, center, stretch, etc.

Syntax :

.container{
  display:flex;
  align-items:center;
}

In the above codepen we have centered the flex-items along the cross axis using the align-items property.

For more information on align-items property visit :https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

align-content :

It is used to align the flex container's lines when there is extra space on the cross axis. The values for this property can be flex-start, flex-end, center, stretch, space-between, space-around, and space-evenly.

*Syntax : *

.container{
  display:flex;
  align-content:center;
}

In the above codepen try clearing the align-content property.

For more information on align-content property visit :https://developer.mozilla.org/en-US/docs/Web/CSS/align-content

Flex properties for flex items (children) are:

order
align-self
flex-grow
flex-shrink

order :

It is used to specify the order of flex items. By default, the order of all flex items is 0.

Example : If there are 3 flex items in a flex container and we apply the order property to only 1 item, it will float to the end as the other two items have order 0, therefore the other item whose order is 1 will float to the end.

Syntax :

.item1{
  order: 2;
}

For more information on order property visit :https://developer.mozilla.org/en-US/docs/Web/CSS/order

align-self :

It is used to align individual flex items along a cross axis. The values for this property can be flex-start, flex-end, center, stretch, and auto.

Syntax :

.item1{
  align-self: flex-start;
}

For more information on align-self property visit :https://developer.mozilla.org/en-US/docs/Web/CSS/align-self

flex-grow :

It is used to define the ability of an individual flex item to grow relative to other flex items. By default, the flex-grow property value for all the flex items is 0.

Syntax :

.item1{
  flex-grow: 1;
}

For more information on flex-grow property visit :https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow

flex-shrink :

It is used to define the ability to shrink an individual flex item relative to other flex items. By default, the flex-grow property value for all the flex items is 1.

Syntax :

.item1{
  flex-shrink: 3;
}

For more information on flex property visit :https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink

For more information on flex property visit :
https://developer.mozilla.org/en-US/docs/Web/CSS/flex

CSS Grid

This approach offers precise control over the placement and alignment of content, making it ideal for designing intrinsic page layouts and complex components. We can achieve versatile and dynamic layouts that adapt seamlessly to various screen sizes and orientations. CSS Grid's intuitive syntax and robust capabilities make it an essential tool for modern web development, enabling developers to craft visually appealing and structured designs efficiently.

Syntax :

.container{
  display:grid;
}

In the above codepen we have created a CSS grid with 1 column and 8 rows.

Grid properties for parent (grid container) are:

grid-template-columns
grid-template-rows
justify-content
align-content
grid-template-areas

grid-template-columns :

It is used to specify the number and width of columns in a grid layout. The values for this property can be auto, length, max-content, min-content.

Syntax :

.container{
  display:grid;
  grid-template-columns: auto auto auto; 
}

In the above codepen we have created a CSS grid with 3 columns and 3 rows.

For more information on grid-template-columns property visit :https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

grid-template-rows :

It is used to specify the height of rows in a grid layout. The values for this property can be auto, length, max-content, min-content.

Syntax :

.container{
  display:grid;
  grid-template-rows: 20px 100px 50px; 
}

For more information on grid-template-rows property visit :https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows

justify-content :

It is used to horizontally align the whole grid inside the container. The values for this property can be center, space-between, space-around, space-evenly, start.

NOTE : illustrations for this property are shown above in this post while discussing Flexbox. Please refer to it.

align-content :

It is used to vertically align the whole grid inside the container. The values for this property can be center, space-between, space-around, space-evenly, start, end.

NOTE : illustrations for this property are shown above in this post while discussing Flexbox. Please refer to it.

grid-template-areas :

It is used together with the CSS "grid-area" property to establish the areas within the grid layout.

Syntax :

.container{
  display:grid;
  grid-template-areas: "box1 box2"
                       "box1 box2"; 
}

.box1{
  grid-area: box1; 
}

.box2{
  grid-area: box2; 
}

.box3{
  grid-area: box3; 
}

For more information on grid-template-areas property visit :https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

CSS media queries :

It is used to apply CSS when a certain condition is true.

Syntax :

@media screen and (max-width:360px) {
    body{
        background-color: blue;
    }

}

Exercise : For the above codebox, try changing the orientation by sliding from left to right. If you see changes in page layout, they are achieved using the "grid-template-areas" property and media queries. When width is reduced to 360 px, we have changed the value of "grid-template-areas" to another value.

For more information on CSS media queries visit :https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries

Grid properties for grid items (children) are:

grid-column
grid-row
grid-area

grid-column :
It is used to define where the grid items start and end in the direction of the columns.

Syntax :

.grid-item1 {
  grid-column: 1 / span 2;
}

In the above codepen, we have created a grid with 4 columns. and we have spanned item 1 from column-1 to column-2.

For more information on grid-column property visit :https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column

grid-row :

It is used to define where the grid items start and end in the direction of the rows.

Syntax :

.grid-item1 {
  grid-row: 1 / span 2;
}

In the above codepen, we have created a grid with 4 columns. and we have spanned item 1 from row-1 to row-2.

For more information on grid-row property visit :https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row

For more information on grid property visit :https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout

Let's connect on [LinkedIn](https://www.linkedin.com/in/mohiyaddeen-raza) 🚀

✨Embrace the art of layout design in CSS and let your creativity flow through grids, flexboxes, and responsive wonders. Remember, every pixel you place is a stroke of innovation, shaping the digital experiences of tomorrow. As you embark on your journey to master layouts, don't hesitate to ask questions, share insights, and collaborate with fellow developers. The world of web design is constantly evolving, and by honing your layout skills, you're sculpting the future of the web, one line of code at a time. Keep pushing boundaries, keep learning, and keep crafting exceptional user experiences.✨

See you next time for more amazing guides.

Happy coding✌🏻

Please don't hesitate to ask doubts in the comments section—I'll be sure to respond promptly. Your inquiries are greatly welcomed and will receive a swift and thorough reply.❤️

DEV Community: mohiyaddeen7

Mastering Error Boundaries in React: Why & How 🚨

Why Use Error Boundaries?

What Are Error Boundaries? 🤔

Creating an Error Boundary

Real-World Scenario 🌍

Wrapping Up

Linear Regression : From Theory to Practice

Table of Contents

Introduction

Understanding Supervised Learning

What is Linear Regression?

Terminology

Simple Linear Regression

Multiple Linear Regression

Cost Function

Feature Scaling

Gradient Descent

Gradient Descent for Simple Linear Regression

Python Implementation of Gradient Descent for Simple Linear Regression

Gradient Descent for Multiple Linear Regression

Python Implementation of Gradient Descent for Simple Linear Regression

Conclusion

🎨 The Ultimate Guide to Web Design : (Typography, colors, icons, images, shadows, border, white space, and visual heirarchy)

Prioritize User-Centered Design

Effective Typography

The Psychology of Colors

High-Quality Imagery

Unleash the Power of Icons

The Magic of Shadows

Curves of Elegance Mastering Border Radius

Use White Space Wisely

Visual Hierarchy

Nurturing an Exceptional User Experience (UX)

Tansforms, Transitions and Animations : Elevating User Experiences with CSS Transitions and Animations🚀

Transforms

Transitions

Animations

CSS Layouts : A comprehensive guide for developers 🔥

Float Layouts

Flexbox

CSS Grid