<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Emmanuel Katto</title>
    <description>The latest articles on Forem by Emmanuel Katto (@emmanuelkatto).</description>
    <link>https://forem.com/emmanuelkatto</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1076509%2F6db97e03-4be5-46b6-9f9a-2fe0f324c797.png</url>
      <title>Forem: Emmanuel Katto</title>
      <link>https://forem.com/emmanuelkatto</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/emmanuelkatto"/>
    <language>en</language>
    <item>
      <title>How to work on react?</title>
      <dc:creator>Emmanuel Katto</dc:creator>
      <pubDate>Tue, 05 Sep 2023 06:11:10 +0000</pubDate>
      <link>https://forem.com/emmanuelkatto/how-to-work-on-react-3f03</link>
      <guid>https://forem.com/emmanuelkatto/how-to-work-on-react-3f03</guid>
      <description>&lt;p&gt;Hello Everyone,&lt;br&gt;
I'm Emmanuel Katto from Uganda and I am planning to learn react language. Is there anyone who can help me in learning react?&lt;/p&gt;

</description>
      <category>react</category>
      <category>emmanuel</category>
      <category>emmanuelkattouganda</category>
      <category>emmanuelkatto</category>
    </item>
    <item>
      <title>How to create a product page in an eCommerce website?</title>
      <dc:creator>Emmanuel Katto</dc:creator>
      <pubDate>Mon, 21 Aug 2023 11:02:19 +0000</pubDate>
      <link>https://forem.com/emmanuelkatto/how-to-create-a-product-page-in-an-ecommerce-website-1l1l</link>
      <guid>https://forem.com/emmanuelkatto/how-to-create-a-product-page-in-an-ecommerce-website-1l1l</guid>
      <description>&lt;p&gt;Hello Everyone,&lt;/p&gt;

&lt;p&gt;My name is Emka Emmanuel Katto from Uganda. I am explaining how you can create a a product page in an eCommerce website?&lt;/p&gt;

&lt;p&gt;Creating a product page on an eCommerce website involves several key steps to ensure an effective and engaging presentation of your products to potential customers. Here's a comprehensive guide on how to create a compelling product page:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Product Information:&lt;/strong&gt;&lt;br&gt;
Provide clear and detailed information about the product. Include its name, brand, model, specifications, features, and any relevant technical details. Make sure this information is accurate and up-to-date.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;High-Quality Images and Videos:&lt;/strong&gt;&lt;br&gt;
Display high-resolution images that showcase the product from various angles. If applicable, include videos that demonstrate how the product works or highlight its features. These visuals help customers better understand what they are buying.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Product Descriptions:&lt;/strong&gt;&lt;br&gt;
Write engaging and informative product descriptions. Highlight the key benefits, unique selling points, and how the product can solve customers' problems. Use persuasive language and avoid jargon.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pricing and Availability:&lt;/strong&gt;&lt;br&gt;
Clearly state the product's price, any discounts, and its availability status. If the product is out of stock, provide an option for customers to receive notifications when it's back in stock.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Call to Action (CTA):&lt;/strong&gt;&lt;br&gt;
Include a prominent and clear call-to-action button that encourages customers to add the product to their cart or wishlist. The CTA should stand out and use action-oriented language (e.g., "Add to Cart," "Buy Now").&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Product Variations and Options:&lt;/strong&gt;&lt;br&gt;
If the product comes in different variations (e.g., size, color, style), provide dropdown menus or swatches to allow customers to select their preferred options.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Customer Reviews and Ratings:&lt;/strong&gt;&lt;br&gt;
Showcase customer reviews and ratings if available. Positive reviews build trust and social proof, influencing potential buyers' decisions.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Related Products and Recommendations:&lt;/strong&gt;&lt;br&gt;
Suggest related products or complementary items to encourage upselling and cross-selling. This can enhance the customer's shopping experience and increase the average order value.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Shipping and Returns Information:&lt;/strong&gt;&lt;br&gt;
Provide transparent information about shipping costs, delivery times, and return policies. Customers appreciate knowing how long it will take to receive their order and what options they have if they need to return the product.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Trust Signals and Security:&lt;/strong&gt;&lt;br&gt;
Display trust badges, secure payment icons, and any certifications that reassure customers about the security of their personal and financial information.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Mobile-Friendly Design:&lt;/strong&gt;&lt;br&gt;
Ensure the product page is responsive and displays correctly on various devices, including smartphones and tablets. Mobile shoppers are a significant portion of eCommerce traffic.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;SEO Optimization:&lt;/strong&gt;&lt;br&gt;
Optimize the product page for search engines by using relevant keywords in the title, description, and other meta tags. This helps improve the page's visibility in search results.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Loading Speed:&lt;/strong&gt;&lt;br&gt;
Optimize images and code to ensure fast loading times. Slow-loading pages can lead to higher bounce rates and lower conversion rates.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;User-Friendly Layout:&lt;/strong&gt;&lt;br&gt;
Organize the page in a logical manner, with a clear hierarchy of information. Keep the layout uncluttered and easy to navigate.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Social Sharing and Wishlists:&lt;/strong&gt;&lt;br&gt;
Allow customers to easily share the product on social media platforms or save it to their wishlists for future reference.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Analytics and Tracking:&lt;/strong&gt;&lt;br&gt;
Implement tracking tools like Google Analytics to monitor user behavior on the product page. This data can provide insights into what's working and what can be improved.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Testing and Optimization:&lt;/strong&gt;&lt;br&gt;
Continuously test different elements of the product page, such as images, descriptions, CTAs, and layout, to identify what resonates best with your audience and drives conversions.&lt;/p&gt;

