Learn JavaScript™
Open in Telegram
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
Show more4 411
Subscribers
-124 hours
No data7 days
-330 days
Posts Archive
4 411
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
4 411
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
4 411
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
4 411
tesseract.js — JS library that gets words in almost 100 language out of images (OCR)
#library #ocr
https://github.com/naptha/tesseract.js
4 411
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]
4 411
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]
4 411
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
4 411
JavaScript Tip 💡
Use console.trace instead of console.log.
It will show you the complete call stack when debugging.
#Javascripttip
4 411
JavaScript Tip 💡
Use the spread operator to create shallow copies of objects and arrays.
It's way cleaner than iterating and manually copying over.
#Javascripttip
4 411
Adonis — full-stack MVC Node.js Framework highly focused on developer ergonomics, stability and confidence
#adonis #nodejs #mvc
https://adonisjs.com/
4 411
A specification, recommendations, examples and much more thing for building APIs in JSON.
https://jsonapi.org
#json #api #rest #restful
4 411
Build a React App with Authorization and Authentication
https://dev.to/aspittel/build-a-react-app-with-authorization-and-authentication-1mha
#javascript #react #aws
4 411
💥Common Tech Stacks💥
LAMP : Linux - Apache - MySQL - PHP
MEAN : MongoDB - ExpressJS - AngularJS - NodeJS
MERN : MongoDB - ExpressJS - ReactJS -NodeJS
MEVN : MongoDB - ExpressJS - VueJS - NodeJS
JAM : JavaScript - API - Markup
WAMP : Windows - Apache - MySQL- PHP
4 411
Top Interview Questions for Frontend Developers
https://dev.to/abhishekraj272/top-interview-questions-for-frontend-developers-3d5j
#webdev #react #javascript #career
4 411
Cursor morphing
An example of simulating iOS morphing cursor in Web. Not entirely sure why someone would use it on desktop, but looks good as an experiment.
Definitely grabs user's attention.
https://codepen.io/VoloshchenkoAl/pen/oNzgNjM
4 411
How to stay focused 🔍 as a self taught Frontend Web Developer💻
https://dev.to/hyggedev/how-to-stay-focused-as-a-self-taught-frontend-web-developer-7gp
#beginners #webdev #productivity #devjournal
4 411
31 Front-End Development Study Topics to Improve Your Code Quality
https://dev.to/twinfred/28-front-end-development-study-topics-to-improve-your-code-quality-3mh9
#javascript #webdev #html #css
