In an ideal world, every project would have a minimum of one front-end and one back-end developer. However, in the actual world, the front-end person is often absent. There are other reasons why a project may not have a front-end developer, but we won't discuss them in this post since, generally speaking, the majority of them are directly tied to financial limitations. For back-end developers who sometimes find themselves in the aforementioned circumstance and must assume some of the duties of front-end developers, this article will be quite beneficial.
Recommended to read: Importerror: Attempted Relative Import With No Known Parent Package
Not Making Images Optimal
It's a fairly typical front-end error. If you test your work in a local environment where everything "downloads" instantaneously, you may easily overlook bandwidth use and cause your website to take a very lengthy time to load. I have seen an uncountable number of things with embedded photographs that were 200 x 150px thumbnails and weighed 4 MB, wasting a significant amount of bandwidth.
Disregarding Mobile Media Requests
Since they really don't have to, back-end engineers aren't used to verifying if their modifications also function on mobile devices 99 percent of the time. When a change is made, most back-end developers test it on a desktop breakpoint before cheerfully marking the assignment as completed.
Consider using a mobile-first strategy to begin frontend development from mobile devices only if you often neglect to test your changes on these devices.
Employing Inline Styles
It's simple to use inline styles. Because you will override those styles unless the selectors contain!important, you may completely disregard the current selectors and don't worry about CSS specificity. And guess what? It's usually not a good idea to use an inline style. Using inline styles breaks the distinction between the styling and content (which are given in.html files), which is the purpose of.css files.
Using Heading Tags That Are Not Enough for Styling
Using header tags (h1, h2, h3, and so on) just because they are already styled and have a nice appearance is another common frontend error that I see. We must take great care when choosing headers for a certain kind of content since they have a significant influence on search engine optimization. However, there are a number of common mistakes to avoid.
Using JavaScript Hooks for Styling Classes
JavaScript allows us to select items similarly to CSS, and it's a good idea to keep the classes required for JavaScript and CSS distinct. Why? Assume for the moment that we have a button that reads, "Sign up for the newsletter." When the user clicks on it, we want to display a modal window with a newsletter form. This is how the HTML may appear:
Not Eliminating Superfluous Styles
When I get to evaluate code for inexperienced engineers, one of the most common mistakes they make is to leave unnecessary, redundant code in place.
Putting Fonts in the Wrong Place
I've found that a lot of developers often have misconceptions about how to utilize @font-face. They use the font-family property to regulate font-weight and font-style instead of specifying those values in their @font-face declarations.
Not Taking A Step Back
In CSS, abstracting an element is the process of making a child element into an independent element. The newsletter portion from our company's website is shown below.
Not Gaining from CSS Grid or Flexbox's Advantages
Many issues may be resolved using Flexbox, and using it is rather simple (unless you need to support IE9 or below). I often see developers battling with floats and inline-blocks when they could do the same tasks five times more quickly, cleanly, and easily using flexbox or the CSS grid feature.
Flexbox may be complicated the first time you use it, which is probably why some people make a concerted effort to avoid learn it. But believe me when I say that learning it is well worth the effort. All you need to do is locate any interactive lesson (there are many available), dedicate no more than three to four hours to it, and you'll be an expert in flexbox. I would suggest playing with Flexbox Froggy; it's a lot of fun.
Putting Items in Uppercase in HTML
There are two ways to make a section title, such "JOB ADS," uppercase when coding it. The first one is to enter it into the HTML precisely as follows:
In summary
The most common frontend errors are the consequence of negligence.
Programmers have a tendency to work quickly, but if they don't plan ahead and create unscalable solutions, they will eventually pay for it by having to spend more time and money on costly refactors.
Nora Hazel
In an ideal world, every project would have a minimum of one front-end and one back-end developer. However, in the actual world, the front-end person is often absent. There are other reasons why a project may not have a front-end developer, but we won't discuss them in this post since, generally speaking, the majority of them are directly tied to financial limitations. For back-end developers who sometimes find themselves in the aforementioned circumstance and must assume some of the duties of front-end developers, this article will be quite beneficial.
Recommended to read: Importerror: Attempted Relative Import With No Known Parent Package
Not Making Images Optimal
It's a fairly typical front-end error. If you test your work in a local environment where everything "downloads" instantaneously, you may easily overlook bandwidth use and cause your website to take a very lengthy time to load. I have seen an uncountable number of things with embedded photographs that were 200 x 150px thumbnails and weighed 4 MB, wasting a significant amount of bandwidth.
Disregarding Mobile Media Requests
Since they really don't have to, back-end engineers aren't used to verifying if their modifications also function on mobile devices 99 percent of the time. When a change is made, most back-end developers test it on a desktop breakpoint before cheerfully marking the assignment as completed.
Consider using a mobile-first strategy to begin frontend development from mobile devices only if you often neglect to test your changes on these devices.
Employing Inline Styles
It's simple to use inline styles. Because you will override those styles unless the selectors contain!important, you may completely disregard the current selectors and don't worry about CSS specificity. And guess what? It's usually not a good idea to use an inline style. Using inline styles breaks the distinction between the styling and content (which are given in.html files), which is the purpose of.css files.
Using Heading Tags That Are Not Enough for Styling
Using header tags (h1, h2, h3, and so on) just because they are already styled and have a nice appearance is another common frontend error that I see. We must take great care when choosing headers for a certain kind of content since they have a significant influence on search engine optimization. However, there are a number of common mistakes to avoid.
Using JavaScript Hooks for Styling Classes
JavaScript allows us to select items similarly to CSS, and it's a good idea to keep the classes required for JavaScript and CSS distinct. Why? Assume for the moment that we have a button that reads, "Sign up for the newsletter." When the user clicks on it, we want to display a modal window with a newsletter form. This is how the HTML may appear:
Not Eliminating Superfluous Styles
When I get to evaluate code for inexperienced engineers, one of the most common mistakes they make is to leave unnecessary, redundant code in place.
Putting Fonts in the Wrong Place
I've found that a lot of developers often have misconceptions about how to utilize @font-face. They use the font-family property to regulate font-weight and font-style instead of specifying those values in their @font-face declarations.
Not Taking A Step Back
In CSS, abstracting an element is the process of making a child element into an independent element. The newsletter portion from our company's website is shown below.
Not Gaining from CSS Grid or Flexbox's Advantages
Many issues may be resolved using Flexbox, and using it is rather simple (unless you need to support IE9 or below). I often see developers battling with floats and inline-blocks when they could do the same tasks five times more quickly, cleanly, and easily using flexbox or the CSS grid feature.
Flexbox may be complicated the first time you use it, which is probably why some people make a concerted effort to avoid learn it. But believe me when I say that learning it is well worth the effort. All you need to do is locate any interactive lesson (there are many available), dedicate no more than three to four hours to it, and you'll be an expert in flexbox. I would suggest playing with Flexbox Froggy; it's a lot of fun.
Putting Items in Uppercase in HTML
There are two ways to make a section title, such "JOB ADS," uppercase when coding it. The first one is to enter it into the HTML precisely as follows:
In summary
The most common frontend errors are the consequence of negligence.
Programmers have a tendency to work quickly, but if they don't plan ahead and create unscalable solutions, they will eventually pay for it by having to spend more time and money on costly refactors.