Showing posts with the label css

Random Gradient Generator With CSS and Javascript

      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

      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..

The Best Web Development Roadmap - Guide To Start Out

           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.

Toggle Sidebar Code Using JavaScript in Web Development

     In any modern responsive website you have surely seen an toggle sidebar which will open and close with an animation whenever the hamburger icon or menu icon is clicked. It looks nice with nice transition and is necessary to make your website responsive for mobiles.      Today, I will let you make your own toggle sidebar which you can implement in any website and give your website a modern enhancement. We will have to do three things,  1. Making the HTML of the menu button and sidebar 2. Adding CSS to the elements 3. Using JavaScript, enabling the toggle functionality. HTML:      One thing to be noted that the HTML code of the Menu and Sidebar can be given anywhere inside the body tag because we will finally give these elements fixed positions. Better put it just after the body.  <div id="mobile-navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Courses

How To Make Anchor Tag Link Look Beautiful ?

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