Full stack web developer skillset matrix

I came across some nice web developer skillset matrix chartsĀ here. While this is a person’s personal opinion, it still is a great reference.   A similar chart from last year looked like this: Front end life: Backend end life: Devops life:    

Adding and using fonts

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 […]

Reset CSS and Normalize CSS

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: […]

Stacking order of elements in a layout

Lets take a look at this code: HTML: <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: .block1{ background: pink; } .block2{ background: red; margin: -60px 0 0 20px; } .float{ background: lightblue; float: left; margin: -150px 0 0 100px; } .inline{ background: blue; […]

When to use Float vs Position vs Display for laying out elements and aligning blocks on page

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 […]