&lt;p&gt;By following these steps and focusing on creating a user-friendly, informative, and visually appealing product page, you can enhance the shopping experience for your customers and increase your eCommerce success.&lt;/p&gt;

</description>
      <category>wordpress</category>
      <category>website</category>
      <category>webdev</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Emmanuel Katto | 11 Beginner Tips for Learning Python Programming</title>
      <dc:creator>Emmanuel Katto</dc:creator>
      <pubDate>Wed, 16 Aug 2023 12:30:56 +0000</pubDate>
      <link>https://forem.com/emmanuelkatto/emmanuel-katto-11-beginner-tips-for-learning-python-programming-2b7m</link>
      <guid>https://forem.com/emmanuelkatto/emmanuel-katto-11-beginner-tips-for-learning-python-programming-2b7m</guid>
      <description>&lt;p&gt;We are so excited that you have decided to embark on the journey of learning Python! One of the most common questions we receive from our readers is “What’s the best way to learn Python?”&lt;/p&gt;

&lt;p&gt;I believe that the first step in learning any programming language is making sure that you understand how to learn. Learning how to learn is arguably the most critical skill involved in computer programming.&lt;/p&gt;

&lt;p&gt;Why is knowing how to learn so important? The answer is simple: as languages evolve, libraries are created, and tools are upgraded. Knowing how to learn will be essential to keeping up with these changes and becoming a successful programmer.&lt;/p&gt;

&lt;p&gt;In this article, we will offer several learning strategies that will help jump start your journey of becoming a rockstar Python programmer!&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&lt;strong&gt;Make It Stick&lt;/strong&gt;&lt;/em&gt;&lt;br&gt;
Here are some tips to help you make the new concepts you are learning as a beginner programmer really stick:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip #1: Code Everyday&lt;/strong&gt;&lt;br&gt;
Consistency is very important when you are learning a new language. We recommend making a commitment to code every day. It may be hard to believe, but muscle memory plays a large part in programming. Committing to coding everyday will really help develop that muscle memory. Though it may seem daunting at first, consider starting small with 25 minutes everyday and working your way up from there.&lt;/p&gt;

&lt;p&gt;Check out the First Steps With Python Guide for information on setup as well as exercises to get you started.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip #2: Write It Out&lt;/strong&gt;&lt;br&gt;
As you progress on your journey as a new programmer, you may wonder if you should be taking notes. Yes, you should! In fact, research suggests that taking notes by hand is most beneficial for long-term retention. This will be especially beneficial for those working towards the goal of becoming a full-time developer, as many interviews will involve writing code on a whiteboard.&lt;/p&gt;

&lt;p&gt;Once you start working on small projects and programs, writing by hand can also help you plan your code before you move to the computer. You can save a lot of time if you write out which functions and classes you will need, as well as how they will interact.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip #3: Go Interactive!&lt;/strong&gt;&lt;br&gt;
Whether you are learning about basic Python data structures (strings, lists, dictionaries, etc.) for the first time, or you are debugging an application, the interactive Python shell will be one of your best learning tools. We use it a lot on this site too!&lt;/p&gt;

