Blog thumbnail

In today’s short tutorial we are going to build a christmas greeting card using CSS animations.
Here’s a preview of our final greeting card which we are going to build today:-

Project Preview

The steps for building this greeting card are as follows:-

Step 1: Add Greeting card content


Today we are going to cover a list of 10 important sections you can add to your GitHub projects for improving your README files.

So let’s begin…

Section 1: Add title, description and socialify image(optional)

The title and description for a Github project can provide the user with basic information about the project. Additionally, we can create a project info image using socialify service to improve project presentation.
Example:-


Hello everyone, I am Saurabh Mhatre, a blogger and front-end developer trying to make a mark in the software engineering industry. My journey in the technical blogging field started shortly after getting my first job as a software engineer.

Writing Journey on Medium


Hello everyone who is reading this article. I’m going to share a few programming tips which I have learnt from my daily developer job on my own and from my colleagues in the hopes that it benefits other developers working in the industry as well.

So let’s begin with the first tip in this article:

Only focus on a single bug fix or feature development at a time

Whenever we are creating a project, we should make sure that we are working on a single feature or a single bug fix at a time. The reason for this is because, let’s just say if you work on multiple features or multiple fixes at…


Websites for project improvements

Two websites that can help in improving the README of your Github projects are as follows:-

1. Socialify( github.com/wei/socialify):
Socialify allows us to create a beautiful project image based on the languages used in our project. There are a lot of customisation options and this can very well replace the usual title and description in projects.

Once generated, you can download the image as a .png, .jpeg or .webp and use it in the README file of your project.

Here is a sample preview of the image I used in one of my own projects:-


Learnings from daily dev job

Hello everyone, so today I’m starting a new series in which I’m going to share a few programming tips which I learn from my day to day job on my own and with my colleagues. So let’s begin with the first tip…

Which side to choose when a bug can be fixed from both backend and frontend?

When a bug can be fixed from let’s say backend as well as the front end side then which side should we choose from?

The first thing which we can consider in this case is whether our application is cross-platform and whether a back end fix will fix the bug both on the website as well as a…


Cover image

Hello curious stranger on the internet, in today’s article we are going to cover some popular frontend interview questions and their answers. Now, these are questions that I have personally encountered a lot of times while I was looking for new job opportunities and hope that it helps you all as well. So let’s begin…

Q1. What are tags/elements introduced in HTML5?

Some of the interesting elements introduced in HTML5 are:-
1. Form input elements

HTML:-
<input type="color" onchange="printSelectedColor(this)">
Javascript:-
function printSelectedColor(context) {
console.log("value…


Cover Image

The contenteditable attribute specifies whether the content of an element is editable or not.
It is generally used to make rich text editors for blogging websites.
You can check out detailed video explanation of this tutorial here:-

Video tutorial

Or follow along in this blog as well:-

We first add a contenteditable attribute to a div tag in HTML:-

<div class=”editor-buttons”>
<a href=”#” data-command=”bold”>
<i class=”fa fa-bold”></i>
</a>
<a href=”#” data-command=”italic”>
<i class=”fa fa-italic”></i>
</a>
</div>
<div contenteditable=”true” class=”editor”>
<p>Lorem ipsum dolor sit amet.</p>
</div>

On third last line in the code above we have added content editable attribute with…


Image by Markus Winkler from Pixabay

Many of us have heard about WesBos Javascript 30 day challenge for understanding the fundamentals of Javascript. Last month I took a similar challenge to build 15 frontend applications in a month in order to learn fundamentals of react.js hooks in depth.
The most awesome part of building these projects was I was learning a lot of things by working on mini-projects each day. I feel that many of us would like to take on a similar challenge to improve their fundamentals of React.
What could be a better month to pick up this challenge that Hacktoberfest itself.
The idea is for this…


Image by fancycrave1 from Pixabay

Every year I see frontend developer roadmap videos released, which are filled with tons of latest tools, frameworks and libraries to cover in order to become a successful frontend developer. It’s important to learn them but there is one thing which I see missing in a lot of these articles. This little thing is UI design and let me tell you why with this 3 simple reasons:

1. A Better understanding of the thought process behind UIs

Our main task as front-end developers is mainly to take designs from UI designers and transform them into a website using HTML, CSS and Javascript. But if we don’t have the slightest idea…

Saurabh Mhatre

Blogger,web and hybrid applications developer

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