Skip to content

Commit 6650fcb

Browse files
committed
Use cards for Web Safety options
1 parent 2d80298 commit 6650fcb

File tree

3 files changed

+236
-95
lines changed

3 files changed

+236
-95
lines changed

src/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ image: /img/avatar.png
3030
</div>
3131
<div class="column">
3232

33-
<div class="card mb-4">
33+
<div class="card">
3434
<header class="card-header">
3535
<p class="card-header-title is-justify-content-center">
3636
Social/Work Accounts

src/web-safety/mfa.md

Lines changed: 138 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -19,50 +19,144 @@ Multi-factor authentication (MFA) is a method of securing your accounts with a s
1919

2020
## Options
2121

22-
### Proton Pass
23-
24-
[Mobile / Desktop / Browser](https://proton.me/pass/download)
25-
26-
### Bitwarden
27-
28-
[Mobile / Desktop / Browser](https://bitwarden.com/download/)
29-
30-
### Duo Mobile
31-
32-
[Mobile](https://duo.com/product/multi-factor-authentication-mfa/duo-mobile-app)
33-
34-
- [Android](https://play.google.com/store/apps/details?id=com.duosecurity.duomobile)
35-
- [iOS](https://apps.apple.com/us/app/duo-mobile/id422663827)
36-
37-
### Enpass
38-
39-
[Mobile / Desktop / Browser](https://www.enpass.io/downloads/)
40-
41-
### Microsoft Authenticator
42-
43-
[Mobile](https://www.microsoft.com/en-us/security/mobile-authenticator-app)
44-
45-
- [Android](https://play.google.com/store/apps/details?id=com.azure.authenticator)
46-
- [iOS](https://apps.apple.com/us/app/microsoft-authenticator/id983156458)
47-
48-
### Authy
49-
50-
[Mobile](https://authy.com/download/)
51-
52-
- [Android](https://play.google.com/store/apps/details?id=com.authy.authy)
53-
- [iOS](https://apps.apple.com/us/app/authy/id494168017)
54-
55-
### 2fast
56-
57-
[Windows](https://github.com/2fast-team/2fast)
58-
59-
### LastPass Authenticator
60-
61-
[Mobile / Desktop](https://lastpass.com/auth/)
62-
63-
- [Android](https://play.google.com/store/apps/details?id=com.lastpass.authenticator)
64-
- [iOS](https://apps.apple.com/us/app/lastpass-authenticator/id1079110004)
65-
- [Windows](https://www.microsoft.com/en-us/p/lastpass-authenticator/9nblggh5l9d7)
22+
<div class="columns is-multiline">
23+
<div class="column is-half">
24+
<div class="card">
25+
<header class="card-header">
26+
<p class="card-header-title">Proton Pass</p>
27+
</header>
28+
<div class="card-content">
29+
<div class="content">
30+
Proton Pass is a secure password manager and authenticator from the makers of Proton Mail. It offers end-to-end encryption, supports generating login codes for your accounts, and is available on mobile, desktop, and browser platforms.
31+
</div>
32+
</div>
33+
<footer class="card-footer is-nowrap is-flex-wrap-wrap">
34+
<a class="card-footer-item" href="https://proton.me/pass/download" target="_blank" rel="noopener">Mobile / Desktop / Browser</a>
35+
</footer>
36+
</div>
37+
</div>
38+
39+
<div class="column is-half">
40+
<div class="card">
41+
<header class="card-header">
42+
<p class="card-header-title">Bitwarden</p>
43+
</header>
44+
<div class="card-content">
45+
<div class="content">
46+
Open-source password manager that can also generate login codes for your accounts.
47+
</div>
48+
</div>
49+
<footer class="card-footer is-nowrap is-flex-wrap-wrap">
50+
<a class="card-footer-item" href="https://bitwarden.com/download/" target="_blank" rel="noopener">Mobile / Desktop / Browser</a>
51+
</footer>
52+
</div>
53+
</div>
54+
55+
<div class="column is-half">
56+
<div class="card">
57+
<header class="card-header">
58+
<p class="card-header-title">Duo Mobile</p>
59+
</header>
60+
<div class="card-content">
61+
<div class="content">
62+
Authenticator app often used by schools and workplaces. Can generate login codes or approve sign-ins.
63+
</div>
64+
</div>
65+
<footer class="card-footer is-nowrap is-flex-wrap-wrap">
66+
<a class="card-footer-item" href="https://duo.com/product/multi-factor-authentication-mfa/duo-mobile-app" target="_blank" rel="noopener">Mobile</a>
67+
<a class="card-footer-item" href="https://play.google.com/store/apps/details?id=com.duosecurity.duomobile" target="_blank" rel="noopener">Android</a>
68+
<a class="card-footer-item" href="https://apps.apple.com/us/app/duo-mobile/id422663827" target="_blank" rel="noopener">iOS</a>
69+
</footer>
70+
</div>
71+
</div>
72+
73+
<div class="column is-half">
74+
<div class="card">
75+
<header class="card-header">
76+
<p class="card-header-title">Enpass</p>
77+
</header>
78+
<div class="card-content">
79+
<div class="content">
80+
Password manager that can also generate the codes you need for logging in securely.
81+
</div>
82+
</div>
83+
<footer class="card-footer is-nowrap is-flex-wrap-wrap">
84+
<a class="card-footer-item" href="https://www.enpass.io/downloads/" target="_blank" rel="noopener">Mobile / Desktop / Browser</a>
85+
</footer>
86+
</div>
87+
</div>
88+
89+
<div class="column is-half">
90+
<div class="card">
91+
<header class="card-header">
92+
<p class="card-header-title">Microsoft Authenticator</p>
93+
</header>
94+
<div class="card-content">
95+
<div class="content">
96+
Authenticator app from Microsoft. Can generate login codes and also lets you approve sign-ins with a tap.
97+
</div>
98+
</div>
99+
<footer class="card-footer is-nowrap is-flex-wrap-wrap">
100+
<a class="card-footer-item" href="https://www.microsoft.com/en-us/security/mobile-authenticator-app" target="_blank" rel="noopener">Mobile</a>
101+
<a class="card-footer-item" href="https://play.google.com/store/apps/details?id=com.azure.authenticator" target="_blank" rel="noopener">Android</a>
102+
<a class="card-footer-item" href="https://apps.apple.com/us/app/microsoft-authenticator/id983156458" target="_blank" rel="noopener">iOS</a>
103+
</footer>
104+
</div>
105+
</div>
106+
107+
<div class="column is-half">
108+
<div class="card">
109+
<header class="card-header">
110+
<p class="card-header-title">Authy</p>
111+
</header>
112+
<div class="card-content">
113+
<div class="content">
114+
Authenticator app that works on multiple devices and can back up your codes securely.
115+
</div>
116+
</div>
117+
<footer class="card-footer is-nowrap is-flex-wrap-wrap">
118+
<a class="card-footer-item" href="https://authy.com/download/" target="_blank" rel="noopener">Mobile</a>
119+
<a class="card-footer-item" href="https://play.google.com/store/apps/details?id=com.authy.authy" target="_blank" rel="noopener">Android</a>
120+
<a class="card-footer-item" href="https://apps.apple.com/us/app/authy/id494168017" target="_blank" rel="noopener">iOS</a>
121+
</footer>
122+
</div>
123+
</div>
124+
125+
<div class="column is-half">
126+
<div class="card">
127+
<header class="card-header">
128+
<p class="card-header-title">2fast</p>
129+
</header>
130+
<div class="card-content">
131+
<div class="content">
132+
Free and open-source app for Windows that can generate login codes for your accounts.
133+
</div>
134+
</div>
135+
<footer class="card-footer is-nowrap is-flex-wrap-wrap">
136+
<a class="card-footer-item" href="https://github.com/2fast-team/2fast" target="_blank" rel="noopener">Windows</a>
137+
</footer>
138+
</div>
139+
</div>
140+
141+
<div class="column is-half">
142+
<div class="card">
143+
<header class="card-header">
144+
<p class="card-header-title">LastPass Authenticator</p>
145+
</header>
146+
<div class="card-content">
147+
<div class="content">
148+
Authenticator app from LastPass. Can generate login codes and supports one-tap sign-in approval.
149+
</div>
150+
</div>
151+
<footer class="card-footer is-nowrap is-flex-wrap-wrap">
152+
<a class="card-footer-item" href="https://lastpass.com/auth/" target="_blank" rel="noopener">Mobile / Desktop</a>
153+
<a class="card-footer-item" href="https://play.google.com/store/apps/details?id=com.lastpass.authenticator" target="_blank" rel="noopener">Android</a>
154+
<a class="card-footer-item" href="https://apps.apple.com/us/app/lastpass-authenticator/id1079110004" target="_blank" rel="noopener">iOS</a>
155+
<a class="card-footer-item" href="https://www.microsoft.com/en-us/p/lastpass-authenticator/9nblggh5l9d7" target="_blank" rel="noopener">Windows</a>
156+
</footer>
157+
</div>
158+
</div>
159+
</div>
66160

67161
## See Also
68162

src/web-safety/safety.md

Lines changed: 97 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -34,61 +34,108 @@ If you're hesitant to use a password manager because you don't want to copy and
3434

3535
## What are my options?
3636

37-
In the [options section](#options), we provide a list of password managers with a brief description of each one. You can decide which one you want to use based on your own preferences, but it's important to consider all your options and their pros and cons.
37+
In this section, we provide a list of password managers with a brief description of each one. You can decide which one you want to use based on your own preferences, but it's important to consider all your options and their pros and cons.
38+
39+
<div class="columns is-multiline">
40+
<div class="column is-half">
41+
<div class="card">
42+
<header class="card-header">
43+
<p class="card-header-title">Bitwarden</p>
44+
</header>
45+
<div class="card-content">
46+
<div class="content">
47+
Bitwarden is a free, open-source password manager that works on all major platforms and browsers. It offers secure password storage, sharing, and autofill, with optional premium features.
48+
<br>
49+
<br>
50+
See also: <a href="securing-bitwarden.md">Securing Bitwarden</a>
51+
</div>
52+
</div>
53+
<footer class="card-footer is-nowrap is-flex-wrap-wrap">
54+
<a class="card-footer-item" href="https://bitwarden.com/" target="_blank" rel="noopener">Website</a>
55+
<a class="card-footer-item" href="https://mshelton.medium.com/bitwarden-for-beginners-74cf93679457" target="_blank" rel="noopener">Beginners Guide</a>
56+
<a class="card-footer-item" href="https://bitwarden.com/help/" target="_blank" rel="noopener">Help Center</a>
57+
</footer>
58+
</div>
59+
</div>
60+
61+
<div class="column is-half">
62+
<div class="card">
63+
<header class="card-header">
64+
<p class="card-header-title">Proton Pass</p>
65+
</header>
66+
<div class="card-content">
67+
<div class="content">
68+
Proton Pass is a password manager from the makers of Proton Mail. It offers end-to-end encryption, a clean and simple interface, and is available on desktop, mobile, and as a browser extension. Proton Pass can store passwords, notes, and email aliases, and is designed with privacy in mind.
69+
</div>
70+
</div>
71+
<footer class="card-footer is-nowrap is-flex-wrap-wrap">
72+
<a class="card-footer-item" href="https://proton.me/pass" target="_blank" rel="noopener">Website</a>
73+
</footer>
74+
</div>
75+
</div>
76+
77+
<div class="column is-half">
78+
<div class="card">
79+
<header class="card-header">
80+
<p class="card-header-title">Enpass</p>
81+
</header>
82+
<div class="card-content">
83+
<div class="content">
84+
Enpass is free and lets you store your passwords on your own computer instead of on the cloud, this allows you to choose who and what you trust with your data.
85+
</div>
86+
</div>
87+
<footer class="card-footer is-nowrap is-flex-wrap-wrap">
88+
<a class="card-footer-item" href="https://www.enpass.io/" target="_blank" rel="noopener">Website</a>
89+
</footer>
90+
</div>
91+
</div>
92+
93+
<div class="column is-half">
94+
<div class="card">
95+
<header class="card-header">
96+
<p class="card-header-title">1Password</p>
97+
</header>
98+
<div class="card-content">
99+
<div class="content">
100+
1Password is a paid password manager known for its easy-to-use design, strong security, and helpful features like password sharing and security alerts. Works on all major platforms.
101+
</div>
102+
</div>
103+
<footer class="card-footer is-nowrap is-flex-wrap-wrap">
104+
<a class="card-footer-item" href="https://1password.com/" target="_blank" rel="noopener">Website</a>
105+
<a class="card-footer-item" href="https://mshelton.medium.com/introduction-to-password-managers-5e15baa8b26e" target="_blank" rel="noopener">Beginners Guide</a>
106+
</footer>
107+
</div>
108+
</div>
109+
110+
<div class="column is-half">
111+
<div class="card">
112+
<header class="card-header">
113+
<p class="card-header-title">LastPass</p>
114+
</header>
115+
<div class="card-content">
116+
<div class="content">
117+
LastPass is only <em>partially</em> free. You are restricted to using only one device "type" with the free plan, either PC or mobile. If you wish to use this service, you should consider that LastPass has many issues in the company itself, you can look at the top of the beginners guide for more information.
118+
<br>
119+
<br>
120+
Additionally, LastPass experienced a significant security incident where their vaults were compromised, and the information stored within them are actively being misused. You can find more information about this breach at:
121+
<ul>
122+
<li><a href="https://blog.lastpass.com/2022/12/notice-of-recent-security-incident/" target="_blank" rel="noopener">LastPass Security Incident</a></li>
123+
<li><a href="https://www.wired.com/story/lastpass-breach-vaults-password-managers/" target="_blank" rel="noopener">Wired: LastPass Breach</a></li>
124+
</ul>
125+
</div>
126+
</div>
127+
<footer class="card-footer is-nowrap is-flex-wrap-wrap">
128+
<a class="card-footer-item" href="https://www.lastpass.com/" target="_blank" rel="noopener">Website</a>
129+
<a class="card-footer-item" href="https://mshelton.medium.com/lastpass-for-beginners-e921f35d4114" target="_blank" rel="noopener">Beginners Guide</a>
130+
</footer>
131+
</div>
132+
</div>
133+
</div>
38134

39135
## What more can I do?
40136

41137
For extra protection, you can use [Multi-Factor Authentication (MFA)](mfa.md), also known as Two-Factor Authentication (or 2FA). This is a method that uses an app to generate a random passcode every 30 seconds. This makes it very difficult for someone to log into your account without having physical access to your phone.
42138

43-
## Options
44-
45-
### Bitwarden
46-
47-
Bitwarden is by far my favourite. It's free (with an _optional_ subscription for a very low price), open source, and it's fairly easy to use.
48-
49-
<https://bitwarden.com/>
50-
51-
[Beginners Guide](https://mshelton.medium.com/bitwarden-for-beginners-74cf93679457)
52-
53-
[Bitwarden Help Center](https://bitwarden.com/help/)
54-
55-
#### See Also
56-
57-
[Securing Bitwarden](securing-bitwarden.md)
58-
59-
### Proton Pass
60-
61-
This is a relatively new password manager. It's free and easy to use.
62-
63-
<https://proton.me/pass>
64-
65-
### Enpass
66-
67-
Enpass is free and lets you store your passwords on your own computer instead of on the cloud, this allows you to choose who and what you trust with your data.
68-
69-
<https://www.enpass.io/>
70-
71-
### 1Password
72-
73-
1Password requires a subscription to use but it's worth what you pay for it. They appear to have fairly good security that is maintained over time.
74-
75-
<https://1password.com/>
76-
77-
[Beginners Guide](https://mshelton.medium.com/introduction-to-password-managers-5e15baa8b26e)
78-
79-
### LastPass
80-
81-
LastPass is only _partially_ free. You are restricted to using only one device "type" with the free plan, either PC or mobile. If you wish to use this service, you should consider that LastPass has many issues in the company itself, you can look at the top of the beginners guide for more information.
82-
83-
Additionally, LastPass experienced a significant security incident where their vaults were compromised, and the information stored within them are actively being misused. You can find more information about this breach at:
84-
85-
- <https://blog.lastpass.com/2022/12/notice-of-recent-security-incident/>
86-
- <https://www.wired.com/story/lastpass-breach-vaults-password-managers/>
87-
88-
<https://www.lastpass.com/>
89-
90-
[Beginners Guide](https://mshelton.medium.com/lastpass-for-beginners-e921f35d4114)
91-
92139
## See Also
93140

94141
- <https://mshelton.medium.com/password-managers-for-beginners-d1f49866f80f>

0 commit comments

Comments
 (0)