Created
August 9, 2022 17:51
-
-
Save vojtaholik/f47065f095079e6b38bb2657f85e0886 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> | |
<head> | |
<title> | |
Email Course (1) The Start to Understanding Internet | |
</title> | |
<!--[if !mso]><!--> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<!--<![endif]--> | |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<style type="text/css"> | |
#outlook a { padding:0; } | |
body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; } | |
table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; } | |
img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; } | |
p { display:block;margin:13px 0; } | |
</style> | |
<!--[if mso]> | |
<noscript> | |
<xml> | |
<o:OfficeDocumentSettings> | |
<o:AllowPNG/> | |
<o:PixelsPerInch>96</o:PixelsPerInch> | |
</o:OfficeDocumentSettings> | |
</xml> | |
</noscript> | |
<![endif]--> | |
<!--[if lte mso 11]> | |
<style type="text/css"> | |
.mj-outlook-group-fix { width:100% !important; } | |
</style> | |
<![endif]--> | |
<!--[if !mso]><!--> | |
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css"> | |
<style type="text/css"> | |
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700); | |
</style> | |
<!--<![endif]--> | |
<style type="text/css"> | |
@media only screen and (min-width:480px) { | |
.mj-column-per-100 { width:100% !important; max-width: 100%; } | |
} | |
</style> | |
<style media="screen and (min-width:480px)"> | |
.moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; } | |
</style> | |
<style type="text/css"> | |
@media only screen and (max-width:480px) { | |
table.mj-full-width-mobile { width: 100% !important; } | |
td.mj-full-width-mobile { width: auto !important; } | |
} | |
</style> | |
<style type="text/css"> | |
code { | |
color: black; | |
background: rgba(0,0,0,0.1); | |
padding: 1px 2px; | |
font-size: 90%; | |
} | |
pre > code { | |
color: hsl(220, 14%, 71%); | |
} | |
code, | |
pre { | |
font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', | |
monospace; | |
direction: ltr; | |
text-align: left; | |
white-space: break-spaces; | |
word-spacing: normal; | |
word-break: break-word; | |
line-height: 1.5; | |
-moz-tab-size: 2; | |
-o-tab-size: 2; | |
tab-size: 2; | |
-webkit-hyphens: none; | |
-moz-hyphens: none; | |
-ms-hyphens: none; | |
hyphens: none; | |
} | |
.token.comment, | |
.token.prolog, | |
.token.cdata { | |
color: hsl(220, 10%, 40%); | |
} | |
.token.doctype, | |
.token.punctuation, | |
.token.entity { | |
color: hsl(220, 14%, 71%); | |
} | |
.token.attr-name, | |
.token.class-name, | |
.token.boolean, | |
.token.constant, | |
.token.number, | |
.token.atrule { | |
color: hsl(29, 54%, 61%); | |
} | |
.token.keyword { | |
color: hsl(286, 60%, 67%); | |
} | |
.token.property, | |
.token.tag, | |
.token.symbol, | |
.token.deleted, | |
.token.important { | |
color: hsl(355, 65%, 65%); | |
} | |
.token.selector, | |
.token.string, | |
.token.char, | |
.token.builtin, | |
.token.inserted, | |
.token.regex, | |
.token.attr-value, | |
.token.attr-value > .token.punctuation { | |
color: hsl(95, 38%, 62%); | |
} | |
.token.variable, | |
.token.operator, | |
.token.function { | |
color: hsl(207, 82%, 66%); | |
} | |
.token.url { | |
color: hsl(187, 47%, 55%); | |
} | |
/* HTML overrides */ | |
.token.attr-value > .token.punctuation.attr-equals, | |
.token.special-attr > .token.attr-value > .token.value.css { | |
color: hsl(220, 14%, 71%); | |
} | |
/* CSS overrides */ | |
.language-css .token.selector { | |
color: hsl(355, 65%, 65%); | |
} | |
.language-css .token.property { | |
color: hsl(220, 14%, 71%); | |
} | |
.language-css .token.function, | |
.language-css .token.url > .token.function { | |
color: hsl(187, 47%, 55%); | |
} | |
.language-css .token.url > .token.string.url { | |
color: hsl(95, 38%, 62%); | |
} | |
.language-css .token.important, | |
.language-css .token.atrule .token.rule { | |
color: hsl(286, 60%, 67%); | |
} | |
/* JS overrides */ | |
.language-javascript .token.operator { | |
color: hsl(286, 60%, 67%); | |
} | |
.language-javascript | |
.token.template-string | |
> .token.interpolation | |
> .token.interpolation-punctuation.punctuation { | |
color: hsl(5, 48%, 51%); | |
} | |
/* JSON overrides */ | |
.language-json .token.operator { | |
color: hsl(220, 14%, 71%); | |
} | |
.language-json .token.null.keyword { | |
color: hsl(29, 54%, 61%); | |
} | |
/* MD overrides */ | |
.language-markdown .token.url, | |
.language-markdown .token.url > .token.operator, | |
.language-markdown .token.url-reference.url > .token.string { | |
color: hsl(220, 14%, 71%); | |
} | |
.language-markdown .token.url > .token.content { | |
color: hsl(207, 82%, 66%); | |
} | |
.language-markdown .token.url > .token.url, | |
.language-markdown .token.url-reference.url { | |
color: hsl(187, 47%, 55%); | |
} | |
.language-markdown .token.blockquote.punctuation, | |
.language-markdown .token.hr.punctuation { | |
color: hsl(220, 10%, 40%); | |
font-style: italic; | |
} | |
.language-markdown .token.code-snippet { | |
color: hsl(95, 38%, 62%); | |
} | |
.language-markdown .token.bold .token.content { | |
color: hsl(29, 54%, 61%); | |
} | |
.language-markdown .token.italic .token.content { | |
color: hsl(286, 60%, 67%); | |
} | |
.language-markdown .token.strike .token.content, | |
.language-markdown .token.strike .token.punctuation, | |
.language-markdown .token.list.punctuation, | |
.language-markdown .token.title.important > .token.punctuation { | |
color: hsl(355, 65%, 65%); | |
} | |
/* General */ | |
.token.bold { | |
font-weight: bold; | |
} | |
.token.comment, | |
.token.italic { | |
font-style: italic; | |
} | |
.token.entity { | |
cursor: help; | |
} | |
.token.namespace { | |
opacity: 0.8; | |
} | |
/* Plugin overrides */ | |
/* Selectors should have higher specificity than those in the plugins' default stylesheets */ | |
/* Show Invisibles plugin overrides */ | |
.token.token.tab:not(:empty):before, | |
.token.token.cr:before, | |
.token.token.lf:before, | |
.token.token.space:before { | |
color: hsla(220, 14%, 71%, 0.15); | |
text-shadow: none; | |
} | |
/* Toolbar plugin overrides */ | |
/* Space out all buttons and move them away from the right edge of the code block */ | |
div.code-toolbar > .toolbar.toolbar > .toolbar-item { | |
margin-right: 0.4em; | |
} | |
/* Styling the buttons */ | |
div.code-toolbar > .toolbar.toolbar > .toolbar-item > button, | |
div.code-toolbar > .toolbar.toolbar > .toolbar-item > a, | |
div.code-toolbar > .toolbar.toolbar > .toolbar-item > span { | |
background: hsl(220, 13%, 26%); | |
color: hsl(220, 9%, 55%); | |
padding: 0.1em 0.4em; | |
border-radius: 0.3em; | |
} | |
div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover, | |
div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus, | |
div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover, | |
div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus, | |
div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover, | |
div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus { | |
background: hsl(220, 13%, 28%); | |
color: hsl(220, 14%, 71%); | |
} | |
/* Line Highlight plugin overrides */ | |
/* The highlighted line itself */ | |
.line-highlight.line-highlight { | |
background: hsla(220, 100%, 80%, 0.04); | |
} | |
/* Default line numbers in Line Highlight plugin */ | |
.line-highlight.line-highlight:before, | |
.line-highlight.line-highlight[data-end]:after { | |
background: hsl(220, 13%, 26%); | |
color: hsl(220, 14%, 71%); | |
padding: 0.1em 0.6em; | |
border-radius: 0.3em; | |
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */ | |
} | |
/* Hovering over a linkable line number (in the gutter area) */ | |
/* Requires Line Numbers plugin as well */ | |
pre[id].linkable-line-numbers.linkable-line-numbers | |
span.line-numbers-rows | |
> span:hover:before { | |
background-color: hsla(220, 100%, 80%, 0.04); | |
} | |
/* Line Numbers and Command Line plugins overrides */ | |
/* Line separating gutter from coding area */ | |
.line-numbers.line-numbers .line-numbers-rows, | |
.command-line .command-line-prompt { | |
border-right-color: hsla(220, 14%, 71%, 0.15); | |
} | |
/* Stuff in the gutter */ | |
.line-numbers .line-numbers-rows > span:before, | |
.command-line .command-line-prompt > span:before { | |
color: hsl(220, 14%, 45%); | |
} | |
/* Match Braces plugin overrides */ | |
/* Note: Outline colour is inherited from the braces */ | |
.rainbow-braces .token.token.punctuation.brace-level-1, | |
.rainbow-braces .token.token.punctuation.brace-level-5, | |
.rainbow-braces .token.token.punctuation.brace-level-9 { | |
color: hsl(355, 65%, 65%); | |
} | |
.rainbow-braces .token.token.punctuation.brace-level-2, | |
.rainbow-braces .token.token.punctuation.brace-level-6, | |
.rainbow-braces .token.token.punctuation.brace-level-10 { | |
color: hsl(95, 38%, 62%); | |
} | |
.rainbow-braces .token.token.punctuation.brace-level-3, | |
.rainbow-braces .token.token.punctuation.brace-level-7, | |
.rainbow-braces .token.token.punctuation.brace-level-11 { | |
color: hsl(207, 82%, 66%); | |
} | |
.rainbow-braces .token.token.punctuation.brace-level-4, | |
.rainbow-braces .token.token.punctuation.brace-level-8, | |
.rainbow-braces .token.token.punctuation.brace-level-12 { | |
color: hsl(286, 60%, 67%); | |
} | |
/* Diff Highlight plugin overrides */ | |
/* Taken from https://github.com/atom/github/blob/master/styles/variables.less */ | |
pre.diff-highlight > code .token.token.deleted:not(.prefix), | |
pre > code.diff-highlight .token.token.deleted:not(.prefix) { | |
background-color: hsla(353, 100%, 66%, 0.15); | |
} | |
pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection, | |
pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection, | |
pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection, | |
pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection { | |
background-color: hsla(353, 95%, 66%, 0.25); | |
} | |
pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection, | |
pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection, | |
pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection, | |
pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection { | |
background-color: hsla(353, 95%, 66%, 0.25); | |
} | |
pre.diff-highlight > code .token.token.inserted:not(.prefix), | |
pre > code.diff-highlight .token.token.inserted:not(.prefix) { | |
background-color: hsla(137, 100%, 55%, 0.15); | |
} | |
pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection, | |
pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection, | |
pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection, | |
pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection { | |
background-color: hsla(135, 73%, 55%, 0.25); | |
} | |
pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection, | |
pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection, | |
pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection, | |
pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection { | |
background-color: hsla(135, 73%, 55%, 0.25); | |
} | |
/* Previewers plugin overrides */ | |
/* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-dark-ui */ | |
/* Border around popup */ | |
.prism-previewer.prism-previewer:before, | |
.prism-previewer-gradient.prism-previewer-gradient div { | |
border-color: hsl(224, 13%, 17%); | |
} | |
/* Angle and time should remain as circles and are hence not included */ | |
.prism-previewer-color.prism-previewer-color:before, | |
.prism-previewer-gradient.prism-previewer-gradient div, | |
.prism-previewer-easing.prism-previewer-easing:before { | |
border-radius: 0.3em; | |
} | |
/* Triangles pointing to the code */ | |
.prism-previewer.prism-previewer:after { | |
border-top-color: hsl(224, 13%, 17%); | |
} | |
.prism-previewer-flipped.prism-previewer-flipped.after { | |
border-bottom-color: hsl(224, 13%, 17%); | |
} | |
/* Background colour within the popup */ | |
.prism-previewer-angle.prism-previewer-angle:before, | |
.prism-previewer-time.prism-previewer-time:before, | |
.prism-previewer-easing.prism-previewer-easing { | |
background: hsl(219, 13%, 22%); | |
} | |
/* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */ | |
/* For time, this is the alternate colour */ | |
.prism-previewer-angle.prism-previewer-angle circle, | |
.prism-previewer-time.prism-previewer-time circle { | |
stroke: hsl(220, 14%, 71%); | |
stroke-opacity: 1; | |
} | |
/* Stroke colours of the handle, direction point, and vector itself */ | |
.prism-previewer-easing.prism-previewer-easing circle, | |
.prism-previewer-easing.prism-previewer-easing path, | |
.prism-previewer-easing.prism-previewer-easing line { | |
stroke: hsl(220, 14%, 71%); | |
} | |
/* Fill colour of the handle */ | |
.prism-previewer-easing.prism-previewer-easing circle { | |
fill: transparent; | |
} | |
</style> | |
<meta name="color-scheme" content="light"/><meta name="supported-color-schemes" content="light"/> | |
</head> | |
<body style="word-spacing:normal;"> | |
<div | |
style="" | |
> | |
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--> | |
<div style="margin:0px auto;max-width:600px;"> | |
<table | |
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;" | |
> | |
<tbody> | |
<tr> | |
<td | |
style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;" | |
> | |
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]--> | |
<div | |
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;" | |
> | |
<table | |
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%" | |
> | |
<tbody> | |
<tr> | |
<td | |
align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;" | |
> | |
<table | |
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;" | |
> | |
<tbody> | |
<tr> | |
<td style="width:550px;"> | |
<img | |
height="auto" src="https://res.cloudinary.com/fronttoback/image/upload/v1659799377/fronttoback-email-course-headers/01-01-the-start-to-understanding-the-internet_2x_wi2kcw.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="550" | |
/> | |
</td> | |
</tr> | |
</tbody> | |
</table> | |
</td> | |
</tr> | |
<tr> | |
<td | |
align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;" | |
> | |
<div | |
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.65;text-align:left;color:#000000;" | |
>Hello, {{ subscriber.first_name | default: "friend" }}! 👋</div> | |
</td> | |
</tr> | |
<tr> | |
<td | |
align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;" | |
> | |
<div | |
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.65;text-align:left;color:#000000;" | |
>We live on the web.</div> | |
</td> | |
</tr> | |
<tr> | |
<td | |
align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;" | |
> | |
<div | |
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.65;text-align:left;color:#000000;" | |
>We work on the web.</div> | |
</td> | |
</tr> | |
<tr> | |
<td | |
align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;" | |
> | |
<div | |
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.65;text-align:left;color:#000000;" | |
>We love the web (on most days, at least).</div> | |
</td> | |
</tr> | |
<tr> | |
<td | |
align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;" | |
> | |
<div | |
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.65;text-align:left;color:#000000;" | |
>So it makes sense that we should know how the web works, right?</div> | |
</td> | |
</tr> | |
<tr> | |
<td | |
align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;" | |
> | |
<div | |
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.65;text-align:left;color:#000000;" | |
>Of course, we do! We're developers, after all.</div> | |
</td> | |
</tr> | |
<tr> | |
<td | |
align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;" | |
> | |
<div | |
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.65;text-align:left;color:#000000;" | |
>We've worked on dozens, if not hundreds, of websites.</div> | |
</td> | |
</tr> | |
<tr> | |
<td | |
align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;" | |
> | |
<div | |
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.65;text-align:left;color:#000000;" | |
>So when you type the URL for one of them into your browser's address bar, you know exactly how the website you built and deployed makes it back to your screen, right?</div> | |
</td> | |
</tr> | |
<tr> | |
<td | |
align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;" | |
> | |
<div | |
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.65;text-align:left;color:#000000;" | |
>Right?</div> | |
</td> | |
</tr> | |
<tr> | |
<td | |
align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;" | |
> | |
<div | |
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.65;text-align:left;color:#000000;" | |
>I didn't.</div> | |
</td> | |
</tr> | |
<tr> | |
<td | |
align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;" | |
> | |
<div | |
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.65;text-align:left;color:#000000;" | |
>Years into my career as a frontend developer, I didn't truly understand many fundamentals of how the web works.</div> | |
</td> | |
</tr> | |
<tr> | |
<td | |
align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;" | |
> | |
<div | |
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.65;text-align:left;color:#000000;" | |
>Perhaps you're a bit ahead of where I was. You know that a URL is a human-readable alias for an address to a specific location on a network.</div> | |
</td> | |
</tr> | |
<tr> | |
<td | |
align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;" | |
> | |
<div | |
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.65;text-align:left;color:#000000;" | |
>You know that entering the URL into your browser's address bar sends a request for the website you want to see to said network.</div> | |
</td> | |
</tr> | |
<tr> | |
<td | |
align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;" | |
> | |
<div | |
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.65;text-align:left;color:#000000;" | |
>You know that the network validates the request and, if everything checks out, responds with the content you asked for by typing the URL.</div> | |
</td> | |
</tr> | |
<tr> | |
<td | |
align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;" | |
> | |
<div | |
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.65;text-align:left;color:#000000;" | |
>What happens is a long journey, a series of connecting flights to various destinations, where each stop provides more context for the next leg of the trip.</div> | |
</td> | |
</tr> | |
<tr> | |
<td | |
align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;" | |
> | |
<div | |
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.65;text-align:left;color:#000000;" | |
>Understanding the critical components of how the internet works are just the start to becoming proficient with backend development.</div> | |
</td> | |
</tr> | |
<tr> | |
<td | |
align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;" | |
> | |
<div | |
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.65;text-align:left;color:#000000;" | |
>In the next lesson, we'll cover IP Addresses & Protocols.</div> | |
</td> | |
</tr> | |
<tr> | |
<td | |
align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;" | |
> | |
<div | |
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:24px;font-weight:800;line-height:1.4;text-align:left;color:#000000;" | |
>Challenge</div> | |
</td> | |
</tr> | |
<tr> | |
<td | |
align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;" | |
> | |
<div | |
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.65;text-align:left;color:#000000;" | |
>When a user enters a URL into the address bar, a signal is sent... somewhere.</div> | |
</td> | |
</tr> | |
<tr> | |
<td | |
align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;" | |
> | |
<div | |
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.65;text-align:left;color:#000000;" | |
>Your task is to take a minute or two and consider where the request makes its first stop on its journey to deliver a webpage.</div> | |
</td> | |
</tr> | |
<tr> | |
<td | |
align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;" | |
> | |
<div | |
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.65;text-align:left;color:#000000;" | |
>Got some ideas? Write them down here. I'll read every one of these responses!</div> | |
</td> | |
</tr> | |
<tr> | |
<td | |
align="center" vertical-align="middle" style="font-size:0px;padding:20px;word-break:break-word;" | |
> | |
<table | |
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;" | |
> | |
<tbody> | |
<tr> | |
<td | |
align="center" bgcolor="#000000" role="presentation" style="border:none;border-radius:0px;cursor:auto;mso-padding-alt:10px 25px;background:#000000;" valign="middle" | |
> | |
<a | |
href="http://localhost:3019/answer?question=firstStop" style="display:inline-block;background:#000000;color:#FFFFFF;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;font-weight:600;line-height:30px;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:0px;" target="_blank" | |
> | |
Answer and Cement Your Knowledge | |
</a> | |
</td> | |
</tr> | |
</tbody> | |
</table> | |
</td> | |
</tr> | |
<tr> | |
<td | |
align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;" | |
> | |
<div | |
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.65;text-align:left;color:#000000;" | |
><strong>PS:</strong> You can expect to have the next lesson tomorrow in your Inbox, but if you can't wait until tomorrow, you'll always receive the next one whenever you complete the challenges.</div> | |
</td> | |
</tr> | |
</tbody> | |
</table> | |
</div> | |
<!--[if mso | IE]></td></tr></table><![endif]--> | |
</td> | |
</tr> | |
</tbody> | |
</table> | |
</div> | |
<!--[if mso | IE]></td></tr></table><![endif]--> | |
</div> | |
</body> | |
</html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment