DEV Community: Binate Noor

Top YouTube Channels Front-End Developers Should Follow

Binate Noor — Mon, 06 Mar 2023 04:51:27 +0000

Traversy MediaTraversy Media: Covering a wide range of topics, including HTML, CSS, JavaScript, React, and more.
Dev EdDev Ed: focusing on modern web development with tutorials and projects.
DesignCourseDesignCourse - Covering front-end design and development with HTML, CSS, JavaScript, and more.
Kevin PowellKevin Powell - Focusing on CSS with tutorials, projects, and challenges.
Net NinjaNet Ninja - Covering web development with tutorials on HTML, CSS, JavaScript, React, and more.
FreeCodeCampFreeCodeCamp: Offering tutorials and challenges for learning web development, including front-end technologies.
CSS TricksCSS Tricks: Offering tutorials and articles on CSS and front-end development
AcademindAcademind: Focusing on web development with tutorials on front-end and back-end technologies.

If you have any questions, you can write me on Twitter.

Top In-Demand Freelance skills for the job

Binate Noor — Fri, 27 Jan 2023 12:33:56 +0000

The biggest freelance marketplace in the world, Upwork, has published its annual list of the most in-demand freelance skills in various categories, including technology, creativity, marketing, and advertising.

10 Tech skills for the job:

Full Stack Development
Front-End Development
Back-End Development
Mobile App Development
Web Design
Ecommerce Website Development
UX/UI Design
CMS Development
Manual Testing
Scripting & Automation

10 Marketing skills for the job:

SEO
Social Media Marketing
Digital Marketing
Lead Generation
Sales & Business Development
Telemarketing
Search Engine Marketing
Email Marketing
Marketing Strategy
Marketing Automation

10 Customer Service & Admin Support skills for the job:

Email, Phone & Chat Support
General Virtual Assistance
Data Entry
Digital Project Management
General Research Services
Tech Support
Dropshipping & Order Processing
Community Management
Market Research
Transcription

10 Accounting & Consulting skills for the job:

Accounting
Recruiting & Talent Sourcing
Bookkeeping
Financial Analysis & Modeling
Management Consulting
Instructional Design
HR Administration
Business Analysis & Strategy
Tax Preparation
Financial Management/CFO

10 Design & Creative skills for the job:

Graphic Design
Video Editing
Illustration
3D Animation
Presentation Design
Image Editing
Cartoons & Comics
Product & Industrial Design
2D Animation
Video Production

**Conclusion
**In terms of year-over-year growth, the most in-demand skills on the Upwork platform are sales and business development (54%), data entry (47%), accounting (45%), and 3D animation (44%).

We hope you find these in-demand freelance skills as valuable and informative as we did. Please do not hesitate to ask any questions about this article.

What's New In DevTools (Chrome 95)

Binate Noor — Wed, 20 Oct 2021 07:04:00 +0000

1. New CSS length authoring tools

DevTools added a simpler yet flexible way of refreshing lengths in CSS!

In the Styles pane, look for any CSS property with length (e.g. height, padding).

2. Hide issues in the Issues tab

You would now be able to conceal explicit issues in the Issues tab to zero in just on those issues that make a difference to you.

In the Issues tab, hover over on an issue you would like to hide. Click on More options More > Hide issues like this.

All hidden issues will be added under the Hidden issues pane. Expand the pane. You can unhide all hidden issues or a selected one.

3. Improved the display of properties

DevTools improve the display of properties by:

Always bold and sort owns properties first in the Console, Sources panel, and **Properties **pane.
Flatten the properties display in the Properties pane.

For example, the snippet below creates an URL object link with 2 own properties: user and access, and updates the value of an inherited property search.

/* example.js */

const link = new URL('https://goo.gle/devtools-blog');

link.user = { id: 1, name: 'Jane Doe' };
link.access = 'admin';
link.search = `?access=${link.access}`;

Try logging the link into the Console. Own properties are now bold and sorted first. These changes make it easier to spot custom properties, especially for Web APIs (e.g. URL) with many inherited properties.

Apart from these changes, the properties in the Properties pane are also flattened now for better DOM properties debugging experience, especially for Web components.

4. Lighthouse 8.4 in the Lighthouse panel

The Lighthouse panel is now running Lighthouse 8.4. Lighthouse will now detect if the Largest Containful Paint (LCP) element was a lazy-loaded image and recommend removing the loading attribute from it.

