What I Learnt : Bubble Game

Description:- It is a simple game where we need to select the specified number to score points within a time limit.

Tech Stack:- HTML,CSS, Javascript 

Learnings:-

    CSS:

•  How to add gradient colour (not used):- we can add gradient color on any element using following syntax:-

  Syntax:

  Background-image :linear-gradient(“first color”, “second color”);

•   How to add gradient colour to the text:- The above method cant used to add color to text, for that we need to use another property called webkits.

  Syntax:

  Background :linear-gradient(“First color”, ”Second color”);

  -webkit-text-fill-color  : transparent;

  -webkit-background-clip : text;

• How to add Borders to the elements(harder than I expected):- So in CSS we can add borders by first selecting border style (dotted, dashed, solid, etc), then other properties like radius. To add weight to the border, we need to use border-width.

  Syntax:

         Border-style :solid;

     Border-radius:10px;

     Border-width: 10px 10px 10px 10px; //top right bottom left

•  How to add borders(stroke) to text:- To add stroke we’ll  use webkits again, webkits seem to be frontend dev’s bestfriend.

  Syntax:

          -webkit-text-stroke-width: 1px;

     -webkit-text-stroke-color: “color name”;

• How to set height without knowing exact dimensions:- It can be achieved using calc();

  Syntax:

                Height :calc(100%-100px);

    HTML and Javascript was similar to the previous projects I made, so I didn't learn anything significant in these sections. But learnt alot about CSS. This will definitely help me in future projects!