Learn Html
353 subscribers
101 photos
2 videos
34 files
263 links
All info and tutorial of Html
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
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.
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
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
HTML Tip๐Ÿšจ

The "poster" attribute specifies an image to be shown while the video is downloading, or until the user hits the play button
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
Forwarded from Programming World๐Ÿ‘จโ€๐Ÿ’ป (โ˜ ๏ธAnonymus Venomโ˜ ๏ธ)
โœจPluralsight - Python Courses Collection 11 GB [ MEGA ] โœจ

Link๐Ÿ”—:

https://mega.nz/folder/LDYQmD4A#BDrSInuxAjbO10lLbs0t3A


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
Forwarded from Programming World๐Ÿ‘จโ€๐Ÿ’ป (โ˜ ๏ธAnonymus Venomโ˜ ๏ธ)
๐Ÿ”ฐWebsite Of the Day๐Ÿ”ฐ

โœจDevInterviewโœจ

Link๐Ÿ”—:

https://devinterview.io/

You can find full-stack, data structures & software architecture interview questions and answers for developers

Follow @Programmingworld_dev for more programming stuff
Forwarded from Learn Web Development
โœจWeb developement code snippets for freeโœจ

๐Ÿ”นCodepen
๐Ÿ”ธCodesandbox
๐Ÿ”นCSS-Tricks
๐Ÿ”ธHakim .se
๐Ÿ”นCode My UI
๐Ÿ”ธCreativesFeed
๐Ÿ”นBootsnipp
๐Ÿ”ธ30 seconds of code
๐Ÿ”น30 Seconds of CSS
๐Ÿ”ธStackoverflow
๐Ÿ”นCode to go
๐Ÿ”ธTweetsnippet
๐Ÿ”นGitHub
๐Ÿ”ธW3 Schools
๐Ÿ”นEnjoyCSS
๐Ÿ”ธWeb Code Tool

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

Follow @learn_webdevelopment for Web development content
๐Ÿ”ฐHTML TIP๐Ÿ”ฐ

HTML has an email input type. It automatically checks whether a string provided is really a valid email address. Adding required to the element also ensures that the input field contains some text.

You don't necessarily need JavaScript for form validation.
Forwarded from Learn CSSโ„ข
โœจCSS Animation generators ๐ŸŽจโœจ

โžข https://t.co/85G4Jsh1WZ
โžข https://t.co/4N7CrWPJgZ
โžข https://t.co/O7KpqDNqDc
โžข https://t.co/lh2n6duBex
โžข https://t.co/7FPOsSYjmf
โžข https://t.co/LvjzKmaHgS

#Css #cssresources #css3

Follow @learn_CSS_web for more CSS Content
Forwarded from Learn PHP
๐Ÿ”ฐ Learn PHP By Building A Web Application(Result Checking App) Course๐Ÿ”ฐ

๐ŸŽฏ What youโ€™ll learn

โ˜‘๏ธQuery MySql Database with PHP

โ˜‘๏ธBuild a Responsive Web Application with PHP, Bootstrap, Ajax, CSS, and HTML

โ˜‘๏ธYou will build an online Student Result Checking Portal

๐Ÿ“ŽLink :
https://drive.google.com/file/d/1WlvNgmWocaYbXNUP46ozyqtwIXp1tdNq/view?usp=drivesdk


#PHP #Webdevelopment #Backend
Follow @learn_php_web for PHP tutorial
HTML Tip๐Ÿšจ

The iframe sandbox attribute enables an extra set of restrictions for the content in the iframe

For example, In this particular case form submission is allowed
<pre> HTML Tag

Text in a <pre> element preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code
HTML Tip

While adding anchor tag for downloading a file, you can specify the file name also

Like this ๐Ÿ‘‰ download = "JavaScript- Notes"


One important thing to note here is that

"download only works for same-origin URLs, or the blob: and data: schemes"