5. Sort snippets in the Sources panel

The snippets in the Snippets pane under the Sources panel are now sorted alphabetically. Previously, it’s not sorted.

Utilize the snippets feature to run commands quicker.

6. Report a translation bug and New links to translated release notes

You can now click to read the DevTools release notes in 6 other languages **- **Russian, Chinese, Spanish, Japanese, Portuguese, and **Korean **via the What’s new tab.

Since Chrome 94, you can set your preferred language in DevTools. If you found any issues with the translations, help us improve it by reporting a translation issue via More options > Help > Report a translation bug.

7. Improved UI for DevTools command menu

Did you find it hard to search for a file in the Command Menu? Good news for you, the Command Menu user interface is now enhanced!

Open the Command Menu to search for a file with keyboard shortcut Control+P in Windows and Linux, or Command+P in MacOS.

The UI improvements of the Command Menu are still ongoing, stay tuned for more updates!

Thanks for reading this!

Follow Me:

Hire me:Fiverr (WordPress Website Developer & Designer | SEO)
20 Google Chrome Extension Which helpful for freelancer work
3 Ways To Get Your First Order on Fiverr in 2022
5 Free Books Reading Online
What is Freelancing and How does Freelancing work?
5 High Demand Internet Marketing Services in 2022
6 Best Weight loss Apps Help You Hit Your Goals

Use Images as Background with HTML & CSS

Binate Noor — Mon, 18 Oct 2021 11:56:00 +0000

Adding a Background Image in HTML is one of the most common tasks when you are working on Web Designing.
As a new web designer, one very skill you'll need to master is using background images.

The following pointers will be covered in this:

1. Background Image in HTML

1. CSS background-image Property

2. Background Cover

3. Two Background Images

4. Background Repeat

5. Using Class

6. Linear-gradient

7. Three Color Gradient

8. Repeating Linear Gradient

9. Radial Gradient

10. Three Color Radial Gradient

11. Repeating Radial Gradient

12. Creating "Hero" image with CSS

Background Image in HTML:

There are various ways in which images can be added to a web page to make it look captivating & appealing. One of such ways is adding a background image. In this blog, I can add background images to a webpage using HTML & CSS. The most common & simple way to add a background image is using the background image attribute inside the

tag.

<div style="background-image: url('binateNoor.jpg')";>
</div>

CSS background-image Property:

I will be defining the CSS code inside the "style" tag. I will also look at how to target div tags and class using CSS. In the below example, I am specifying the background-image & background-color CSS property which will set the background image & background property for the HTML body respectively.

<style> 
body {
  background-image: url("bg1.jpg");
  background-color: #cccccc;
}
</style>

Background Cover:

If you want the background image to cover the entire element, you can set the background-size property to cover.

Also, to make sure the entire element is always covered, set the background-attachment property to fixed.

<style>
 body {
   background-image: url('binateNoor.jpg');
   background-repeat: no repeat;
   background-attachement: fixed;
   background-size: cover;
}
</style>

2 Background Images:

You can also go ahead and add two background images for the "body" element.

body {
  background-image: url("bg3.png"), url("bg1.jpg");
  background-color: #cccccc;
}

Notes:

The background image by default is added to the left corner & is repeated both ways, i.e. horizontally & vertically.

The reason why it is preferred to keep a background color is that if the image is unavailable, so the background-color property will be used and the same will be displayed.

Now before understanding how I can use different CSS property values, let’s look at the list of CSS property values associated with the background image.

url: URL to the background image. In case of more than one image, comma-separated list needs are provided.
linear-gradient(): Sets a linear gradient as the background image. Needs at least 2 colors.
radial-gradient(): Sets a radial gradient as the background image. Needs at least 2 colors.
repeating-linear-gradient(): Repeats a linear gradient
repeating-radial-gradient(): Repeats a radial gradient
initial: Sets the property to its default value
inherit: Inherits this property from its parent element

Background Repeat:

Here I am trying to add a couple of background images where the first image will appear only one time and the second image will be repeated. We are using background-repeat to do so.

<style>
body {
  background-image: url("bg2.jpg"), url("bg3.png");
  background-repeat: no-repeat, repeat;
  background-color: #cccccc;
}
</style>

Using Class:

