DEV Community: StakeDesigner

6 Best JavaScript Courses Online in 2024 (Free and Paid)

StakeDesigner — Mon, 01 Jan 2024 13:09:10 +0000

The Best JavaScript Courses in 2024

1 ) Programming Foundations with JavaScript, HTML, and CSS – [Coursera]

Key Information
Course Instructor : Duke University: Susan Rodger, Robert Duvall, Owen Astrachan, Andrew Hilton
Level: Beginner
Duration : 33 hours
Free or Paid : Paid (Free to evaluate)
Certificate : Yes
Enrolled Students : +500K

2. The Complete JavaScript Course 2023: From Zero to Expert ( Udemy )

Key Information
Course Instructor : Jonas Schedtmann Level: Beginner
Duration : 69 hours
Free or Paid: Paid
Certificate: Yes
Enrolled Students: +800K

3. Modern JavaScript From The Beginning 2.0 [Udemy]

Key Information
Course Instructor: Brad Traversy
Level: Beginner
Duration: 21.5 hours
Free or Paid: Paid
Certificate: Yes
Enrolled Students: +100k

4. Learn JavaScript (Codecademy)

Key Information
Course Instructor: Kenny Lin
Level: Beginner
Duration: 20 hours
Free of Paid: Paid (Free to audit)
Certificate: Yes
Enrolled Students: +2.5

5. [Udacity] Full Stack JavaScript Developer Nanodegree

Key Information
Instructors: Rachel Manning, Alyssa Hope, Andrew Wong, Guillaume B. Laviolette
Level: Intermediate
Duration: 160 hours
Free or Paid: Paid
Certificate: Yes
Enrolled Students: N/A

6.[Linkedin Learning] Learning the JavaScript Language

Key Information
Course Instructor: Joe Chellman
Level: Beginner
Duration: 4 hours
Free or Paid: Paid
Certificate: Yes
Enrolled Students: N/A

How to make Random Color Palette Generator

StakeDesigner — Fri, 08 Sep 2023 04:05:17 +0000

Creating a Random Color Palette is a great way to improve your web development skills. Not only is it an engaging project, but it also helps you learn important concepts such as manipulating the DOM, working with loops, handling events, and creating user-friendly designs.

Source Code

This blog post will show you how to Create A Random Color Palette Generator in HTML, CSS, and JavaScript. Users can click on the “Refresh Palette” button in this color palette generator to generate a new set of random colors with their hex color code. They can also easily copy the hex color code by clicking on the corresponding color card.

By the end of this blog post, you’ll have a functional color palette generator that you can use for your own projects or even make live on the Internet. If you’re excited to see how this project looks and works, you can click here to view a live demo of it.

I hope you enjoyed the demo of this color palette generator and were able to understand how it was created using HTML, CSS, and JavaScript. In the video, I explained the codes with written comments to make them easier to understand, and I believe it worked.

If you haven’t seen the video yet, you can continue reading this post to learn how to create a color palette generator step-by-step by yourself. Otherwise, you can go to the bottom of this page to copy or download the source code and files for this project.

Steps to Create Random Color Palette in JavaScript

To create a Random Color Palette generator using HTML, CSS, and JavaScript, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js
To start, add the following HTML codes to your index.html file to create the basic layout of the project. The “ul” container is empty now, but it will be filled with “li” elements (representing colors) later using JavaScript code.

Conclusion and Final Words

By following the steps in this blog post, you have successfully created a random color palette generator using HTML, CSS, and JavaScript. Now it’s up to you to experiment with the code and make it more useful.

If you encounter any problems or your code is not working as expected, you can download the source code files of this Color Generator project by clicking on the given download button. It’s free, and a zip file will be downloaded that contains the project folder with source code files.

Support 🤗

YouTube
Website

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you later! 😊😊

Custom Modal Box HTML CSS & JavaScript

StakeDesigner — Thu, 07 Sep 2023 05:15:19 +0000

Custom Modal or Dialog Box [Source Codes]

To create this program (Custom Modal Box). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with a .html extension.

Visit for more front-end components : https://stakedesigner.com/

HTML

`<!DOCTYPE html>

Show Modal

Modal Box

Custom Modal Box

Create a simple modal box using html and css only.

Close Modal

<br> $('.show-btn').click(function(){<br> $('.modal').toggleClass("show");<br> $('.show-btn').addClass("disabled");<br> });<br> $('.close-icon').click(function(){<br> $('.modal').toggleClass("show");<br> $('.show-btn').removeClass("disabled");<br> });<br> $('.close-btn').click(function(){<br> $('.modal').toggleClass("show");<br> $('.show-btn').removeClass("disabled");<br> });<br>

`