READ MORE ABOUT IT ๐Ÿ‘‡

https://t.co/amUcCPxwZ6
Forwarded from Programming World๐Ÿ‘จโ€๐Ÿ’ป (โ˜ ๏ธAnonymus Venomโ˜ ๏ธ)
โœจSUPER AMAZING repo๐Ÿ”ฅ๐Ÿš€โœจ

Awesome list of everything related to programming, gaming, business, media, etc๐Ÿ‘‡

- Web development
- Machine Learning
- Security
- Programming language
- Dig data
- Gaming
- Books
- Networking
- Many more


LINK ๐Ÿ”—

https://t.co/pEKHuj23sx

Follow @Programmingworld_dev for more programming stuff
Forwarded from Programming World๐Ÿ‘จโ€๐Ÿ’ป (Pavan Kalyan)
โœจWeb development resources for freeโœจ

1๏ธโƒฃ Online learning platforms ๐Ÿ“˜

- Udemy
- FreeCodeCamp
- Treehouse
- Frontend masters
- Coursera
- Traversy media
- SoloLearn
- Codecademy
- Udacity
- Alison
- Code college
- LinkedIn Learning
- Skillshare
- EdX


2๏ธโƒฃ Editors and share code snippets โœ๐Ÿป

- PlayCode
- JSFiddle
- CodePen
- StackBlitz
- JSBin
- Codesandbox
- Codeinterview .io
- godbolt .org
- wandbox .org
- carbon .now.sh
- pastebin .com
- ideone .com
- ide .judge0.com


3๏ธโƒฃ Documentations and notes ๐Ÿ“„

- w3 schools
- mdn
- Devdocs
- geeksforgeeks
- tutorialspoint
- javapoint


4๏ธโƒฃ Competitive programming ๐Ÿ’ป

- CodeChef
- HackerEarth
- HackerRank
- AlgoExpert
- LeetCode
- TopCoder
- Codewars
- Codeforces
- Coderbyte
- Exercism


5๏ธโƒฃ Learn by playing game ๐ŸŽฎ

- Grid garden
- Flexbox defense
- Codecombat
- Unfold
- Ruby warrior
- Screeps
- coding game
- CodeMonkey
- CSS diner
- Flexbox froggy
- Check IO
- Cyber-dojo
- Untrusted


6๏ธโƒฃ Colors ๐ŸŽจ

- Colorhunt
- Paletto
- Design Seeds
- Coolors
- Bootflat
- 0 to 255
- uiGradients
- BrandColors
- Image color picker
- Colour Lovers
- WebGradients
- Egg gradient
- Gradient Hunt
- Color-hex
- FlatUIColors
- CSS gradients


7๏ธโƒฃ Background

- Repeat-X Repeat-Y
- Texture King
- Pattern8
- Subtle Patterns
- Patternico
- BG Patterns
- Lost and Taken
- Freepik
- Cool backgrounds
- BG generator


8๏ธโƒฃ Icons โ™ 

- Icons8
- Captain Icon
- Iconmonstr
- Linear Icons
- Pixeden
- Perfect Icons
- Font Awesome
- flaticon
- Fontello
- The Noun Project
- Endless Icons
- Round Icons
- Iconfinder
- Freeicons
- Icon-icons
- Findicons


9๏ธโƒฃ Illustrations

- Undraw
- Freepik
- IRA design
- DrawKit
- Absurd Illustrations
- Handz
- freeillustrations .xyz
- Freebie Supply
- ManyPixels
- Vivid.js
- Humaaans
- Open Doodles
- Icons8
- Glazestock
- Paper illustrations
- illlustrations .co
- isometric .online


๐Ÿ”Ÿ Fonts ๐Ÿ†Ž

- Google fonts
- Font Bundles
- Behance
- Dafont
- Font Squirrel
- Abstract Fonts
- 1001 Fonts


