Learn JavaScript
4.3K subscribers
459 photos
10 videos
132 files
3.02K links
All info, tutorial, JS tips and more ....!
bio.link/javascript_js_
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: @technical_stark
Download Telegram
Forwarded from Learn CSS
CSS Roadmap
Forwarded from Learn CSS
1. CSS FUNDAMENTALS 1.0

1.1 How the browser parses HTML/CSS?.

1.2 How to add CSS to a web page.

1.3 Syntax: selector, declaration block, peroperty, declared value.

1.4 Basic selectors: universal, type, class, id, attribute.

1.5 Cascade & Specificity: how to resolve conflicting CSS declarations?

1.6 Inheritance..

2. CSS FUNDAMENTALS 2.0

2.1 How the box model works. Learn the different box types.

2.2 How to size CSS elements? Learn padding, margin, width, height and border properties.

2.3 How to style text?

2.4 Relative units.

2.5 CSS Variables..

3. CSS FUNDAMENTALS 3.0: LAYOUT

3.1 Learn flexbox, grid, floats.

3.2 Learn the difference between position properties: absolute, relative, fixed, static and sticky.

3.3 Practice: start building smaller layouts like navigation bars, and build up your skills

4. CSS FUNDAMENTALS 4.0: ADVANCED SELECTORS

4.1 Grouping selector: selector list.

4.2 Combinator selectors: descendant, child, general sibling, adjacent sibling, column.

4.3 Pseudo selectors: pseudo classes, pseudo elements.

5. CSS INTERMEDIATE: TRANSITIONS & ANIMATIONS

5.1 Learn transition properties.

5.2 How to apply transitions in pseudo classes.

5.3 Learn from examples.

5.4 Build basic animations (e.g. change bg color on hover, add styles to input when focus etc.)

5.5 Learn transform property.

6. CSS INTERMEDIATE: MEDIA QUERIES

6.1 Learn the media types.

6.2 Understand min-width & max-width.

6.3 Learn Mobile first approach.

6.4 How to find and set screen breakpoints.

6.5 Practice: Create a responsive navigation.

7. CSS ADVANCED: PREPROCESSORS - SASS

7.1 Variables.

7.2 Nesting.

7.3 Partials.

7.4 Mixins.

7.5 Imports.

7.6 Operators.

7.7 Functions.

8. CSS ADVANCED: METHODOLOGIES - BEM

8.1 Learn why you should consider BEM

8.2 Learn what is a block, element and modifier.

9. CSS ADVANCED: ARCHITECTURE

9.1 Learn 7-1 architecture.

• Abstracts.

• Vendors.

• Base.

• Layouts.

• Components.

• Pages.

• Themes.

10. CSS FRAMEWORKS:

10.1 Tailwind CSS

10.2 Bootstrap
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]
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
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
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
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
This media is not supported in your browser
VIEW IN TELEGRAM