&lt;p&gt;To use the interactive Python shell (also sometimes called a “Python REPL”), first make sure Python is installed on your computer. We’ve got a step-by-step tutorial to help you do that. To activate the interactive Python shell, simply open your terminal and run python or python3 depending on your installation. You can find more specific directions here.&lt;/p&gt;

&lt;p&gt;Now that you know how to start the shell, here are a few examples of how you can use the shell when you are learning:&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&lt;strong&gt;Learn what operations can be performed on an element by using dir():&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;`&amp;gt;&amp;gt;&amp;gt; my_string = 'I am a string'&lt;/p&gt;

&lt;blockquote&gt;
&lt;blockquote&gt;
&lt;blockquote&gt;
&lt;p&gt;dir(my_string)&lt;br&gt;
['&lt;strong&gt;add&lt;/strong&gt;', ..., 'upper', 'zfill']  # Truncated for readability`&lt;/p&gt;
&lt;/blockquote&gt;


&lt;/blockquote&gt;
&lt;br&gt;
&lt;/blockquote&gt;

&lt;p&gt;The elements returned from dir() are all of the methods (i.e. actions) that you can apply to the element. For example:&lt;/p&gt;

&lt;p&gt;`&amp;gt;&amp;gt;&amp;gt; my_string.upper()&lt;/p&gt;

&lt;blockquote&gt;
&lt;blockquote&gt;
&lt;blockquote&gt;
&lt;p&gt;'I AM A STRING'`&lt;/p&gt;
&lt;/blockquote&gt;


&lt;/blockquote&gt;
&lt;br&gt;
&lt;/blockquote&gt;

&lt;p&gt;Notice that we called the upper() method. Can you see what it does? It makes all of the letters in the string uppercase! Learn more about these built-in methods under “Manipulating strings” in this tutorial.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Learn the type of an element:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;`&amp;gt;&amp;gt;&amp;gt; type(my_string)&lt;/p&gt;

&lt;blockquote&gt;
&lt;blockquote&gt;
&lt;blockquote&gt;
&lt;p&gt;str`&lt;/p&gt;
&lt;/blockquote&gt;


&lt;/blockquote&gt;
&lt;br&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;em&gt;&lt;strong&gt;Use the built-in help system to get full documentation:&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&amp;gt;&amp;gt;&amp;gt; help(str)&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;Import libraries and play with them:&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;`&amp;gt;&amp;gt;&amp;gt; from datetime import datetime&lt;/p&gt;

&lt;blockquote&gt;
&lt;blockquote&gt;
&lt;blockquote&gt;
&lt;p&gt;dir(datetime)&lt;br&gt;
['&lt;strong&gt;add&lt;/strong&gt;', ..., 'weekday', 'year']  # Truncated for readability&lt;br&gt;
datetime.now()&lt;br&gt;
datetime.datetime(2018, 3, 14, 23, 44, 50, 851904)`&lt;/p&gt;
&lt;/blockquote&gt;


&lt;/blockquote&gt;
&lt;br&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Run shell commands:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;`&amp;gt;&amp;gt;&amp;gt; import os&lt;/p&gt;

&lt;blockquote&gt;
&lt;blockquote&gt;
&lt;blockquote&gt;
&lt;p&gt;os.system('ls')&lt;br&gt;
python_hw1.py python_hw2.py README.txt`&lt;/p&gt;
&lt;/blockquote&gt;


&lt;/blockquote&gt;
&lt;br&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Tip #4: Take Breaks&lt;/strong&gt;&lt;br&gt;
When you are learning, it is important to step away and absorb the concepts. The Pomodoro Technique is widely used and can help: you work for 25 minutes, take a short break, and then repeat the process. Taking breaks is critical to having an effective study session, particularly when you are taking in a lot of new information.&lt;/p&gt;

&lt;p&gt;Breaks are especially important when you are debugging. If you hit a bug and can’t quite figure out what is going wrong, take a break. Step away from your computer, go for a walk, or chat with a friend.&lt;/p&gt;

