Posts

How to code neural networks (Part 2)

Image
          Photo by Mohammad Rahmani on Unsplash Welcome to part 2 of this article. In the previous article, I discussed the theory and working of a perceptron. If you haven't read that article I strongly suggest you read it before continuing with this one. Click this link to go there In this article, we are going to start implementing all we learned in code. So let's dive in. We will start off with the activation function. We have discussed the function we are going to be using in the previous article. function activation(x){ if(x <= 0.5){ return 0; }else{ return 1; } } This is just a basic function that returns 0 if the value is less than or equal to 0.5 and 1 otherwise. We are going to make a  perceptron class that can be used to solve many different problems. For my example, I will be continuing with the AND gate example.  We can start the class

How to code neural networks (Part 1)

Image
  Ever seen a robot performing tasks on its own? if yes, then you probably would have asked these questions:  How was it made to think like humans? How it was programmed to perform its tasks on its own?  In this 2-part article, I will try to answer both of these. We will also make our own neural network! Let's start with the first one "how computers think?". if you want to jump to directly coding, click this link to jump to part 2. How do computers think and learn? Before we answer the above question we must understand how the human brain works. The human brain is a big neural network. A neural network is a network or circuit of neurons. Neurons are the fundamental units of the brain. Neurons receive signals from previous neurons and in turn, pass signals on to other neurons. Almost all computational systems are made inspired by biological neural

Mobile-first responsive design in CSS

Image
What is mobile-first design? mobile-first design is  an approach in which web designers start product design for mobile devices first. In this, we start by writing CSS for smaller devices first and then use media queries for bigger screens. Why mobile-first? There are  2  main reasons to practice mobile-first design:  1. Increase in mobile phone users Globally about 68% of website surfing in 2020 was done through mobile phones and it is only increasing. There is a rapid increase in web surfing done through mobile phones. S o it is only logical to prefer designing your apps and websites for mobile phones first and then scale them to desktops.  2. It helps focus us on what's important:  In mobile design, we strip the components to their core essentials to make everything fit. This helps us understand the important aspects of the site or app you are creating.  Suppose if a designer is making a website for desktop he is like to use all the screen space available, all the fancy animatio

How to make cool buttons with CSS

Image
Cool CSS buttons Hey there, always wondered how to make cool CSS buttons with beautiful animations? well, I have got just the tutorial for you. Most animated CSS buttons are made using pseudo-elements ( ::before  and  ::after ). The  ::before  pseudo-element can be used to insert some content before the content of an element.  The  ::after  pseudo-element can be used to insert some content after the content of an element. Let's start by making this simple animation using pseudo-elements In this example, we can simply design the button how we normally would and add the pseudo-element for the hover state to give that cool animation. We'll start with the basic HTML: <button class="btn">Hover</button> Now add the basic css for the button: .btn{ color: #4895ef; font-size: 1rem; cursor: pointer; transition: 0.2s; position: relative; overflow: hidden; padding: 0.8rem 1.2r