DEV Community: Youssef Hefnawy

The Non-developers Guide to Optimize Your Website Images!

Youssef Hefnawy — Mon, 18 Dec 2023 18:56:49 +0000

The first thing I look for when examining a website's performers is images!

It is the easiest to fix and the most common cause of bad performers, People just can't resist adding a 4K image to their site, and it's not just the quality of the image, image type, size, and even the way the image is called can be the reason!

Here's a quick guide to improving your website's images for Non-Developers.

The Non-Developers Guide:

If you use WordPress or something similar, there are plugins or some settings that you can use to improve images at least a little, so the first step is usually to start here. But often more than this alone will be needed if the basics themselves are wrong!

WordPress plugins:

WP Smush
ShortPixel Image Optimizer
Imagify

but If you are a smart person and do not use WordPress, follow the following guide:

Do you really need an image? Font/Svg!

If you hire a designer for 10,000 and he gives you a logo consisting only of a fancy font, at least make sure he gives you the name of the font.

Using Fonts

The font is smaller in size and can be easily modified compared to the image, so If you find an image consisting of text with a colored background, replace it with real text and background. This is not only better for the site’s performance, but also for SEO!

visit Google Fonts to get all the fonts you want!

using SVG

what’s an SVG you ask!

it’s the smarter but less beautiful sister of the image, as Instead of storing pixels, it performs mathematical equations to determine its shape, which makes it super easy to customize and so much smaller in size compared to the image but this is in exchange for less complexity.

So if all you want is a Facebook icon or a down arrow, use SVG.

If you want to know the best Icon sites, you can read → Top 5 Icon websites

Use the right size/type!

If you are using an image of an entire forest to display only one tree, this might be the reason for your bad performance. maybe!

so crop the image to display only what you want from the image.

Right image size:

If your phone is 400px wide, do not use a 4k image, believe me, a low-quality image will look good in a small size, so for a 400px screen use a 400px image!

You can use one of the following tools to resize images:

Right image type:

I would be filling the article with filler if I started talking about the difference between types of images so here's the general rule:

JPEG: For photographs, good compression.
PNG: For transparency, lossless quality.
WebP: Good balance of quality and size (browser support may vary).
HEIF: Efficient compression, newer devices.

Your site is bad from the beginning, so use WebP and don't bother with browser support — said your customer

You can use one of the following tools to convert images:

Compress your image.

Image compression is the second closest thing we have to black magic after AI

When compressing the image, its size may reach half the original size without noticing any noticeable difference in image quality, If you're wondering why images aren't this small in the first place, Keep wondering because I don't know either, but I'm sure Adobe had something to do with it.

You can use one of the following tools to Compress images:

How does image Compression work?

an AI-generated explanation of how image compression works:

Imagine you have a slice of bread, and you want to spread butter on it. The bread is like your original image, and the butter represents the details and colors in that image.

Now, to make it easier to carry or store, you decide to compress it. Compression, in this case, is like melting the butter and spreading it more thinly across the bread while still keeping its taste. You use less butter, but you can still enjoy the flavor.

In the same way, image compression reduces the amount of data needed to represent the picture, but it tries to keep the essential details intact. So, just like you can have a smaller amount of spread-out butter that retains the essence of the taste, compressed images take up less space but aim to preserve important visual information.

Quote of the day

looking back, every single time I’ve been inspired to do
something difficult, I was in a soft environment, because it all sounds doable
when you’re chilling on your fucking couch -*Can't Hurt Me- David_Goggins*

How to sell anything! Increase your offer value to 100X| $100M Offers By Alex Hormozi book sum.

Youssef Hefnawy — Wed, 13 Dec 2023 16:48:55 +0000

$100M Offers!

With over 300,000 copies sold and a #1 Amazon bestseller ranking for 74 consecutive weeks, this book has transformed businesses and lives.

With a title like this and claims like:

Make people an offer so good they would feel stupid saying no.
Charge as high a price as you can say out loud without cracking a smile.
Creating Irresistible Products

You may think this book tells the story of some Very talented and lucky people, then gives you an empty box and tells you to fill it with your goals and achieve them by dividing them into small tasks.

but you are wrong!

This is undoubtedly one of the best books in its field. and It is one of the few books that I rate 5/5, whether the simple writing style or actually Providing a workable plan for success!

Author's notes:

Due to the amount of content in the book and your short attention span, I will divide the summary into parts starting with The Value Equation.
This summary is not a detailed summary, page by page, but rather a useful summary of the book’s content. Why, you're not in school, you don't have to study this book page by page!

Don't just read my summary, read the book!

Reading summaries will not be enough, as to implement what is in the books you must be convinced of what it says, and a summary read in 5 minutes will not make you convinced of the idea enough to believe in its success

