Learn CSS™ – Telegram

Learn CSS™

793 subscribers

212 photos

5 videos

32 files

508 links

All info and tutorial of CSS
https://bio.link/learncss
For HTML: @html_web_learn
For CSS: @CSS_web_learn
For JS: @JavaScript_js_learn
For PHP: @learn_php_web
For Programming courses @Programmingworld_dev
For CEH,Cybersec: @CyberPunk_anonymous

Download Telegram

About

Blog

Apps

Platform

793 subscribers

Forwarded from Programming World👨‍💻 (☠️Anonymus Venom☠️)

✨Want to learn/master git and GitHub?✨

Here are some Best Free Resources for you👇🏻

⚡️ Git introduction for "advanced beginners," who are still struggling.

🔗 https://t.co/yRMuWX9pO7

⚡️ Git Immersion

A guided tour that walks through the fundamentals of Git, inspired by the premise that to know a thing is to do it.

🔗 https://t.co/E1WEzZopeE

⚡️ Official Guide/Tutorials by GitHub

🔗 https://t.co/My8G82xmsj

⚡️ How to get out of common git mistakes described in plain English.

(Highly recommended for beginner)

🔗 https://t.co/DWtvFynck5

⚡️ Git Cheat Sheet by GitHub

🔗 https://t.co/WF8pLuLpE4

⚡️ Best Practices

🔗 https://t.co/fcrZ7NuIWt

⚡️ Become a git guru, complete guide by Atlassian.

🔗https://t.co/5GStdyNvZS

⚡️Pro tip

Learn the basics and keep working on projects. You will learn about git side by side through your mistakes

Follow @Programmingworld_dev for more programming stuff

106 views00:38

✨Check out these amazing CSS makers🌈✨

👇👇👇

1⃣ CSS Button Creator

The easiest way to create imageless CSS buttons. You can customize background, color, shadow, padding, margin and almost everything

🔗 https://t.co/RpFWrupvxW

2⃣ Blob Maker

Make organic SVG shapes for your next design. Modify the complexity, contrast, and color, to generate unique SVG blobs every time

🔗 https://t.co/VirvMeNQMh

3⃣ Make some waves

A free SVG wave generator to make unique SVG waves for your next web design. Choose a curve, adjust complexity, randomize

🔗 https://t.co/go14BIUf9q

4⃣ CSS Generator

The ultimate CSS generator. Learn CSS3 with our generators and preview your results! And you don't even need CSS experience to start

🔗 https://t.co/mu0HaOBfvJ

5⃣ Gradient Generator

As a free CSS gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile

🔗 https://t.co/fNbmi2CKCW

6⃣ Animista

Animista is a place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use.

🔗 https://t.co/4tDSAL5WiZ

7⃣ CSS Animate

Online tool for creating native CSS3 Keyframes Animation. You can easy and fast generate consistent CSS3 animation using simple UI without any coding

🔗 https://t.co/ZPiZtj5XrA

8⃣ Keyframes

Create basic or complex CSS keyframe animations with a visual timeline editor similar to video-editing software

🔗 https://t.co/UkaCVmYxsK

9⃣ Enjoy CSS

Enjoy CSS lets you create almost everything in CSS. It'ss handy and simple UI allows you to adjust rich graphical styles quickly and without coding

🔗 https://t.co/LzJpPPjkIx

🔟Neumorphism Maker

Neumorphic UI generator

🔗 https://t.co/dlIOGg8Jm3

#Webdevelopment #Html #Css

Follow @learn_CSS_web for more CSS Content

1.0K views09:17

Learn CSS™ pinned «✨Check out these amazing CSS makers🌈✨ 👇👇👇 1⃣ CSS Button Creator The easiest way to create imageless CSS buttons. You can customize background, color, shadow, padding, margin and almost everything 🔗 https://t.co/RpFWrupvxW 2⃣ Blob Maker Make organic…»

09:26

✨63 RESOURCES OF CSS🌈✨

📌 COLORS

1. Color Hunt
🔗 https://t.co/xR0FVT299d

2. Coolors
🔗 https://t.co/fDBRU6JzNz

3. HTML color codes
🔗 https://t.co/umYSuvtA9z

4. UI Gradients
🔗 https://t.co/wl8I6pPzO3

5. Gradient generator
🔗 https://t.co/Yr6pueoWgx

6. Encycolorpedia
🔗 https://t.co/TATnFDElEu

7. WebFx
🔗 https://t.co/vOqEXNMlG0

8. Radial Gradient
🔗 https://t.co/dlCExilHAT

9. COLORS
🔗 https://t.co/vaNoGFLxNY

