Your cart is empty.
Keep shopping
Teach on Udemy
Turn what you know into an opportunity and reach millions around the world.
Learn MoreCSS3 For Beginners [ In Arabic]
CSS3 For Beginners [ In Arabic]
Learn CSS3 in detail with Project
Highest Rated
Created byElAmir Mansour
Last updated 1/2023
Arabic
What you'll learn
- CSS3 in Detail
- CSS Animation
- Responsive websites
- Transforms
Explore related topics
Course content
10 sections • 50 lectures • 5h 56m total length
- Introduction2:49
- Project Overview1:25
- Connecting HTML with CSS (3 Ways )5:25
<!DOCTYPE html>
<html>
<head>
<!-- Internal styling -->
<style>
</style>
<!-- external -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<P>Hello this is an inline styling </P>
</body>
</html>
- CSS Syntax2:28
<!DOCTYPE html>
<html>
<head>
<!-- Internal styling -->
<style>
p{
color:red;
font-size:20px;
}
h1{
color:aqua;
}
</style>
<!-- external -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is an H1 </h1>
<P>Hello this is an inline styling </P>
</body>
</html>
- Comments in CSS2:08
<!DOCTYPE html>
<html>
<head>
<!-- Internal styling -->
<!-- Comments in CSS -->
<style>
/*
This is a paragraph selector
*/
p{
color:red;
font-size:20px;
}
</style>
<!-- external -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<P>Hello this is an inline styling </P>
</body>
</html>
- CSS Selectors (id,class,universal,grouping)13:40
/* Simple selectors ( based on name , id , class , combining elements)
*/
p{
color:red;
background-color: black;
}
h1{
color:blue;
}
/* i can use more than one class in the same element
and use it in more than on element */
.classexample{
color:brown;
background-color: peru;
}
.anotherclass{
font-size: 30px;
}
/* starts with a # , cant start with a number , cant have spaces */
/* you can use it in one element only and once */
#myID{
color: aqua;
background-color: black;
}
/*universal selecter*/
*{
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/*combinign selectors */
h1,h2,p{
color:red;
text-align: center;
}
- Pseudo- Class11:25
/* pseudo class hover, first child */
a:hover{
color:red;
}
p:first-child{
color:red;
}
/*
p:first-of-type{
color:red;
}*/
p:first-child i{
color:blue;
}
- Pseudo - Elements9:40
/* Pseudo elements syntax
selector :: pseudo-element{
property : value;
}*/
/* works only on block level elements */
p::first-line{
color:red;
font-size: 20px;
}
p::first-letter{
font-size: 50px;
color:blue;
}
p.class::first-letter{
font-size: 50px;
color:aqua;
}
h1::after{
content: url(data:image/jpeg;base64,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);
}
h2::before{
content: url(data:image/jpeg;base64,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);
}
- Styling Links5:04
/* Styling links with psuedo classes */
/* hover comes after link and visited */
a:link{
color:blue;
}
a:visited{
color:crimson;
}
a:hover{
color:deepskyblue;
}
a:active{
color:darkblue;
}
- Add Colors with RGB/RGBA4:58
/* colors in css RGB/RGBA 0 255 */
p{
background-color: rgba(0,0,0,0.3);
color:rgba(0,0,0,1)
}
- Add Colors with HEX4:13
/* HEX */
/* syntax
hexadeciaml : 0 1 2 3 45 6 78 9 A B C D E F
color : #rrggbb
color : #FF0800
*/
p{
background-color:#000000;
color:#f0e ;
}
- Add Colors with HSL8:43
/* hsl/hsla */
/* syntax
color :hsl (hue,saturation,lightness)
0/360 = hue
hue= 0->360 ;
hue = 0 is the red , 120 is the green , 240 is the blue
*/
p{
background-color:hsl(0, 50%, 50%);
color:hsla(240,100%,50%,1);
}
- Background Colors2:34
body{
background-color: rgba(100,255,100,0.5);
}
p{
background-color: aqua;
}
- Background Image-Repeat6:10
body{
background-image: url("data:image/jpeg;base64,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");
background-repeat: repeat-y;
}
- Background-attachment2:52
body{
background-image: url("data:image/jpeg;base64,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");
background-repeat: no-repeat;
background-position: right top ;
background-attachment:scroll;
}
- Background Shorthanded (faster , easier )3:38
body{
background: red url("picture link") no-repeat scroll right top ;
}
/*syntax
background: color url("picture") no-repeat scroll right top;
*/
- Text Alignment7:42
/* text alignment */
p{
color: black;
background-color: skyblue;
}
div{
border: 2px solid black;
padding: 5px;
text-align-last: center;
text-align: justify;
}
- Text Decoration9:04
/* Text decoration */
h1{
text-decoration-line: overline;
text-decoration-color: red;
text-decoration-style: double;
text-decoration-thickness: 5px;
}
h2{
text-decoration-line: line-through;
text-decoration-color: green;
text-decoration-style: dashed;
}
h3{
text-decoration-line: underline;
text-decoration-color: aqua;
text-decoration-style: dotted;
}
/* short handed text decoration */
p{
text-decoration:overline underline blue wavy 5px;
}
- Text Transformation2:59
<!DOCTYPE html>
<html>
<head>
<!-- Internal styling -->
<!-- Comments in CSS -->
<style>
p.uppercase{
text-transform: uppercase;
}
p.lowercase{
text-transform: lowercase;
}
p.capitalize{
text-transform: capitalize;
}
</style>
<!-- external -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Using the text-transform property</h1>
<p class="uppercase">This text is transformed to uppercase.</p>
<p class="lowercase">This text is transformed to lowercase.</p>
<p class="capitalize">This text is capitalized.</p>
</body>
</html>
- Text Spacing8:11
<!DOCTYPE html>
<html>
<head>
<!-- Internal styling -->
<!-- Comments in CSS -->
<style>
/* text spacing*/
div{
text-indent:50px;
line-height: 25px;
word-spacing: 10px;
}
.spaceletter{
letter-spacing: 2px;
}
.wordspacing{
word-spacing: 10px;
}
.whitespace{
white-space: nowrap;
}
</style>
<!-- external -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="whitespace">
Marcellus Clay Jr.;[4] January 17,
1942 – June 3, 2016) was an American
professional boxer and activist.
Nicknamed "The Greatest", he is
regarded as one of the most significan
t sports figures of the 20th century,
and is frequently ranked as the
greatest heavyweight boxer of all
time.
</div>
<hr>
<p class="spaceletter">Hello this is first paragraph </p>
<p class="wordspacing">Hello this is second paragraph </p>
<p class="">Hello this is third paragraph </p>
<p>Hello this is fourth paragraph </p>
</body>
</html>
- Text Shadow3:58
<!DOCTYPE html>
<html>
<head>
<!-- Internal styling -->
<!-- Comments in CSS -->
<style>
p{
text-shadow: 1px 1px 5px blue;
}
</style>
<!-- external -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p> Text Shadowing </p>
</body>
</html>
- Overflow Property5:56
/* Overflow property
1- it can be used on block elements only
2- you must specify the height ;
*/
div{
width: 250px;
height: 100px;
background-color: skyblue;
border: 2px solid black;
overflow-y: scroll;
overflow-x: hidden;
}
- Font-Family2:07
/* font family */
p{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
- Font-Size3:53
/* font size
em = 16 pixels
vw
*/
h1{
font-size: 3em;
}
p{
font-size: 1.5em;
}
- Font-Style3:31
/* Font styling */
h1{
font-style: italic;
}
p{
font-weight: bold;
font-variant:small-caps ;
}
- Visibility and Display Properties5:17
/* Visibility and display */
h1.hidden{
/* it disappears but the space is still on
visibility: hidden;*/
/* it removes the content and doenst leave any space */
display:none;
}
- Border-Styling2:31
/* Border styling */
h1{
border-style: solid;
}
p{
border-style: dotted;
}
- Border Width3:49
/* Border styling
border-width;
*/
h1{
border-style: solid;
border-width: 10px 5px;
}
p{
border-style: solid;
/* top , right , bottom,left*/
border-width: 20px 15px 10px 30px;
}
- Border Radius6:37
/* Border styling
border-radius;
*/
h1{
border-style: solid;
border-width: 5px;
/* top left and bottom right , top left and bottom right */
border-radius: 10px 20px;
}
p{
border-style: solid;
border-width: 2px;
/* top left , right top and bottom left , right bottom*/
border-radius: 15px 50px 30px ;
}
- Border Sides4:10
/* border sides */
h1{
border-style: solid;
}
p{
border-style: dotted solid ;
}
/* top , right and left , bottom*/
h2{
border-style: dotted solid double ;
}
/* top , right , bot , left */
h3{
border-style: dotted double solid dashed ;
}
- Border Shorthanded3:12
/* Border short handed
for all sides
*/
h1{
/* width , style , color
style : is required
*/
border:5px solid red;
}
p{
border-bottom: 5px dotted aqua;
}
h2{
border-top: 5px solid green;
}
h3{
border-left: 5px solid blue;
}
- Explaining Content,Border,Margin,Padding.3:28
/* padding , border , margin */
h1{
border: 5px solid black;
padding: 10px;
margin: 30px;
}
p{
border: 5px solid black;
}
- Margin5:36
/* padding , border , margin */
h1{
width: 200px;
border: 2px solid black;
margin: auto;
}
p{
border: 2px solid black;
/* short handed margin
top, right , bottom , left*/
margin: 50px 20px 50px 20px;
}
h2{
border: 2px solid black;
/* top and bottom , right and left */
margin: 25px 40px;
}
h3{
border: 2px solid black;
margin: 20px;
}
- Padding3:54
/* padding , border , margin */
h1{
border: 2px solid black;
padding: 20px;
}
p{
border: 2px solid black;
padding-left: 20px;
padding-right: 30px;
padding-bottom: 15px;
padding-top:30px;
}
h2{
border: 2px solid black;
padding:30px 20px 30px 15px;
}
h3{
border: 2px solid black;
padding: 30px 60px;
}
- What is RWD(Responsive Web Design) ?2:31
- Height,Width and Max width ( What is the different ? )7:15
/* Height , width and max-width and what is the different ? */
/* height and width doesnt have any relation to padding or margin*/
.class1{
border: 2px solid black;
width: 500px;
height: 100px;
}
.class2{
border: 2px solid black;
max-width: 500px;
}
- Explaining the Box Sizing4:45
/*Box sizing sooo important
width + padding + border = actual width of an element
height + padding + border = actual height of an element
*/
*{
box-sizing: border-box;
}
.class1{
border:2px solid black;
height: 100px;
width: 300px;
}
.class2{
border:2px solid red;
height: 100px;
width: 300px;
padding: 50px;
}
- Meta tag and RWD9:19
- Flexbox Container17:23
/* Flex container and it's proprerties
display,align-content,align-items,flex-direction,flex0-flow
flex-wrap,justify-content
*/
.flex-container{
height: 300px;
background-color: rgb(93, 93, 220);
display:flex;
justify-content: center; /*column*/
align-items: center; /*row*/
}
.flex-container div{
height: 100px;
width: 100px;
margin:10px;
text-align: center;
font-size: 35px;
background-color: white;
}
- Flexbox Items8:44
- Grid View ( cards example)7:26
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,intial-scale=1.0">
<style>
*{
box-sizing: border-box;}
.column{
float:left;
width: 25%;
padding: 0 15px;}
.row{margin: 0 -5px;}
.card{
background-color: lightblue;
text-align: center;
padding:1em;
box-shadow: 5px 5px 2px 0 black;}
</style>
<!-- external -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Responsive Column Cards</h2>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="column">
<div class="card">
<h3>Card 1</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>Card 2</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>Card 3</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>Card 4</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
</div>
</body>
</html>
- Media Queries (Layout example )4:37
/* Media queries */
body{
background-color: red;
}
/* syntax of media queries */
/* for 600 px or more */
@media only screen and (min-width:600px){
body{
background-color: blue;
}
}
- Flex Responsive4:51
<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
</style>
<body>
<!-- Header -->
<div class="header">
<h1>Responsive Image Gallery</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>
<!-- Photo Grid -->
<div class="row">
<div class="column">
<img src="/w3images/wedding.jpg" style="width:100%">
<img src="/w3images/rocks.jpg" style="width:100%">
<img src="/w3images/falls2.jpg" style="width:100%">
<img src="/w3images/paris.jpg" style="width:100%">
<img src="/w3images/nature.jpg" style="width:100%">
<img src="/w3images/mist.jpg" style="width:100%">
<img src="/w3images/paris.jpg" style="width:100%">
</div>
<div class="column">
<img src="/w3images/underwater.jpg" style="width:100%">
<img src="/w3images/ocean.jpg" style="width:100%">
<img src="/w3images/wedding.jpg" style="width:100%">
<img src="/w3images/mountainskies.jpg" style="width:100%">
<img src="/w3images/rocks.jpg" style="width:100%">
<img src="/w3images/underwater.jpg" style="width:100%">
</div>
<div class="column">
<img src="/w3images/wedding.jpg" style="width:100%">
<img src="/w3images/rocks.jpg" style="width:100%">
<img src="/w3images/falls2.jpg" style="width:100%">
<img src="/w3images/paris.jpg" style="width:100%">
<img src="/w3images/nature.jpg" style="width:100%">
<img src="/w3images/mist.jpg" style="width:100%">
<img src="/w3images/paris.jpg" style="width:100%">
</div>
<div class="column">
<img src="/w3images/underwater.jpg" style="width:100%">
<img src="/w3images/ocean.jpg" style="width:100%">
<img src="/w3images/wedding.jpg" style="width:100%">
<img src="/w3images/mountainskies.jpg" style="width:100%">
<img src="/w3images/rocks.jpg" style="width:100%">
<img src="/w3images/underwater.jpg" style="width:100%">
</div>
</div>
</body>
</html>
- CSS Animation25:48
/* Animations
the @keyframes rule
*/
@keyframes test{
from{left:0;}
to{left:300px}
}
div{
width: 100px;
height: 20px;
position: relative;
font-weight: bold;
background-color: red;
animation:test 5s ease 0s infinite normal;
}
#id1{animation-timing-function: linear;}
#id2{animation-timing-function: ease;}
#id3{animation-timing-function: ease-in;}
#id4{animation-timing-function: ease-out;}
#id5{animation-timing-function: ease-in-out;}
- CSS Transitions9:28
عرفت فين الخطأ في اخر الفيديو ؟
div{
width: 100px;
height: 100px;
background-color: red;
transition:width 2s,height 2s linear 2s;
}
div:hover{
width: 300px;
height: 300px;
}
#id1{transition-timing-function: linear;}
#id2{transition-timing-function: ease;}
#id3{transition-timing-function: ease-in;}
#id4{transition-timing-function: ease-out;}
#id5{transition-timing-function: ease-in-out;}
- Transition Answer1:27
transition:width 2s linear 2s,height 2s linear 2s;
- CSS Linear-Gradient8:32
/* Linear gradient */
body{
height: 200px;
/* by default from top to bottom */
background-image: linear-gradient(to right ,rgba(255,0,0,0),rgba(255,0,0,1));
}
/*
background-image:linea-gradient(direction,colors);*/
- 2D Transforms10:16
/* CSS 2D Transform */
div{
width: 200px;
height: 100px;
background-color: red;
border: 2px solid black;
/* scaleX , skewY,Skewx, scale y , translatex,translate y*/
transform: matrix(1,-.05,0,1,0,0);
}
- 3D Transforms10:28
/* CSS 3D Transform */
/* x , y ,z */
.container{
margin: 50px;
width: 150px;
height: 150px;
perspective: 300px;
border:4px solid black;
background: red;;
}
img{
width: 200px;
height: auto;
border: 2px solid black;
}
.transformed{
/* transform:translate3d(25px,25px,50px);*/
transform: rotate3d(0,1,0,60deg) scale3d(2,0.5,1) ;
}
- Project in Detail50:23
Requirements
- Little knowledge of HTML
Description
ابدأ رحلتك في عالم تصميم الويب الجذاب: دورة CSS للمبتدئين
هل تحلم بإنشاء صفحات ويب ليست فقط وظيفية، بل تبدو مذهلة وجذابة بصريًا؟ هل ترغب في إضفاء لمسة جمالية واحترافية على مشاريعك الرقمية؟ إذا كانت إجابتك نعم، فهذه الدورة هي بوابتك المثالية لدخول عالم التصميم المرئي على الويب.
نقدم لك "دورة CSS للمبتدئين"، وهي مصممة خصيصًا للأشخاص الذين ليس لديهم أي خبرة سابقة في CSS أو حتى في تصميم الويب بشكل عام. CSS، أو Cascading Style Sheets، هي اللغة السحرية التي تمنحك القدرة على التحكم الكامل في مظهر موقع الويب الخاص بك. فكر فيها كالفنان الذي يختار الألوان والخطوط والتخطيط ليحول لوحة قماشية عادية إلى تحفة فنية. بدون CSS، ستظهر صفحات الويب الخاصة بك ككتل من النصوص والصور غير المنظمة، ولكن معها، تتحول إلى تجارب مستخدم ممتعة وسلسة.
ماذا ستتعلم في هذه الدورة؟
سنأخذك خطوة بخطوة، بدءًا من الأساسيات المطلقة وصولاً إلى بناء تصاميم متجاوبة وحديثة. ستتعلم كل ما تحتاجه لتجميل صفحات الويب الخاصة بك:
فهم أساسيات CSS: ما هو CSS وكيف يعمل مع HTML.
بناء الجملة الأساسي: كيفية كتابة قواعد CSS وتطبيقها بشكل صحيح.
المحددات (Selectors): كيفية استهداف عناصر معينة في صفحة HTML لتطبيق الأنماط عليها بدقة.
الخصائص الشائعة: التحكم في الألوان، الخطوط، الخلفيات، الهوامش (margin)، الحشوات (padding)، والحدود (border) لتصميم تخطيطات جذابة.
نموذج الصندوق (Box Model): فهم كيفية تعامل المتصفحات مع العناصر كصناديق وكيفية التحكم في أبعادها ومساحاتها.
التخطيطات المرنة (Flexbox): مقدمة قوية لأحد أهم أدوات التخطيط الحديثة لإنشاء تصميمات مرنة ومحاذاة العناصر بسهولة.
التصميم المتجاوب (Responsive Design): كيفية جعل موقع الويب الخاص بك يبدو رائعًا على أي جهاز، سواء كان جهاز كمبيوتر مكتبيًا أو جهازًا لوحيًا أو هاتفًا ذكيًا، باستخدام استعلامات الوسائط (Media Queries).
بنهاية هذه الدورة، لن تكتسب المعرفة النظرية فحسب، بل ستكون قادرًا على تطبيق ما تعلمته عمليًا. ستكون لديك الثقة والمهارات اللازمة لتصميم وتخصيص صفحات الويب الخاصة بك، مما يفتح لك أبوابًا واسعة في مجال تطوير الواجهات الأمامية (Front-End Development). انضم إلينا الآن ودعنا نبدأ معًا رحلة تحويل أفكارك إلى واقع مرئي مذهل على الويب!
Who this course is for:
- Beginner frontend developers