Posts

Showing posts from December, 2020

CSS Clip Path-Awesome trick to create mind blowing web pages

-
Image
 Hey folk , so today i'll tell the you to most awesome trick to crate super sexy front end, i'm gone tell you about a property of CSS to shape the web page or image as per our need. Suppose i have  a page and want's to change some side of that page then does it make our page bit stylish?? yes, it will. Or if i want to change the shape of image as per my convenience, so in this article we'll learn about clip path using polygon method. As we know that polygon is a close figure which has finite number of side so we can clip our page image or text using clipping. Introduction:  clip path in CSS give you rights to make changes in the content by clipping it in you're way, like cutting a piece of paper and made a butterfly. So in this article i'll clip a image to give a very basic idea of how clipping work. Clipping a picture using CSS So in above image i clipped the image from mid of left side. HOW : CSS CODE clip-path : polygon(/*values in percentage or pixel and se
Post a Comment
Read more

DOM Manipulation-Most important topic of javascript(Short Description for beginner)

-
Hey Folks , Hope you doing good, so today we'll gone learn about most important aspect of java script, The DOM Manipulation, as you also google and read the full form and definition of DOM so here we'll get to know why we called this as a DOM Manipulation. So DOM is data object model which contain HTML of your website. (ANSWER OF WHAT) (WHY?) -Add on performance and functionality to you're code/project/website... (NEED?) - To make our website/project more smarter and user interactive. WHAT ACTUALLY IS HAPPENING IN DOM DOM changes the event of our HTML code, and event may be a scrolling event,  dataloaded event, mousemove event, volumechange event, click event and so on. AND THE ABOVE EVENTS are map by function. (HOW YOU CAN CALL DOM): By Id, class, tag, CSS REAL WORLD EXAMPLE: Their is a nav bar and has some tags there so when is hover the mouse over their color of that tag should change, or if i have logo of my my project and if i click there short hand description shou
Post a Comment
Read more

Simple increment program in Javascript with source code(using HTML, CSS, JAVASCRIPT)

-
 Hey folks, here is a simple javascript program to increment the value by one by clicking on a button, as a new programmer we face lots of delima like what to learn, where to learn what type of framework should i master and many more, so we should start from basic of the programming world like creating a incremental program which return +1 value when you hit the button.   So here is html code : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <link rel="stylesheet" herf="count.css"> <script src="countjs.js"></script> <body>     <div class="heading">D CODER</div>     <div class="count">          <button id="dadd" onclick="inc()">+</button>          <input type="text" id="text">      </div> </body> </html> In this HTML code i created one div for my p
Post a Comment
Read more

Margin in CSS-Explained

-
Image
  MARGIN Margin is a external space given to a element, and those elements are images paragraph heading etc, and this margin is given to create good user interface and make content pleasing to our eyes. So here question arises, Where to give a margin: so we can give margin to :  TOP of element. BOTTOM of element. RIGHT of element. LEFT of element. Here is box model diagram to get better overview of margin: CSS Box Model this box model contain an element, whereas height and width is shown in picture then padding is written (top,bottom,right,left) which means inner space given between a border, then border field is their which is outer outline of a element, then external space shown is margin. Syntax of giving a Margin: let, i wrote a heading in html - <h4 id="head">You are reading my blog</h4> In CSS that's how we declare margin to every side  #head{ margin-right:50px; margin-left:75px; margin-top:100px; margin-bottom:125px; } In above example individual margi
Post a Comment
Read more

Language knowledge for Front end developement(Complete road-map)

-
Hey folks , so as far as web development is concern website rely on two main factor which is client side and server side, and to deal with client side(content shown on screen) is known as Front end . Basic :  Before you switch to any framework or code editor make sure you clear your all the  basic, and basic for front end consist 3 languages which is : 1. HTML 2. CSS 3. JavaScript Introduction so HTML is a hyper text markup language which is use to create body of your website.or we can say that structure of website is written in this language like button, navbar, written content(heading, paragraph,etc) CSS is Cascading Style Sheet which add style to your website or in compact i would say it make your website beautiful, for example you make a button in html then CSS has power to add color, margin, padding, align content, add animation and many more Javascript can be consider as a brain of your front end, here logic is written to add better punctuality for you're website, and yes ja
1 comment
Read more