Forwarded from Learn CSS™
1. Fundamentals 1.0:
1.1 [https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work#parsing]
1.2 [https://w3schools.com/html/html_css.asp
1.3 [https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax]
1.4 [https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors]
1.4 [https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors]1.4 1.4[https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors]
1.4 [https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors]
1.4 [https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors]
1.5 [https://youtube.com/watch?v=c0kfcP_nD9E]
1.6 [https://youtube.com/watch?v=dFSxBi2zGfM]
1.6 [https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance]
2. Fundamentals 2.0:
2.1 [https://youtube.com/watch?v=rIO5326FgPE]
2.1 [https://w3schools.com/css/css_boxmodel.asp]
2.1 [https://css-tricks.com/box-sizing/]
2.2 [https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS]
2.2 [https://youtube.com/watch?v=b9lWNg8lwW4]
2.2 [https://w3schools.com/css/css_border.asp]
2.2 [https://w3schools.com/css/css_padding.asp]
2.2 [https://w3schools.com/cssref/pr_margin.asp]
2.3 [https://youtube.com/watch?v=azZCW24XtT4]
2.3 [https://tutorialrepublic.com/css-tutorial/css-text.php]
2.4 [https://youtube.com/watch?v=tcBRvjYw5xQ]
2.4 [https://digitalocean.com/community/tutorials/css-css-units-explained]
2.4 [https://tutorialrepublic.com/css-tutorial/css-units.php]
2.4 [https://youtube.com/watch?v=-GR52czEd-0]
2.5 [https://youtube.com/watch?v=PHO6TBq_auI]
2.5 [https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties]
3. Fundamentals 3.0:
3.1 [https://youtube.com/watch?v=jx5jmI0UlXU]
3.1 [https://w3schools.com/css/css_positioning.asp]
3.2 [https://youtube.com/watch?v=-Wlt8NRtOpo]
3.2 [https://css-tricks.com/snippets/css/a-guide-to-flexbox/]
3.2 [https://youtube.com/watch?v=jV8B24rSN5o]
3.2 [https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction]
3.3 Exercice: [https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension]
4. Fundamentals 4.0:
4.1 [https://developer.mozilla.org/en-US/docs/Web/CSS/Selector_list]
4.2 [https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators]
4.2 [https://youtube.com/watch?v=Bcr70LIJcOk]
4.3 [https://youtube.com/watch?v=FMu2cKWD90g]
4.3 [https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements]
4.3 [https://youtube.com/watch?v=0VDx1570X3U]
5. Media Queries:
5.1 [https://web.dev/responsive-web-design-basics/]
5.1 [https://youtube.com/watch?v=Xig7NsIE6DI]
5.2 [https://emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width/#:~:text=Max%2Dwidth%20and%20min%2Dwidth,specific%20devices%20with%20known%20widths]
5.3 [https://youtube.com/watch?v=0ohtVzCSHqs]
5.3 [https://smartbear.com/learn/performance-monitoring/what-is-mobile-first/#:~:text=Mobile%20First%20Approach%20refers%20to,the%20design%20for%20mobile%20afterwards].
5.4 [https://web.dev/responsive-web-design-basics/#breakpoints]
5.5 Exercise: [https://w3schools.com/howto/howto_js_topnav_responsive.asp]
6. Transitions & animations:
6.1 [https://youtube.com/watch?v=5p7_DlApKBA]
6.1 [https://w3schools.com/css/css3_transitions.asp]
6.2 [https://joshwcomeau.com/animation/css-transitions/]
6.3 [https://w3schools.com/css/css3_2dtransforms.asp]
6.3 [https://youtube.com/watch?v=ypwVbSAAJ68]
6.4 [https://youtube.com/watch?v=rzD-cPhq02E]
7. SASS:
7.1 [https://youtube.com/watch?v=/at-rules/function]_a5j7KoflTs]
7.1 [https://sass-lang.com/documentation/variables]
7.2 [https://w3schools.com/sass/sass_nesting.php]
7.3 [https://sass-lang.com/guide#topic-4]
7.4 [https://sass-lang.com/documentation/at-rules/mixin]
7.5 [https://sass-lang.com/documentation/at-rules/import]
7.6 [https://sass-lang.com/documentation/operators]
7.7 [https://sass-lang.com/documentation/at-rules/function]
1.1 [https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work#parsing]
1.2 [https://w3schools.com/html/html_css.asp
1.3 [https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax]
1.4 [https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors]
1.4 [https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors]1.4 1.4[https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors]
1.4 [https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors]
1.4 [https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors]
1.5 [https://youtube.com/watch?v=c0kfcP_nD9E]
1.6 [https://youtube.com/watch?v=dFSxBi2zGfM]
1.6 [https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance]
2. Fundamentals 2.0:
2.1 [https://youtube.com/watch?v=rIO5326FgPE]
2.1 [https://w3schools.com/css/css_boxmodel.asp]
2.1 [https://css-tricks.com/box-sizing/]
2.2 [https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS]
2.2 [https://youtube.com/watch?v=b9lWNg8lwW4]
2.2 [https://w3schools.com/css/css_border.asp]
2.2 [https://w3schools.com/css/css_padding.asp]
2.2 [https://w3schools.com/cssref/pr_margin.asp]
2.3 [https://youtube.com/watch?v=azZCW24XtT4]
2.3 [https://tutorialrepublic.com/css-tutorial/css-text.php]
2.4 [https://youtube.com/watch?v=tcBRvjYw5xQ]
2.4 [https://digitalocean.com/community/tutorials/css-css-units-explained]
2.4 [https://tutorialrepublic.com/css-tutorial/css-units.php]
2.4 [https://youtube.com/watch?v=-GR52czEd-0]
2.5 [https://youtube.com/watch?v=PHO6TBq_auI]
2.5 [https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties]
3. Fundamentals 3.0:
3.1 [https://youtube.com/watch?v=jx5jmI0UlXU]
3.1 [https://w3schools.com/css/css_positioning.asp]
3.2 [https://youtube.com/watch?v=-Wlt8NRtOpo]
3.2 [https://css-tricks.com/snippets/css/a-guide-to-flexbox/]
3.2 [https://youtube.com/watch?v=jV8B24rSN5o]
3.2 [https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction]
3.3 Exercice: [https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension]
4. Fundamentals 4.0:
4.1 [https://developer.mozilla.org/en-US/docs/Web/CSS/Selector_list]
4.2 [https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators]
4.2 [https://youtube.com/watch?v=Bcr70LIJcOk]
4.3 [https://youtube.com/watch?v=FMu2cKWD90g]
4.3 [https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements]
4.3 [https://youtube.com/watch?v=0VDx1570X3U]
5. Media Queries:
5.1 [https://web.dev/responsive-web-design-basics/]
5.1 [https://youtube.com/watch?v=Xig7NsIE6DI]
5.2 [https://emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width/#:~:text=Max%2Dwidth%20and%20min%2Dwidth,specific%20devices%20with%20known%20widths]
5.3 [https://youtube.com/watch?v=0ohtVzCSHqs]
5.3 [https://smartbear.com/learn/performance-monitoring/what-is-mobile-first/#:~:text=Mobile%20First%20Approach%20refers%20to,the%20design%20for%20mobile%20afterwards].
5.4 [https://web.dev/responsive-web-design-basics/#breakpoints]
5.5 Exercise: [https://w3schools.com/howto/howto_js_topnav_responsive.asp]
6. Transitions & animations:
6.1 [https://youtube.com/watch?v=5p7_DlApKBA]
6.1 [https://w3schools.com/css/css3_transitions.asp]
6.2 [https://joshwcomeau.com/animation/css-transitions/]
6.3 [https://w3schools.com/css/css3_2dtransforms.asp]
6.3 [https://youtube.com/watch?v=ypwVbSAAJ68]
6.4 [https://youtube.com/watch?v=rzD-cPhq02E]
7. SASS:
7.1 [https://youtube.com/watch?v=/at-rules/function]_a5j7KoflTs]
7.1 [https://sass-lang.com/documentation/variables]
7.2 [https://w3schools.com/sass/sass_nesting.php]
7.3 [https://sass-lang.com/guide#topic-4]
7.4 [https://sass-lang.com/documentation/at-rules/mixin]
7.5 [https://sass-lang.com/documentation/at-rules/import]
7.6 [https://sass-lang.com/documentation/operators]
7.7 [https://sass-lang.com/documentation/at-rules/function]
Forwarded from Learn CSS™
8. BEM Methodology:
8.1 [https://css-tricks.com/bem-101/#:~:text=The%20Block%2C%20Element%2C%20Modifier%20methodology,CSS%20in%20a%20given%20project]
8.1. [http://getbem.com/introduction/]
8.2 [https://en.bem.info/methodology/css/]
9. 7-1 Architercure
9.1 [https://learnhowtoprogram.com/user-interfaces/building-layouts-preprocessors/7-1-sass-architecture]
9.2 [https://youtube.com/watch?v=9Ld-aOKsEDk]
10. Frameworks:
10.1 [https://youtube.com/watch?v=bxmDnn7lrnk&list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw]
10.2 [https://youtube.com/watch?v=iJKCj8uAHz8]
8.1 [https://css-tricks.com/bem-101/#:~:text=The%20Block%2C%20Element%2C%20Modifier%20methodology,CSS%20in%20a%20given%20project]
8.1. [http://getbem.com/introduction/]
8.2 [https://en.bem.info/methodology/css/]
9. 7-1 Architercure
9.1 [https://learnhowtoprogram.com/user-interfaces/building-layouts-preprocessors/7-1-sass-architecture]
9.2 [https://youtube.com/watch?v=9Ld-aOKsEDk]
10. Frameworks:
10.1 [https://youtube.com/watch?v=bxmDnn7lrnk&list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw]
10.2 [https://youtube.com/watch?v=iJKCj8uAHz8]
This media is not supported in your browser
VIEW IN TELEGRAM
tesseract.js — JS library that gets words in almost 100 language out of images (OCR)
#library #ocr
https://github.com/naptha/tesseract.js
#library #ocr
https://github.com/naptha/tesseract.js
8 Projects to Build to Master Your Front-End Skills 🥇🏆
https://dev.to/madza/8-projects-to-build-to-master-your-front-end-skills-4gnc
#sample #JavaScript
https://dev.to/madza/8-projects-to-build-to-master-your-front-end-skills-4gnc
#sample #JavaScript
This media is not supported in your browser
VIEW IN TELEGRAM
Replace http://github.com with http://github.dev or just press "."(dot) on any GitHub repo to get access to the online VSCode Editor
#Github #VSCODE
#Github #VSCODE
FullStack - How to create a working blogging website with pure HTML, CSS and JS in 2021. - DEV Community
https://dev.to/kunaal438/fullstack-how-to-create-a-working-blogging-website-with-pure-html-css-and-js-in-2021-9di
#HTML #CSS #JavaScript
https://dev.to/kunaal438/fullstack-how-to-create-a-working-blogging-website-with-pure-html-css-and-js-in-2021-9di
#HTML #CSS #JavaScript
Learn React, Redux, Node.js, MongoDB, GraphQL and TypeScript in one go!
#frontend #fullstack #backend #graphql #web #development #tutorial #react #redux #node #nodejs #mongodb #typescript
fullstackopen.com
#frontend #fullstack #backend #graphql #web #development #tutorial #react #redux #node #nodejs #mongodb #typescript
fullstackopen.com
✨Best Back-End technologies to choose in 2021✨
Let's take a look at GitHub.
Laravel ⭐ 66.2K
Django ⭐ 59K
Flask ⭐ 56.3K
Spring Boot ⭐ ️56.6K
Express.js ⭐ ️54K
Ruby on Rails ⭐️ 48.8K
Meteor ⭐️ 42.6K
Nest ⭐️ 39.5K
🔸 Laravel
Laravel is a Web Framework for PHP.
Yes, that's right. PHP.
It's still one of the most popular choices out there.
https://github.com/laravel/laravel
🔸 Django
Django is a Web Framework based on Python.
It's an extremely popular choice for creating high-level Web Applications using Python.
https://github.com/django/django
🔸 Flask
Another super popular choice when it comes to Python, is Flask.
Compared to Django, Flash is much more lightweight, and a great choice for creating Web Applications.
https://github.com/pallets/flask
🔸 Spring Boot
Spring Boot is a tool that is used to create stand-alone Java Applications based on the Spring Framework.
When it comes to writing Web Applications in Java, Spring Boot is the most popular choice.
https://github.com/spring-projects/spring-boot
🔸 Express.js
Express.js is a minimalistic Web Application Framework for Node.js.
It is, by far, the most popular choice for creating Node.js driven Web Apps.
https://github.com/expressjs/express
🔸 Ruby on Rails
Ruby on Rails is generally one of the most popular frameworks for creating MVC Web Applications.
It's an "everything-you-need" approach, including default structures for databases, web pages, etc.
https://github.com/rails/rails
🔸 Meteor
Meteor is a JavaScript Framework used to create Full Stack Web Applications.
It integrates already popular tools such as Express.js, MongoDB and React, and makes it super easy to deploy a Full Stack JavaScript App.
https://github.com/meteor/meteor
🔸 Nest
Nest is another popular Web Application Framework for Node.js.
It's relatively new, but quickly increasing in popularity.
https://github.com/nestjs/nest
Let's take a look at GitHub.
Laravel ⭐ 66.2K
Django ⭐ 59K
Flask ⭐ 56.3K
Spring Boot ⭐ ️56.6K
Express.js ⭐ ️54K
Ruby on Rails ⭐️ 48.8K
Meteor ⭐️ 42.6K
Nest ⭐️ 39.5K
🔸 Laravel
Laravel is a Web Framework for PHP.
Yes, that's right. PHP.
It's still one of the most popular choices out there.
https://github.com/laravel/laravel
🔸 Django
Django is a Web Framework based on Python.
It's an extremely popular choice for creating high-level Web Applications using Python.
https://github.com/django/django
🔸 Flask
Another super popular choice when it comes to Python, is Flask.
Compared to Django, Flash is much more lightweight, and a great choice for creating Web Applications.
https://github.com/pallets/flask
🔸 Spring Boot
Spring Boot is a tool that is used to create stand-alone Java Applications based on the Spring Framework.
When it comes to writing Web Applications in Java, Spring Boot is the most popular choice.
https://github.com/spring-projects/spring-boot
🔸 Express.js
Express.js is a minimalistic Web Application Framework for Node.js.
It is, by far, the most popular choice for creating Node.js driven Web Apps.
https://github.com/expressjs/express
🔸 Ruby on Rails
Ruby on Rails is generally one of the most popular frameworks for creating MVC Web Applications.
It's an "everything-you-need" approach, including default structures for databases, web pages, etc.
https://github.com/rails/rails
🔸 Meteor
Meteor is a JavaScript Framework used to create Full Stack Web Applications.
It integrates already popular tools such as Express.js, MongoDB and React, and makes it super easy to deploy a Full Stack JavaScript App.
https://github.com/meteor/meteor
🔸 Nest
Nest is another popular Web Application Framework for Node.js.
It's relatively new, but quickly increasing in popularity.
https://github.com/nestjs/nest
How to create Disney plus clone with pure HTML, CSS, JS
https://dev.to/kunaal438/how-to-create-disney-plus-clone-for-beginner-in-2021-html-css-js-m3p
#html #css #javascript #webdev
https://dev.to/kunaal438/how-to-create-disney-plus-clone-for-beginner-in-2021-html-css-js-m3p
#html #css #javascript #webdev
How to create Music player with pure HTML, CSS, JS
https://dev.to/kunaal438/how-to-create-music-player-with-pure-html-css-js-34lc
#html #css #javascript #webdev
https://dev.to/kunaal438/how-to-create-music-player-with-pure-html-css-js-34lc
#html #css #javascript #webdev
How to Create a Video Player in React
https://dev.to/franciscomendes10866/how-to-create-a-video-player-in-react-40jj
#react #node #javascript #beginners
https://dev.to/franciscomendes10866/how-to-create-a-video-player-in-react-40jj
#react #node #javascript #beginners
29 Largest icon libraries to use in 2021
#javascript #webdev #developer #design
https://dev.to/devbookmark/29-largest-icon-libraries-to-use-in-2021-5d67
#javascript #webdev #developer #design
https://dev.to/devbookmark/29-largest-icon-libraries-to-use-in-2021-5d67
Top 15+ Newsletters📄For Web Developers👨💻in 2021.
https://dev.to/theme_selection/top-15-newsletters-for-web-developers-in-2021-57p9
#webdev #javascript #programming #beginners
https://dev.to/theme_selection/top-15-newsletters-for-web-developers-in-2021-57p9
#webdev #javascript #programming #beginners
Build a Modal (Pop up) With HTML, CSS and JavaScript
https://dev.to/veedjohnson/build-a-modal-pop-up-with-html-css-and-javascript-4md3
#html #css #javascript #codenewbie
https://dev.to/veedjohnson/build-a-modal-pop-up-with-html-css-and-javascript-4md3
#html #css #javascript #codenewbie
Forwarded from Learn CSS™
All CSS Properties You Need to Know to Build a Website
https://dev.to/domagojvidovic/all-css-properties-you-need-to-know-to-build-a-website-3dbb
#css #webdev #html
https://dev.to/domagojvidovic/all-css-properties-you-need-to-know-to-build-a-website-3dbb
#css #webdev #html
Forwarded from Learn CSS™
6 CSS Shorthand properties to improve your web application
https://dev.to/cscarpitta/6-css-shorthand-properties-to-improve-your-web-application-2dbj
#webdev #css #beginners #codenewbie
https://dev.to/cscarpitta/6-css-shorthand-properties-to-improve-your-web-application-2dbj
#webdev #css #beginners #codenewbie
How to make instagram clone using HTML, CSS. Fully responsive.
https://dev.to/kunaal438/how-to-make-instagram-clone-using-html-css-fully-responsive-49co
#html #css #javascript #webdev
https://dev.to/kunaal438/how-to-make-instagram-clone-using-html-css-fully-responsive-49co
#html #css #javascript #webdev
25 Beginner JavaScript Project Ideas
https://dev.to/codefoxx/25-beginner-javascript-project-ideas-3m9h
#javascript #beginners #projects #coding
https://dev.to/codefoxx/25-beginner-javascript-project-ideas-3m9h
#javascript #beginners #projects #coding
Top 12 JavaScript Machine Learning Libraries for 2021 | by Sophia Martin | JavaScript in Plain English
https://javascript.plainenglish.io/top-12-javascript-machine-learning-libraries-for-2020-8bec30ecfa58
https://javascript.plainenglish.io/top-12-javascript-machine-learning-libraries-for-2020-8bec30ecfa58