General Page load speed is an important metric for SEO. Targeting images for the appropriate browsers goes a great deal in achieving this, particularly on mobile devices. We shall discuss the srcset attribute on the img tag to help us achieve this. This attribute is available on newer browsers. Before we start, we need to […]
General Info Flexbox is aimed at a container based layout where we are primarily focused on arranging container items in a single dimension with some abilities of aligning along the cross-axis as well. Because of this, flexbox is often the preferred tool for laying out items along a single dimension. This is different from CSS-Grid […]
Here is how to avoid wrapping of text in elements like btn, div etc (block, or inline-block elements). add this to the btn styling: white-space: nowrap;
We have been building Currency Converter using Vue.js. In the part-1 we built the basic layout of the app with navbar. In this tutorial we will setup a form with validation. The code for this is here. Please note that the code has been committed under commits matching with Parts. So for complete code for […]
In this series, we will be building front-end app Currency Converter using Vue and Vuetify. The code for this is here. Please note that the code has been committed under commits matching with Parts. So for complete code for this tutorial, please refer to commit branch “part-1”. Pre-requisites: Please ensure that npm-cli is installed. You […]
We have two options: Web safe fonts: Preinstalled on the computer. You simply specify the font-family in the css to use these. Web fonts: These are fonts added externally by adding downloaded font-files in the project. Using these is a two step process: Add the font-file to your project In your CSS head tag, use […]
Often there is some guesswork involved when styling elements due to mystery spaces and padding appearing from heaven. These are due to default styling applied by browsers and can cause some confusion as they vary between different browser vendors. To remedy this, many leading developers in the frontend community have come up with two solutions: […]
Lets take a look at this code: HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<html> <head></head> <body> <p>body content</p> <div class="block1">block1</div> <div class="block2">block1</div> <div class="float"> <p>float</p> <span> class="inline">inline</span> </div> <div class="position">position</div> </body> </html> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.block1{ background: pink; } .block2{ background: red; margin: -60px 0 0 20px; } .float{ background: lightblue; float: left; margin: -150px 0 0 100px; } .inline{ background: blue; color: white; padding: 10px 40px 10px 10px; } .position{ background: orange; position: relative; left: 180px; top: -165px; height: 110px; } |
The natural staking order of elements in this piece of code is (in ascending order in the stack): The root element (<html>) .. this is at the bottom of stack..level 0 The viewport (<body>) Block level elements in the normal page flow block1 is […]
Here are the recommendations: Float: Use this for content that flows around (i.e. variable and flexible content). A good example is an image surrounded by texts of different lengths. So even if the amount of text can change, but using float will allow it to flow around the image. Float is also very useful in […]