&lt;p&gt;In programming, your code must follow the rules of a language and logic exactly, so even missing a quotation mark will break everything. Fresh eyes make a big difference.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip #5: Become a Bug Bounty Hunter&lt;/strong&gt;&lt;br&gt;
Speaking of hitting a bug, it is inevitable once you start writing complex programs that you will run into bugs in your code. It happens to all of us! Don’t let bugs frustrate you. Instead, embrace these moments with pride and think of yourself as a bug bounty hunter.&lt;/p&gt;

&lt;p&gt;When debugging, it is important to have a methodological approach to help you find where things are breaking down. Going through your code in the order in which it is executed and making sure each part works is a great way to do this.&lt;/p&gt;

&lt;p&gt;Once you have an idea of where things might be breaking down, insert the following line of code into your script import pdb; pdb.set_trace() and run it. This is the Python debugger and will drop you into interactive mode. The debugger can also be run from the command line with python -m pdb .&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Make It Collaborative&lt;/em&gt;&lt;br&gt;
Once things start to stick, expedite your learning through collaboration. Here are some strategies to help you get the most out of working with others.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip #6: Surround Yourself With Others Who Are Learning&lt;/strong&gt;&lt;br&gt;
Though coding may seem like a solitary activity, it actually works best when you work together. It is extremely important when you are learning to code in Python that you surround yourself with other people who are learning as well. This will allow you to share the tips and tricks you learn along the way.&lt;/p&gt;

&lt;p&gt;Don’t worry if you don’t know anyone. There are plenty of ways to meet others who are passionate about learning Python! Find local events or Meetups or join PythonistaCafe, a peer-to-peer learning community for Python enthusiasts like you!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip #7: Teach&lt;/strong&gt;&lt;br&gt;
It is said that the best way to learn something is to teach it. This is true when you are learning Python. There are many ways to do this: whiteboarding with other Python lovers, writing blog posts explaining newly learned concepts, recording videos in which you explain something you learned, or simply talking to yourself at your computer. Each of these strategies will solidify your understanding as well as expose any gaps in your understanding.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip #8: Pair Program&lt;/strong&gt;&lt;br&gt;
Pair programming is a technique that involves two developers working at one workstation to complete a task. The two developers switch between being the “driver” and the “navigator.” The “driver” writes the code, while the “navigator” helps guide the problem solving and reviews the code as it is written. Switch frequently to get the benefit of both sides.&lt;/p&gt;

&lt;p&gt;Pair programming has many benefits: it gives you a chance to not only have someone review your code, but also see how someone else might be thinking about a problem. Being exposed to multiple ideas and ways of thinking will help you in problem solving when you got back to coding on your own.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip #9: Ask “GOOD” Questions&lt;/strong&gt;&lt;br&gt;
People always say there is no such thing as a bad question, but when it comes to programming, it is possible to ask a question badly. When you are asking for help from someone who has little or no context on the problem you are trying to solve, its best to ask GOOD questions by following this acronym:&lt;/p&gt;

&lt;p&gt;G: Give context on what you are trying to do, clearly describing the problem.&lt;/p&gt;

&lt;p&gt;O: Outline the things you have already tried to fix the issue.&lt;br&gt;
O: Offer your best guess as to what the problem might be. This helps the person who is helping you to not only know what you are thinking, but also know that you have done some thinking on your own.&lt;/p&gt;

&lt;p&gt;D: Demo what is happening. Include the code, a traceback error message, and an explanation of the steps you executed that resulted in the error. This way, the person helping does not have to try to recreate the issue.&lt;/p&gt;

&lt;p&gt;Good questions can save a lot of time. Skipping any of these steps can result in back-and-forth conversations that can cause conflict. As a beginner, you want to make sure you ask good questions so that you practice communicating your thought process, and so that people who help you will be happy to continue helping you.&lt;/p&gt;

