Css Programming Tutorials, Guides & Best Practices

npm install --save-dev @testing-library/react @testing-library/jest-dom

components/

 ui/           # All ShadCN UI components
    button.tsx
    card.tsx
    ...
 shared/       # Your own custom UI components
 layout/       # Layout wrappers

.item {
  /* Grid Area - Multiple ways to use it */
  grid-area: header;                              /* Named template area */
  grid-area: 1 / 1 / 2 / 3;                       /* row-start/column-start/row-end/column-end */
  grid-area: 2 / span 3;                          /* Start at row 2, span 3 columns */

  /* Individual grid-row/column properties */
  grid-column: 1 / 3;                             /* Start / end column */
  grid-column: span 2;                            /* Span multiple columns */
  grid-row: 1 / 3;                                /* Start / end row */

  /* Individual alignment */
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
  place-self: center center;                      /* Shorthand for both */
}

/* Example usage of grid-area with template areas */
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

<!-- Basic grid -->
<div class="grid">

<!-- Column configurations -->
<div class="grid grid-cols-3">                    <!-- 3 equal columns -->
<div class="grid grid-cols-none">                 <!-- No columns -->
<div class="grid grid-cols-[200px_1fr_200px]">    <!-- Custom columns -->

<!-- Row configurations -->
<div class="grid grid-rows-3">                    <!-- 3 equal rows -->
<div class="grid grid-rows-[200px_1fr_100px]">    <!-- Custom rows -->

<!-- Gaps -->
<div class="gap-4">                               <!-- Both row and column gap -->
<div class="gap-x-4">                             <!-- Column gap only -->
<div class="gap-y-4">                             <!-- Row gap only -->

<!-- Auto flow -->
<div class="grid-flow-row">
<div class="grid-flow-col">
<div class="grid-flow-dense">

<!-- Alignment -->
<div class="justify-items-start">
<div class="justify-items-center">
<div class="items-center">                        <!-- Vertical alignment -->

• قمنا بربط حدث submit للنموذج. عند الضغط على زر "إرسال"، يتم إظهار رسالة تنبيه باستخدام alert() دون إعادة تحميل الصفحة.

• قم بإنشاء ملفات index.html، styles.css وscripts.js.
• احفظهم في نفس المجلد.

• rem: Font size is relative to the root element (html), providing more consistency across your design.

  html {
      font-size: 16px;
  }

  .element {
      font-size: 1.5rem; /* 1.5 * 16px = 24px */
  }

• Building a Dark Mode and Light Mode Toggle
• Switching Themes with JavaScript and CSS Variables

• Managing Layout Changes Across Screen Sizes
• Using Media Queries with CSS Variables