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.

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…


Image by bridgesward from Pixabay

So lockdown has forced most of us to stay at home and if you are struggling to find a new hobby then I have got you covered. Lockdown shouldn’t be a time to put extra pressure on yourself, so pursuing your hobbies and interests can be a good way to escape from the boredom of staying at home.

My social feed is buzzing with activities people are trying while staying at home and I am just covering a few of them today with some interesting variations. So let’s begin…

Cooking

  • There is a resurgence in cooking and baking since the government…


So today I would like to cover how you can create login forms in react.js using hooks and bootstrap from scratch. In the end, you will have a UI like this one below:

User login and registration forms

So let’s begin the journey…

Some prerequisites for the project are that you need to have node.js and an editor like Vscode installed on your system. Optionally you can also install the yarn package manager. Now the first thing we need to do set up a new react.js …

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