</description>
      <category>python</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>productivity</category>
    </item>
    <item>
      <title>"Unlock the Power of AEM: How Custom Coding Can Transform Your Digital Experiences" | Emmanuel Katto Uganda.</title>
      <dc:creator>Emmanuel Katto</dc:creator>
      <pubDate>Thu, 15 Jun 2023 05:32:01 +0000</pubDate>
      <link>https://forem.com/emmanuelkatto/unlock-the-power-of-aem-how-custom-coding-can-transform-your-digital-experiences-emmanuel-katto-uganda-fgi</link>
      <guid>https://forem.com/emmanuelkatto/unlock-the-power-of-aem-how-custom-coding-can-transform-your-digital-experiences-emmanuel-katto-uganda-fgi</guid>
      <description>&lt;p&gt;Hello Folks Myself &lt;strong&gt;Emka Emmanuel Katto From Uganda&lt;/strong&gt; I Just Wanted To Share About The Custom Coding (AEM). Adobe Experience Manager (AEM) is a powerful content management system that allows businesses to create and manage digital experiences across multiple channels. However, sometimes the out-of-the-box features of AEM may not be enough to meet the specific needs of a business. This is where AEM coding comes in.&lt;/p&gt;

&lt;p&gt;AEM coding refers to the process of developing custom code using AEM to extend its functionality or customize its features. This can involve using various programming languages such as Java, JavaScript, and HTML/CSS. With AEM coding, businesses can create custom components, templates, workflows, and services that meet their unique needs.&lt;/p&gt;

&lt;p&gt;One of the key benefits of AEM coding is that it allows businesses to create highly customized digital experiences that are tailored to their specific audience. For example, a business may want to create a custom component that displays personalized content based on a user's browsing history. With AEM coding, this is possible.&lt;/p&gt;

&lt;p&gt;Another benefit of AEM coding is that it allows businesses to integrate AEM with other systems and applications. For example, a business may want to integrate AEM with a customer relationship management (CRM) system to provide a more personalized experience for their customers. With AEM coding, this integration can be achieved.&lt;/p&gt;

&lt;p&gt;However, AEM coding can be a complex process that requires specialized skills and expertise. Businesses may need to hire experienced developers or work with a development agency to ensure that their AEM coding projects are successful.&lt;/p&gt;

&lt;p&gt;In conclusion, AEM coding is a powerful tool that allows businesses to extend the functionality of AEM and create highly customized digital experiences. While it may require additional resources and expertise, the benefits of AEM coding can be significant for businesses looking to differentiate themselves in the digital marketplace.&lt;/p&gt;

</description>
      <category>aem</category>
      <category>coding</category>
      <category>transform</category>
      <category>adobe</category>
    </item>
    <item>
      <title>Emmanuel Katto | What Goes Behind Writing a Flawless CSS Code?</title>
      <dc:creator>Emmanuel Katto</dc:creator>
      <pubDate>Thu, 04 May 2023 08:14:57 +0000</pubDate>
      <link>https://forem.com/emmanuelkatto/emmanuel-katto-what-goes-behind-writing-a-flawless-css-code-p8h</link>
      <guid>https://forem.com/emmanuelkatto/emmanuel-katto-what-goes-behind-writing-a-flawless-css-code-p8h</guid>
      <description>&lt;p&gt;Writing a clean and efficient CSS code is an art. There is a lot to learn in CSS like the properties, elements, attributes, values, and more to write a well-structured and standards-compliant code.&lt;/p&gt;

&lt;p&gt;In reality, most developers don’t always get a chance to develop a project from scratch. Most of the time, they receive already written projects, and that’s when they realize the importance of a clean code. This is the reason, as a developer, you need to first understand the source code in order to proceed with the project. If the code isn’t written up to the mark, you will have to invest a lot more time than usual to get things done.&lt;/p&gt;

&lt;p&gt;However, in order to write good CSS code, it is necessary to know how to start writing the codes in a better way. So, here are some expert-recommended tips to help you get started.&lt;/p&gt;

&lt;p&gt;Start with a framework&lt;/p&gt;

&lt;p&gt;It is recommended to use a CSS framework with each design, as it will speed up the production. Some designers have their own framework that they create over time, which helps them to maintain consistency within the projects.&lt;/p&gt;

&lt;p&gt;However, this step is advisable only for the designers who already know HTML CSS coding. However, at some point, you have to create certain aspect of layout all by yourself and abrief understanding of CSS will help it get done easily.&lt;br&gt;
CSS reset&lt;/p&gt;

&lt;p&gt;Some designers may argue that using a CSS reset is an unnecessary step. But it helps in getting started with a clean base, making it easier to style your website with more predictable outcomes in the end.&lt;/p&gt;

