Posts

Showing posts with the label webdevelopment

Random jokes generator using API (Free)

Image
           Today let's see how to create a random joke generator which will basically fetch the data from a free API. My main target is to show how to use API and put the data in HTML using javaScript.      Today we will use JokeApi website -  https://sv443.net/jokeapi/v2/  . You can read the documentation from here. We will send an fetch request to -  https://v2.jokeapi.dev/joke/Any?blacklistFlags=racist,sexist&type=single&idRange=0-319  . You can get this type of URL from JokeApi and any free API. You can replicate the same process for other APIs as well.      When we send request to this URL of the API, it will send back a response which is transformed into JSON format in JavaScript. Let's have a look on the sample JSON data -  { "error": false, "category": "Pun", "type": "single", "joke": "I bought some shoes from a drug dealer. I don't know what he laced them with, but I was trippi

Random Gradient Generator With CSS and Javascript

Image
      Let's see how to generate random gradient background using JavaScript. This is very simple. We will use Math.random() of JavaScript to generate any random value we want to generate. We will have some functions in JavaScript :  1) randomElement() : To generate a random value between 0 to f or the hexadecimal digits. 2) randomColor() : To generate a random Hex color. 3) randomAngle() : To generate a random angle between 0 to 360. 4) applyBg() : To apply the background gradient to a particular element. Now , Let's see the live preview of our project. Change Background Let's understand in short how is it generating random gradient everytime. We have an inbuilt function in JavaScript called Math.rand() which generates random fraction value between 0 to 1. So if I multiply that with any number N and floor or round off the value, it will output any random value between 0 to N in integer format. This concept we have used here.  To generate the

CSS not updating in PHP page

Image
      If you are working with PHP you may have faced a problem that whenever the CSS is being updated the new styles are not shown in the PHP page. This happens due to some caching problems. In this situation you have to hard reload the CSS each time page is refreshed. Normally, you have already included the CSS like this:  <link rel="stylesheet" href="style.css" />     But to hard reload the CSS and make the styles work every time you update the CSS file, you have to include the PHP code after CSS file name with ?v=  <?php echo date('his'); ?> . So the final structure will be like:  <link rel="stylesheet" href="style.css?v=<?php echo date('his'); ?>" /> Hope, you understand the solution. If you have any opinion, doubt or suggestion make a comment below. Also mention your country name in the comments, I am curious!! Ok, have a good day , Byee..

GET URL Parameters Using JavaScript - Web Development

Image
            What are URL parameters ? Let's say one URL of a site is like -   https://www.example.com/users?name=John&id=23 In this URL we can see that some parameters are passed as arguments at the end like (name=John and id=23) . This means that this particular URL is trying to do something with John of id 23. Now, let's say you are the host of this site. How can you GET these parameter values which are being opened by a user. To make it simple, suppose your website provides data for some names with ids. The data which you will show in your website depends on this parameters provided on the URL. Today, we will learn how to fetch them using JavaScript .      Let's fix a goal that whatever parameters of name and id value are in the URL we are to print them on the webpage. In this case, we will print John and 23 on the webpage. So, let's begin.          In JavaScript, window.location returns the URL of the location bar. We will create an URLSearchParams() object

The Best Web Development Roadmap - Guide To Start Out

Image
           Web development is one of the all time trending topic to techies. The learning curve of web development has never down-sloped. Today, I will tell you the complete roadmap to be a web developer and pursue your career. I will give you a sequential overview to learn topics one after another. After learning them you will be called "A WEB DEVELOPER". Web development is always a trending career option -- Here Why    We can divide the web development into two subparts- A. Frontend development and B. Backend development. The tasks which a developer has to do are --  Make a basic markup of a page using HTML Design the webpage using CSS or any library like - Bootstrap, Tailwind, Bulma Make the website interactive with JavaScript  These steps come under frontend part. So, to handle frontend learn -- HTML, CSS, JavaScript, any  CSS library. Learn these topics one after another. Completing these you will be able to design a website and can make beautiful templates for websites.

Send AJAX Request to PHP using jQuery.

Image
 PHP is a very commonly used language for backend web development. This is used to make dynamic websites with a database connection. Now there are two types of request that can be sent to a PHP file GET and POST. In the normal case if you sent any request a PHP file the page will be refreshed, which will surely decrease the User Experience. Also in some web applications it may happen that you have to send request to a PHP file very frequently. In these situations we have another way to send request and receive response from the PHP file. It can be done through Ajax or XMLHttp request. Normal Javascript can be used to write a code for AJAX but I will recommend jQuery to do this task as it is time saving and less code have to be written.  At first include the jQuery CDN link above the closing </BODY> tag . You can get it from here--> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="

5 Fantastic YouTube Channels to learn Web Development.

Image
  YouTube has become a very strong source of online tutorials and videos for almost all trending and famous topics. You can start learning completely free from YouTube and obviously you can learn at your own time. So, there is a big opportunity for you to learn from YouTube your favorite topics without any cost but only your internet data. In this context, I will tell you 5 channels from where you can learn web development very steadily and efficiently. So let's see--> 1. Online Tutorials :     This is an excellent channel for learning CSS. The channel contains beautiful and creative CSS videos that will make you too much interested. If you want to grow your frontend development skills, this channel is very good. so check it out : CLICK HERE 2. FreeCodeCamp :     FreeCodeCamp is a very well known name for coding and programming.  This channel has video tutorials by experienced programmers on almost every topic. You can check out the Django, PHP, Laravel courses from this cha

Is PHP dead ? What to use in backend ?

Image
  So, hello everyone welcome to another blog. Now the question that leads you to this blog post is that which language should we use in the backend of website. For about two decades, PHP was soo famous in web backend development and was the compulsory language for backend developers. But, nowadays, some says that PHP is dead , he is no more, leave it, kill it and so on. So, what's the matter actually and what to learn. Okay, let's point out one thing that--  Do you know Wordpress is the biggest platform for blog websites. Very interestingly,  it is totally on PHP. Also, PHP is made and brought up only and specially for web development. Also PHP is very compatible with HTML and CSS websites.  People who say that PHP is dead actually they somehow hate this language. But trust me it is not true. In this days, in the web 79.1 % websites are on PHP.  Also it has a very strong userbase throughout the world.  Also, let me mention some giant websites which are world famous all time an

How To Make Anchor Tag Link Look Beautiful ?

Image
In a website the hyperlinks are very important and discussable. The more elegant design of the link the more chances for that link to be clicked. So, it is necessary to have a good looking links. Here I will discuss the process to do this task. A website has links and these are actually <a> tags. If you write only the basic format like this -->           <a href="#">Click Here</a> It will look like a very normal link with underline------> Click Here You can see that this link is not at all attractive to be clicked.  But some lines of CSS will make it so beautiful. Let's do that. At must you have to remove that underline with property {text-decoration: none;}. Then to change the color and background {color: #fff; background: #00cc99}. But still it is not  looking so good .Now lets give padding {padding: 5px 16px;}.  You will see that padding will not work properly as the a tag is an inline element. You have to ma

Why Web Development is a trending career ?

Image
  The field of technology is going to create many job opportunities. Web Development is a very successful career option. As everything in this in this world is becoming so much online , the demand of web developers is in the top. Nowadays, every famous shop, institute, business are in need of websites. The education system is also very much dependent in online system. All of these stuffs are maintained by web developers. Learn only four things HTML , CSS, JS , Bootstrap and you are ready to go as a frontend web developer. learn PHP or Node or Django and you are now a full stack developer.  A frontend developer has the responsibility of designing the website. Average salary of a frontend developer is between 4,00,000 to 9,00,000 rupees per annum. Also they can do personal projects for anyone to boost their income. Also, the demand is going so high now, companies need more developers now. Now, you can understand that it is life changing for you. So, why are you waiting still. NOTE TH