From Basics To Deploying Scalable Web Applications

When I started my Web-Development journey, getting overwhelmed by so many topics is what I used to face all the time, there is always something new that I have to learn while having no idea about what I should learn. …

Key Concepts to Mastering CSS

1. Introduction to CSS

Anatomy of a CSS Rule

A CSS style sheet consists of rules, which targets HTML by using selectors that describe the elements on which the styles should've applied.

Rule Syntax: The rule consists of a selector follows by a block of some CSS properties contained inside the curly braces.CSS properties consist of property and a value that is separated by a colon and are delimited with semicolons. However, a value may be a single value or a collection of multiple values, depending on the property.

For example,

  • The rule targets any elements with the class header & any element with this class will have a…

Getting Started With Basic CSS

1. Display

Specifies The Display Behavior of an Element

It takes many different values, but quite frankly you will be using only the 4 values in most cases.

  • block: Block-level elements in CSS takes as much space as available, but they cannot be placed on the same horizontal line. Block-level elements are mostly used by developers to make the layout process easier as they have the ability to alter the element’s width and height of their choice.
  • inline: This is the default value if not specified with any other display values, elements can be placed side by side on the same horizontal…

Key productivity-boosting tools for programmers to ensure a smooth workflow.

Photo by Pankaj Patel on Unsplash

1. The Silver Searcher

It’s not easy to search for a specific line of code within a document made up of thousands of lines, and sometimes it’s really frustrating. Silver Searcher is a cross-platform source code searching tool that can be used in such cases. It is ranked among one of the best productivity tools for developers.

Similar to ack, but faster, the use of the Silver Searcher tool makes it really easy to find specific lines of code within a large document.

2. Flock

Build Awesome Visual Effects For Your Application

Shadows are one of the most misunderstood concepts in CSS, due to that developers usually end up using the wrong approaches for their desired results. There is a lot to know about the box-shadow property, you can create more realistic visual effects using some minor changes without any hassle.

Note: Before you start working with shadows in CSS make sure to read about the following properties.

  • h-offset (required): A positive value puts the shadow on the right side of the box, and a negative value puts the shadow on the left side.
  • v-offset (required): Similar to the previous property, a…

Common Mistakes to avoid in web design


Popups are used for showing additional actions or information and are quite popular for showing a top-level prompt. There are generally three types of popups which include success or failure, confirmation, and signup actions.

Don't Overwhelm Your Popups

Best Practices for CSS Beginners

1. Make it Readable

One of the biggest mistakes that developers make is not having a readable CSS structure. Most of the time, people overlook this but your CSS code should always have great readability because it will be easier to maintain your code for future use, as you will be able to find elements easily.

  • Also, it becomes more helpful when you work in a team; it will be easier for others to understand the code as well.

2. Keep It Consistence

Keeping your CSS code consistent along with great readability is something developers forget throughout the build. …


I Make Mobile Apps

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store