How to Build a Google Chrome Extension: Strong Password Generator
3K views · 2023-04-06
UI Design
We offer free trials–learn JavaScript, HTML, and CSS with us! https://bit.ly/ChromePWGenerator-FreeTrial
Have you ever wanted to make your own Google Chrome Extension? Follow along as Dustin builds a strong password generator and then converts it to a Google Chrome Extension! This project is built with HTML, SASS, and vanilla JavaScript so a good understanding of those concepts will help you create this project. If you need a refresher, take a look at some of these courses that cover the basics. Start your free trial to learn more!
https://bit.ly/ChromePWGenerator-FreeTrial
Related Treehouse courses
HTML Basics: https://bit.ly/ChromePWGenerator-HTMLbasics
CSS Basics: https://bit.ly/ChromePWGenerator-CSSbasics
SASS Basics: https://bit.ly/ChromePWGenerator-SassBasics
JavaScript Basics: https://bit.ly/ChromePWGenerator-JSbasics
CSS-Only Toggle Switches: https://bit.ly/ChromePWGenerator-CSSonlyToggle
Copy to Clipboard: https://bit.ly/ChromePWGenerator-CopyToClipboard
Remember, it’s recommended to use software specifically designed to store and manage passwords. 1Password is a popular resource for safely working with passwords. https://1password.com/
TeamPassword is another affordable option built from the ground up with teams and businesses in mind. https://teampassword.com/
Figma is a powerful, free, and easy-to-use tool for creating wireframes, mockups, and icons. https://www.figma.com/
JavaScript snippet for returning the full alphabet in lowercase
https://byrayray.dev/posts/2022-01-28_how-to-generate-an-alphabet-javascript-array-eae6940ea646
SCSS variables used
$primary: #7785fe;
$white:#fff;
$text-dark:#616b74;
$text-darker:#465059;
$text-light:#8E9BA7;
$light-gray:#CCCFD3;
$lighter-gray:#F5F5F5;
$logo-size:50px;
Chapters
0:00 Intro
1:28 HTML
9:07 SCSS
19:29 JavaScript
32:45 Convert to a Chrome Extension
#javascript #html #css #scss
---
Learn how to build websites and apps, write code, or start a business at Treehouse. Learn from over 1,000 videos created by our expert teachers on web design, coding, business, and much more. Treehouse teaches the in-demand technology skills you need to land your dream job.
Follow Us!
Twitter: https://twitter.com/treehouse
Instagram: https://instagram.com/teamtreehouse
LinkedIn: https://www.linkedin.com/school/treehouse-island-inc-/
Facebook: https://www.facebook.com/teamtreehouse/
#coding #google #programming
Have you ever wanted to make your own Google Chrome Extension? Follow along as Dustin builds a strong password generator and then converts it to a Google Chrome Extension! This project is built with HTML, SASS, and vanilla JavaScript so a good understanding of those concepts will help you create this project. If you need a refresher, take a look at some of these courses that cover the basics. Start your free trial to learn more!
https://bit.ly/ChromePWGenerator-FreeTrial
Related Treehouse courses
HTML Basics: https://bit.ly/ChromePWGenerator-HTMLbasics
CSS Basics: https://bit.ly/ChromePWGenerator-CSSbasics
SASS Basics: https://bit.ly/ChromePWGenerator-SassBasics
JavaScript Basics: https://bit.ly/ChromePWGenerator-JSbasics
CSS-Only Toggle Switches: https://bit.ly/ChromePWGenerator-CSSonlyToggle
Copy to Clipboard: https://bit.ly/ChromePWGenerator-CopyToClipboard
Remember, it’s recommended to use software specifically designed to store and manage passwords. 1Password is a popular resource for safely working with passwords. https://1password.com/
TeamPassword is another affordable option built from the ground up with teams and businesses in mind. https://teampassword.com/
Figma is a powerful, free, and easy-to-use tool for creating wireframes, mockups, and icons. https://www.figma.com/
JavaScript snippet for returning the full alphabet in lowercase
https://byrayray.dev/posts/2022-01-28_how-to-generate-an-alphabet-javascript-array-eae6940ea646
SCSS variables used
$primary: #7785fe;
$white:#fff;
$text-dark:#616b74;
$text-darker:#465059;
$text-light:#8E9BA7;
$light-gray:#CCCFD3;
$lighter-gray:#F5F5F5;
$logo-size:50px;
Chapters
0:00 Intro
1:28 HTML
9:07 SCSS
19:29 JavaScript
32:45 Convert to a Chrome Extension
#javascript #html #css #scss
---
Learn how to build websites and apps, write code, or start a business at Treehouse. Learn from over 1,000 videos created by our expert teachers on web design, coding, business, and much more. Treehouse teaches the in-demand technology skills you need to land your dream job.
Follow Us!
Twitter: https://twitter.com/treehouse
Instagram: https://instagram.com/teamtreehouse
LinkedIn: https://www.linkedin.com/school/treehouse-island-inc-/
Facebook: https://www.facebook.com/teamtreehouse/
#coding #google #programming