- 8
- 36 649
Atharv varshney
India
Приєднався 15 сер 2021
Hello everyone,
I am atharv varshney, a teen self-taught developer from INDIA. I started this channel to upload some videos related to pragramming, particularly web development, which will help you learn concepts faster. I make videos in my past time and will try to upload at least a video per month. If you are looking forward to learn things from the scratch, then this channel will boost up your learning time.
I am atharv varshney, a teen self-taught developer from INDIA. I started this channel to upload some videos related to pragramming, particularly web development, which will help you learn concepts faster. I make videos in my past time and will try to upload at least a video per month. If you are looking forward to learn things from the scratch, then this channel will boost up your learning time.
Complete HTML tutorial for beginners in 1 hour | Crash course
In this HTML tutorial, we dive deep into the world of Hypertext Markup Language (HTML) and guide you through every aspect of building web pages from scratch. To thoroughly learn something, we should first learn how it works. I have taught how websites work in a comprehensive manner & I also talked about what are various web developement technologies.
This video is enriched with core concepts of HTML, including headings, paragraphs, lists, links, images, tables, forms, and more.
⭐ Topics covered: ⭐
1) Frontend vs Backend
3) Frontend & Backend technologies
2) How websites work behind the scenes
4) HTML webpage structure
5) All important HTML tags
6) Building basic webpages
🕒 Timestamps: 🕒
00:00 Introduction.
00:45 How websites work.
08:14 Installing tools.
10:12 Understanding Basic structure of HTML.
15:30 Paragraph & Heading tags.
20:16 Anchor tag (links).
23:03 Lists, Images, Tables in HTML.
25:25 Lists tag
30:39 Images tag
32:48 Tables tag
36:24 Forms and Input in HTML.
44:32 Semantic elements
46:33 HTML Entities
49:07 Comments in HTML.
50:23 Ending
⭐ Explore: ⭐
Chrome extension playlist: ua-cam.com/play/PLXT4oy8Eb6MoOmOEcFyvbbJ-DHeduDdwl.html
For any queries, Feel free to connect with me on
►E-mail id - atharvvarshney07@gmail.com
►Linked in - www.linkedin.com/in/atharv-varshney/
►Twitter - Atharvvarshney7
Music used in this video :
Pixel Pig by Di Young: ua-cam.com/video/TiC7_167hQ0/v-deo.html
This video is enriched with core concepts of HTML, including headings, paragraphs, lists, links, images, tables, forms, and more.
⭐ Topics covered: ⭐
1) Frontend vs Backend
3) Frontend & Backend technologies
2) How websites work behind the scenes
4) HTML webpage structure
5) All important HTML tags
6) Building basic webpages
🕒 Timestamps: 🕒
00:00 Introduction.
00:45 How websites work.
08:14 Installing tools.
10:12 Understanding Basic structure of HTML.
15:30 Paragraph & Heading tags.
20:16 Anchor tag (links).
23:03 Lists, Images, Tables in HTML.
25:25 Lists tag
30:39 Images tag
32:48 Tables tag
36:24 Forms and Input in HTML.
44:32 Semantic elements
46:33 HTML Entities
49:07 Comments in HTML.
50:23 Ending
⭐ Explore: ⭐
Chrome extension playlist: ua-cam.com/play/PLXT4oy8Eb6MoOmOEcFyvbbJ-DHeduDdwl.html
For any queries, Feel free to connect with me on
►E-mail id - atharvvarshney07@gmail.com
►Linked in - www.linkedin.com/in/atharv-varshney/
►Twitter - Atharvvarshney7
Music used in this video :
Pixel Pig by Di Young: ua-cam.com/video/TiC7_167hQ0/v-deo.html
Переглядів: 107
Відео
How to build a chrome extension using React | Manifest version 3
Переглядів 3,2 тис.Рік тому
Are you interested in using React.js to build powerful and dynamic Chrome extensions? In this tutorial, we'll walk through the process of using React.js in both popup and onboarding page in a Chrome extension in manifest version 3. By the end of this tutorial, you'll have a solid understanding of how to use React.js to build a functional and user-friendly Chrome extension. This is part 7 of my ...
How to add Firebase Firestore to your chrome extension
Переглядів 3,9 тис.2 роки тому
In previous version of manifest which was manifest version 2, it was allowed to pull scripts from external sources which is we could make use of CDN links but now in manifest version 3 we can no longer do that for security reasons. Since firebase provides us an SDK CDN to use, we can't make use of it in chrome extension MV3. I found out 2 ways to do it, one is to download older version of SDK o...
How to create a Color picker chrome extension
Переглядів 2,6 тис.2 роки тому
In this video I have explained how to make a color picer chrome extension. Users can pick a color of a particular pixel on a webpage and copy the hex code of the color from the extension popup. This is the extension which I personally use in my daily life. This is part 5 of my chrome extensions playlist. 👉Source code: github.com/Atharv-varshney-UA-cam/Color-Picker 👉Chrome extension docs: develo...
How to create Onboarding and Uninstalled page | Chrome extension Keyboard shortcuts
Переглядів 1,2 тис.2 роки тому
In this video I have explained how to make an Onboarding page which is opened once when the extension is installed which can be used to tell the user about how to use the extension. Also I have shown how to add an uninstall website URL which is opened when the extension is uninstalled and it can be used for taking feedback from the user. I have also explained how to add keyboard shortcut for op...
Create a chrome extension for Productivity | Part 3 a website blocker.
Переглядів 4,1 тис.2 роки тому
In this video I have created a productivity tool which blocks a website after 10 minutes when you click on BLOCK button. This is part 3 of my chrome extensions playlist. 👉Chrome extension docs: developer.chrome.com/docs/ext... 👉Chrome extensions Playlist: ua-cam.com/play/PLX.html... 👉 Source code: github.com/Atharv-varshney-UA-cam/Stayproductive ⭐ Topics covered: ⭐ 1) Chrome Storage, retrieving...
Advanced concepts of chrome extensions | Part 2 Background scripts, Content scripts and Messaging.
Переглядів 14 тис.2 роки тому
In this video I have explained some advanced concepts of chrome extensions like Background scripts, Content scripts and Messaging between both of them. This is part 2 of my chrome extensions playlist. In this video I have created a productivity tool which blocks a website after 10 minutes when you click on BLOCK button. This is part 3 of my chrome extensions playlist. 👉Chrome extension docs: de...
Create a simple Chrome extension | Part 1 a weather app
Переглядів 8 тис.3 роки тому
In this video I have explained how to create a simple chrome extension which takes the current location of the user and displays weather of that area. This is part 1 of my chrome extensions playlist. 👉Open Weather Map API docs: openweathermap.org/current 👉Chrome extension docs: developer.chrome.com/docs/extensions/mv3/getstarted/ 👉Chrome extensions Playlist: ua-cam.com/play/PLXT4oy8Eb6MoOmOEcFy...
Thanks. Helped a lot! Currently making first chrome extension haha.
Please provide the git hub link
How can you enable Firebase Authentication in your request?
I am pretty new to APIs and stuff, just wondering, can we use a different service other than Heroku? Like Firebase hosting?
00:02 Create a chrome extension to block distracting websites for improved productivity. 02:25 Setting up necessary files and permissions for the chrome extension 07:29 Query and identify active tabs in the current window 10:16 Accessing and displaying website hostname using JavaScript 15:43 Code a website blocker using Chrome extension 18:12 Setting and retrieving blocked URLs using chrome storage.local 23:23 Creating a website blocker with error handling functionality. 25:52 Creating a website blocker using Chrome extension 31:11 Creating website blocker using chrome extension 33:52 Blocking new websites should not override previous data 39:35 Creating a website blocker chrome extension 42:27 Inject timer into the current page on start timer message 47:06 Create a function to completely block a URL 49:52 Creating a chrome extension to block websites for productivity 55:01 Using arrow functions and splice method to handle URL iteration 57:47 Blocking websites using a Chrome extension 1:03:20 Setting and checking block duration thank you bro
bro can you please make a video on how can we control the popup UI elements from service worker and this popup UI is made in next.js thank you
Is there a possibility for having an HTML pop-up over your tabs, which is persistent across all tabs? As example for a chat window that stays afloat on all pages? If so - how?
very nice and informative tutorial
An Lifesaver Video!! Thank You Bro❤❤
can you make video on mixmax how they made
great Video 🤟
Thanks!
Can I use this code
W
Thanks bro.. to the point tutorial ❤
how did you get that url in the timestamp 15:37
I have used OpenWeatherMap's API which you can access here: openweathermap.org/current
Bro, I want to inject browser history into the page. what will be the steps? I used Chrome. History API but it is not working on the content page
Can I upload data to Firestorage also using this method?
Good job
When i click Block this url then it only shows the popup message that this website will block after sometime,,but it is not showing the 5 sec timer and do not block the website, can you solve my issue?@AtharvVarshney
Can you give HTML and CSS?
Hello my friend, I’m trying to make an injected button from a chrome extension establish a connection with websocket and make it remain connected to it has to be in the backgroundscript Do you have an idea how to link websocket and chrome extension injected code?
great video and very helpfull
How can i check if the specific extension is installed or not in a browser from my react.js code how can i do this?
great work brother
Hello , when i tried to use this code in the popup.js chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { console.log(message); console.log(sender); // Send a response asynchronously sendResponse("Thank you "); }); so when my popup gets the message from the background it sends a response i'm getting this error runtime.lastError: Could not establish connection. Receiving end does not exist.
Hello do u know if it possible to create a chrome extension that when the user click on a button inside the popup.html it opens a side bar ? like the quillbot extension ? and can u make a video that shows a simple version of that ?
You can send message from popup.js to the active tab contentScript.js. Watch this ua-cam.com/video/tOHpufRbsJc/v-deo.html Instead of sending that msg from backgroundScript, try sending from the popup.js
Thank you very much it helped me alot @@AtharvVarshney
Nice explanation... keep it up
thank you and alsothe javasript code is not running in the console
I have been searching for some good content to understand these extension concepts, especially for Manifest version 3 and this is it. Thank you, man :)
Can I create a route to get the API to WRITE to firestore? I can't seem to get it to work using the post method :(
app.post('/send/', async (req, res) => { const data = await req.body console.log(data); await db .collection('test') .doc(`${data.id}`) .set(data) .then(() => { return res.status(200).send('Data Sent') }) .catch(err => { console.log(err) }) })
very well explained. thank you!
Excellent tutorial. Can you post examples usage of how to use declarativeNetRequest, declarativeNetRequestFeedback and declarativeNetRequestWithHostAccess? Thanks in advance.
Could you post a tutorial for submitting form data and processing API response in Chrome extension?
hi bro i want to import a function from redux so how can i import?
Thankyou for the useful video
Hello brother
Very easy to understand, good video!
Bro plz make full tutorial playlist on chrome extensions . That's a Request .
This is a part of the playlist, more topics & videos comming soon :)
What's the point that you wanted to show how to create an application and did not fully show how the index file was written.
Thanks for watching and commenting! Sorry if I didn't fully explain the index file code. I pasted code to keep it short and focus on integrating Firestore through APIs. Writing out method structures would make the tutorial lengthy & outdated quickly since the structure changes over time. I hope you still found the video helpful!
It amaze me that chrome extensions and firebase is both from Google but so badly integrated
That's true :(
Excellent tutorial!. This is a clear light showing the path when developing extensions. Thanks for making this easier Atharv
It's very useful.thank you
Bro, Don't stop doing videos
Thanks for your support. Will start creating videos after my exams :)
@@AtharvVarshney good to here, Plse do more on chrome extensions
Supeb keep going
can you please tell me how to download older version of SDK;;
can you do a video on how to handle SSO authentication in chrome extension using chrome.identity.launchWebAuthFlow() method? is it even possible at all?? i have been stock on authentication for weeks now. the currently working method, chrome.identity.getAuthToken(), is not working in other chromium browser except chrome.
According to my knowledge, chrome.identity.launchWebAuthFlow() method has many issues while implementing it in MV3. I need to research a bit on this topic and will create a video if possible.
paste repo link plz
for sending data from extention to firestore is there any solution for that?
Yes, you will need to create an API route which takes POST request and uses the set function which you will be able to find in the API docs.
Ok thank you ....😄
nice