10. Flat UI colors 2
🔗 https://t.co/FDFKbhCcx3

📌 CODE SNIPPETS

11. Web tools
🔗 https://t.co/K9QzJeX1gd

12. Little snippets
🔗 https://t.co/qxAyA2wA6U

13. Enjoy CSS
🔗 https://t.co/Jt0rw3MT0n

14. CSS Tricks
🔗 https://t.co/DLt7cjx7UN

15. CSS Deck
🔗 https://t.co/mbBflUSDl5

16. W3 How to
🔗 https://t.co/VHF5yDxSQe

17. Snipplr
🔗 https://t.co/Nwys4AtCur

18. Stack overflow
🔗 https://t.co/8rEohtDYIS

19. Codepen
🔗 https://t.co/n0NfUDHipj

20. Code my UI
🔗 https://t.co/N8NQLf8ehn

📌 DOCUMENTATION AND NOTES

21. W3 Schools
🔗 https://t.co/bBk1rSijxo

22. MDN
🔗 https://t.co/rp3CTZtHqY

23. DevDocs
🔗 https://t.co/R6lI9CWzOU

24. Geeks for geeks
🔗 https://t.co/FOBY8SxTGw

25. Tutorials point
🔗 https://t.co/iyzeX0qjZ7

📌 CSS GENERATORS

26. CSS button creator
🔗 https://t.co/akgUkz6JBU

27. Blob Maker
🔗 https://t.co/7dk2UceFrg

28. Waves maker
🔗 https://t.co/eYqUUcUFth

29. Enjoy CSS
🔗 https://t.co/Jt0rw3MT0n

30. Neumorphic UI
🔗 https://t.co/2c7frT1q06

31. Glassmorphism Generator
🔗 https://t.co/OXQTU724rO

32. Keyframes
🔗 https://t.co/IFmIEgDiVY

33. Animista
🔗 https://t.co/N1UuMCedJS

34. Fancy border
🔗 https://t.co/ND4asCR7cy

35. CSS Generators tool
🔗 https://t.co/e4idW76y8j

36. CSS 3 maker
🔗 https://t.co/DNY3DvHopw

37. CSS clip path maker
🔗 https://t.co/Vz3ncWSbFc

38. CSS shapes generator
🔗 https://t.co/Xq5ay45cL7

39. Pattern generator
🔗 https://t.co/NQuV7pxLIz

40. Background image generator
🔗 https://t.co/46MtBPayKq

📌 DESIGN INSPIRATION

41. CSS design awards
🔗 https://t.co/E91CzajKvu

42. Awwwards
🔗 https://t.co/Qa1TSqejM8

43. CSS nectar
🔗 https://t.co/1MZEmdDcVq

44. Design modo
🔗 https://t.co/updhmaFZyi

45. CSS winner
🔗 https://t.co/nRrbYj06Y7

📌 YOUTUBE TUTORIALS

46. Free code camp
🔗 https://t.co/6XnTabhGQX

47. Traversy media
🔗 https://t.co/fYaxT3DCy2

48. Coding artist
🔗 https://t.co/JZ29Y8Fis2

49. Edureka
🔗 https://t.co/bCiEvdRG4z

50. Red Stapler
🔗 https://t.co/dq5YJA96Gl

📌 GITHUB REPO

51. Awesome CSS
🔗 https://t.co/Jdm7zVzg4Z

52. 30 seconds of CSS
🔗 https://t.co/S1o9QfwJPM

53. CSS Protips
🔗 https://t.co/5haB2xTWuz

54. Awesome flexbox
🔗 https://t.co/plkIV609lg

55. Understanding flexbox
🔗 https://t.co/mUtiez6eWV

📌 CHROME EXTENSIONS

59. CSS Peeper
🔗 https://t.co/3OCrTJBfV8

60. Pesticide
🔗 https://t.co/320fLzeMll

61. Stylebot
🔗 https://t.co/7hWBvvIYMQ

62. Perfect Pixel
🔗 https://t.co/wdLauKshN3

63. Colorpick eyedropper
🔗 https://t.co/x6Xaoc0ePW

#Webdevelopment #Html #Css #cssresources #css3

Follow @learn_CSS_web for more CSS Content

963 viewsedited 07:09

Learn CSS™ pinned «✨63 RESOURCES OF CSS🌈✨ 📌 COLORS 1. Color Hunt 🔗 https://t.co/xR0FVT299d 2. Coolors 🔗 https://t.co/fDBRU6JzNz 3. HTML color codes 🔗 https://t.co/umYSuvtA9z 4. UI Gradients 🔗 https://t.co/wl8I6pPzO3 5. Gradient generator 🔗 https://t.co/Yr6pueoWgx 6.…»

