CSS Niye Joto Kotha

 

       Resource Links

-- https://www.tutorialrepublic.com/css-reference/css3-properties.php 


Ai site ta explore kore dekhte paren, just kichu color theory deya ache, apni nijer moto use korben, kon color er sathe kon color valo jabe setar idea nite paren, 

ami art er jonno use kortam

https://coolors.co/palettes/trending

 

1)CSS Diner               https://flukeout.github.io/ 
2) Flesbox Froggy          https://flexboxfroggy.com/
3) CSS Grid Generator      https://cssgrid-generator.netlify.app/ 
4) Grid Garden            https://cssgridgarden.com/ 
5) CSS Battle Field          https://cssbattle.dev/ 
 

Flex আর Grid নিয়ে হয়তো মডিউলে কিছুটা জানতে পেরেছেন, আরো কিছুটা সামনে আসবে। কিছুটা বুঝতে পেরেছেন, আবার কিছুটা মাথার উপর দিয়ে গেল। আসলে নতুন জিনিস শিখার process টাই এরকম। তাই হতাশ হবার কিছুই নেই এখানে। 

flex-grid এর main জিনিসগুলো focus করে animation এবং 5 টা playground নিয়ে ছোট করে এই blog থেকে দেখে আসুন। Blog এর flex-grid নিয়ে animation টাতে আরেকটু different angle এ জিনিসটা দেখতে পারেন, ভাবতে পারেন। এক কথায় flex-grid এর এটা short & quick recap.

Blog link 👉 👉 👉 

বিশ্বাস করুন এই জিনিসগুলো আপনার ততক্ষণ পর্যন্ত সহজ লাগবে না যতক্ষণ না আপনি এগুলো feel করতে পারছেন।

একটা সময় আসবে দেখবেন flex এর নাম শুনলেই আপনার চোখের সামনে তিন চারটা box পাশাপাশি দৌঁড়াদৌড়ি করতে থাকবে বিভিন্নভাবে... এরকমই সবকিছু. Just বারবার practise করতে হবে। We are here 🖐️🖐️🖐️





Introduction

 CSS Text: text color, text alignment,text decoration,font size, font family, font-style

  Meaning Cascading Style Sheet

  CSS has 3 type those are

1)

<p style="color: orangered;"> Example for internal link </p>


2)

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title  </title>
    <link rel="shortcut icon" href="images/icons8-home-50.png" type="image/x-icon">


    <style>

        h1{
            color: blue;
        }
    </style>

</head>

3)



There are so many color code types


hexa

rgba color









3 CSS Selectors (basic): id, class, universal, tags, grouping, attribute, id vs class


CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:


The CSS element Selector

The element selector selects HTML elements based on the element name.

Example

Here, all <p> elements on the page will be center-aligned, with a red text color: 

p {
  text-align: center;
  color: red;
}


4 Mixed Selectors multiple classes, combined selectors, attribute, div, span





5 CSS Borders Border, border-radius, Margin, different ways to set margin


margin styling position work as clockwise  top right bottom left







;"> Example for internal link </p>



6 CSS Box model Padding, border, content, height, width

 










7 CSS Display none, hidden, inline, block, inline-block, box-shadow

































8 CSS Background color, image, repeat, position, size, relative image path

















9 CSS Overview Module Summary and practice task

































































FLEXBOX FROGGY

 

Use justify-content again to help these frogs get to their lilypads. Remember that this CSS property aligns items horizontally and accepts the following values:

  • flex-start: Items align to the left side of the container.
  • flex-end: Items align to the right side of the container.
  • center: Items align at the center of the container.
  • space-between: Items display with equal spacing between them.
  • space-around: Items display with equal spacing around them.


If the margin property has two values:

  • margin: 25px 50px;
    • top and bottom margins are 25px
    • right and left margins are 50px







10-3 CSS3 features and CSS overflow, text-overflow, ellipsis








Comments

Post a Comment