CSS

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins',sans-serif; } body{ background: #f2f2f2; text-align: center; overflow: hidden; } .show-btn{ position: absolute; top: 50%; left: 50%; user-select: none; transform: translate(-50%, -50%); } .show-btn.disabled{ pointer-events: none; } .modal{ position: absolute; right: 0; opacity: 0; bottom: -100%; width: 360px; transition: bottom 0.4s, opacity 0.4s; box-shadow: 0px 0px 15px rgba(0,0,0,0.3); } .modal.show{ bottom: 0; opacity: 1; } .modal .top-content{ background: #34495e; width: 100%; padding: 0 0 30px 0; } .top-content .left-text{ text-align: left; padding: 10px 15px; font-size: 18px; color: #f2f2f2; font-weight: 500; user-select: none; } .top-content .close-icon{ position: absolute; top: 10px; right: 20px; font-size: 23px; color: silver; cursor: pointer; } .close-icon:hover{ color: #b6b6b6; } .top-content .fa-camera-retro{ font-size: 80px; color: #f2f2f2; } .modal .bottom-content{ background: white; width: 100%; padding: 15px 20px; } .bottom-content .text{ font-size: 28px; font-weight: 600; color: #34495e; } .bottom-content p{ font-size: 18px; line-height: 27px; color: grey; } .bottom-content .close-btn{ padding: 15px 0; } .show-btn button, .close-btn button{ padding: 9px 13px; background: #27ae60; border: none; outline: none; font-size: 18px; text-transform: uppercase; border-radius: 3px; color: #f2f2f2; font-weight: 600; cursor: pointer; transition: background 0.2s; } .show-btn button{ padding: 12px 15px; } .show-btn button:hover, .close-btn button:hover{ background: #26a65b; }

That’s all, now you’ve successfully created a Custom Modal Box using HTML CSS & JavaScript. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Support 🤗

YouTube
Website

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you later! 😊😊

How to make Digital Clock JavaScript

StakeDesigner — Tue, 05 Sep 2023 05:39:15 +0000

Welcome to yet another exciting tutorial by stakedesigner. Building Digital Clock JavaScript projects is one of the best ways to learn JavaScript. So today let’s build a Digital Clock JavaScript’. To build this project we need HTML, CSS, Javascript.

Here Source Code link

In today’s digital age, knowing how to create a digital clock using JavaScript is a valuable skill for web developers. Whether you want to display the current time on your website or build a custom clock application, JavaScript provides the necessary tools to make it happen. In this tutorial, we’ll walk you through the process of creating a simple digital clock using HTML, CSS, and JavaScript.

Prerequisites for Digital Clock JavaScript

Before we dive into the code, make sure you have the following:

Basic knowledge of HTML, CSS, and JavaScript.
A code editor (e.g., Visual Studio Code, Sublime Text).
A web browser to test your digital clock.

Project Folder Structure

Let us explore the project folder structure. The project folder consists of 3 files. The HTML file creates the elements required to build the structure and layout of our project. Next, the CSS file styles the elements that we have created with CSS and Finally, Javascript adds functionality to our project.

HTML

We begin with the HTML code. Copy the code below and paste it into your HTML document. Here, we create a div with the class ‘clock’ and inside this, we create divs for displaying hours, minutes, and seconds. Apart from this we also use span tags to display ‘:’ between the divs.

<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Digital Clock</title>  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;800&display=swap" rel="stylesheet" />  <link rel="stylesheet" href="style.css" /> </head> <body> <div class="clock"> <div id="hour"></div> <span>:</span> <div id="minute"></div> <span>:</span> <div id="seconds"></div> </div>  <script src="script.js"></script> </body> </html>

Next, we style our game using CSS. For this copy, the code provided to you below and paste it into your stylesheet.

We provide a background color to the body, while the time is displayed on a white background. Each element is aligned correctly and given a bit of a curve to make it look good.

CSS:

* { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { height: 100vh; background-image: linear-gradient(135deg, #8052ec, #d161ff); } .clock { width: 31.25em; height: 8em; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; display: flex; align-items: center; justify-content: space-between; font-weight: 600; } .clock div { position: relative; background-color: #ffffff; height: 100%; width: 3.2em; display: flex; align-items: center; justify-content: center; font-size: 2.5em; color: #150c41; border-radius: 0.4em; box-shadow: 0 1em 2em rgba(0, 0, 0, 0.3); letter-spacing: 0.05em; } .clock span { font-weight: 800; font-size: 2.5em; color: #ffffff; }

Javascript:

Finally, we add functionality using Javascript. Once again copy the code below and paste it into your script file.

We create a ‘clock’ variable in which we call the function ‘time’, this function updates the time every second by getting the current time using the JavaScript Date() object. The hours, minutes, and seconds are then extracted from the date and formatted with leading zeros using the padStart() function. Next, formatted time is then displayed on the webpage as “hour”, “minute”, and “seconds”.

`const hour = document.getElementById("hour");
const minute = document.getElementById("minute");
const seconds = document.getElementById("seconds");

const clock = setInterval(function time() {
const dateNow = new Date();
let hr = dateNow.getHours();
let min = dateNow.getMinutes();
let sec = dateNow.getSeconds();

hr = hr.toString().padStart(2, "0");
min = min.toString().padStart(2, "0");
sec = sec.toString().padStart(2, "0");

const timeString = ${hr}:${min}:${sec};
hour.textContent = hr;
minute.textContent = min;
seconds.textContent = sec;
}, 1000);`

Support 🤗

YouTube
Website

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you later! 😊😊

How to make Custom Captcha Generator in CSS & JavaScript

StakeDesigner — Mon, 04 Sep 2023 06:32:32 +0000

Custom Captcha is an anti-bot security feature that combines distorted letters and numbers. It is employed to differentiate between humans and automated bots. Its purpose is to restrict access to specific online features like registration or comment posting. The distorted characters pose a challenge that bots have difficulty solving.

Source Code link

Creating a captcha generator using HTML, CSS, and JavaScript could be quite an important skill for a developer. Whether you’re building a personal website or developing a client’s site.

The purpose of this blog post is to teach you how to develop a Captcha Generator using HTML, CSS, and JavaScript. Essentially, we’ll be designing a form that randomly generates a combination of letters and numbers in an unordered format. We’ll then need to fill in the correct letters to determine if we’ve accurately solved the captcha. By the end of this post, you’ll have gained the knowledge and skills needed to create and implement captchas on your own websites.

To create a Custom Captcha generator using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.

Create an index.html file. The file name must be index and its extension .html

Create a style.css file. The file name must be style and its extension .css

Create a script.js file. The file name must be script and its extension .js

To start, add the following HTML codes to your index.html file to create a basic layout for the captcha generator

Next, add the following CSS codes to your style.css file to style the Custom Captcha generator and make it interactive and beautiful.

here is the Source Code link

Finally, add the following JavaScript code to your script.js file to make the to generate random Custom Captcha and validated our entered captcha.

Conclusion and Final Words
I hope this blog post taught you how to make your own Custom Captcha Generator using HTML, CSS, and JavaScript. The coding process is simple and easy to understand, so you can customize your generator to your needs.

With this skill, you can make your website more secure and prevent spam or hacking. I’m confident that this post gave you the tools and confidence to create a great Captcha Generator. I recommend you to check my blog on Strong Password Generator in HTML CSS & JavaScript. This will also help you to enhance you JavaScript skills.

If you face any difficulties while creating your own captcha generator or your code is not working as expected, you can download the source code files for this captcha generator for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

Support 🤗

YouTube
Website

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you later! 😊😊

Best Practices for Naming Classes in HTML and CSS Files

StakeDesigner — Sun, 23 Jul 2023 17:29:10 +0000

Be Descriptive and Intentional:

Class names should be descriptive and convey the purpose of the element they represent. Aim for clarity and avoid using vague or overly generic names. Instead of using single-letter or abbreviated names like "s", "btn", or "div", opt for more meaningful and explicit names that reflect the element's role in the document. For instance, "submit-button" or "navigation-bar" provides more context and clarity than "btn" or "nav."

For more details on this article, you can visit the blog. click

Use Semantic Naming:

Leverage semantic naming conventions to align your class names with their intended functions. Semantic class names describe the content and structure of the elements, making it easier for developers to understand the purpose without having to inspect the code in-depth. For example, use "header," "footer," "sidebar," and "article" for their respective sections rather than generic names like "section1" or "content_area."

Follow a Consistent Naming Convention:

Consistency is key to maintaining a coherent codebase. Adopt a naming convention and stick to it across all your projects. Popular conventions include BEM (Block, Element, Modifier), SMACSS (Scalable and Modular Architecture for CSS), and OOCSS (Object-Oriented CSS). These conventions provide structure and ensure uniformity in your class names, which aids in the ease of maintenance and collaboration with other developers.

Avoid Presentational or Styling Names:

Class names should focus on describing the element's purpose and not its presentation or style. Avoid naming classes based on visual properties like color, font-size, or alignment, as these may change over time. Separating structure from presentation helps in keeping your CSS modular and improves code reusability.

Use Short and Meaningful Class Names:

While it's essential to be descriptive, overly long class names can lead to cumbersome code and decrease readability. Aim for a balance by keeping class names concise while still conveying their purpose. A good practice is to use single words or short phrases that succinctly define the element.

Be Mindful of Scope:

When working on larger projects or collaborating with other developers, be mindful of the scope of your class names. Avoid generic names that might clash with other components or libraries. Consider using a prefix unique to your project to minimize the risk of naming conflicts.

Avoid Inline Styling:

Although it's not directly related to class naming, it's worth mentioning that inline styles should be avoided in HTML files. Instead, define styles in your CSS files and refer to them via class names. This separation of concerns promotes maintainability and improves code organization.

For more details on this article, you can visit the blog. click

Conclusion:

Selecting appropriate class names is a crucial aspect of writing clean and maintainable HTML and CSS code. By following best practices such as being descriptive, using semantic naming, adhering to a consistent convention, and avoiding presentational names, you can significantly enhance your codebase. Remember, clear and intentional class names not only benefit you as the developer but also contribute to improved collaboration and project scalability. By investing time in selecting the right class names, you set the foundation for a more robust and efficient front-end development process.

Support

Blog

YouTube

What is your opinion? why?

6 CSS Features to Make a Responsive Website

StakeDesigner — Wed, 01 Mar 2023 07:08:38 +0000

Creating a responsive website has become more important than ever. With more and more people accessing the web on a variety of devices, it's crucial that your website looks great and functions well across different screen sizes. CSS (Cascading Style Sheets) plays a key role in creating a responsive website, and there are several new CSS features that can help you achieve this.

In this article, we'll explore 7 new CSS features that can help you make a responsive website, with examples of how you can use them in your own projects.

1.Flexbox

Flexbox is a layout mode in CSS that provides an efficient way to arrange items within a container. It allows you to create complex layouts that adapt to different screen sizes, without using floats or positioning. Here's an example of how you can use flexbox to create a responsive navigation bar:

Code Example

In this example, the .nav container uses display: flex to create a flexbox layout. The justify-content property is set to space-between, which spaces out the .nav-item elements evenly across the container. The align-items property is set to center, which centers the items vertically within the container.

In the media query, we switch the flex direction to column, which stacks the .nav-item elements vertically. We also change the margin to create spacing between the elements.

2.Grid

Grid is a new layout system in CSS that allows you to create complex, two-dimensional layouts with a high degree of flexibility. It allows you to create responsive designs that adjust to different screen sizes, without having to write separate styles for each breakpoint. Here's an example of how you can use the grid to create a responsive grid layout:

Code Example

In this example, the .container element uses display: grid to create a grid layout. The grid-template-columns property is set to repeat(3, 1fr), which creates three columns of equal width. The grid-gap property is set to 20px, which creates spacing between the grid items.

In the media query, we change the grid-template-columns property to repeat(2, 1fr), which creates two columns of equal width.

3.Viewport units

Viewport units are a set of CSS units that are relative to the viewport's dimensions. They allow you to set sizes and positions that adapt to the viewport's size. Here's an example of how you can use viewport units to create a responsive hero image:

Code Example

This first block of code targets an HTML element with the class "hero". It sets the height of the element to 100vh, which means that the height of the element will be equal to the height of the viewport. It also sets the background-image property to a URL that points to an image file, and sets the background-size **property to "cover" and the **background-position property to "center". This will cause the image to fill the entire hero element and be centered within it.

This second block of code uses a media query to apply a different set of styles to the** ".hero"** element when the screen width is 768 pixels or less. The media query is defined using the "@media" rule, which specifies that the enclosed styles should only be applied if the screen meets certain criteria. In this case, the criteria is that the screen width must be 768 pixels or less.

The styles inside the media query are applied only when the media query criteria are met. In this case, the height of the** ".hero"** element is set to 50vh, which means that it will take up half the height of the viewport. This will cause the hero section to be smaller on smaller screens, allowing more content to fit above and below it.

Overall, this code demonstrates how to use viewport units and media queries to create a responsive hero section that adjusts its height based on the size of the screen.

4.clamp()

CSS clamp() is a CSS function that allows you to specify a range of values that a property can take, based on the available space on the screen. This function is particularly useful when you want to create responsive designs that adapt to different screen sizes, without having to use media queries.

The clamp() function takes three arguments:

clamp(min, preferred, max)

min: the minimum value the property can take, regardless of the available space on the screen.
preferred: the preferred value for the property. If there is enough space on the screen, the property will take this value.
max: the maximum value the property can take, regardless of the available space on the screen.

The clamp() function works by selecting the largest value that satisfies the following condition:

min(maximum, max(minimum, preferred))

Here's an example of how you can use the clamp() function to create a responsive font size:

In this example, the h1 element will have a font size that is between 2rem and 4rem, depending on the available space on the screen. If the screen width is less than or equal to 40em (i.e., 40 times the font size of the root element), the font size will be 2rem. If the screen width is greater than or equal to 100em, the font size will be 4rem. Otherwise, the font size will be between 2rem and 4rem, depending on the available space.

Here's how the clamp() function works in this example:

If the screen width is less than or equal to 40em, the max() function returns the minimum value of 2rem, which is then clamped to 2rem.
If the screen width is greater than or equal to 100em, the min() function returns the maximum value of 4rem, which is then clamped to 4rem.
If the screen width is between 40em and 100em, the max() function returns the value that satisfies both the minimum value of 2rem and the preferred value of 5vw.

In this way, the clamp() function allows you to create responsive designs that adapt to different screen sizes, without having to use media queries or complex calculations.

5.Aspect Ratio

The aspect-ratio property is a CSS property that specifies the aspect ratio of an element's width to its height. It can be applied to any element, including images, videos, and containers.

The aspect ratio is defined as the ratio of the width of an element to its height. For example, a square has an aspect ratio of 1:1 because its width is equal to its height. An image with a width of 800 pixels and a height of 600 pixels has an aspect ratio of 4:3 because its width is four times its height.

Using CSS aspect ratio, you can set the desired aspect ratio for an element and ensure that it always maintains that ratio, even if the element is resized or viewed on a different device.

Syntax

The syntax for the aspect-ratio property is simple:

selector {
  aspect-ratio: width / height;
}

For example, to set an aspect ratio of 16:9 for a video element, you would use the following CSS:

video {
  aspect-ratio: 16 / 9;
}

Example: Setting Aspect Ratios for Images

In this example, we set the aspect ratio for all images to 3:2 using the aspect-ratio property. We also set the width of the container to 80% and centered it using margin: 0 auto.

Finally, we styled the images using display: block to remove any inline spacing, max-width: 100% to ensure the images don't exceed the width of their container, and height: auto to maintain the correct aspect ratio.

Example: Setting Aspect Ratios for Videos

Another common use case for CSS aspect ratio is setting the aspect ratio for video elements. By default, videos have an aspect ratio of 16:9, but you can change this using the aspect-ratio property.

6.Scroll Snap

Scroll snap is a CSS property that allows content to snap to a specific position when scrolling. This feature is particularly useful for creating smooth scrolling experiences, especially for touch-based devices like smartphones and tablets. With scroll snap, users can easily navigate through content without the need for excessive scrolling.

Scroll snap works by dividing the container into sections and defining the distance each section needs to be scrolled before it snaps into place. By doing this, the user can quickly and easily scroll through each section of content, without having to search for the right spot.

In this, we’ll explore how to use scroll snap with examples.

How to Use Scroll Snap

To use scroll snap, we first need to define a container for our content. We can do this using the CSS property "scroll-snap-type". This property has two values: "x" and "y", which correspond to horizontal and vertical scrolling, respectively.

.container {
  scroll-snap-type: y mandatory;
}

In the above example, we have defined a container with vertical scrolling and set the value to "mandatory". This means that each section of content will snap into place when it reaches the top of the container.

Next, we need to define the sections of content that we want to snap into place. We can do this using the CSS property "scroll-snap-align". This property has two values: "start" and "center", which define the alignment of the snapped content.

.section {
  scroll-snap-align: start;
}

In the above example, we have defined a section of content and set the value of "scroll-snap-align" to "start". This means that when the user scrolls through the container, this section of content will snap into place when it reaches the top of the container.

We can also use the "scroll-padding" property to create space between sections. This can help prevent content from getting cut off or overlapping when it snaps into place.

.container {
  scroll-padding: 50px;
}

In the above example, we have defined a container with 50 pixels of padding between each section of content.

Example

Here are a few examples of scroll snap in action:

Code Example

In this example, we have a container with multiple sections of content. Each section snaps into place as the user scrolls through the container.

🍀Support

Please consider following and supporting us by subscribing to our channel. Your support is greatly appreciated and will help us continue creating content for you to enjoy. Thank you in advance for your support!

YouTube
Website

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you later! 😊😊

5 super useful CSS properties

StakeDesigner — Thu, 23 Feb 2023 06:09:17 +0000

The isolation: isolate property in CSS

In this example, we have a container with a light blue background color and some padding. Inside the container, there is an inner element with a white background color and some padding. The isolation: isolate property is applied to the container, which creates a new stacking context for all its contents. This means that the inner element is isolated from the surrounding elements, and any z-index value applied to it will only affect elements inside the container.

Note that the isolation property is not supported in all browsers, so it's important to test your code thoroughly and consider providing fallbacks or alternative solutions if needed

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        isolation: isolate;
        background-color: lightblue;
        padding: 20px;
      }

      .inner {
        background-color: white;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>This is some text inside a container.</p>
      <div class="inner">
        <p>This is some text inside an inner element.</p>
      </div>
    </div>
    <p>This is some text outside the container.</p>
  </body>
</html>

The inset property in CSS

In this example, the inset property is used to set the position of the .box element relative to its containing element. The four values specified for the inset property represent the top, right, bottom, and left edges of the box, respectively. In this case, the .box element is positioned 20px from the top, 30px from the right, 40px from the bottom, and 50px from the left.

Note that the position property must be set to absolute or fixed in order for the inset property to work. Additionally, the inset property is shorthand for the top, right, bottom, and left properties, so you can use those properties individually if you prefer.

<!DOCTYPE html>
<html>
  <head>
 <style>
.box-block {
  position: relative;
  background-color: lightblue;
  padding: 30px;
}
.box {
  position: absolute;
  inset: 30px 300px 40px 10px; /* top, right, bottom, left */
  background-color: red;
  color: white;
  padding: 30px;
}
</style>
  </head>
  <body>
    <div class="box-block"> 
<div class="box">Hello, World!</div>
  </div>
  </body>
</html>

The counter property in CSS

In this example, we use the counter-reset property to set the initial value of a counter named "my-counter" to 0. Then, we use the counter-increment property and the content property to display the current value of the counter before each list item. The counter function is used to retrieve the current value of the counter, and we append a period and a space to it using the CSS string concatenation operator, which is the dot (.).

When you view this HTML file in a browser, you should see a numbered list with each item numbered sequentially (1. First item, 2. Second item, 3. Third item). You can customize the appearance of the numbers by applying CSS styles to the li:before pseudo-element, such as changing the font size, color, or position. You can also use CSS counters to create more complex numbering schemes, such as nested lists or chapter headings.


<!DOCTYPE html>
<html>
  <head>
 <style>
<style>

.counter {
  margin-top: 40px;
}
ul {
 margin-top:90px;
 padding:0 20px;
}
li {
  list-style:none;
  margin:20px 0;
  paddin:0px;
}
body {
  counter-reset: my-counter;
}
li:before {
        counter-increment: my-counter;
        content: counter(my-counter) ") ";
}

</style>
</style>
  </head>
  <body>
   <!-- counter  -->
<div class="counter">
 <ul>
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
    </ul>
</div>
  </body>
</html>

The filter property in CSS

In this example, we use the sepia, contrast, brightness, and saturate filters to create a sepia-toned, high-contrast, slightly brighter, and more saturated version of the image. You can adjust the values of these filters to create different effects and experiment with other filter functions as well.

<img src="https://fastly.picsum.photos/id/264/536/354.jpg?hmac=Kw8G_8RzbNOCCkkTOSRjpvdK7rk1ApMcWlkJW7OuRVk" 
alt="My image"
>

<style>
img {
filter: sepia(50%) contrast(150%) brightness(90%) saturate(120%);
}
</style>

The contain property in CSS

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        contain: layout;
      }

      .child {
        width: 50%;
        height: 50%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="child">
        <p>This is some content inside a child element.</p>
      </div>
    </div>
  </body>
</html>

In this example, we have a container element with the contain property set to layout. This means that the layout of the container and its contents is independent of the rest of the page layout, and any changes made inside the container will not affect elements outside it.

Inside the container, we have a child element with a specified width and height. Because the container has contain: layout, the child element's layout will not be affected by anything outside the container, including other elements or styles. This can improve rendering performance because the browser can optimize the layout and rendering of the container and its contents without considering other elements on the page.

Note that the contain property is not supported in all browsers, so it's important to test your code thoroughly and consider providing fallbacks or alternative solutions if needed. Also, the contain property has different values for different use cases, such as contain: paint for optimizing painting performance or contain: size for optimizing size calculations. Be sure to choose the appropriate value for your specific use case.

Support 🤗

YouTube
Website

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you later! 😊😊

CSS !important: Avoid Using

StakeDesigner — Sun, 19 Feb 2023 19:10:32 +0000

CSS (Cascading Style Sheets) is a powerful tool that enables web developers to style and format their websites. However, sometimes it can be challenging to get CSS to apply styles exactly as intended. One such tool in the CSS arsenal is the !important rule, which can be used to override other styles and force a particular style to be applied.

While the !important rule can be a useful tool in certain situations, it should be used sparingly and with caution. Overuse of !important can make it difficult to maintain and update a website's styles in the future, and it can also lead to unexpected behavior and styling issues.

What does the !important tag actually do?

When you’re just starting with CSS, the !important tag seems like a secret weapon that you can pull out when styles aren’t working as expected. This situation occurs when you’re trying to override styles that are declared somewhere else in your CSS.

For example, let’s imagine you want to italicize everything that appears inside of <blockquote> elements.

blockquote * {
    font-style: italic;
}

And for some reason it’s not working as you would expect, so you add !important and everything is fine! It’s like magic!

blockquote * {
    font-style: italic!important;
}

What you’re actually doing in this case is increasing the specificity of everything inside blockquotes to an unreasonably high level.

By using !important, you’re essentially telling the browser that, under no circumstances should elements inside of blockquotes ever be anything other than italic.

This is a mistake. Let me explain.

Why you should avoid using !important in your CSS

Using the same scenario as above, let’s imagine 6 months go by and another developer on your team needs to “unitalicize” (for lack of a better word) blockquote text in some cases….such as citations. This is the first attempt:

HTML

<blockquote>
    <p>Don't write lazy CSS</p>
    <cite>- Nick Rollins</cite>
</blockquote>

CSS

cite {
    font-style: normal;
}

Despite declaring a normal font-style specifically for the element, the text is still italicized.

Don’t write lazy CSS
– Nick Rollins

Under normal circumstances, this would override the font-style that is set for the element, but it’s not working as expected!

The developer may even try adding a class or an ID to the element, only to discover that nothing will override the italicized text.

At this point, the only option is to add an !important tag to force the style to apply.

cite {
    font-style: normal!important;
}

Here are some reasons why you should avoid using !important in your CSS code:

Specificity issues: The specificity of a CSS selector determines which styles take precedence over others. When you use !important, you increase the specificity of a style, which can cause conflicts and make it difficult to override the style in the future.
Maintenance challenges: Using !important can make it difficult to maintain and update a website's styles because it requires a lot of manual work to override styles that are marked as important. This can slow down development time and lead to mistakes and errors.
Unexpected behavior: When you use !important, it can override styles that you didn't intend to modify, which can cause unexpected behavior and visual issues on the website.

So what can you do instead of using !important? Here are some alternative strategies that you can use to achieve the same results:

Increase specificity: Instead of using !important, try increasing the specificity of your CSS selector. This can be achieved by adding more specific classes or IDs to the selector, or by using a more targeted CSS selector.
Use inline styles: Another way to ensure that a style is applied is to use inline styles. Inline styles are applied directly to the HTML element, which makes them very specific and difficult to override.
Avoid conflicts: One of the best ways to avoid conflicts and the need to use !important is to keep your CSS organized and modular. Use separate files for different sections of the website, and avoid using global styles that can affect multiple elements at once.
Use CSS pre-processors: CSS pre-processors, such as Sass and Less, allow you to write CSS code with advanced features like nesting, variables, and mixins. These features can help you avoid the need to use !important by making your code more organized and easier to maintain.

conclusion

CSS !important rule can be a useful tool in certain situations, but it should be used sparingly and with caution. By following the alternative strategies listed above, you can achieve the same results without compromising the maintainability and readability of your CSS code.

Support 🤗

YouTube
Website

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you later! 😊😊

What are Attribute Selectors? - [attribute]

StakeDesigner — Thu, 16 Feb 2023 12:01:57 +0000

CSS attribute selectors are a powerful tool in web development. They allow developers to select HTML elements based on the values of their attributes and apply styles accordingly. In this article, we will discuss what CSS attribute selectors are, how they work, and some common examples.

What are Attribute Selectors?

Attribute selectors in CSS are used to select HTML elements based on their attribute values. They allow developers to apply CSS styles to elements that meet certain criteria. An attribute selector consists of the attribute name enclosed in square brackets, optionally followed by a comparison operator and a value. For example, the following code selects all anchor tags with a href attribute that starts with "http":

a[href^="http"] { color: blue; }

In this example, the attribute selector is href^="http", which selects all anchor tags with an href attribute that starts with "http".

The Seven Different Types

There are seven different types of matches you can find with an attribute selector, and the syntax is different for each. Each of the more complex attribute selectors build on the syntax of the exact match selector — they all start with the attribute name and end with an equals sign followed by the attribute value(s), usually in quotes. What goes between the attribute name and equals sign is what makes the difference among the selectors.

[data-value] {
  /* Attribute exists */
}

[data-value="foo"] {
  /* Attribute has this exact value */
}

[data-value*="foo"] {
  /* Attribute value contains this value somewhere in it */
}

[data-value~="foo"] {
  /* Attribute has this value in a space-separated list somewhere */
}

[data-value^="foo"] {
  /* Attribute value starts with this */
}

[data-value|="foo"] {
  /* Attribute value starts with this in a dash-separated list */
}

[data-value$="foo"] {
  /* Attribute value ends with this */
}

Example

Case-insensitive matching

Case-insensitive attribute selectors are part of the CSS Working Group’s Selectors Level 4 specification. As mentioned above, attribute value strings are by default case-sensitive, but can be changed to case-insensitive by adding i just before the closing bracket:

[attribute="value" i] {
  /* Styles here will apply to elements with:
    attribute="value"
    attribute="VaLuE"
    attribute="VALUE"
    ...etc
  */
}

Conclusion

CSS attribute selectors are a powerful tool for web development. They allow developers to select HTML elements based on their attribute values and apply styles accordingly. Understanding how attribute selectors work and how to use them effectively is essential for creating visually appealing and engaging web pages. With these selectors, developers can create dynamic and interactive user interfaces, making the web a more engaging and enjoyable experience for users.

Support 🤗

YouTube
Website

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you later! 😊😊

Semantic HTML: What It Is and How It Improves Your Site

StakeDesigner — Wed, 15 Feb 2023 19:24:21 +0000

Introduction 📝

Semantic HTML, or "meaningful HTML," is a way of structuring HTML code to convey its meaning to both human readers and search engine algorithms. By using semantic tags and attributes, you can improve the accessibility, usability, and SEO of your website. In this article, we'll take a closer look at what semantic HTML is, how it works, and why it's important for your website.

What is Semantic HTML?

Semantic HTML refers to the use of specific HTML tags and attributes to convey the meaning of the content on a webpage. Unlike presentational HTML, which focuses on the visual appearance of a webpage, semantic HTML focuses on the underlying structure and meaning of the content.

For example, instead of using a <div> element to create a container for some text, you might use a <section> or <article> element, depending on the purpose of the content. By using these semantic tags, you provide more information about the content to search engines and assistive technology, which can help improve your website's ranking and accessibility.

Semantic HTML Tags

Since semantic HTML revolves around the proper use of tags, let’s review some common semantic tags you can implement on your site. We’ve broken these tags down into those used on text, those used to communicate page layout, and other handy semantic tags.

<p>(paragraph) A paragraph of text presented as a block.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> A page <h1> is the top-level heading, and there should only be one per page. The proceeding tags are ordered by descending importance. Browsers will apply font weight and size styling accordingly.
<ol> (ordered list): A list of items that must display in a particular order. Browsers typically apply numbers to each item.
<ul> (unordered list): A list of items in which order is not important. Browsers typically apply bullets or dashes to each item.
<a> (anchor): A hyperlink. By default, browsers will change the link color to blue and add an underline which you can remove.
<q> (quote) and <blockquote>: A quotation. Use <q> for shorter quotes and <blockquote> for longer quotes.
<code>: Computer code. Browsers typically apply styling to differentiate this text from the surrounding text.
<em> (emphasis): Emphasizes text. Most browsers italicize text inside this tag by default.
<strong>: Draws attention to important text. Most browsers bold the text inside this tag by default.
<header>:The header of the page. Headers often contain the organization’s name and logo, primary navigation, a search bar, a sign-in prompt, and/or a shopping cart icon.
<footer>: The footer of the page. Footers often contain additional information like an address, a contact form, and/or legal information.
<main>:Contains the main content of a page. This is the content that is unique to the specific page, and where visitors will probably spend most of their time.
<nav>: The site navigation. This tag usually contains a list of links to different parts of the website.
<aside>: Contains related content that doesn’t belong with the main content but is still related to it — this might be a related posts list or a sidebar containing display ads.
<article>: A standalone piece of content, like a blog post or a news article.
<section>: A section of a longer text piece. For example, you could assign a different to different h2s of a blog post.
<img>: An image.
<table>: A table with columns and rows of data.
<figure> and <figcaption>: Used for images that require a description. contains the image itself, and contains the caption associated with the image.
<iframe>:An embedded element.

Semantic HTML Page Layout

Let's first consider a basic HTML page template, written in non-semantic HTML:

    <head>
        <title>Example</title>
    </head>
    <body>
        <div id="header">
            Here goes logo, navigation, etc.
        </div>
        <div id="main-content">
            A place for website's main content
        </div>
        <div id="footer">
            Footer information, links, etc.
        </div>
    </body>
</html>

How consider the example of semantic HTML shown below

    <head>
        <title>Example</title>
    </head>
    <body>
        <header>
            Here goes the logo, navigation, etc.
        </header>
        <main>
            A place for the website's main content
        </main>
        <footer>
            Footer information, links, etc.
        </footer>
    </body>
</html>

Why is Semantic HTML Important?

Semantic HTML is important for a number of reasons, including:

Accessibility: Semantic HTML can help make your site more accessible to people with disabilities, including those who use screen readers and other assistive technologies.
SEO: By using semantic tags and structured data, you can help search engines understand the content of your site and improve your rankings in search results.
Consistency: Semantic HTML can help ensure that your site has a consistent and meaningful structure, which can improve usability and user experience.
Maintenance: By using semantic HTML, you can make it easier to maintain and update your site over time, since the code will be more organized and easier to understand.

Conclusion:

Semantic HTML is a powerful tool for improving the accessibility, usability, and SEO of your website. By using semantic tags and attributes, you can provide more meaningful information about your content, which can help search engines and assistive technology understand the structure and meaning of your site. So if you're looking to improve the performance and user experience of your website, consider using semantic HTML to structure your content in a meaningful and consistent way.

Support 🤗

YouTube
Website

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you later! 😊😊

How to optimize website assets loading?

StakeDesigner — Wed, 15 Feb 2023 03:56:15 +0000

Website performance is crucial to the success of any online business. Slow loading times can lead to frustration and dissatisfaction among users, leading to a loss of traffic and revenue. One of the most important aspects of website performance is asset loading, which includes images, stylesheets, scripts, and other resources that the website needs to function properly.

Here are some tips on how to optimize website asset loading:

Minimize the number of requests: The more requests a website makes, the longer it takes to load. Reduce the number of requests by combining files where possible, eliminating unnecessary assets, and using browser caching.
Optimize images: Images are often the largest files on a website, so optimizing them can significantly improve loading times. This includes compressing images to reduce file size, resizing images to the required dimensions, and using the appropriate file format.
Use a Content Delivery Network (CDN): A CDN can speed up website loading times by distributing website assets across a network of servers, which are closer to the user. This reduces the distance that data needs to travel, leading to faster loading times.
Use lazy loading: Lazy loading is a technique that delays the loading of non-critical assets until they are needed. This means that the initial page load is faster, and the user only needs to wait for the necessary assets to load.
Minify code: Minifying code involves removing unnecessary characters and white space to reduce file size. This can lead to faster loading times, as the browser doesn't need to process as much data.
Prioritize critical assets: Critical assets, such as the website's main stylesheet and scripts, should be loaded first. This ensures that the website is functional as soon as possible, even if other assets are still loading.
Use asynchronous loading: Asynchronous loading allows assets to load simultaneously, rather than waiting for each asset to load before starting on the next. This can significantly improve loading times, particularly for scripts.
Avoid redirects: Redirects can slow down website loading times, particularly if there are multiple redirects. Reduce the number of redirects by using direct links to assets.

conclusion

Optimizing website asset loading is crucial for improving website performance and user experience. By following these tips, you can significantly reduce loading times and improve the overall performance of your website.

Support 🤗

YouTube
Website

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you later! 😊😊

DEV Community: StakeDesigner

6 Best JavaScript Courses Online in 2024 (Free and Paid)

*The Best JavaScript Courses in 2024 *

1 ) Programming Foundations with JavaScript, HTML, and CSS – [Coursera]

2. The Complete JavaScript Course 2023: From Zero to Expert ( Udemy )

3. Modern JavaScript From The Beginning 2.0 [Udemy]

4. Learn JavaScript (Codecademy)

5. [Udacity] Full Stack JavaScript Developer Nanodegree

6.[Linkedin Learning] Learning the JavaScript Language

How to make Random Color Palette Generator

Steps to Create Random Color Palette in JavaScript

Conclusion and Final Words

Support 🤗

Thanks for reading!

Custom Modal Box HTML CSS & JavaScript

Custom Modal or Dialog Box [Source Codes]

HTML

CSS

Support 🤗

Thanks for reading!

How to make Digital Clock JavaScript

Prerequisites for Digital Clock JavaScript

Project Folder Structure

HTML

CSS:

Javascript:

Support 🤗

Thanks for reading!

How to make Custom Captcha Generator in CSS & JavaScript

Support 🤗

Thanks for reading!

Best Practices for Naming Classes in HTML and CSS Files

Be Descriptive and Intentional:

Use Semantic Naming:

Follow a Consistent Naming Convention:

Avoid Presentational or Styling Names:

Use Short and Meaningful Class Names:

Be Mindful of Scope:

Avoid Inline Styling:

Conclusion:

Support

6 CSS Features to Make a Responsive Website

1.Flexbox

2.Grid

3.Viewport units

4.clamp()

5.Aspect Ratio

6.Scroll Snap

🍀Support

Thanks for reading!

5 super useful CSS properties

The isolation: isolate property in CSS

The inset property in CSS

The counter property in CSS

The filter property in CSS

The contain property in CSS

Support 🤗

Thanks for reading!

CSS !important: Avoid Using

What does the !important tag actually do?

Why you should avoid using !important in your CSS

Here are some reasons why you should avoid using !important in your CSS code:

So what can you do instead of using !important? Here are some alternative strategies that you can use to achieve the same results:

conclusion

Support 🤗

Thanks for reading!

What are Attribute Selectors? - [attribute]

What are Attribute Selectors?

The Seven Different Types

Example

Case-insensitive matching

Conclusion

Support 🤗

Thanks for reading!

Semantic HTML: What It Is and How It Improves Your Site

Introduction 📝

What is Semantic HTML?

Semantic HTML Tags

Semantic HTML Page Layout

Why is Semantic HTML Important?

The Best JavaScript Courses in 2024