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

  • Create a new project directory and create index.html file in which we can add our HTML code, a CSS folder which will `style.css` for our project and a folder for our images.

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

  • Colour picker :- The <input type="color"> defines a color picker. We can add a onchange handler to this picker to get the selected colour as well.
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…


Introduction

  • There are a lot of resources on the internet about finding insights and training models on machine learning datasets however very few articles on how to use these models for building actual applications.
  • So today we are going to learn this process by first training a video game sales prediction model using a dataset from a hackathon and then use the trained model for creating a basic app that gives us sales prediction based on user inputs.
  • This article is divided into sections that you can pick up one by one instead of trying to finish it one go. It…


Image by Gerd Altmann from Pixabay

We have heard of the latest advancements in the field of deep learning due to the usage of different neural networks. Most of these achievements are simply astonishing and I find myself amazed after reading every new article on the advancements in this field almost every week. At the most basic level, all such neural networks are made up of artificial neurons that try to mimic the working of biological neurons. I had a curiosity about understanding how these artificial neurons compare to the structure of biological neurons in our brains and if possibly this could lead to a way…


Image Source: Pexels

Today I am covering various platforms that have helped me over the years to become better at programming and enriched my experience as a developer. For the last 5 years, there have been a countless number of people in the IT industry who have shown me different perspectives and taught me valuable lessons in programming. If you are new to the world of software development it is quite natural to get overwhelmed a lot of times and in these moments we surely need help and guidance from others to get ahead.

So let’s begin…

Reddit

  • Reddit is a very popular site…

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