Webrouk

💡 CSS tip:

The 𝐦𝐚𝐫𝐠𝐢𝐧-𝐛𝐥𝐨𝐜𝐤 and 𝐦𝐚𝐫𝐠𝐢𝐧-𝐢𝐧𝐥𝐢𝐧𝐞 properties:
- Margin Block is shorthand property for Margin top and bottom.
- Margin Inline is shorthand property for margin left and right.

It works as well for 'padding' and 'border' properties.

30/06/2021

💡 CSS tip:

The 𝐰𝐫𝐢𝐭𝐢𝐧𝐠-𝐦𝐨𝐝𝐞 property changes the alignment of the text so that it can be read from top to bottom or from left to right, depending on the language. This is most useful in languages such as Chinese, Japanese or Korean where the text is often set vertically. In the English language, it’s more likely that you’ll want to use this property for aesthetics reasons.

22/04/2021

💡 CSS tip:

The clamp() CSS function enables selecting a middle value within a range of values between a defined minimum and maximum.
It takes three parameters:
1- Minimum value.
2- Preferred value.
3- Maximum allowed value.

21/04/2021

💡 CSS tip:

If a temporal or number has max and/or min attributes, then :in-range matches when the value is within the specified range and :out-of-range matches when the value is outside the specified range. If there are no range constraints, then neither pseudo-class matches.

08/04/2021

I'm happy to share with you my latest template on ThemeForest 😍

https://themeforest.net/item/nafie-html-portfolio-template/31531920

07/04/2021

💡 CSS tip:

prefers-color-scheme is a CSS media query that detects the current theme preference of the user's system.

28/03/2021

💡 CSS tip:

The inset CSS property is a shorthand that corresponds to the top, right, bottom, and left properties. It has the same multi-value syntax of the margin shorthand.

27/02/2021

💡 JavaScript tip:

☑ You can set a checkbox to `checked` state via JavaScript or with an HTML attribute.

But...
You can also set it to an `indeterminate` state – with JavaScript only.

Useful e.g. when you have an option with sub-options that are partly selected.

25/02/2021

💡 JavaScript tip:

Wrap curly brackets around your console.log arguments to see the variable name when logged.

23/02/2021

💡 JavaScript tip:

Have you ever written `res => console.log(res)` to quickly find out what comes in a callback? There's a more convenient way:
Just use `console.log` directly!

22/02/2021

CSS tip:

`text-decoration` doesn't have to mean a solid line:

You can make it dotted, dashed, double, or even wavy!
And even change its color & thickness too!

20/02/2021

💡 JavaScript tip:

Remove duplicates from an array using Set

18/02/2021

💡 JavaScript tip:

When dealing with big numbers in JS, instead of typing a bunch of zeros, you can use either:
- scientific notation (e.g. 10e6)
or
- numeric separator (e.g. 10_000_000)

16/02/2021

JavaScript tip:

The shortest way to conditional insert properties into an object literal

12/02/2021

JavaScript tip:

𝐒𝐡𝐨𝐫𝐭-𝐜𝐢𝐫𝐜𝐮𝐢𝐭𝐬 𝐜𝐨𝐧𝐝𝐢𝐭𝐢𝐨𝐧𝐚𝐥𝐬
If you have to execute a function only if condition is true, you can use short-circuit.

04/02/2021

Visual Studio Code Shortcuts to Make your Coding Faster! ⚡🚀

01/02/2021

CSS tip:

You can use 'round' or 'space' values with (background-repeat) property to prevent background images from clipping.

01/02/2021

You can now extract all the CSS for a selected element. This can be helpful while prototyping new designs.

19/10/2020

دورة رائعة في شرح الاصدار الرابع من Gulp.js مقدمة من قناة Algorithm Academy

دورة تعلم الـ Gulp.js دورة عربية لتعلم أداة Gulp.js الإصدار الرابـع

02/09/2020

Hey 👋
Happy to share with you my latest Angular app for eCommerce stores (Urco Store).

Thank you for your checking out the project here:
https://urco.webrouk.com/

30/07/2020

درس جديد وشرح عمل تأثير المياه بطريقة أخرى وبدون clip-path

Water effect in CSS without Clip-path | Arabic
https://youtu.be/AaVIN3gNUXs

29/07/2020

درس جديد وشرح طريقة عمل تأثير المياه باستخدام CSS Clip-path
إن شاء الله الدرس القادم طريقة أخرى لعمل نفس التأثير بدون Clip-path

Water Wave Effect Using CSS Clip-path | Arabic

Water Wave Effect Using CSS Clip-path code: https://codepen.io/muhammad_mabrouk/pen/gOPNLyo

29/07/2020

