Atharv varshney
Atharv varshney
  • 8
  • 36 649
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
Переглядів: 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...

КОМЕНТАРІ

  • @qazopl1234
    @qazopl1234 2 місяці тому

    Thanks. Helped a lot! Currently making first chrome extension haha.

  • @theindianshady
    @theindianshady 3 місяці тому

    Please provide the git hub link

  • @miltondavilaharjula
    @miltondavilaharjula 3 місяці тому

    How can you enable Firebase Authentication in your request?

  • @arnabdey2231
    @arnabdey2231 3 місяці тому

    I am pretty new to APIs and stuff, just wondering, can we use a different service other than Heroku? Like Firebase hosting?

  • @varunkapoor662
    @varunkapoor662 4 місяці тому

    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

  • @varunkapoor662
    @varunkapoor662 4 місяці тому

    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

  • @omarruder4129
    @omarruder4129 5 місяців тому

    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?

  • @overunityinventor
    @overunityinventor 5 місяців тому

    very nice and informative tutorial

  • @udaytondwal3321
    @udaytondwal3321 6 місяців тому

    An Lifesaver Video!! Thank You Bro❤❤

  • @akshaymehare9708
    @akshaymehare9708 6 місяців тому

    can you make video on mixmax how they made

  • @akshaymehare9708
    @akshaymehare9708 6 місяців тому

    great Video 🤟

  • @bryanchristmas4827
    @bryanchristmas4827 7 місяців тому

    Thanks!

  • @thexgamer9894
    @thexgamer9894 8 місяців тому

    Can I use this code

  • @RivaanDesai
    @RivaanDesai 8 місяців тому

    W

  • @pratyugna
    @pratyugna 8 місяців тому

    Thanks bro.. to the point tutorial ❤

  • @GaniDande-c1f
    @GaniDande-c1f 9 місяців тому

    how did you get that url in the timestamp 15:37

    • @AtharvVarshney
      @AtharvVarshney 6 місяців тому

      I have used OpenWeatherMap's API which you can access here: openweathermap.org/current

  • @AldarWap
    @AldarWap 9 місяців тому

    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

  • @HammadKhanYT
    @HammadKhanYT 9 місяців тому

    Can I upload data to Firestorage also using this method?

  • @porporatosergio3210
    @porporatosergio3210 10 місяців тому

    Good job

  • @sakshambhardwaj8399
    @sakshambhardwaj8399 10 місяців тому

    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

  • @Kodeispoetry
    @Kodeispoetry 10 місяців тому

    Can you give HTML and CSS?

  • @fatmaboodai5139
    @fatmaboodai5139 11 місяців тому

    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?

  • @alexgiank1960
    @alexgiank1960 11 місяців тому

    great video and very helpfull

  • @cricketbuff8972
    @cricketbuff8972 Рік тому

    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?

  • @sarthakjaiswal8829
    @sarthakjaiswal8829 Рік тому

    great work brother

  • @fatmaboodai5139
    @fatmaboodai5139 Рік тому

    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.

  • @fatmaboodai5139
    @fatmaboodai5139 Рік тому

    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 ?

    • @AtharvVarshney
      @AtharvVarshney Рік тому

      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

    • @fatmaboodai5139
      @fatmaboodai5139 Рік тому

      Thank you very much it helped me alot @@AtharvVarshney

  • @rajkumardongre3085
    @rajkumardongre3085 Рік тому

    Nice explanation... keep it up

  • @komal9708
    @komal9708 Рік тому

    thank you and alsothe javasript code is not running in the console

  • @shubhsingh4935
    @shubhsingh4935 Рік тому

    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 :)

  • @joem9780
    @joem9780 Рік тому

    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 :(

    • @mahedShahzad
      @mahedShahzad 5 місяців тому

      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) }) })

  • @1HourChannel420
    @1HourChannel420 Рік тому

    very well explained. thank you!

  • @jimmatrix7244
    @jimmatrix7244 Рік тому

    Excellent tutorial. Can you post examples usage of how to use declarativeNetRequest, declarativeNetRequestFeedback and declarativeNetRequestWithHostAccess? Thanks in advance.

  • @nnkrishnana
    @nnkrishnana Рік тому

    Could you post a tutorial for submitting form data and processing API response in Chrome extension?

  • @romanticsongs6574
    @romanticsongs6574 Рік тому

    hi bro i want to import a function from redux so how can i import?

  • @chaitanya-varu
    @chaitanya-varu Рік тому

    Thankyou for the useful video

  • @vishwasshetty3701
    @vishwasshetty3701 Рік тому

    Hello brother

  • @krizh289
    @krizh289 Рік тому

    Very easy to understand, good video!

  • @shreyraj2574
    @shreyraj2574 Рік тому

    Bro plz make full tutorial playlist on chrome extensions . That's a Request .

    • @AtharvVarshney
      @AtharvVarshney Рік тому

      This is a part of the playlist, more topics & videos comming soon :)

  • @aleksandrnikolaev2914
    @aleksandrnikolaev2914 Рік тому

    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.

    • @AtharvVarshney
      @AtharvVarshney Рік тому

      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!

  • @justsoonenough
    @justsoonenough Рік тому

    It amaze me that chrome extensions and firebase is both from Google but so badly integrated

  • @ernestoalonso2525
    @ernestoalonso2525 Рік тому

    Excellent tutorial!. This is a clear light showing the path when developing extensions. Thanks for making this easier Atharv

  • @ka00deepfeel43
    @ka00deepfeel43 Рік тому

    It's very useful.thank you

  • @rebal3001
    @rebal3001 Рік тому

    Bro, Don't stop doing videos

    • @AtharvVarshney
      @AtharvVarshney Рік тому

      Thanks for your support. Will start creating videos after my exams :)

    • @rebal3001
      @rebal3001 Рік тому

      @@AtharvVarshney good to here, Plse do more on chrome extensions

  • @rebal3001
    @rebal3001 Рік тому

    Supeb keep going

  • @JyotiSingh-hz4ey
    @JyotiSingh-hz4ey Рік тому

    can you please tell me how to download older version of SDK;;

  • @godswillomonkhodion6393
    @godswillomonkhodion6393 Рік тому

    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.

    • @AtharvVarshney
      @AtharvVarshney Рік тому

      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.

  • @S4LTYT
    @S4LTYT Рік тому

    paste repo link plz

  • @harshilsondagar3197
    @harshilsondagar3197 Рік тому

    for sending data from extention to firestore is there any solution for that?

    • @AtharvVarshney
      @AtharvVarshney Рік тому

      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.

    • @harshilsondagar3197
      @harshilsondagar3197 Рік тому

      Ok thank you ....😄

  • @ManishYadav-ne8zv
    @ManishYadav-ne8zv Рік тому

    nice