In this example, I am creating a bg-image with various background properties such as image, color, position & repeat. I am targeting the bg-image class to apply the background properties to the webpage.

<style>
  .bg-image {
     background-image: url("bg2.jpg");
     background-color: #cccccc;
     height: 500px;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     position: relative;
}
</style>

Linear-gradient:

Here I am creating a linear gradient using two colors(i.e. red & yellow) and setting it as the background image.

<style> 
#gradient {
  height: 200px;
  background-color: #cccccc;
  background-image: linear-gradient(red, yellow);
}
</style>

3 Color Gradient:

Here I am creating a linear gradient using three colors(i.e. red, blue & green) and setting it as the background image.

<style>
  #gradient1 {
     height: 300px;
     background-color: #cccccc;
     background-image: linear-gradient(red, blue, green);
}
</style>

Repeating Linear Gradient:

In this example, I am repeating the linear gradient using repeating-linear-gradient() functions and set it as the background image.

<style>
  #gradient {
     height: 300px;
     background-color: #cccccc;
     background-image: repeating-linear-gradient(red, blue 20%, green 30%);
}
</style>

Radial Gradient:

Here I am creating a radial gradient using two colors(i.e. red & yellow) and setting it as the background image.

<style>
  #gradient {
     height: 300px;
     background-color: #cccccc;
     background-image: radial-gradient(green, red);
}
</style>

3 Color Radial Gradient:

Here I am creating a radial gradient using three colors(i.e. red, blue & green) and setting it as the background image.

<style>
  #gradient {
     height: 500px;
     background-color: #cccccc;
     background-image: radial-gradient(red, blue, green);
}
</style>

Repeating Radial Gradient:

In this example, I am repeating the radial gradient using repeating-radial-gradient() functions and set it as the background image.

<style>
  #gradient {
     height: 200px;
     background-color: #cccccc;
     background-image: repeating-radial-gradient(red, blue 10%, green 20%);
}
</style>

Creating "Hero" image with CSS:

Creating "Hero" image with CSS

.hero-image {
   background-image: URL("binatenoor.jpg");
   background-color: #def345;
   height: 500px;
   background-position: center;
   background-repeat: no-repeat;
  background-size: cover;
}

Now after executing the above snippets you would have understood how to insert a background image in a webpage using HTML & CSS. I hope this blog is informative and added value to you.

Follow Me:

Hire me:Fiverr (WordPress Website Developer & Designer | SEO)
20 Google Chrome Extension Which helpful for freelancer work
3 Ways To Get Your First Order on Fiverr in 2022
5 Free Books Reading Online
What is Freelancing and How does Freelancing work?
5 High Demand Internet Marketing Services in 2022
6 Best Weight loss Apps Help You Hit Your Goals

VS Code Keyboard Reference Sheets

Binate Noor — Fri, 15 Oct 2021 19:43:00 +0000

The Visual Studio IDE (integrated development environment) is a software program for developers to write and edit their code. Its user interface is used for software development to edit, debug and build code. Visual Studio Code lets you perform most tasks directly from the keyboard.

Microsoft Visual Studio is an integrated development environment from Microsoft. It is used to develop computer programs, as well as websites, web apps, web services, and mobile apps.

Keyboard rules

Each rule consists of:

A key that describes the pressed keys.
A command containing the identifier of the command to execute.
An optional when clause containing a boolean expression will be evaluated depending on the current context.

Chords (two separate keypress actions) are described by separating the two keypresses with a space. For example, Ctrl+K Ctrl+C.

When a key is pressed:

The rules are evaluated from bottom to top.
The first rule that matches, both the key and in terms of when is accepted.
no more rules are processed.
if a rule is found and has a command set, the command is executed.

Keyboard Shortcuts Reference:

Below are links to the three platform-specific versions (US English keyboard):

1. Windows

2. macOS

3. Linux

1. Windows Keyboard Reference Sheet

2. macOS Keyboard Reference Sheet

3. Linux Keyboard Reference Sheet

Thanks for reading!!

Follow Me:

Hire me:Fiverr (WordPress Website Developer & Designer | SEO)
20 Google Chrome Extension Which helpful for freelancer work
3 Ways To Get Your First Order on Fiverr in 2022
5 Free Books Reading Online
What is Freelancing and How does Freelancing work?
5 High Demand Internet Marketing Services in 2022
6 Best Weight loss Apps Help You Hit Your Goals