Go and get the book with my Affiliate Link (: → $100M Offers By Alex_Hormozi

Goodreads → $100M Offers on Goodreads

The Value Equation.

Make people an offer so good they would feel stupid saying no!

“Charge as high a price as you can say out loud without cracking a smile”

By increasing the value of the offer, you can sell the same product at a higher price, Imagine the difference between a taxi driver and a Limousine driver, same skill but different value, and by increasing the value of your product, you can sell anything at any price, but how?

The Value Equation!

The reason people buy anything is to get a deal. They believe what they are getting (VALUE) is worth more than what they are giving in exchange for it (PRICE). The moment the value they receive dips below what they are paying, they stop buying from you. This price to value discrepancy is what you need to avoid at all costs.

The value equation = [ Dream * the possibility of success ] \ [ Time * Ease of use ]

1- Result, a dream that you can achieve for the customer!

What's the difference between a skin-lightening cream and an anti-aging cream? Both producers achieve the same goal, Not to be ugly, but the difference in the size of the gap!

The gap, as defined by the book Gap Selling, is the difference between the customer's current state and their anticipated future state after purchasing your product. The greater the difference in value perception, the greater the opportunity for a successful sale.

To increase the results (dream), you must make sure that your product achieves the biggest goal you can achieve for the customer.

Examples:

Instead of simply writing an article for the customer, craft compelling copy that helps them build their brand identity.
Don't just sell a diet, offer a comprehensive plan for integrating healthy habits into your life.
Move beyond selling food, and focus on delivering an exceptional high-end dining experience.

To delve deeper into the dream/gap principle I advise you to read → Gap Selling

2- Confirm the probability of success

the placebo effect is a fascinating phenomenon in medicine. It demonstrates the powerful influence of our mind over our body. When a person believes a treatment will be effective, it can actually produce real physiological changes, leading to symptom improvement even if the treatment itself is inert.

This principle holds true for your product as well. The greater your ability to convince customers that it fulfills their needs, the higher your purchase rate will be.

You can achieve this by:

Highlighting your extensive experience and expertise in the field. By showcasing your knowledge and track record, you build trust and credibility with potential clients.
Offering risk-free guarantees, such as "no payment if it doesn't work" or "profit sharing" models. This demonstrates your commitment to client satisfaction and reduces the perceived risk for potential clients.
Sharing compelling testimonials and case studies demonstrating your product's success with other customers. Real-world examples of satisfied clients can be incredibly persuasive and provide social proof of your product's effectiveness.

Time, between purchasing the product and achieving the dream

The only thing that beats “free” is “fast.”

Without a doubt, speed is arguably the most important factor in the equation. Throughout history, "faster" has consistently outpaced "slower," as demonstrated by the evolution of transportation: horses gave way to cars, which themselves will be replaced by aircraft.

Most people focus only on results and marketing to ensure success. The competition here is so intense that it may be useless to say that your producer is the best, The solution is to make sure that your product is the fastest until you can say you are an Uber among the taxis!

Ease of use

Ease of use is…, you don't need an explanation of what ease of use is, right? Just make your product easy to use!

Conclusion

By applying this equation, you can guarantee that your offer delivers exceptional value. But now, the questions arise: how do you craft the offer and what product should it feature? Wait for the summary of the next chapter or Go ahead and delve into the book yourself You are not a child → $100M Offers By Alex_Hormozi

The Button that every Front-End developer should use, the written once-and-forgotten code!!!

Youssef Hefnawy — Sat, 02 Dec 2023 12:26:19 +0000

Why would I need a magic button?

I mean, who doesn't want a magic button? a Button that always works!

behaves as you expect it to behave and stays where you put it in the size you specified. I think you already have enough layout and responsiveness problems to add a bad button problem, I know it's just a button why overrengine it?

Because you will write the code once and forget it, Don't believe me, you can go to review the code on:

CodePen
GitHub

But if you want to understand how I made my magic button. Well, continue reading!

HTML `<button></button>`, Well not that simple!

If when you press the button and something happens use

add type=”button” To tell the browser how this button behaves, or any other button type .
if the button is icon only “no text” add aria-label=”description”
if the button is disabled add disabled` and aria-disabled=”true”

<button type="button" class="Button">normal</button> <button type="button" aria-label=”star” class="Button">*</button> <button type="button" disabled aria-disabled=”true” class="Button">disabled</button>

If when you press the button, you move to another page use the Anchor element

add role=”button” to specify to the browser what is the role of this link.

html <a href="#" role="button" class="Button">a link button</a>

But if you do not know which one to use, I recommend reading the following: Anchors vs Buttons

if you're thinking of using anything else as a button, here's a message from the smart people of Mozilla telling you why this is a stupid idea.

Note: If using role="button" instead of the semantic [button] or [input type="button"] elements, you will need to make the element focusable and define event handlers for click and keydown events. This includes handling the Enter and Space keypresses in order to process all forms of user input.

CSS that just works!

I want to admit something; I'm obsessed with buttons!

I've always been interested in creating the perfect button, as the first thing I do when trying a new library is check how they made the button, I even built a library specifically for that, a library that aims to provide only the Important items with high quality, you will find there even a more overrengined button, and If you would like to get it or help me to overengineer the front-end world with some high quality react component, visit Moon-RockUI

Help me launch version 1.0.0 soon!

Some basics before we start:

I will use rem and em a lot and other css units, if you want to know more, I advise you to read this: CSS Units Explained
In general, I use CSS custom properties in my own code, It gives me superpowers, but I won't use them in this article

Button Size:

the trick here is not to specify a fixed size, but rather to set limits for the largest and smallest size, as the button size will depend mainly on the font size, to determine the size we will follow the basic design rules for buttons to find out more, I recommend reading this: Button design for websites and mobile apps

css .Button { width: fit-content; max-width: min(100%, 100vw); } @supports not (width: fit-content) { .Button { width: auto; } }

width: fit-content;

we use fit-content as the size will use the available space, but never more than max-content.

max-width: min(100%, 100vw);

You specify the largest width that the element can reach max-width
using the min() To choose the smallest value between 100% linked to the size of the parent element, which may be half the screen for example.
100vw linked to the screen size.

You do this to allow the element to expand ( if desired ) to either parent size or screen size, without any overflow.

Button layout, display & Align:

I used to use display: Block then I used display: inline but when I was learning React I discovered MUI, and as usual, the first thing I did was look at how they did their button and I found them using inline-flex!

inline-flex The element behaves like an inline element and lays out its content according to the flexbox model.

`css
.Button {
display: inline-flex;
justify-content: center;
align-items: center;
vertical-align: middle;
text-align: center;
}

using the magic of Flex We will center any items inside this button. with:

justify-content
align-items

We will use properties like text-align & vertical-align in general for:

To make sure an extra image or strange text is always in the middle.
For the person who still uses an old browser (for browser support) In case flex doesn't work for some reason.

Button properties, padding & Font-size:

Here lies the magic that makes this button work in all cases and all sizes.

css .Button { padding: max(0.5em, 0.5rem) max(1.5em, 1.5rem); font-size: clamp(0.875rem, 0.7rem + 0.7vw, 1.375rem); } @supports not (font-size: clamp(0.875rem, 0.7rem + 0.7vw, 1.375rem)) { .Button { font-size: 1rem; } }

this seems more overkill than the max-width trick and it is, but You will only copy this code once and it will work in all cases.

padding: max(0.5em, 0.5rem) max(1.5em, 1.5rem); The trick here is to use max() Where if you notice that I use the same value once with rem and once with em but why?

The point of max() It is to choose which value is greater; Usually em will be bigger, Where if we assume that the font size of the button is 24px.

em = 24px and rem = 16px Follow the default browser size

So why do we do this? In general, when using a small font size such as 12px if you use just em The button dimensions will be too narrow Since it is related to the font size, but then rem will be the biggest.

em = 12px rem = 16px Still at the default text size

we use this trick to define the minimum space inside the button and at the same time it allows the button to grow with the font size.

font-size: clamp(0.875rem, 0.7rem + 0.7vw, 1.375rem); Honestly, I cannot explain to you how to choose these values here, as I will need another article.

But in short using clamp() Allows you to use a font that is responsive to your screen size with a minimum of 0.875rem and a maximum of 1.375rem ( for Example ).

To make it easier, you can use a font size clamp calculator

I strongly advise you to read these articles, as they will benefit you as web dev in general:

the Cherry on the Button:

`css
.Button {
overflow: hidden;
white-space: nowrap;
cursor: pointer;
user-select: none;
appearance: button;

}
`

overflow: hidden; To prevent anything from coming out outside the button.
white-space: nowrap; Prevent text from going to more than one line.
cursor: pointer; The cursor is a pointer that indicates a link. Typically an image of a pointing hand.
user-select: none; make The text of the element and its sub-elements is not selectable.

'user-select' is not supported by Safari, Safari on iOS.This is an optional feature where if the button contains important text, you may allow it
appearance: button; The appearance CSS property is used to control native appearance of UI controls, that are based on operating system's theme.

'appearance' is not supported by Safari on iOS < 15.4.

Button hover & focus:

Nothing special I just determined how the button behaves in different situations, and I used a cool focus ring trick I learned from the king of CSS.

`css
.Button {
box-shadow: 0 0 0 -0.4em hsl(0, 0%, 100%),
0 0 0 -0.6em rgba(13, 109, 253, 0.7);
transition: box-shadow 400ms cubic-bezier(0.66, -0.2, 0.27, 1.15);

}
.Button:active,
.Button:hover {
opacity: 0.7;
}
.Button:focus-visible {
box-shadow: 0 0 0 0.3em hsl(0, 0%, 100%),
0 0 0 0.5em rgba(13, 109, 253, 0.7);
}
.Button:focus {
outline: none;
}
`

Conclusion + Free gift!

I hope I kept my promise to you!

“the written once-and-forgotten code” thing, now go and copy the code. I want to fulfill my promise to you, If you would like to use a more complex button in your next project, you can visit Moon-RockUI, Where you can help me create the best button.

version 1.0.0 soon!

the complete code:

.Button { width: fit-content; max-width: min(100%, 100vw); display: inline-flex; justify-content: center; align-items: center; text-align: center; vertical-align: middle; overflow: hidden; appearance: button; user-select: none; text-transform: capitalize; white-space: nowrap; text-decoration: none; cursor: pointer; padding: max(0.5em, 0.5rem) max(1.5em, 1.5rem); font-size: clamp(0.875rem, 0.7220363289rem + 0.7648183556vw, 1.375rem); box-shadow: 0 0 0 -0.4em hsl(0, 0%, 100%), 0 0 0 -0.6em rgba(13, 109, 253, 0.7); transition: box-shadow 400ms cubic-bezier(0.66, -0.2, 0.27, 1.15); } .Button:active, .Button:hover { opacity: 0.7; } .Button:focus-visible { box-shadow: 0 0 0 0.3em hsl(0, 0%, 100%), 0 0 0 0.5em rgba(13, 109, 253, 0.7); } .Button:focus { outline: none; } @supports not (font-size: clamp(0.875rem, 0.7rem + 0.7vw, 1.375rem)) { .Button { font-size: 1rem; } } @supports not (width: fit-content) { .Button { width: auto; } }

4 ways to deal with overflowing text in CSS!

Youssef Hefnawy — Sun, 16 Jul 2023 20:30:38 +0000

Introduction:

CSS is awesome, said no one after his text overflow!

CSS is an incredibly powerful tool for web developers, but it's not without its challenges. One of the most common issues that developers face is data loss caused by overflow.

text can spill out and become hidden or unreadable. This can be frustrating, but luckily, CSS provides several solutions to prevent data loss caused by overflow.

So I present to you 4 ways to deal with overflowing text in CSS!

why does text overflow?

First, let's take a look at the root cause of overflow issues. Typically, overflow occurs when there is a fixed width on an element and its content exceeds that width.

In general, try to avoid setting a fixed width and height, and try to make the sizes relative to either the screen or the parent element.

But you may be forced to do this because of the design, as it could be a sidebar wiht limited width, for example!

Use overflow: hidden

One common solution is to use the overflow: hidden property, which hides the overflowing content. However, this solution isn't always the best option, especially when dealing with text.

Fortunately, there are several alternative solutions that you can use to prevent overflow and keep your content visible and readable.

Use overflow-x: auto

One way to prevent data loss caused by overflow is to use the overflow-x: auto property. This allows the content to remain visible even if it exceeds the container's width. This solution introduces scrolling, which allows users to view the full content by scrolling horizontally. You can even customize the scrollbar!

Use overflow-wrap: break-word

Another solution is to use the overflow-wrap: break-word property. This property breaks words to prevent overflow and ensure that all content remains visible. However, this solution may not always be the best option since it can make the text hard to read, especially without hyphenation.

Use `min-content` or `fit-content`

If you're not stuck with a fixed width or height, a third solution is to use either min-content or fit-content. These properties set the width or height of an element to the smallest or largest possible size based on its content.

Min-content sets the width or height to the smallest possible size
fit-content stretches the width or height to fit its content with the option to wrap if necessary.

Use container queries

The fourth and perhaps most exciting solution is to use container queries, specifically container query units. This option allows you to adjust the font size of the content within the container based on its size. Container queries are not yet fully supported by all browsers, but they offer a promising solution to the problem of overflow.

To use container queries, you will need to select the parent container and set its type to inline-size. Then, you can adjust the font size of the content within the container using the font-size: calc() function and the var(--cq) container query unit.

Conclusion:

In conclusion, CSS provides several solutions to prevent data loss caused by overflow. By using overflow-x: auto, overflow-wrap: break-word, min-content or fit-content, and container queries, you can ensure that your content remains visible and readable. So next time you encounter an overflow issue, don't panic - try out one of these solutions instead.

In the end, I would like to hear your opinions about the article.

Author

Twitter

Top 5 YouTube Channels for Front-end Devs!!!

Youssef Hefnawy — Wed, 05 Jul 2023 18:06:40 +0000

Introduction:

The environment expresses its owner, as we imitate the people with spend most of our time with, And if most of your time on social media is spent following stupidity, you will be stupid!

So literally choosing the content you watch can make you a better person, This also applies to how good of a Front-end Dev you are.

So, in today's article, I collected for you the “Top 5 YouTube Channels for Front-end Devs”.

Honorable Mention:

freecodecamp

Since 2014, more than 40,000 freeCodeCamp.org graduates have gotten jobs at tech companies

freecodecamp is one of the largest and most popular education platforms in the world, Where not only the YouTube channel, but also the famous platform freecodecamp.org, Which has more than 15 different tracks to learn programming.

Thanks to them for cooperating with many paid course platforms to bring their content to us for free!

Where you will find more than one different course that explains the same thing, which guarantees you that you will find the best teacher that suits your level.

The only reason they didn't make it to the list is the variety, which can be a bit confusing.

But in general, they are one of the best sources for learning programming, Whether the YouTube channel or the educational platform, they will provide you with the best quality.

Top 5 YouTube Channels for Front-end Devs

Kevin Powell

The undisputed king of CSS, whether you are a beginner or an advanced dev, following him is essential to ensure your continuous improvement!

whether you want to learn flex, grid or something annoying like position Kevin Powell is the right person for that.

An excellent source to be aware of the latest CSS updates like container queries, Ensure the quality of your code and follow the accessibility standard.

Fireship

At first, you may think that this channel does not provide useful content because of the non-academic style it uses and the short duration of its videos, which breaks standards, but after you start giving it a chance, you will discover that it is undisputedly one of the best content creators not only in the field of programming, but in YouTube as a whole. Where the amount of creativity and the genius sense of humor that only those in the field can understand.

From the news of the week that keeps you up to date with all the latest news, to the 100-second videos that give you a quick look at what this technology is, and its discussion videos, this channel offers content that you won't find anywhere else, although it does not focus on full and detailed courses, it does provide additional content.

videos like:

Or even the last 20 videos on artificial intelligence, where whenever I watch his content, I am sure that it is the best YouTuber in the field, and if not for his full courses being paid, he would have been the first without a doubt.

‏

Web Dev Simplified

The person who got everything dominating the field of JavaScript and React and the best hair in the field of programming.

he really simplifies the web, as he has a distinguished ability to explain what you need only without any useless things, which makes the information short and easy to understand.

And in his brief way of explaining what you need to know, make sure that he will be the only person who is able to provide a new course at the same speed a new JS framework is made.

Theo - t3․gg

He made the best discussions you can get, a new point of view on topics, and he has the most number of ahhhaa moments in the field.

After you follow him, you will suddenly feel that you can form a logical opinion about what you know in the field.

videos like:

The Net Ninja

Before you do anything, you should watch this video from The Net Ninja!

One of the most varied and content-rich channels, you will find courses for almost everything you need in the field.

Conclusion:

In the end, I would like to hear your opinions about the article.

What was missing?
Should I add more or fewer details?
Do I add more explanation or cut it out and only talk about the experience?

Author

professional links:
- Twitter
- LinkedIn
- GitHub
Hire me:
- UpWork

Best Programming Memes of the Week #1

Youssef Hefnawy — Sun, 30 Apr 2023 18:47:57 +0000

Introduction:

There is no real benefit from this article, but despite that, you chose to read it

but there is no better feeling than laughing at a meme that shares your suffering with a Programming language, and if you understand the meme, you understand the language!

therefore Here's the 'Best Programming Memes of the Week' I found.

First time using js Regex be like:

Every front-end dev's friend:

using while be like:

This image will take time to load

Every developer's nightmare:

my in any work group:

Conclusion:

If you have reached this stage, you should at least go read something useful, I suggest you one of my last article:

I hope you will share your opinion about the best meme and share with me if you find a new meme.

Author

professional links:
- Twitter
- LinkedIn
- GitHub
Hire me:
- UpWork
- Freelancer
Blog:
- HashNode
- Dev.to
- Medium

How To Build An Advanced Light/Dark Theme Website!

Youssef Hefnawy — Mon, 10 Apr 2023 21:25:25 +0000

Introduction:

An adult need, on average, 15 minutes of direct exposure to sunlight per day to produce enough vitamin D, but still many people suffer from vitamin D deficiency due to lack of exposure to natural light and only exposure to artificial blue light.

So, our job as web devs is to make sure that even artificial light does not reach them; by adding dark mode to their websites.

Whether for the sake of stylish looks or accessibility, adding a dark mode to any website has become very popular lately, and considerate to the eyes of programmers and content creators who spend all their day in front of a computer screen Today you will learn “How To Build An Advanced Light/Dark Theme website”

You can find all the code used in this article on codepen or github

The easy way:

You can close the article now, as I have collected a set of libraries that will give you easy to-add dark mode but If you were a real programmer, I would wait for a detailed explanation of how to do it yourself when you could use a library and get it done in half the time!

Darkmode.Js library uses the CSS mix-blend-mode in order to bring Dark-mode to any of your websites.
Nightly.js A zero-dependency Javascript library for enabling dark/night mode in you UI.
darkmodejs Link between system preferences and your site automatically, And yes, there is no longer creativity in names

And don't forget that most of the new components libraries support dark mode out of the box like bootstrap.

real programmer way:

Let's start with the simplest thing you can do to make your site support dark mode and also follow device preferences, which is to use the color-scheme CSS property

All new browsers have a default style Built into them, for example when you use a form it Comes in a specific shape and color

Also, most browsers have a dark mode version of all the elements, and using and using the color-scheme property changes the page to the browser version of the dark mode.

body {
    color-scheme: dark;
}

You should not rely too heavily on this feature, as the level of modification that you can do with it is low, and also your site can vary from browser to browser.

In fact, there are many details in this simple thing, but if we want to build an Advanced Light/Dark Theme Website we can't just rely on it, if you want more details, I recommend this video: Light & Dark mode WITHOUT CSS

Before you start writing the code, of course, you have to choose the colors in both modes, and since I am not a designer here is some good sources:

After you choose the appropriate colors for your project, the easiest way to deal with these colors is to collect them in a system of CSS variables:

:root{
    --clr-dark-gray: hsl(0, 0%, 13%);
    --clr-white: hsl(200, 16%, 89%);
}

Create a variable that represents dark mode and light mode [--bg-clr-light, --bg-clr-dark, ...]

:root{
    /* light mode */
    --bg-clr-light: var(--clr-white);
    --txt-clr-light: var(--clr-dark-gray);
    /* dark mode */
    --bg-clr-dark: var(--clr-dark-gray);
    --txt-clr-dark: var(--clr-white);
}

Create the main variables that are used throughout the site [--bg-clr, --txt-clr, ...]
And in the absence of the 'dark' class make that the value of the main variables is equal to the light mode variables: --bg-clr: var(--bg-clr-light); and vice versa

body {
    --bg-clr: var(--bg-clr-light);
    --txt-clr: var(--txt-clr-light);
    color-scheme: light;
}
body.dark{
    --bg-clr: var(--bg-clr-dark);
    --txt-clr: var(--txt-clr-dark);
    color-scheme: dark;
}

Use these variables in your project, as their value will change once you but the 'dark' class

.App {
    background-color: var(--bg-clr);
}

CSS code

:root{
    --clr-dark-gray: hsl(0, 0%, 13%);
    --clr-white: hsl(200, 16%, 89%);

    --bg-clr-light: var(--clr-white);
    --txt-clr-light: var(--clr-dark-gray);

    --bg-clr-dark: var(--clr-dark-gray);
    --txt-clr-dark: var(--clr-white);
}
body {
    --bg-clr: var(--bg-clr-light);
    --txt-clr: var(--txt-clr-light);
    color-scheme: light;
}
body.dark{
    --bg-clr: var(--bg-clr-dark);
    --txt-clr: var(--txt-clr-dark);
    color-scheme: dark;
}
.App {
    background-color: var(--bg-clr);
}

all that's left is everyone's favorite part JS

Don't worry all you have to do is toggle the 'dark' class on the body when you click on the button.

let toggleButton = document.querySelector(".Button");
let body = document.querySelector("body");

toggleButton.addEventListener("click", () => {
    body.classList.toggle("dark");
});

Target the button and the body using document.querySelector(document.querySelector)
add an EventListener to listen to the button when clicked using addEventListener(type, listener)
pass a function to the EventListener that adds or removes the class to the body using classList.toggle(class)

And now when you press the button the 'dark' class will be added and the main CSS variables values will be swapped.

Of course, you can make the project more elegant by adding animations, keeping the status of the site, and other ideas, but I leave the opportunity for your creativity to continue here after me.

But I will not leave you without many sources to draw inspiration from them and continue learning more:

Conclusion:

this was How To Build An Advanced Light/Dark Theme Website, and don't forget to make dark mode the default mode on your website.

In the end, I would like to hear your opinions about the article.

What was missing?
Should I add more or fewer details?

I hope you liked the article and don't forget to follow me on:

Author

professional links:
- Twitter
- LinkedIn
- GitHub
Hire me:
- UpWork
- Freelancer
Blog:
- HashNode
- Dev.to
- Medium

Top 5 websites to sharpen your front-end skills.

Youssef Hefnawy — Sun, 12 Feb 2023 17:50:29 +0000

Introduction:

As a front-end developer, from the moment you write the first HTML line to the last minute in the React course, it's hard to get experience; Since you are not yet good enough to get experience from a real job, but you are able to create Semi complete website.

You may think that keeping up with the courses is enough, but if math proves one thing to me, it is that you understand until you start trying.

So, in today's article, I collected for you the “Top 5 websites to sharpen your front-end skills”.

Honorable Mention:

frontend practice

With frontendPractice, you can browse high quality Figma templates that you can use to sharpen your HTML and CSS skills.

Creating high-quality projects yourself is considered one of the best that will help you build experience in a field, and ensuring the quality of the project is an important thing, as good and bad designs need the same code.

frontendPractice provides you with a high-quality ready-made website design for you to train on, and it would have deserved to be included in the list had it not been for the presence of the first rank that surpasses it in quality and number of projects

Top 5 websites to sharpen your front-end skills:

1- frontend mentor

You cannot start a list talking about the best website to sharpen your front-end skills without mentioning frontend mentor.

The site that will help you in all stages of your learning, whether you are a beginner or advanced, you will always find a suitable challenge for your skill.

Basically, you will find ready-made website designs with several levels of difficulty, starting with a simple card that just need basics Html and CSS to an advanced site that needs you to deal with API and some advanced JS tricks or maybe React.

Improve your front-end coding skills by building real projects
Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs.

The only drawback may be that you will not get the design file in the free version, but from experience you will not feel this big difference. On the contrary, the added difficulty of not having the design file helps you increase your skill.

With each challenge, you will get pictures of each site's status, design resources, colors and fonts, and the best README file template Which I still use until now in my projects, and with the paid version, you can get Sketch and Figma design file.

And if you do not know the solution or want more sources, you can always view the solutions page or search on GitHub, as most of the projects are open source.

Here are some useful links:

GitHub: 44 Frontendmentor challenges solutions
YouTube list: Frontend Mentor Challenges

2- codepip

Gamification is One of the most effective ways to increase motivation and increase the fun of the learning journey; by adding the factor of challenge and the desire to win, and also by hiding any complexity within easy-to-understand visual effects.

And at the beginning of your learning journey, you will face complex things that may be the reason for your frustration, for example, the first time you will deal with CSS flexBox or grid It's going to be difficult.

Codepip facilitated the learning journey by creating games that you play by writing code, adding a fun and challenging factor to programming.

Games like Flexbox Froggy and Grid Garden It was an essential thing in my learning journey that helped me master these techniques.

3- leetcode

In the world of programming, especially in front-end Many self-educated devs enter the field without a degree in computer science.

most of them, during their learning journey, entered into studying their field of specialization directly without learning things like algorithms, where they end up reinventing the wheel and solving their programming problems in a low-quality way from the well-known algorithms methods.

You will not notice this weakness that you have unless you solve a lot of problems, then you will discover that in fact most of the problems can be solved with less than 14 known algorithmic patterns.

LeetCode is the best platform to help you enhance your skills, expand your knowledge and prepare for technical interviews.

You can find many problems at different levels, and you can also solve them in different programming languages.

Although I don't agree with this approach, problem-solving is key in job interviews, so a leetcode a day keep unemployment away!

4- Codepen challenges

CodePen is a social development environment. At its heart, it allows you to write code in the browser, and see the results of it as you build.

A useful and liberating online code editor for developers of any skill focus primarily on front-end languages like HTML, CSS, JavaScript, and preprocessing syntaxes that turn into those things.

You can practice your skill there without any complications, just writing code, and you can also share your code and see other people's code.

A great platform to get inspiration and just brainstorm and write code.

Here are some of my favorite Pens I found:

5- cssbattle

In general, front-end devs can be divided into two types:

The first is the person who spends most of his time writing JavaScript code, working on the basic functions of the site, dealing with servers and API, and this type will benefit greatly from LeetCode and Learn some principles of algorithms.

The second type, which I am from, spends most of its time dealing with CSS and the general shape of the site dealing with animations, colors, fonts and cssbattle teach you problem solving for CSS.

CSSBattle is an online CSS Code Golfing game. Here, players from all around the world try to visually replicate "Targets" in smallest possible CSS code and battle it out to get to the top of the leaderboard.

Solving the challenges on this site forces you to think about css properties in a way that you will not think of before by going beyond the limits of traditional site properties.

CSS code-golfing game is here! Use your CSS skills to replicate targets with smallest possible code. Feel free to check out the targets below and put your CSS skills to test.

Conclusion:

And this was Top 5 websites to sharpen your front-end skills, tell me if you want an article on the best learning resources for future front-end developers!

In the end, I would like to hear your opinions about the article.

What was missing?
Should I add more or fewer details?

I hope you liked the article and don't forget to follow me on:

Author

professional links:
- Twitter
- LinkedIn
- GitHub
Hire me:
- UpWork
- Freelancer
Blog:
- HashNode
- Dev.to
- Medium

I wrote five articles on 4 different website, and this is what happened!!!

Youssef Hefnawy — Fri, 23 Dec 2022 20:01:32 +0000

Introduction:

Anyone who has even a little interest in the writing field has this question in his mind, How much will I get from writing my first article?

Whether you watched a YouTube video that has millions of followers on how to get money from writing articles, or you are just a person who is passionate about your field and wants to write about what you love We all have these questions.

Questions such as how many readers will read my article, how long I need to write an article, what is the best platform to publish on, and many other questions.

You wish there was this article that contains the experience of an ordinary person who does not have a doctorate degree and does not have millions of followers and asks why people read his article. A beginner who learned from the same free resources that you learned from has the same limited time as you with an above-average IQ ( if you are reading This article you are probably a smart person ).

Yes, you finally found this article, where I will talk about my personal experience with writing 5 articles on 4 different sites.

I had hoped that the title would be "I wrote five articles on five sites," but I was too lazy to search for a fifth.

In this article, I will not try to convince you to start writing articles and to talk about the number of benefits that you will get, as I am sure that you watched a video about this before reading this article, but tell me in the comments if you want an article like this

I am simply going to share my writing experience, the numbers I got on each platform, and the pros, and cons of writing articles that I felt.

But since I am still a beginner, and the experience only talks about five articles, I want to suggest to you this video that talks about the expected profits for writing articles, in the long run → How Much Do Blogs Earn in 2022? It Changed Again! - YouTube

And so that you know what are your advantages compared to mine, here are my current qualities:

I have less than 100 followers on Twitter, so I do not have any advantage in terms of marketing myself.
- If you would like to follow me → Twitter
I am a beginner Front-end dev that still learning React
- my Journey with React → 30-Day React Learning Journey
I have an IQ of 143

Of course, the platforms I posted on are as follows ( do not forget to follow me there ):

Notes:

In order to simplify the information, I took the average of the results from the four platforms
I will talk in general about the writing experience as a whole, then I will talk specifically about the writing experience in each platform
There is no such thing as two notes, so did you know that the arteries of a blue whale are so large that a human being can swim inside them?

writing experience:

Like I said before, I'm not going to try to convince you to start writing articles, as I'm sure you watched a YouTube video about “10 benefits to start writing”, I'm just here to talk about my experience.

My story with writing articles does not contain any inspiration or noble reasons at all, as I did not seek to spread free knowledge among people, or I am passionate about what I learn

I am still a beginner and most of what I write about is a first-time experience

I started writing for the following reasons:

If you give me the choice between learning React forms or writing an article, I will write the article without feeling guilty
Anyone who writes articles acquires a kind of aura that places them above the average person and I am sure this will help in getting a job.
I want something to talk about on Twitter

I am sure that you do not take me seriously now, since my goals are not noble enough for your sake. I am sure that every person who claims that he started writing for a noble purpose wants to benefit in one way or another from these articles, whether by increasing his fame or obtaining money.

For me, my plan was simple. I am currently learning to program, so why not talk about what I learned, I will not lose anything.

And the moment I decided to start writing, I was learning React, so I decided to record everything on my journey so that others could benefit from it, and oh my, what a decision it was.

Who would have imagined that writing an article about my journey of learning React would take more time and effort than the learning journey itself?

the first thing I noticed is that writing an article takes more time than I expect, especially if you are a person who loves to talk like me. I cannot put a useful summary without putting my personal comment and experience, and I cannot mention something in an article without putting a link to it. And the most energy-consuming thing is deciding which meme I will put with what I write.

I remember learning React for an hour and then spending the whole day writing about it.

I know that my style of writing is not the most professional and will not bring me the most interaction, but it is the style that I like, as I like memes and making fun of things.

What are the benefits of writing:

Five articles are not enough to get money or fame, as you still will not get enough interaction in order to achieve this, but this does not mean There are no benefits!

In fact, I am amazed at the number of benefits I got from just 5 articles.

Look at this Notion page → React summary It contains a summary of most of what I've learned so far in React, a page that my future self will probably thank me for years since I'll easily remember everything I've learned with a page like this.

And without my “30-day React learning journey” series that I publish I would not have thought of making this effort in anything, Hours of effort have been spent summarizing what I have learned just to make the article I am writing as informative as possible, Or the number of links I collected in my “Top 5 Icon websites for devs and designers” article.

I don't know if it's just me, but I feel more responsible when I write about what I learned than what I feel when I learn.

I remember the first positive comment that came to me. It turned my day from bad to legendary. I don't know how, but there's something about being complimented by someone who doesn't know you.

What are the cons of writing articles:

I don't know when, but I think at least in your first year of writing, the time spent writing versus the interaction you'll get is not worth it.

For me, boredom does not affect me that much, as I write in a style that I enjoy, but I am sure that if you were writing articles formally, you would definitely feel bored.

In general, if you love to write, the only thing that will stop you is frustration; Where if you spend 6 hours writing an article in order to eventually get 30 readers, you will feel frustrated, as it does not matter how good your article is if no one knows who you are, they will not care

How do I choose my article topic:

Honestly, for most of my life, I always know what I have to do in order to achieve what I want, but the problem is always that I am lazy, and the same situation with the topics of articles, where I have about 30 different article ideas, but I am a lazy person.

But with some productivity tricks, I can at least make sure I record my thoughts so I can execute them when I'm not being lazy.

And after recording the random thoughts that come to me, I noticed a pattern in how I choose the good thoughts, as 99% of my life is normal, and my life is similar to millions of people, and I myself will not read an article that talks about anything that happens there.

But when I write a good line of code, or when I encounter a problem that takes thinking to solve, or when I learn something that I find difficult, I know that I am not alone, so I choose. I write about these ideas.

what is my writing process:

Start by choosing an idea from the ideas that I collected, as I take into account the following in my choice:

The amount of effort that I am willing to give
A combination of how much I care about the topic and how much I think the reader will care
The possibility of converting this article into more than one part

So I apologize, but we will stop here and continue to the next part!

I know you probably didn't get anything useful from this article as I didn't talk about advice or give you a detailed experience but if I tried to do all this in one article, you wouldn't read it because of its length, and at the same time, I want to talk about everything in my experience.

Even though I did not go into details in this article, but this is still better than putting the experience in a summary section in a large article.

So expect two more upcoming parts, the first about the numbers I got from writing and the second about some advice based on these results.

Conclusion:

I apologize again for ending here, but the results of the fifth article did not excite me to write in a large amount, so I hope you liked this article, and do not forget to share your writing experience with me also and share your opinion about this article in the comments.

In the end, I would like to hear your opinions about the article.

What was missing?
Should I add more or fewer details?
Do I add more explanation or cut it out and only talk about the experience?

Author

professional links:
- Twitter
- LinkedIn
- GitHub
Hire me:
- UpWork
- Freelancer
Blog:
- HashNode
- Dev.to
- Medium

30-Day React Learning Journey part-2 ( JSX )

Youssef Hefnawy — Fri, 18 Nov 2022 17:39:18 +0000

Introduction:

This article is the second part of “30-Day React Learning Journey (part 1)” Where we talked in the previous part about:

Suggestions for learning resources.
Why you should learn React.
how to get started.
wrote our first line in React.

All this with sharing my personal learning experience and some tips + a simplified explanation of what I learned.

We will continue from day 5 to day 7, I know that this seems a little, but these are the basics of React that you must master before we move on to another part.

Notes:

Remember, this is a learning journey, It is possible that I made mistakes, so if you notice something wrong, tell me and I will correct it.
I will build this article on the fact that you read the previous one, so if you find me talking about something in little detail, I may have talked about it in the previous part.
There is no such thing as just two notes, so did you know that React is the second most-starred library on GitHub after Vue?

Without further ado, let's get started with → 30-Day React Learning Journey part-2 ( JSX )

day 5 ( JS vs JSX )

to Create and add an element to the DOM using just JS You need to:

select the parent element.
create the element you want.
Add the contents of the element.
append the element to the parent.

let father = document.querySelector("#app");
let h1 = document.createElement("h1");
h1.append("Hallo, react");
father.append(h1);

Four steps in order to create one element, and this is without adding a class or anything else. Imagine yourself trying to create a whole page in this way. Each element has at least four lines of code.

with React you can just use JSX! with the main root we create

root.render(<h1>Hallo, react</h1>);

remember it from the first part!

React took the logical path of creating an element and reduced all these steps using JSX where all you have to do is just write the element!

Yes, HTML directly inside JS. Can you imagine, before I continue, I want you to imagine how it can benefit you? The more you deal with JS before, the more excited you will be about the idea.

I strongly advise you to continue learning JSX using the fact that you can write something HTML-like directly inside JS and try writing to see what works and what doesn't.

Since it is not 100% HTML, so you can go to the documentation and see the differences, or you can experiment and discover it yourself, For me, I discovered about 70% of the differences on my own and will not forget them.

I am interested to know what you discovered and what was your feeling the first time you saw JSX.

and also I still haven't settled on the appropriate way to write this series as I don't know whether to explain to you what I learned or just share the experience and some tricks.

So for now, I will briefly explain to you what I learned in my style.

day 6 ( JSX basics )

React Without JSX:

Before we start, I would like to tell you that you can use React without JSX, if you do not want to increase the complexity or size of the work environment in which you work.

And also learning React without JSX shows you how things work under the hood where you will understand the principles and basics of React.

For me, I learned it firsthand, and if I needed something I would go look for it,I have not seen anyone or any course that does not advise you to learn it, and even React advises that

JSX basics:

In general, React is just JS with a few extra things you call it js++ But you did not modify anything on the basics of the language.

I won't go into detail about how React will know that you are writing JSX, but in general, just write any HTML code and React is smart enough to recognize it.

yes, if you write <h1>Hallo, react</h1> Directly inside JS, react will do the four steps and create the element by itself.

Since we are still inside JS we can simply do the following:

link a JSX element to a variable:

let myHeading = <h1>Hallo, react</h1>
console.log(myHeading);

using it with a function or if:

if ( reactISGood ) {
   let myHeading = <h1>Hallo, react</h1>
} else {
   let myHeading = <h1>Hallo, vue</h1>
}

butting JSX inside an array or an object

 let myHeading = [<h1>Hallo, react</h1>, <h1>Hallo, vue</h1> ]

why do you think, as I told you that you are inside JS? Use JSX wherever you want with any js feature.

But since we are inside JS we have to follow the rules of JS like:

the word "class" is already taken so we need to use "className" instead

let myHeading = <h1 className="veryBigHeading">Hallo, react</h1>

Forget anything like "aria-label" it is now called "ariaLabel" yes, everything now is camelCase

Yes, that is why I advised you to try yourself and try to discover what works and what does not work and to think as a programmer and try to discover the reason with the least available information, as you will not forget anything you learned in this way.

day 7 ( JSX with JS ):

Before we start, let me tell you some tricks that make you read an article that contains personal experience, not just educational content.

if you use VsCode Look for this extension "Simple React Snippets" It will make your life easier.
if want to use Emmet with React (JSX) go to this article: Enable Emmet support for JSX thank me later.
Did you know that it is the male seahorse that lays eggs, not the female?

JSX with JS

the same way you use JSX inside JS you can use JS inside JSX!

So, to use JS inside JSX You have to tell react that we've dropped out of JSX and returned to JS, so if you don't do this, whatever you write will be treated as text or as a regular element.

To do this, write whatever you want to be a JS code inside {}


let bestFramework = "Svelte"
let myHeading = (<h1 className="veryBigHeading">Hallo, {bestFramework}</h1>)

You can open these brackets anywhere in JSX, allowing you to do Many cool things like:


let imgSrc = 
"https://i.insider.com/602ee9ced3ad27001837f2ac?width=700";
let link = "https://twitter.com/hafanwi/status/1593162901744803840"

<img src={imgSrc}></img>
<a href={link} ></a>

// Do not go behind these links

you can map on an array with all your image URLs with one line
you can create a 100 div with a simple for loop

I'll leave the rest to the imagination of the enthusiastic programmer in you to discover how many things you can do just with this.

Of course, a JSX element can contain more than one child, but you can not have more than one element on one variable.


const element = (
  <div>
    <ul className="bestFramework">
      <li>Vue</li>
      <li>Svelte</li>
      <li>Remix</li>
    </ul>
  </div>
);

Conclusion:

I hope you will forgive me for not completing the experience for some of you in this article, as I did not yet know what to focus on here.

Since I did not explain everything about JSX as I did not tell you how JSX is just a big object or a trick to writing more than one element without a father and more.

At the same time, I did not talk about the things I found difficult and what I learned from the JSX experience on my own and others.

Therefore, my detailed explanation of all of the above, as well as my full experience with learning, are collected on one page, as I said previously.

In the end, I would like to hear your opinions about the article.

What was missing?
Should I add more or fewer details?
Do I add more explanation or cut it out and only talk about the experience?

Author

professional links:
- Twitter
- LinkedIn
- GitHub
Hire me:
- UpWork
- Freelancer
Blog:
- HashNode
- Dev.to
- Medium

Top 5 Icon websites for devs and designers!!!

Youssef Hefnawy — Sat, 05 Nov 2022 19:01:02 +0000

Introduction:

Everyone needs a website to get icons from it, Choosing the right icons is like putting a cherry on top of a cake, don't complete without it.

Whether you want to create a design from scratch or update an old design, a high-quality set of icons will definitely help.

You don't want to use bad or outdated icons, They can differentiate between good and bad design.

I have collected for you Top 5 icon websites for devs and designers.

I chose these sites from personal experience as I am not a designer, so sites that offer high quality and easy to use icons were really helpful.

Through these sites, you can get the icons in all formats ( png - svg - atc.... )

Today's collection is diverse where you will find everything; Hand-drawn icons, animated icons, and 3D icons and more.

And I will not talk about how many icons the site has or how many users it has, as all the sites say that it is the largest library of icons, the most trusted, the most diverse, and others, but in general these are famous sites so expect quality.

Honorable Mention:

If you want to get the famous programming icons and logos Here is an open source GitHub repo for that simple-icons

Material Icon Theme

You can also see Material Icon Theme Yes, the famous VsCode extension also has an open source GitHub repo.

Streamline

Streamline has a large variety of icons and is considered one of the most famous sites in the field, but because I discovered it recently and I do not have much experience with it, and also there is no such thing as the best 11 icon sites.

Without further ado, Top 5 icon websites for devs and designers:

1- fontawesome

You can't get more classic than that.

Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators.

it offers a library and toolkit of icons suitable for programmers Where when you download the library you can just use a class on an <i></i> element and it will work.

<i class="fa-duotone fa-camera-retro fa-beat" style="color: #1c7ed6;"></i>

You can modify the shape and color of the icon and even add animation to it.

Great for Developers:
We've got frameworks and toolkits for the most popular plugins and packages that already work the way you expect.

Great for Designers
Use your own designs alongside thousands of matching Font Awesome icons in each of six unique styles.

2- flaticon

The most diverse in terms of icon styles.

Icon Fonts for any project, big or small
+8,300 SVG and 0.000000ont files based on vector icons optimized for web, iOS, and Android applications.

Another excellent site in terms of compatibility with programmers and designers.

When I search for a new style icon, I always start searching here, where you will find an icon that expresses everything you want.

And if you are a heavy user of Notion and want to put an icon for each page like me, this site is very suitable for you.

Access 8.5M+ vector icons & stickers
Download Free Icons and Stickers for your projects. Images made by and for designers in PNG, SVG, EPS, PSD and CSS formats.

3- iconscout

One of what I like the most about this site is the 3D icons, which are professionally made and varied in terms of styles.

Over 5.3 Million+ Design Assets
Curated SVGs, Vector Icons, Illustrations, 3D graphics, and Lottie Animations.
Over 7000+ new assets added every day. Integrated plugins, tools, editors, and more.

Work faster and Save time with Apps and Plugins:
IconScout has integrations with Figma, Adobe XD, Sketch, Illustrator, GSuite, and MS Office. Our plugins let you find assets without you leaving the tools you’re using.

4- google fonts

I can't mention the word most famous sites without mentioning Google!!!

Simple, easy-to-use, variety, qualities we are used to from Google.

You may know this site because it is almost the largest site that people use to get fonts, but it also has a good set of icons.

Perhaps the experience of using it is the simplest for programmers, where all you need is to copy the code and it will work simply.

Are you bored? Don't worry, Let's end this list with an interesting site!!!

5- lordicon

Although adding animation is usually not difficult, it adds a lot to any design.

And even if you're not going to use animated icons for some reason, when I look at them I get inspired.

Just add an animation to the Twitter icon on your site or add an entire animation. This site is for you.

Access 8,700+ Animated Icons
Lordicon is a powerful library of carefully crafted animated icons,
ready to use in digital products, presentations, or videos!

Conclusion:

Originally this article was about the top 10 sites and not the top 5 but why do I write an article once when I can write two articles.

Usually I prefer to talk about Dev topics more, so I would like to hear your opinions about the article.

What was missing?
Should I add more or fewer details?
Do I add more explanation or cut it out and only talk about the experience?

Author

professional links:
- Twitter
- LinkedIn
- GitHub
Hire me:
- UpWork
- Freelancer
Blog:
- HashNode
- Dev.to

Why couldn't you get a job as a freelancer?

Youssef Hefnawy — Wed, 19 Oct 2022 11:23:31 +0000

Introduction:

I think that no one really believes that he will get a job after a month, but within every programmer, there is hope to achieve this that makes him want to continue.

I am still working with this hope to get a job after six months despite the passage of a year.

But now I'm not dreaming, I actually reached the level required to get a job, I learned most of the skills in any roadmap and even more.

I am ready now to get the job I worked for, not any ordinary job, but the most luxurious thing that any ordinary programmer can dream of!!!

freelancer, the freest of all, the smartest, the best of the best, a king who works only for himself, gets up at 11 pm, works 3 hours from his bed.

But after many attempts to be that person, I failed.

But why?

In this article, I will try to reveal the reasons why most devs can not get a freelancer job easily, and we also try to find solutions.

We will divide the reasons as follows:

Lack of necessary skills
market demands

I will discuss with you the things that prevent people from getting a job and also some suggested solutions.

Nots:

Since I also haven't got a job yet, it would be hypocritical to talk like an expert on this, so I won't go into depth and I'll just attach the learning resources.
Please go check my account, as I will definitely talk about my first job experience if the situation changes.

Without further ado, Let's talk about Why couldn't I get a job as a freelancer?

Lack of necessary skills!!

We will talk in this article from the perspective of a front-end dev But what I say apply to other fields.

I have a question for you, do you think you can get a job using Only HTML and CSS?

The short answer is yes you can, as I have seen jobs that only ask for HTML and CSS!!!

The long answer is yes you can, and millions of other developers can, I want you to go and see the number of views on HTML and CSS courses; Millions right!!!

Like I said I've seen many jobs asking for only HTML and CSS; But I have not seen one of these jobs have less than 50 job applications.

There is always someone better than you applying for the job, as the percentage of you being the best one among hundreds of applications is closer to zero than to one.

Where even though the job only needs HTML and CSS If this is only what you know, then you often lack the ability to provide a good job, as the average developer does not reach an advanced level in HTML and CSS without learning other things.

So what is the minimum?

Honestly, I don't know where every time I think I found the gold standard, another one comes up.

I think there is a scientific phenomenon for that, for example when you say that bad luck is always with you, you often focus on the times of bad luck and forget the rest, even if it is a small amount.

Same thing with Freelance; Where you may find that the whole market asks for js devs, but after you learn it, suddenly the market asks React devs!!!

For me it was js then wordpress then threeJS then Gsap then React; Every time I learn something, I feel like the market is asking for something else.

But to answer my question, I think that the minimum level for you to have a good chance of getting a job is the following:

HTML
CSS
JavaScript
Wordpress

wait a minute wordpress; I thought you were talking about front-end devs!!!

Wait for the solution part and you will know why.

market demands?

Perhaps if we know what the market demands, we may be able to get a job by providing that?

So let me tell you briefly what kind of projects you will face when looking for a jop, And what kind of clients will you meet?

A million dollar idea with a $10 budget

You will find this type of project everywhere where everyone has a million-dollar idea; make a site similar to Tiktok or I want another Facebook, the simplest projects of them may take you months to make it, if you are even able to make it on your own.

I do not know what the owners of these projects think, but I have a life and will not work for 3 months for 15 dollars.

super dev

I don't really blame the customer for this, but it's just a topic that annoys me.

I am a Front-End dev not a Back-End And definitely not a designer But do you think the customer cares.

The average person does not know that creating a website usually requires 3 professions at least.

Usually you will be required to design and take care of the server side.

In fact, in terms of demand front-end dev are least in demand!!!

The competition

Of course I don't need to mention to you the high competition from people whose currency difference makes 15 dollars a fortune for them.

As the current environment of most Freelance sites is designed in the interest of the customer, not the freelacner; It helps the customer to get the best price and the best service.

The solution

After briefly showing you most of the problems you may encounter, let me show you some solutions:

First the basics:

You must remember that you are the one who chose to work as a freelancer; Therefore, you must take responsibility and realize that you are now a one-man company!!!

So you should diversify your skills, I'm not telling you to specialize in something else, but at least master the basics of other skills.

if you are a front-end like me I advise you to learn the following:

Web Design basics

At least, know how to choose suitable colors, as it will instantly increase the number of jobs available to you

Learn to use any CMS

WordPress is still dominant in this field and although you as a programmer may hate this, but this is the only solution to be suitable for the market

You have to make sure that the only thing standing between you and your first job is luck, I can't change your luck so we'll do what we can.

your personal accounts:

You must make sure that all of your personal accounts look professional; Where believe me, no one will work with you with a Twitter account that was created yesterday.

So make sure that your social media account is good, your GitHub LinkedIn, And, of course, your account on freelance sites.

These are some of the best learning resources:

After you have confirmed that the problem is not with your suspicious account, it is time to apply for jobs with confidence now, but how?

You have to master how to apply for a job; as it may be the only way to attract customer attention.

8 Golden Rules for Writing Upwork Cover Letters

If you are lucky and someone is interested in visiting your account, you should draw his attention to your previous projects (projects from random courses).

You do not have previous projects at all, nor why did you reach this stage in the article.

Therefore, as long as you wait to get a job, you should always create projects where you will increase your skill first and draw people's attention to your skill second.

I advise you to try to create something original of your own to showcase your skills

Here are some sources for front-end dev:

It's hard to ask my lazy brain to try to find a job every day after all this frustration and even if it did I wouldn't have the energy most of the time to submit a high-quality job application.

Where I admit I didn't search all the time continuously, but there are interruptions, if I gather the serious time, I will find that in 3 months I got only 3 opportunities, and of course I failed in them, so on average there is an opportunity per month.

You may be more skilled or luckier than me, but at first it will seem impossible to hunt in the whale area.

So if you reach this stage like me where you have mastered the above, your personal accounts are good and you have skills, but you lack continuity and luck, I have a suggestion!

The solution:

Instead of waiting for the customer to come to me, why don't I go to him?

Have you ever been surfing the Internet and found something sold for money and said to yourself, I sure can do better, but I'm lazy at the end.

for me as a front-end I always see poorly made website, whether outdated in design or not working well.

Government websites, personal stores, million dollar ideas on a $15 budget, All of these opportunities are waiting for someone to take them.

you don't even need to find something bad to fix, there are many business owners You can convince them that they need your services.

Instagram and Facebook pages, your neighborhood stores, small businesses, all of these You can convince them that they need your services.

Here's how to do it:

Creating a semi-complete product, perhaps within 40% complete; Go to the customer and show him this unfinished product as an example of what you can offer.

Tell him this product is missing your personal preference to complete, So you won't take any time to finish either. You give him a glimpse of what he can have.

As for the price in general, you have to accept a little price at first, But you can always offer him more features for more money.

Of course, you have to master the message that you will send, if you fail It doesn't matter, as this method will work with many people, so at first send your offer to 20 people, for example, to see the results.

I am writing this article before trying this method, so immediately after I try it, whether it failed or succeeded. Wait for an article that talks about the experience

Conclusion

I was hoping to talk more about how to improve your personal account or about the best way to send a job application and so on, but as I said I did not get a job yet.

But I promise to anyone who reads this article that I will complete the entire journey, but the speed will depend on the amount of interaction.

In the end, I would like to hear your opinions about the article?

What was missing?
Did you like the use of the meme in the article?
Should I add more or fewer details?
Do I add more explanation or cut it out and only talk about the experience?

Author

professional links:
- twitter
- LinkedIn
- GitHub
Hire me:
- UpWork
- Freelancer
Blog:
- hashNode
- dev.to

DEV Community: Youssef Hefnawy

The Non-developers Guide to Optimize Your Website Images!

The Non-Developers Guide:

Do you really need an image? Font/Svg!

Using Fonts

using SVG

Use the right size/type!

Right image size:

Right image type:

Compress your image.

How does image Compression work?

Quote of the day

More From Us:

How to sell anything! Increase your offer value to 100X| $100M Offers By Alex Hormozi book sum.

$100M Offers!

Author's notes:

The Value Equation.

1- Result, a dream that you can achieve for the customer!

2- Confirm the probability of success

Time, between purchasing the product and achieving the dream

Ease of use

Conclusion

More From Us:

The Button that every Front-End developer should use, the written once-and-forgotten code!!!

Why would I need a magic button?

HTML <button></button>, Well not that simple!

CSS that just works!

Some basics before we start:

Button Size:

width: fit-content;

max-width: min(100%, 100vw);

Button layout, display & Align:

Button properties, padding & Font-size:

the Cherry on the Button:

Button hover & focus:

Conclusion + Free gift!

More From Us:

the complete code:

4 ways to deal with overflowing text in CSS!

Introduction:

why does text overflow?

Use overflow: hidden

Use overflow-x: auto

Use overflow-wrap: break-word

Use min-content or fit-content

Use container queries

Conclusion:

Author

Top 5 YouTube Channels for Front-end Devs!!!

Introduction:

Honorable Mention:

Top 5 YouTube Channels for Front-end Devs

‏

Conclusion:

Author

Best Programming Memes of the Week #1

Introduction:

First time using js Regex be like:

Every front-end dev's friend:

using while be like:

Every developer's nightmare:

my in any work group:

Conclusion:

Author

How To Build An Advanced Light/Dark Theme Website!

Introduction:

The easy way:

real programmer way:

CSS code

Conclusion:

Author

Top 5 websites to sharpen your front-end skills.

Introduction:

Honorable Mention:

Top 5 websites to sharpen your front-end skills:

Conclusion:

Author

I wrote five articles on 4 different website, and this is what happened!!!

Introduction:

Notes:

HTML `<button></button>`, Well not that simple!

Use `min-content` or `fit-content`