09:16

Forwarded from Learn Web Development

✨If you divide web development into subparts, it becomes easy to learn✨

Lesson 1: HTML and CSS 🧱🎨
Lesson 2: CSS frameworks 🧮
Lesson 3: JS and DOM ⚙️📃
Lesson 4: Git and GitHub 🗂️
Lesson 5: React / Angular / Vue ⚛️
Lesson 6: Node.js 🔙🔚
Lesson 7: API and Database 🗄️📄

#Webdevelopment

Follow @learn_webdevelopment for more Web Dev content

80 views05:43

Forwarded from Learn Html

✨Check out these amazing template sites✨

📌 https://t.co/bUcMPbPi56
📌 https://t.co/b3lRmgTMMw
📌 https://t.co/KFHSRGsJCF
📌 https://t.co/Nr1PSKXLFl
📌 https://t.co/wlIjPhHJAK
📌 https://t.co/WI0uFLN4Xu
📌 https://t.co/90ipM5tjoi
📌 https://t.co/QMHWXYxvyf

85 views05:53

Forwarded from Learn Web Development

Git learning is important in the field of development. I suggest you learn it after HTML, CSS and JS

Learn Git interactively👇

📌 https://t.co/i6aRYkkwaW
📌 https://t.co/9gl7aF0HuZ
📌 https://t.co/E5pj90UCDz

#Github #Git

Follow @learn_webdevelopment for more Web Dev content

77 views05:56

✨Create a Gradient Border✨

https://telegra.ph/Create-a-Gradient-Border-02-07

Create a Gradient Border

Trick to Create a Gradient Border 😜 This is pretty easy. It will just take 5 minutes😄 STEP 1: - Create your element around which you want to create gradient border In this example I have a sqaure around which I'll create gradient border STEP 2: - Create pseudo…

496 views10:41

CSS border-radius cheat sheet

120 viewsedited 10:43

Adding gradient color in text using CSS 🌈

390 viewsedited 10:45

Forwarded from Learn JavaScript™

This media is not supported in your browser

VIEW IN TELEGRAM

I created a minimal card design using CSS have a look😅

122 views11:32

Forwarded from Learn JavaScript™

If you guys want to try
Check the code below👇

HTML:

<div class="container">
  <div class="content">
    <h1>LEARN JAVASCRIPT</h1>
    <h3>All info and tutorial of JAVA SCRIPT (JS)</h3>
  </div>
  <div class="flap"></div>
</div>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;900&display=swap');

body {
  background: #f2f2f2;
}

.container  {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 400px;
  width: 600px;
  background: #f2f2f2;
  overflow: hidden;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 0 20px 8px #d0d0d0;
}

.content {
  position: absolute;
  top: 50%;
  transform: translatey(-50%);
  text-align: justify;
  color: black;
  padding: 40px;
  font-family: 'Merriweather', serif;
}

h1 {
  font-weight: 900;
  text-align: center;
}

h3 {
  font-weight: 300;
}

.flap {
  width: 100%;
  height: 100%;
}

.flap::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 50%;
  background: url("https://pbs.twimg.com/profile_images/1347537601989730307/QDQ0IZXv_400x400.jpg") white;
  background-position: 100px;
  background-repeat: no-repeat;
  transition: 1s;
}

.flap::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 50%;
  right: 0;
  background: url("https://pbs.twimg.com/profile_images/1347537601989730307/QDQ0IZXv_400x400.jpg") white;
  background-position: -200px;
  background-repeat: no-repeat;
  transition: 1s;
}

.container:hover .flap::after {
  transform: translatex(300px);
}

.container:hover .flap::before{
  transform: translatex(-300px);
}

116 views11:32

Learn CSS™ pinned a GIF

11:32

✨CSS display Flex cheat sheet✨

429 viewsedited 06:08

✨CSS positioning cheat sheet✨

434 viewsedited 10:04

✨CSS display Grid cheat sheet✨

446 viewsedited 11:27

Forwarded from Learn JavaScript™

✨5 Coding Projects You Should Include in Your Front End Portfolio✨

https://telegra.ph/5-Coding-Projects-You-Should-Include-in-Your-Front-End-Portfolio-02-09

5 Coding Projects You Should Include in Your Front End Portfolio

A portfolio is a great way to show off your skills to potential employers. And it's especially helpful for entry-level developers who might not have any professional work experience. However, a common problem you might have when building a portfolio is knowing…

74 views06:28

✨A quick reference of the CSS box-model ✨

490 viewsedited 06:35

✨Cheat sheet of alignment in CSS Flexbox ✨

95 viewsedited 04:41