Introduction to Utility Class and how to setup a basic Tailwind CSS based project.
https://www.youtube.com/watch?v=_38OWbFYYh4
#wpu #tailwind #css
https://www.youtube.com/watch?v=_38OWbFYYh4
#wpu #tailwind #css
YouTube
4. Basic Utility - Bagian 1 | Belajar Tailwind CSS
Membahas mengenai utility dasar pada TailwindCSS: Spacing, Sizing, Typography & Colors
---
TailwindCSS
https://tailwindcss.com/
Visual Studio Code
https://code.visualstudio.com/
NodeJS
https://nodejs.org/en/
Git
https://git-scm.com/
---
Ikuti Playlist…
---
TailwindCSS
https://tailwindcss.com/
Visual Studio Code
https://code.visualstudio.com/
NodeJS
https://nodejs.org/en/
Git
https://git-scm.com/
---
Ikuti Playlist…
Some JavaScript concepts to understand when learning Javascript
https://dev.to/axlyaguana11/concepts-you-need-to-know-if-you-are-a-javascript-beginner-5am0
---
Some examples of Spread Operator use cases on JavaScript Arrays
https://javascript.plainenglish.io/6-use-cases-of-the-spread-operator-with-javascript-arrays-783e3da1ac1e
---
Practice using RxJS Observable in Javascript project
https://javascript.plainenglish.io/how-to-use-observables-with-vanilla-javascript-aca40a7590ff
---
How to remove empty String characters or whitespaces with JavaScript
https://javascript.plainenglish.io/how-to-trim-whitespace-from-a-string-in-javascript-f06db6ee5c7
---
#concept #whitespace #spread #operator #learning
https://dev.to/axlyaguana11/concepts-you-need-to-know-if-you-are-a-javascript-beginner-5am0
---
Some examples of Spread Operator use cases on JavaScript Arrays
https://javascript.plainenglish.io/6-use-cases-of-the-spread-operator-with-javascript-arrays-783e3da1ac1e
---
Practice using RxJS Observable in Javascript project
https://javascript.plainenglish.io/how-to-use-observables-with-vanilla-javascript-aca40a7590ff
---
How to remove empty String characters or whitespaces with JavaScript
https://javascript.plainenglish.io/how-to-trim-whitespace-from-a-string-in-javascript-f06db6ee5c7
---
#concept #whitespace #spread #operator #learning
Use Service Worker in JavaScript for caching some assets in web app.
https://betterprogramming.pub/the-power-of-caching-in-javascript-9a4c985ba8e8
—-
List of important features of JavaScript ES2015 to learn
https://javascript.plainenglish.io/es6-features-that-make-you-a-modern-javascript-developer-2b6d279b8e4d
#es2015 #serviceworker #cache
https://betterprogramming.pub/the-power-of-caching-in-javascript-9a4c985ba8e8
—-
List of important features of JavaScript ES2015 to learn
https://javascript.plainenglish.io/es6-features-that-make-you-a-modern-javascript-developer-2b6d279b8e4d
#es2015 #serviceworker #cache
Forwarded from Learn CSS™
A simple exercise from Lama Dev on creating e-commerce web pages with HTML, JavaScript and CSS
https://youtu.be/b3Gqq_k-g24
---
Create a subtle box shadows shadow effect with CSS and HTML
https://www.freecodecamp.org/news/how-to-create-beautiful-box-shadows-in-html-and-css/
---
Creating a Floating Action Button with the help of pure CSS
https://javascript.plainenglish.io/how-to-create-a-floating-action-button-with-pure-css-positioning-e52ba498083f
---
Create Pie Chart diagrams with only CSS and HTML
https://www.freecodecamp.org/news/css-only-pie-chart/
---
#css #landingpage #piechart #floatingButton #boxShadow #ecommerce #lamaDev
https://youtu.be/b3Gqq_k-g24
---
Create a subtle box shadows shadow effect with CSS and HTML
https://www.freecodecamp.org/news/how-to-create-beautiful-box-shadows-in-html-and-css/
---
Creating a Floating Action Button with the help of pure CSS
https://javascript.plainenglish.io/how-to-create-a-floating-action-button-with-pure-css-positioning-e52ba498083f
---
Create Pie Chart diagrams with only CSS and HTML
https://www.freecodecamp.org/news/css-only-pie-chart/
---
#css #landingpage #piechart #floatingButton #boxShadow #ecommerce #lamaDev
Some state management references for React JS
https://blog.openreplay.com/top-6-react-state-management-libraries-for-2022
---
Design patterns for React JS components
https://blog.openreplay.com/3-react-component-design-patterns-you-should-know-about
#react #state #component #designPatterns
https://blog.openreplay.com/top-6-react-state-management-libraries-for-2022
---
Design patterns for React JS components
https://blog.openreplay.com/3-react-component-design-patterns-you-should-know-about
#react #state #component #designPatterns
Node JS and MongoDB introduction exercise by creating a task application or Task todo list
https://nabendu82.medium.com/understanding-nodejs-by-building-a-task-app-70767401009e
—-
Build MEAN Stack app with GraphQL, PostGraphile, Angular, BullJS, Nest JS, and TypeORM
https://medium.com/@raviyasas/crud-operations-with-graphql-and-nestjs-723043e38f1f
—-
Practice installing Elasticsearch on Node JS
https://medium.com/nonstopio/elasticsearch-using-nodejs-and-json-f444ef378556
#nodejs #mongodb #angular #mean #elasticsearch
https://nabendu82.medium.com/understanding-nodejs-by-building-a-task-app-70767401009e
—-
Build MEAN Stack app with GraphQL, PostGraphile, Angular, BullJS, Nest JS, and TypeORM
https://medium.com/@raviyasas/crud-operations-with-graphql-and-nestjs-723043e38f1f
—-
Practice installing Elasticsearch on Node JS
https://medium.com/nonstopio/elasticsearch-using-nodejs-and-json-f444ef378556
#nodejs #mongodb #angular #mean #elasticsearch
Javascript Weekly 19
• News TypeScript Features to Avoid?
• News Deeply Copying Objects with structuredClone()
• News New Course on State Machines with XState by David Khourshid
• News A JavaScript-Flavored Introduction to Monads
• News Remix vs Next.js
• News Deno 1.18 Released: The (Other) Modern JS/TS Runtime
• News Replacing jQuery with Umbrella JS
• News On Grouping Arrays with .groupBy() and .groupByToMap()
• News Colors NPM: What Happened? Offending Commit Adds an Infinite Loop
• News From ES6 to Scala: The Basics
• News The Optional Chaining Operator, “Modern” Browsers, and My Mom
• News Good Advice on JSX Conditionals
• News Add Less
• News Build a Mobile-Responsive Telehealth Pager App Using Stream’s Chat API
• News How to Extract Secrets from an Electron App
• News TinyBase: A Library for Structuring App State
• News Sharer.js 0.5: Lightweight Social Sharing Components for 20+ Platforms
• News Studio 3T Manages Your Data, While You Wrestle Your App into Shape
• News Vanilla List: A Directory of Vanilla JavaScript Plugins
• News mo.js 1.3: A Motion Graphics Toolbelt for the Web
• News Rockpack 2.0: An Alternative React App Builder
• News vue-easytable: A Flexible Table/Data Grid Component for Vue.js 2.x
• News React Calendar 3.6: The 'Ultimate' Calendar for Your React App
Tags: #Javascriptweekly #Javascript #JS #weekly
• News TypeScript Features to Avoid?
• News Deeply Copying Objects with structuredClone()
• News New Course on State Machines with XState by David Khourshid
• News A JavaScript-Flavored Introduction to Monads
• News Remix vs Next.js
• News Deno 1.18 Released: The (Other) Modern JS/TS Runtime
• News Replacing jQuery with Umbrella JS
• News On Grouping Arrays with .groupBy() and .groupByToMap()
• News Colors NPM: What Happened? Offending Commit Adds an Infinite Loop
• News From ES6 to Scala: The Basics
• News The Optional Chaining Operator, “Modern” Browsers, and My Mom
• News Good Advice on JSX Conditionals
• News Add Less
• News Build a Mobile-Responsive Telehealth Pager App Using Stream’s Chat API
• News How to Extract Secrets from an Electron App
• News TinyBase: A Library for Structuring App State
• News Sharer.js 0.5: Lightweight Social Sharing Components for 20+ Platforms
• News Studio 3T Manages Your Data, While You Wrestle Your App into Shape
• News Vanilla List: A Directory of Vanilla JavaScript Plugins
• News mo.js 1.3: A Motion Graphics Toolbelt for the Web
• News Rockpack 2.0: An Alternative React App Builder
• News vue-easytable: A Flexible Table/Data Grid Component for Vue.js 2.x
• News React Calendar 3.6: The 'Ultimate' Calendar for Your React App
Tags: #Javascriptweekly #Javascript #JS #weekly
An Alternative to Next.JS? — Everything You Need to Know About RemixJS
https://blog.openreplay.com/an-alternative-to-next-js-everything-you-need-to-know-about-remixjs
https://blog.openreplay.com/an-alternative-to-next-js-everything-you-need-to-know-about-remixjs
What Were the Hottest Front-End Tools in 2021?
https://css-tricks.com/hottest-front-end-tools-in-2021/
https://css-tricks.com/hottest-front-end-tools-in-2021/
Framing a PERN Stack project with Docker
https://faun.pub/the-pern-stack-with-docker-for-beginners-9fa76e574d82
—-
Simple exercise to create unit testing for Node JS backend
https://betterprogramming.pub/writing-unit-tests-for-your-nodejs-api-13257bd0e46b
#nodejs #pern #postgresql #unit #test
https://faun.pub/the-pern-stack-with-docker-for-beginners-9fa76e574d82
—-
Simple exercise to create unit testing for Node JS backend
https://betterprogramming.pub/writing-unit-tests-for-your-nodejs-api-13257bd0e46b
#nodejs #pern #postgresql #unit #test
Sample portfolio web project built with React JS and TypeScript
https://reactjsexample.com/a-beautiful-portfolio-page-made-with-react-and-typescript/
#react #portfolio #typescript #sample
https://reactjsexample.com/a-beautiful-portfolio-page-made-with-react-and-typescript/
#react #portfolio #typescript #sample
Forwarded from Learn Html
Tips and tricks in implementing good Semantic HTML for good HTML structure and SEO
https://www.freecodecamp.org/news/html-best-practices/
#html #seo #semantic
https://www.freecodecamp.org/news/html-best-practices/
#html #seo #semantic
Forwarded from Learn Html
Create web pages with multi navigation bars with Kevin Powell
https://youtu.be/I1lq2ge7g4g
#kevinPowell #navbar
https://youtu.be/I1lq2ge7g4g
#kevinPowell #navbar
Forwarded from Learn CSS™
Complete guide on Flexbox CSS and example use cases
https://dev.to/johnpalmgren/flexbox-complete-guide-for-beginners-56bp
#css #flexbox
https://dev.to/johnpalmgren/flexbox-complete-guide-for-beginners-56bp
#css #flexbox
Forwarded from Learn CSS™
Making a web portfolio with JavaScript, HTML, and CSS framework called Bootstrap 5
https://www.freecodecamp.org/news/how-to-create-a-portfolio-website-using-html-css-javascript-and-bootstrap/
#portfolio #css #freecodecamp
https://www.freecodecamp.org/news/how-to-create-a-portfolio-website-using-html-css-javascript-and-bootstrap/
#portfolio #css #freecodecamp
Forwarded from Learn JavaScript™
✨40+ JavaScript Projects For Your Portfolio [With Video links!]✨
In the front-end space, a lot of frameworks exist: React, Angular, Vue, just to name a few. Every single one of them is awesome and without them, front-end development wouldn’t be in its current state. But what those frameworks, besides all their differences, have in common is that they are all based on JavaScript. Yep, good ol’ JS!
JavaScript is what runs the web today, no doubt. And for every front-end developer, no matter if already experienced or at the start of their careers, it’s mandatory to know the basics of JavaScript, HTML, and CSS.
Frameworks come and go, but JavaScript will stay! But what's the best way to practice JavaScript? The best answer I can give you is to build projects!
JavaScript Projects
JavaScript projects are guided tutorials or javascript project ideas that help you sharpen your skills by building real applications, websites, games, components, etc.
Sometimes you will find project ideas that just contain a title and a few sentences of what you should build.
Example: Build a counter with JavaScript that counts down the hours till the end of the year.
This format is good if you already have some experience and are just looking for some input.
JavaScript Projects for Beginners
However, if you are new to web development, it's often better if you look for JavaScript project examples with source code or specific JavaScript projects for beginners.
These often contain a running demo application, a GitHub repository with the source code, and a step-by-step guide on how to build the project.
JavaScript Practice Projects
So for you to gain practice, I have listed nine awesome javascript project ideas that you can do to refresh your skills, learn new things about JS, and stay relevant in the future. All of them are based on pure JavaScript, some HTML, and some CSS. You can add them to your portfolio, show them to recruiters or potential employers, or keep them in your GitHub as references for future work. To be clear: This is not meant to teach you everything about JavaScript. There are perfect courses for you covering JS from A-Z. This is for building things. Getting your hands dirty. Working on your muscle memory.
JavaScript Projects Overview
Build a Meditation App JavaScript Project
Build a Virtual Keyboard JavaScript Project
Build an eCommerce Shopping Cart JavaScript Project
Build a Weather App JavaScript Project
Build an Issue Tracker JavaScript Project
Build a PIN Pad JavaScript Project
Build a Landing Page JavaScript Project
Build a Rock Paper Scissors Game JavaScript Project
Build a Tic Tac Toe Game JavaScript Project
Bonus: Build 9-in-1 Mini JavaScript Projects
Bonus: JavaScript Beginner Project Ideas
Bonus: JavaScript Intermediate Project Ideas
Bonus: JavaScript Advanced Project Ideas
To give you a headstart, . I had listed these projects might be helpful for a kickstart to JS in my opinion, so I highly recommend that you try them out for yourself because you know how to learn best and on what level you currently are.
1. Build a Meditation App JavaScript Project
Link:
https://youtu.be/oMBXdZzYqEk
What you will build
You are going to build an application that provides ambient sound for meditation. Users can choose between different timers and sounds.
2. Build a Virtual Keyboard JavaScript Project
Link:
https://youtu.be/N3cq0BHDMOY
What you will build
You are going to build a virtual keyboard from scratch with Vanilla JS, HTML, and CSS that can be used in the browser and will be responsive and touch-ready!
3. Build an eCommerce Shopping Cart JavaScript Project
Link: https://youtu.be/90PgFUPIybY
What you will build
You are going to build a shopping cart that can be used on online shops and eCommerce sites with Vanilla JS, HTML, and CSS. The instructor makes use of Contentful, which is a headless CMS for storing product information.
In the front-end space, a lot of frameworks exist: React, Angular, Vue, just to name a few. Every single one of them is awesome and without them, front-end development wouldn’t be in its current state. But what those frameworks, besides all their differences, have in common is that they are all based on JavaScript. Yep, good ol’ JS!
JavaScript is what runs the web today, no doubt. And for every front-end developer, no matter if already experienced or at the start of their careers, it’s mandatory to know the basics of JavaScript, HTML, and CSS.
Frameworks come and go, but JavaScript will stay! But what's the best way to practice JavaScript? The best answer I can give you is to build projects!
JavaScript Projects
JavaScript projects are guided tutorials or javascript project ideas that help you sharpen your skills by building real applications, websites, games, components, etc.
Sometimes you will find project ideas that just contain a title and a few sentences of what you should build.
Example: Build a counter with JavaScript that counts down the hours till the end of the year.
This format is good if you already have some experience and are just looking for some input.
JavaScript Projects for Beginners
However, if you are new to web development, it's often better if you look for JavaScript project examples with source code or specific JavaScript projects for beginners.
These often contain a running demo application, a GitHub repository with the source code, and a step-by-step guide on how to build the project.
JavaScript Practice Projects
So for you to gain practice, I have listed nine awesome javascript project ideas that you can do to refresh your skills, learn new things about JS, and stay relevant in the future. All of them are based on pure JavaScript, some HTML, and some CSS. You can add them to your portfolio, show them to recruiters or potential employers, or keep them in your GitHub as references for future work. To be clear: This is not meant to teach you everything about JavaScript. There are perfect courses for you covering JS from A-Z. This is for building things. Getting your hands dirty. Working on your muscle memory.
JavaScript Projects Overview
Build a Meditation App JavaScript Project
Build a Virtual Keyboard JavaScript Project
Build an eCommerce Shopping Cart JavaScript Project
Build a Weather App JavaScript Project
Build an Issue Tracker JavaScript Project
Build a PIN Pad JavaScript Project
Build a Landing Page JavaScript Project
Build a Rock Paper Scissors Game JavaScript Project
Build a Tic Tac Toe Game JavaScript Project
Bonus: Build 9-in-1 Mini JavaScript Projects
Bonus: JavaScript Beginner Project Ideas
Bonus: JavaScript Intermediate Project Ideas
Bonus: JavaScript Advanced Project Ideas
To give you a headstart, . I had listed these projects might be helpful for a kickstart to JS in my opinion, so I highly recommend that you try them out for yourself because you know how to learn best and on what level you currently are.
1. Build a Meditation App JavaScript Project
Link:
https://youtu.be/oMBXdZzYqEk
What you will build
You are going to build an application that provides ambient sound for meditation. Users can choose between different timers and sounds.
2. Build a Virtual Keyboard JavaScript Project
Link:
https://youtu.be/N3cq0BHDMOY
What you will build
You are going to build a virtual keyboard from scratch with Vanilla JS, HTML, and CSS that can be used in the browser and will be responsive and touch-ready!
3. Build an eCommerce Shopping Cart JavaScript Project
Link: https://youtu.be/90PgFUPIybY
What you will build
You are going to build a shopping cart that can be used on online shops and eCommerce sites with Vanilla JS, HTML, and CSS. The instructor makes use of Contentful, which is a headless CMS for storing product information.