1๏ธโƒฃ1๏ธโƒฃ Photos ๐Ÿ“ท

- Unsplash
- Pixabay
- PicJumbo
- IM Free
- Pexels
- Flickr
- Gratisography
- Stock Up
- Cupcake
- Adobe Stock
- Icons8
- Rgbstock
- Pikwizard
- Stocksnap
- Shutterstock
- Freestocks


1๏ธโƒฃ2๏ธโƒฃ Testing ๐Ÿงช

- Pingdom
- Website Speed Test
- SEO Site Checkup
- Uptrends
- Dotcom-Tools
- GTmetrix
- WebPageTest
- Dareboost
- SEO tools
- Nibbler
- BrowserStack


1๏ธโƒฃ3๏ธโƒฃ Hosting ๐ŸŒ

- Github pages
- Netlify
- Firebase
- AWS
- Vercel
- Heroku


1๏ธโƒฃ4๏ธโƒฃ JavaScript visual libraries

- Chart.js
- D3.js
- React-vis
- Three.js
- Victory
- Chartkick
- Google Charts
- Flexmonster
- ApexCharts
- Echarts
- Frappe Charts
- ReCharts


1๏ธโƒฃ5๏ธโƒฃ CSS generators

- coolbackgrounds .io
- css3buttongenerator .com
- neumorphism .io
- glassmorphism .com
- css3generator .com
- Fancy-border-radius
- bennettfeely .com/clippy
- cssgradient .io
- blobmaker .app
- getwaves .io
- cssgenerator .org
- csssbuttongenerator .com
- svgator .com
- cssbuttoncreator .com
- cssgenerators .net
- svgbackgrounds .com
- bgjar .com
- cssboxshadow .com
- css3generator .com
- cssfiltergenerator .com
- neumorphic .design


1๏ธโƒฃ6๏ธโƒฃ Code snippets

- Codepen
- Codesandbox
- CSS-Tricks
- Hakim .se
- Code My UI
- CreativesFeed
- Bootsnipp
- 30 seconds of code
- 30 Seconds of CSS
- Stackoverflow
- Code to go
- Tweetsnippet
- GitHub
- W3 Schools
- EnjoyCSS
- Web Code Tool


1๏ธโƒฃ7๏ธโƒฃ Interview preparation

- CodeChef
- HackerEarth
- LeetCode
- HackerRank
- Interview Cake
- InterviewBuddy
- glassdoor
- AlgoExpert
- interviewing .io
- Interview camp
- Coderbyte
- InterviewBit
- GeeksForGeeks
- AmbitionBox


1๏ธโƒฃ8๏ธโƒฃ Chrome extensions

- Wappalyzrer
- CSS Scan
- Marmoset
- Pesticide
- Ghostery
- HTML Validator
- Keyframes
- ColorZilla
- Page Ruler
- UX Check
- Checkbot
- LambdaTest
- JSONView


1๏ธโƒฃ9๏ธโƒฃ Apply for internships

- angel .co
- indeed .com
- chegg .com
- letsintern .com
- perfectintern .com
- remoteok .io
- nodesk .io
- remoteinternships .com
- internhq .com
๐Ÿ‘1
Forwarded from Programming World๐Ÿ‘จโ€๐Ÿ’ป (Pavan Kalyan)
2๏ธโƒฃ0๏ธโƒฃ Apply for jobs

- angel .co
- dice .com
- hiring .careerbuilder.com
- devsnap .io
- freshersworld .com
- flexjobs .com
- remote .co
- whoishiring .io
- remoteml .com
- weworkremotely .com
- simplyhired .com
- remoteok .io
- upwork .com
- freelancer .com


Follow @Programmingworld_dev for more programming stuff
Forwarded from Learn Web Development
โœจHow to Learn Web Development Using Free Resourcesโœจ

https://www.freecodecamp.org/news/learn-web-development-for-free/amp/


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

Follow @learn_webdevelopment for Web development content