Learn Html

Learn Html pinned «Front-end developer roadmap for 2021👇🏻 First things first, you need an editor to write code. There are plethora of editors out there like atom, VS code, sublime etc I recommend you to start with VS code. Why?👇🏼 🔹Many built-in features 🔹It's fast 🔹Large…»

10:09

Learn Html

Forwarded from Learn JavaScript™

✨ Speed up your learning process by creating projects✨

Check out these amazing project's tutorial on YouTube👇

1️⃣ ECommerce Web Shop🛒

🔗 https://t.co/XoGriuRAFz

2️⃣ 10 JavaScript Projects in 10 Hours

🔗 https://t.co/dA2dGhuzw9

3️⃣ Simple photo Editor📸🖼️

🔗 https://t.co/c3G9O3Gy7Y

4️⃣ Music App🎵

🔗 https://t.co/q5Kv3mSDqK

5️⃣ Expense Tracker💸

🔗 https://t.co/mdCKadYyhL

6️⃣ Chat Application

🔗 https://t.co/GJUQEfsm3W

7️⃣ Full-Stack AMAZON Clone

🔗 https://t.co/SCXzRnihdC

8️⃣ Portfolio website

🔗 https://t.co/0guAze0oDw

9️⃣ Portfolio using Tailwind CSS

🔗 https://t.co/yOBVh23iKL

🔟 Flappy Bird

🔗 https://t.co/HDc4fCMCa7

#html #css#Javascript #JS #projects #Games

Follow @learn_JavaScript_js for more JavaScript content.

53 views11:10

Learn Html

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

53 views00:38

Learn Html

Forwarded from Learn CSS™

✨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

60 views07:10

Learn Html

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

48 views05:43

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

463 viewsedited 05:52

Learn Html

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

58 views05:56

Learn Html

Forwarded from Learn CSS™

✨Create a Gradient Border✨

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

Telegraph

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…

60 views10:42

Learn Html

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😅

54 views11:32

Learn Html

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);
}

64 views11:32

Learn Html

Forwarded from Learn CSS™

✨CSS display Flex cheat sheet✨

63 views10:04

Learn Html

Forwarded from Learn CSS™

✨CSS positioning cheat sheet✨

61 views10:04

Learn Html

Forwarded from Learn CSS™

✨CSS display Grid cheat sheet✨

61 views11:27

Learn Html

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

Telegraph

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…

58 views06:28

Learn Html

Forwarded from Learn CSS™

✨A quick reference of the CSS box-model ✨

63 views06:36

Learn Html

Forwarded from Learn Web Development

✨Start your 100 Days of Code for mastering web development ✨

In this 100 Days you need to cover mainly 4 technologies

- HTML
- CSS
- JavaScript
- DOM

Starting with HTML, its pretty easy and straight forward. It's a markup that totally operates on tag.

You can get a quick overview of it within few minutes. But wait! Don't rush.... There are a lot of tags

You don't need to learn all tags in one single go

I suggest you to start HTML with a Free crash course.

🔗 HTML: https://t.co/hEPQBMfj2o

Try to play around with all tricky tags like table tags.

You don't need to waste your 10 - 20 days in HTML because as you go further into your journey, you will discover more cool tags and attributes eventually

I think 1 to 5 days for HTML is enough.

After 5 - 6 days it's time to add some styling in your website. And here CSS comes into action

Its totally operates on properties and value. There are 500+ properties. Which takes almost 100 days to learn all🙁..........Just kidding😬

You don't even need to learn all of them.

You must have heard about "Pareto principle" which states that for many outcomes roughly 80% of consequences come from 20% of the causes

Similarly, in order to cover 80% of CSS, you need to learn only 20 properties😍

The cool part about this 100 Days of Code is that all technologies are interconnected. Like when you're working on CSS, you have to work on HTML as well.

So you'll learn about HTML as well while learning CSS

Some important CSS concepts you need to cover

- Display flex
- Display grid
- Box model
- Background
- Color
- Positioning
- Fonts

In my opinion, 25 to 30 days should be enough for CSS. Although they are not fixed you can arrange them according to you.

To be good developer, you need to Google a lot. How quickly you find your solution on Google makes you a good developer

W3 schools and MDN are documentations where you find detailed explanation on each and every topic

So try to learn from there. Try to put everything into practice.

🔗 CSS: https://t.co/6XnTabhGQX

Congratulations🎉

After 30 days, you will be able to make some static sites, personal website and some stunning landing pages.

Time to rewind all your learning and put them together to create a website.

Structure is done✅
Styling is done✅

Time to add behaviour in your website using JavaScript.

JavaScript is deep so I suggest you to learn it from day 31 to the end (100th day)

JavaScript is used for adding logic in your website.

For ex:

- What happens after the user clicks on the button is controlled by JavaScript
- Increase the likes count when user click on the heart button😉

Basic things you need to cover lin JavaScript are

- Data Types
- Var, const, let
- Operators
- Comparators
- Functions
- Loops
- Control statement
- Arrays
- etc

This may sound challenging and confusing but once you start with it, everthing seems like a cake walk.

Don't rush. Try to take short note for future reference it will help you for sure.

So how we can change thing in HTML using JavaScript?
Here DOM comes into play

With the HTML DOM, JavaScript can access and change all the elements of an HTML document

The DOM is powerful but most beginners avoid it or don't take it seriously. Please do not do this.

DOM mainly revolves around methods and value. By method you select where to change and by value you tell what to change.

By the combination of DOM and JavaScript you can perform a lot of cool things.

- You can change styling
- You can change content
- You can change tags
- You can change attributes
- ETC.....

The combination of HTML, CSS, JavaScript and DOM is the most powerful thing in my opinion and once you learn these things. You will become powerful too💪😉

Start your web development journey today. It's now or never.

65 views19:11

Learn Html

HTML is deep too, has lots of tags and attributes but that does not mean that you should learn it for months.

Instead learn about some basic tags and then move to CSS. As you move forward in this area, you eventually discover more tags and attributes

77 views10:31

Learn Html

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

✨Coding Blocks – Complete Collection✨

⚡️Algo++ Data Structure
⚡️Android Development
⚡️C++ Fundamentals
⚡️C++ STL
⚡️Competitive Programming
⚡️FAANG
⚡️Full-stack web development
⚡️Interview preparation
⚡️Java fundamentals
⚡️Kotlin for beginners
⚡️Python fundamentals

🔗 Link:

https://mega.nz/folder/Ryw0ACrT#bM6tikNRN9VyipFG8r8Sbg

DISCLAIMER: No Copyright Infringement Intended, All Rights Reserved to the Actual Owner.

This content has been shared under Educational And Non-Profit Purposes Only

🚨Note:Download as fast as possible might get deleted at any time

Follow @Programmingworld_dev for more programming stuff

67 views16:16

Learn Html

HTML Tip🚨

The "poster" attribute specifies an image to be shown while the video is downloading, or until the user hits the play button

80 viewsedited 17:39

Learn Html

Forwarded from Learn Web Development

✨What does Web Development look like in 2021✨
👇👇👇

- HTML
- CSS
- CSS frameworks
- JS
- DOM
- UI and UX
- RWD
- CLI
- Git and GitHub
- React / Angular / Vue
- NPM
- Node.js
- SQL vs NoSQL
- Databases
- REST
- Postman
- Authentication & Security
- Jamstack
- PWA
- SPA

#Webdevelopment #JS #JavaScript #Html #Css #web

Follow @learn_webdevelopment for Web development tutorials

64 views02:53

About

Blog

Apps

Platform