&lt;p&gt;It overrides the default styles of the browser. You can either use one of the many resets available online, a combination of the two, or even write one of your own.&lt;br&gt;
Maintain consistency&lt;/p&gt;

&lt;p&gt;Irrespective of the way you write your CSS code in HTML, or the way you add the properties, it is important to maintain consistency throughout the code. Many designers prefer to order their properties alphabetically, while many others use a logical approach, like organizing things by type or alignment. It’s entirely up to you about how you want to do it, but the bottom line is that you stick to the order so that it becomes easy to find things later.&lt;/p&gt;

&lt;p&gt;You can also choose to develop your own sub-language of CSS that allows you to name things quickly. You can create certain classes for nearly every team and can use‌ the same name each time.&lt;br&gt;
Ensure it’s readable&lt;/p&gt;

&lt;p&gt;Another incredibly important aspect of writing flawless CSS code is to ensure that it’s readable. It makes it easier to maintain it in the future and to find elements within a matter of seconds.&lt;br&gt;
Avoid the !important tag&lt;/p&gt;

&lt;p&gt;!important tag has its place but many times designers use it in desperation when things are not looking right. The truth is that we need to use this tag on very few occasions.&lt;/p&gt;

&lt;p&gt;The overuse of the !important tag creates the domino effect that turns into a maintenance nightmare soon.&lt;/p&gt;

&lt;p&gt;This is what happens when a CSS code isn’t working as it is supposed to. Developers apply the important task to make it work. What happens here is, this tag offers the highest specificity to so many as compared to that actually required. When you do this, you command the browser to apply the rule under any circumstance. It does not turn out to be good because CSS rules differ from one selected to another or say parent selector to a child.&lt;/p&gt;

&lt;p&gt;If you wish to override an important tag, you will have to use another important tag which leads to many more in the entire code. In the end, it will stuff your project code with important tags, which becomes harder to maintain. This is the reason ‌we recommend you to avoid the important tag as much as possible.&lt;br&gt;
Keep it DRY&lt;/p&gt;

&lt;p&gt;DRY or don’t repeat yourself is a general software development principle that aims to avoid or reduce repetition as much as possible in HTML CSS coding and also in other programming languages. To help you understand, here’s an example to point out the difference.&lt;/p&gt;

&lt;p&gt;We will be creating 3 CSS classes for three buttons without using the DRY principle.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.primary-button {
  background: white;
  color: blue;
  border-radius: 10px;
  padding: 15px 25px;
  text-align: center;
  font-size: 15px;
}

.form-button {
  background: white;
  color: green;
  border-radius: 10px;
  padding: 15px 25px;
  text-align: center;
  font-size: 15px;
}

.cancel-button {
  background: white;
  color: red;
  border-radius: 10px;
  padding: 15px 25px;
  text-align: center;
  font-size: 15px;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Next, we will be creating the same buttons using the DRY principle.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.button {
  color: yellow;
  border-radius: 10px;
  padding: 16px 21px;
  text-align: center;
  font-size: 15px;
}

.primary-button {
  background: orange;
}

.form-button {
  background: blue;
}

.cancel-button {
  background: green;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can notice that by applying the DRY principle, we have decreased the number of lines of the CSS code, thus reducing repetition and improving the performance and readability of the code.&lt;/p&gt;

&lt;h2&gt;
  
  
  The right usage of CSS shorthand
&lt;/h2&gt;

&lt;p&gt;CSS shorthand allows you to set multiple properties of an element in a single line with which you ultimately save space. The entire code takes less time to load with it. But it shouldn’t be used everywhere, as it can disrupt the much-needed clarity required in the CSS code.&lt;/p&gt;

&lt;p&gt;For instance: A div might have the following styles.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;#crayon {
    margin-left:    10px;
    margin-right:   13px;
    margin-top: 15px;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;These styles can be combined in one line like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;#crayon {
    margin: 9px 8px 0px 6px; // top, right, bottom, and left values, respectively.
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Moreover, when you only need to set one or two properties or need to override something, longhand is a better choice to switch to. Another disadvantage of using shorthand code everywhere is that it will reset the ignored properties which will cause an undesirable effect.&lt;/p&gt;

</description>
      <category>css</category>
      <category>coding</category>
      <category>codenewbie</category>
    </item>
  </channel>
</rss>