درس خفيف للتعريف ببعض الأدوات المهمة والتي تساعدك علي إنشاء Curved Shapes & waves

Useful tools for creating shapes and curves | Arabic

Useful tools for creating shapes and curves 1- Get Waves: https://getwaves.io/ 2- Blobmaker: https://www.blobmaker.app/ 3- Fancy Border Radius: https://9elements.github.io/fancy-border-radius/ 4- Clipp...

24/07/2020

درس جديد وشرح كيفية عمل تأثير (Gooey)
In this video, I'm going to show you how to easily create a gooey animation effect using SVG filter

Create Gooey Effect with SVG Filter In this video, I'm going to show you how to easily create a gooey animation effect using SVG filter code: https://codepen.io/muhammad_mabrouk/pen/ExPMeJx

23/07/2020

شرح طريقة عمل accordion باستخدام html/css فقط
Here's how to create Pure css Accordion Menu without any javascript !

How to create accordion using only CSS Here's how to create Pure css Accordion Menu without any javascript ! code: https://codepen.io/muhammad_mabrouk/pen/RwrdrMp

Carbon - Create beautiful images of your code

22/07/2020

رجعنا تاني للدروس بعد إنقطاع لمدة سنة 😅 وأول فيديو في القناة الجديدة 💪🏻
بنشرح في الفيديو موقع Carbon لإنشاء صور للكود ومشاركتها علي النت
درس بسيط كدة بنسخن به وإن شاء الله هيكون في دروس كتير الفترة القادمة

Carbon - Create beautiful images of your code Create and share beautiful images of your source code. Carbon Link: https://carbon.now.sh/ Polacode – Easily Share Code Screenshots from VS Code: https://you...

6 Things you SHOULDN'T DO on your Portfolio

21/07/2020

6 أخطاء ينبغي عليك تجنبها عند تصميم موقعك الشخصي

6 Things you SHOULDN'T DO on your Portfolio Visit http://linode.com/designcourse for a $20 credit on your new linode account. -- Today, I'm checking out various things that you shouldn't do on your (de...

20/07/2020

مجموعة من الاضافات المفيدة جدا لموقع Github

6 Awesome Chrome Extension for Github Here's what I'm using Octotree https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc?hl=en Enhanced Github https://chrome.googl...

Adding Cmder to Context (Right-Click) Menu

20/07/2020

شرح إضافة اختصار لبرنامج Cmder في قائمة الزر الأيمن للماوس لفتح مسار البروجكت في البرنامج بمجرد الضغط عليه بالاختصار

Adding Cmder to Context (Right-Click) Menu Adding Cmder to the Windows Explorer Context Menu. Learn Command Line #02: https://youtu.be/Db56nwDb--k Registry Files: http://www.mediafire.com/file/n1744n6...

Polacode – Easily Share Code Screenshots from VS Code

20/07/2020

شرح إضافة (Polacode) لبرنامج Visual Studio Code واللي تقدر من خلالها تعمل Screenshot للكود بتاعك بشكل جميل

Polacode – Easily Share Code Screenshots from VS Code Polacode is a Visual Studio Code extension that lets you create unique and sharable screenshots of your code. Polacode Extension: https://marketplace.visuals...

How to Make Pure HTML-CSS Star Rating System

20/07/2020

السلام عليكم ورحمة الله وبركاته
ده أول فيديو لي أشرح فيه حاجة تخص البرمجة بشكل عام أو الويب ديزاين بشكل خاص وبشرح فيه إزاي نقدر نعمل Star Rating (التقييم بالنجوم) اللي بيستخدم في مواقع الـ eCommerc بطريقة سهلة جدا بإستخدام الـ HTML/CSS فقط

How to Make Pure HTML-CSS Star Rating System Code: https://codepen.io/muhammad_mabrouk/pen/bWybwX

Claim ownership or report listing

Want your school to be the top-listed School/college in Cairo?
Click here to claim your Sponsored Listing.

Videos (show all)

💡 CSS tip:The clamp() CSS function enables selecting a middle value within a range of values between a defined minimum a...

💡 JavaScript tip:☑ You can set a checkbox to `checked` state via JavaScript or with an HTML attribute.But...You can also...

Address

Cairo

Other Education Websites in Cairo (show all)

AAPG Cairo University Student Chapter
Cairo University Street
Cairo

The American Association of Petroleum Geologists, AAPG Cairo University Student Chapter.

ap-family
كل يوم سبت من كل اسبوع بالكاتدرائيه المرقسية بالعباسية "محطة الدمرداش" قاعه الاباء الرسل بجوار كافتيريا اغابى من الساعه 3. 30م الى الساعه 6 م
Cairo

Ava Pachomius Family "Modern Academy"