There are a lot of opportunities to get freelance jobs and even if you only know HTML & CSS. It’s just a matter of understanding your buyer’s requirements & intent. What mistakes holding you back from getting freelance jobs It’s a common question most newbies think about if they are able to land jobs according to their HTML CSS skills. And my answer is pretty straightforward- yes it’s definitely possible to get freelance jobs only with HTML CSS skills. I proved it several times. But what holds you back? Here are the 2 main reasons: 1. UNABLE TO UNDERSTAND BUYER’S […]
Read More →CSS stands for “Cascading Style Sheets.” It’s a stylesheet language and not exactly a programming language. The history of CSS CSS was created 25 years ago. On December 17, 1996, W3C (World Wide Web Consortium) officially published it. [ref] Hakon Wium Lie (Håkon) first proposed the concept of CSS on October 10, 1994. And Bert Bos was an influencer & he is a co-creator of CSS. [ref] If you’re curious enough, check the brief history. The second version of CSS (CSS2) was released on November 04, 1997 (first public working draft). Finally, the latest version of CSS (CSS3) was published […]
Read More →
CSS position is one of the most used properties that confuses many web designers & developers. In this post, I will explain this property in depth. Hopefully, this will make things clear. Let’s get started. CSS position property There are 5 different values for the CSS position property: static, fixed, relative, absolute & sticky. The static is the default value. And the absolute is the most puzzle piece among them. Let’s discuss & make things clear. Static position As I mentioned, the static is the default value. Think of it as a normal situation on your web page. Fixed position […]
Read More →Centering anything horizontally is easy but centering vertically is a little bit trickier. The display: block; margin: 0 auto; will center an HTML element horizontally. On the other hand, you can center anything vertically in a few different ways. In this post, I will show you two different ways to vertically center anything. And you can think of these two methods as the blueprints of centering elements. Centering vertically with Flexbox The HTML markup matters while centering with Flexbox. That means you have to organize or wrap your HTML elements in a specific way before you write the CSS. See the markup or structure below: HTML MARKUP You have to […]
Read More →
The most commonly used CSS for rounded corners Example of rounded corner Use the border-radius: 30px; property to make rounded corners. Not to mention, you can use any value instead of the 30px. CSS round corners with fill color Round corners and fill with color Use the background: #FFE797; property to fill with color (you can use any color code). And useborder-radius property to make rounded corners. CSS for button or link round corners Rounded Link Rounded Button Different border-radius for different corners Four unit border-radius Lorem ipsum dolor sit amet consectetur adipisicing elit molestias at et ducimus error dolorem […]
Read More →
Center a div both in vertical and horizontal directions using two different methods. In this post, I explained the CSS to centering a div using flexbox, positioning, and auto margin. Also, I mentioned one of the common fixes for CSS absolute position.
Read More →
In this post, I explained the CSS margin, padding, border, and box model. Also, I tried to clear the common confusion and demonstrate how these three components work together. Let’s get started. The easiest-to-understand diagram (box model) margin border padding In this example, the image is the content that has a 90px margin, 30px border, and 60px padding. What is the difference between padding and margin? Padding and margin both create spaces surrounding the content. But what makes them different? The padding creates space inside the content. And margin creates space outside of the content. And border lives in between […]
Read More →The “text-align” property aligns the text in center, left, right and also it can justify the texts. If you want to center align the text, assign its value to “center” (text-align: center). You can apply this “text-align” property to many of the HTML element such as p, div, section, h1-h6, etc.
Read More →You can use the width, max-width, min-width, height, max-height & min-height properties to change the image size. See the examples below. This is how you can resize the images. You can also add auto height & width but this is optional. For example: After you specify the width, the height will be automatically resized proportionally. In the same vein, if you specify height, the width will proportionally change. You can also use multiple width & height properties together. Please see some of the examples below. The above CSS will make the image 800 pixels if there is available space. But […]
Read More →In this post, I will show how you can center-align an image in various directions & using different methods (CSS). Any HTML element can be centered horizontally, vertically & both. Also, a horizontally centered image can be aligned at the top & bottom. In the same vein, a vertically centered image can be aligned at the left & right. If this doesn’t make sense, see the infographic below. Please take a look at all the live examples in the link below. Center align an image in all the possible directions If you take a closer look at the above infographic, […]
Read More →