@@ -37,7 +54,9 @@

The Basic Language of the Web: HTML

width="50" /> -

Posted by Laura Jones on Monday, June 21st 2027

Why should you learn HTML?

- + diff --git a/starter/03-CSS-Fundamentals/notes/img/ch22_how_we_select_and_style_elements.png b/starter/03-CSS-Fundamentals/notes/img/ch22_how_we_select_and_style_elements.png new file mode 100644 index 000000000..a4a71b258 Binary files /dev/null and b/starter/03-CSS-Fundamentals/notes/img/ch22_how_we_select_and_style_elements.png differ diff --git a/starter/03-CSS-Fundamentals/notes/img/ch22_what_is_css.png b/starter/03-CSS-Fundamentals/notes/img/ch22_what_is_css.png new file mode 100644 index 000000000..933994ce7 Binary files /dev/null and b/starter/03-CSS-Fundamentals/notes/img/ch22_what_is_css.png differ diff --git a/starter/03-CSS-Fundamentals/notes/img/ch26_defining_colors_in_css.png b/starter/03-CSS-Fundamentals/notes/img/ch26_defining_colors_in_css.png new file mode 100644 index 000000000..df9ad8d49 Binary files /dev/null and b/starter/03-CSS-Fundamentals/notes/img/ch26_defining_colors_in_css.png differ diff --git a/starter/03-CSS-Fundamentals/notes/img/ch26_shades_of_grey.png b/starter/03-CSS-Fundamentals/notes/img/ch26_shades_of_grey.png new file mode 100644 index 000000000..9e63588f9 Binary files /dev/null and b/starter/03-CSS-Fundamentals/notes/img/ch26_shades_of_grey.png differ diff --git a/starter/03-CSS-Fundamentals/notes/img/ch26_the_rgb_model.png b/starter/03-CSS-Fundamentals/notes/img/ch26_the_rgb_model.png new file mode 100644 index 000000000..8fbf945fb Binary files /dev/null and b/starter/03-CSS-Fundamentals/notes/img/ch26_the_rgb_model.png differ diff --git a/starter/03-CSS-Fundamentals/notes/img/ch34_element_height_and_width_calculation.png b/starter/03-CSS-Fundamentals/notes/img/ch34_element_height_and_width_calculation.png new file mode 100644 index 000000000..f87ec1428 Binary files /dev/null and b/starter/03-CSS-Fundamentals/notes/img/ch34_element_height_and_width_calculation.png differ diff --git a/starter/03-CSS-Fundamentals/notes/img/ch34_the_box_model.png b/starter/03-CSS-Fundamentals/notes/img/ch34_the_box_model.png new file mode 100644 index 000000000..e2ca935d2 Binary files /dev/null and b/starter/03-CSS-Fundamentals/notes/img/ch34_the_box_model.png differ diff --git a/starter/03-CSS-Fundamentals/notes/img/conflicting_selectors_and_declarations.png b/starter/03-CSS-Fundamentals/notes/img/conflicting_selectors_and_declarations.png new file mode 100644 index 000000000..26b5301b8 Binary files /dev/null and b/starter/03-CSS-Fundamentals/notes/img/conflicting_selectors_and_declarations.png differ diff --git a/starter/03-CSS-Fundamentals/notes/img/element_height_and_width_calculation.png b/starter/03-CSS-Fundamentals/notes/img/element_height_and_width_calculation.png new file mode 100644 index 000000000..9c409e7a5 Binary files /dev/null and b/starter/03-CSS-Fundamentals/notes/img/element_height_and_width_calculation.png differ diff --git a/starter/03-CSS-Fundamentals/notes/img/how_inheritance_works.png b/starter/03-CSS-Fundamentals/notes/img/how_inheritance_works.png new file mode 100644 index 000000000..24cc223e7 Binary files /dev/null and b/starter/03-CSS-Fundamentals/notes/img/how_inheritance_works.png differ diff --git a/starter/03-CSS-Fundamentals/notes/img/resolving_conflicing_selectors.png b/starter/03-CSS-Fundamentals/notes/img/resolving_conflicing_selectors.png new file mode 100644 index 000000000..b25ecd20c Binary files /dev/null and b/starter/03-CSS-Fundamentals/notes/img/resolving_conflicing_selectors.png differ diff --git a/starter/03-CSS-Fundamentals/notes/index.html b/starter/03-CSS-Fundamentals/notes/index.html new file mode 100644 index 000000000..84ef9b8ec --- /dev/null +++ b/starter/03-CSS-Fundamentals/notes/index.html @@ -0,0 +1,513 @@ + + + + + CSS Fundamentals Notes + + + +

+ +

Ch. 22 Introduction to CSS

+ +

Ch. 23 Inline, Internal and External CSS

Inline CSS

An Example of inline CSS


++<h1 style="color: blue;">...</h1>
+...
+<h1 style="color: blue;">...</h1>
+...
+
+

+ +

Internal CSS

An Example of Internal CSS


++<!DOCTYPE html>
+<html>
+<head>
+  ...
+  <style>
+    h1 { 
+      color: blue;
+    }
+  </style>
+</head>
+<body>
+<h1>...<h1>
+</body>
+</html>
+
+

+ +

External CSS

An Example of External CSS

style.css


++h1 { 
+color: blue;
+}
+
+

+ +

index.html


++<!DOCTYPE html>
+<html>
+<head>
+  ...
+  <link href="style.css" rel="stylesheet">
+</head>
+<body>
+  <h1>...<h1>
+  ...
+  <h1>...<h1>
+  ...
+</body>
+</html>
+
+

+ +

Separation of Concern (SoC)

+ A design principle of separating a program into sections, with each section having a singular concern. +

+ +

Don't Repeat Yourself (DRY) (Modular Design)

+ When Separation of Concern is adhered to strongly enough, sections of a program can be re-used, + thereby reducing the amount of repetative code. +

+ +

+ With 'Modular Design' in mind, the best to worst approach would be external, + internal and then inline CSS. +

+ +

Ch 24. Styling Text

A Selection of Properties

color
font-family
font-size
font-style
line-height
text-align
text-transform

Serif means those short, spike-like edges of text.

The default font-size is 16px.

+ It's not about memorizing every property, since therea rea so many, rather get + to know what is possible with CSS, and in time, you will memorize properties that + you use a lot. +

+ +

Ch. 25 Combining Selectors

Why Combine Selectors?

It reduces the repetativeness of writing CSS (DRY).

+ +

List-Selectors

+ A list of selectors supplied for a CSS rule, whereby every match, for example: +


+h1, h2, h3, h4, p, li {
+...
+}
+

+ +

Descendent-Selectors

+ A string of selectors, separated by white-space, supplied for a + CSS rule, for example: +


+p strong {
+  ...
+}
+

+ Descendent-selectors are incredibly useful, but if it is written as to + reflect the HTML structure, it will lead to code that is harder to + maintain in the future. +

+ +

Ch. 26 Class and ID Selectors

+ By adding class and id attributes to elements, class and ID selectors + can be supplied for a CSS rule. +

An ID may only appear once within the html code, whereas a class may appear any number of times.

+ It is a standard convention for classes and IDs comprising of multiple + words to be strung together by using dashes. +

+ If multiple CSS rules apply to the same element, then technically they + all apply (more later). +

Examples

ID Selector

style.css


+#author {
+  ...
+}
+

index.html

+ <p id="author">...</p> +

Class Selector

style.css


+.author {
+  ...
+}
+

index.html


+<p class="author">...</p>
+<p class="author">...</p>
+
+

Why use classes over IDs?

+ In the real world, using IDs often lead to more code refactoring, and + bugs when the project develops further. This is mitigated by using + classes over IDs, even if the CSS rule is only meant to be applied to + a single element. +

+ +

Ch. 27 Working with Colors

+ When multiple of the same style is applied to an element, the last one + is taken (more later). +

+ It is an industry standard to represent a color using the hexidecimal + model, or rgba if transparency (alpha) is desired. +

+ It is not reasonable to memorize or know many colors, instead, using a + color picker is standard. +

+ VSCode has a built-in color picker that can be accessed by typing any + hexidecimal value (#fff, for example), and then clicking this + hexidecimal value. +

+ VSCode's color picker provides different models for values, which can + be cycled through by clicking the value at the top of the color + picker. +

+ A short-hand property is a special property that can be used to define + multiple properties in a single declaration. +

New Properties

border
border-color
border-style
border-width
border-top
border-top-color
border-top-style
border-top-width
border-right
...
border-bottom
...
border-left
...

+ +

Ch. 28 Pseudo-Classes

Pseudo-classes begin with a colon.

Pseudo-classes are useful for selecting elements that match a more complex pattern.

A Selection of Pseudo-classes

li:first-child
li:last-child
li:nth-child(2)
li:nth-child(odd)
li:first-of-type

+ +

Ch. 29 Styling Links

+ It is not good practice to only use the element-selector for styling + links. Links have a few states, that can be selected in CSS by use of + specific pseudo-class selectors. +

Link pseudo-classes are always written in a specific order:

:link
:visited
:hover
:active

+ deviating from this order typically results in undesirable css being applied + to a particular state +

It may be useful to think of the acronym LVHA.

New Property

+ text-decoration +

+ +

Ch. 30 Using Chrome Dev Tools

+ Features within the Chrome Browser (and other browsers) that provide + additional tools to help developers. +

+ +

+ Whilst inspecting an element, all of the CSS rules that were applied + to it are shown. +

+ +

Each CSS rule provides their source.

+ +

+ The "User Agent Stylesheet" source is the default CSS for that element + selector. +

+ +

+ The state of a link element can be 'forced' by ticking the + corresponding pseudo-class. +

+ +

Ch. 31 CSS Theory #1: Conflicts Between Selectors

+ If the hierarchy alone cannot resolve a conflict, then the last read conflicting + declaration is applied. +

+ In VSCode, mousing over a CSS selector will show the "Selector + Specificity". +

+ Selector Specificity indicates the priority of the selector, highest + to lowest priority read from left to right. +

+ +

Ch. 32 CSS Theory #2: Inheritance and the Universal Selector

+ An inherited property is very easily overwritten by any rule which has + a value for that same property. +

+ Inheritance does not conflict with other selectors, rather, + inheritance works by applying styles to all child elements. +

+ By contrast, the universal selector applies to every element, and thus + can conflict with other selectors. +

+ +

Ch. 33 Challenge #1

+ Challenge #1 +

+ +

Ch. 34 CSS Theory #3: The CSS Box Model

+ The box model defines how elements are displayed, and sized on a webpage. +

+ +

Ch. 35 Using Margins and Paddings

+ +

New Properties:

padding
padding-top
padding-bottom
padding-left
padding-right
margin
margin-top
margin-bottom
margin-left
margin-right

+ +

Global Reset

+ Browsers add default styling to elements that may not be desirable, and an effecient way to remove some + of this styling is to override it using the universal selector: +

+ +


+  +  * {
+    margin: 0;
+    padding: 0;
+  }
+  
+

+ +

+ Lists require spacing to show the numbering or bullets, so along with the global reset, margin should be added + to the left side of them. +

+ +

+ Use margin-top and margin-bottom to create vertical space. It is best practice to only + use one of these styles. +

+ +

Collapsing Margins

+ When two margins would occupy the same space, only the larger one of the two is effective. +

+ +

Ch. 36 Adding Dimensions

New Properties:

width
height

+ +

Ch. 37 Centering Our Page

+ A simple way to center the page would be to place the entire page's body into + a container, then set that container's width to a constant value and set the + left and right margin to auto: +

+ +


+  +  <head>
+    ...
+    <style>
+      .container {
+        width: 800px;
+        margin: 0 auto;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">. . .</div>
+  </body>
+  
+

+ +

+ There is no specific element that semantically represents this container, so <div> is fine +

+ +

Ch. 38 Challenge #2

+ Challenge #2 +

+ + diff --git a/starter/03-CSS-Fundamentals/notes/style.css b/starter/03-CSS-Fundamentals/notes/style.css new file mode 100644 index 000000000..47137bf12 --- /dev/null +++ b/starter/03-CSS-Fundamentals/notes/style.css @@ -0,0 +1,40 @@ +* { + background-color: #f7f7f7; + color: #444; + margin: 0; + padding: 0; +} + +.page-container { + width: 825px; + margin: 50px auto; + font-family: arial; +} + +img { + width: 100%; +} + +p { + margin: 10px 0; +} + +ul, ol { + margin-left: 22px; +} + +.chapter { + margin-bottom: 40px; +} + +.chapter-heading { + margin-bottom: 20px; +} + +.chapter-sub-section, .lecture-slide { + margin-bottom: 15px; +} + +.chapter-sub-section-heading { + margin-bottom: 7px; +} \ No newline at end of file diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css new file mode 100644 index 000000000..f03baaa5c --- /dev/null +++ b/starter/03-CSS-Fundamentals/style.css @@ -0,0 +1,160 @@ +/* * { + border-top: 10px solid #1098ad; +} */ + +body { + color: #444; + font-family: sans-serif; + /* border-top: 10px solid #1098ad; */ +} + +h1 { + /* color: blue; */ + font-size: 26px; + text-transform: uppercase; + font-style: italic; +} + +h2 { + font-size: 40px; +} + +h3 { + font-size: 30px; +} + +h4 { + font-size: 20px; + text-transform: uppercase; + text-align: center; +} + +p { + font-size: 22px; + line-height: 1.5; +} + +li { + font-size: 20px; +} + +/* footer p { + font-size: 16px; +} */ + +/* article header p { + font-style: italic; +} */ + +#author { + font-style: italic; + font-size: 18px; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +.related { + list-style: none; +} + +h1, +h2, +h3 { + color: #1098ad; +} + +.main-header { + background-color: #f7f7f7; +} + +aside { + background-color: #f7f7f7; + /* border: 5px solid #1098ad; */ + /* border-left: 5px solid #1098ad; */ + /* border-right: 5px solid #1098ad; */ + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; +} + +/* body { + background-color: blue; +} */ + +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; +} + +/* +li:nth-child(2) { + color: red; +} + +li:nth-child(odd) { + color: red; +} + +li:nth-child(even) { + color: red; +} + */ + +/* article p:last-child { + color: red; +} */ + +a:link { + color: #1098ad; + text-decoration: none; +} + +a:visited { + color: #1098ad; + text-decoration: none; +} + +a:hover { + color: orangered; + font-weight: bold; + /* text-decoration: underline dotted orangered; */ + text-decoration: underline orangered; +} + +a:active { + background-color: black; + font-style: italic; +} + +/* resolving conflicts */ +/* +#copyright { + color: red; +} + +.copyright { + color: blue; +} + +.text { + color: yellow; +} + +footer p { + color: green !important; +} */ + +/* nav a:link, +nav strong { + font-size: 18px; +} */ + +/* nav { + font-size: 18px; +} + */ diff --git a/starter/05-Design/index.html b/starter/05-Design/index.html index 92b74fd48..4dfcc5516 100644 --- a/starter/05-Design/index.html +++ b/starter/05-Design/index.html @@ -4,7 +4,10 @@ - + + + + Lisbon Chair Shop @@ -27,6 +30,9 @@

We design and build better chairs, for a better life

What makes our chairs special

Science meets design

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus @@ -35,6 +41,9 @@

What makes our chairs special

Maximal comfort

@@ -45,6 +54,9 @@

What makes our chairs special

Ethical and sustainable

@@ -81,15 +93,27 @@

The Laid Back

+ Leisure and relaxing
+ Comfortable for 4h
+ Vegan leather
+ Weighs 16 kg

@@ -106,15 +130,27 @@

The Laid Back

The Worker Bee

+ Work
+ Comfortable for 8h
+ Vegan leather
+ Weighs 22 kg

@@ -131,15 +167,27 @@

The Worker Bee

The Chair 4/2

+ Leisure and relaxing
+ Comfortable all day!
+ Organic cotton
+ Weighs 80 kg

diff --git a/starter/05-Design/style.css b/starter/05-Design/style.css index 77dfdffa3..520db6fe6 100644 --- a/starter/05-Design/style.css +++ b/starter/05-Design/style.css @@ -6,6 +6,11 @@ FONT SIZE SYSTEM (px) 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 */ +/* +MAIN COLOR: #087f5b +GREY COLOR: #343a40 +*/ + * { margin: 0; padding: 0; @@ -16,7 +21,9 @@ FONT SIZE SYSTEM (px) /* GENERAL STYLES */ /* ------------------------ */ body { - font-family: sans-serif; + font-family: 'Inter', sans-serif; + color: #343a40; + border-bottom: 8px solid #087f5b; } .container { @@ -26,11 +33,13 @@ body { header, section { - margin-bottom: 48px; + margin-bottom: 96px; } h2 { margin-bottom: 48px; + font-size: 36px; + letter-spacing: -0.5px; } .grid-3-cols { @@ -39,6 +48,37 @@ h2 { column-gap: 80px; } +.btn:link, +.btn:visited { + background-color: #087f5b; + color: #fff; + text-decoration: none; + text-transform: uppercase; + font-weight: 500; + display: inline-block; + /* simply has to be g.t. the height of the element */ + border-radius: 1000px; +} + +.btn:hover, +.btn:active { + background-color: #099268; +} + +.btn--big { + font-size: 18px; + padding: 16px 32px; +} + +.btn--small { + font-size: 14px; + padding: 8px 12px; +} + +img { + border-radius: 12px; +} + /* ------------------------ */ /* COMPONENT STYLES */ /* ------------------------ */ @@ -48,7 +88,7 @@ header { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 80px; - margin-top: 48px; + margin-top: 64px; } .header-text-box { @@ -56,11 +96,18 @@ header { } h1 { - margin-bottom: 24px; + margin-bottom: 32px; + font-size: 44px; + line-height: 1.1; + letter-spacing: -1px; + + /* text-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); */ } .header-text { margin-bottom: 24px; + font-size: 18px; + line-height: 1.7; } img { @@ -69,17 +116,28 @@ img { /* FEATURES */ .features-icon { + stroke: #087f5b; + width: 32px; + height: 32px; + margin-bottom: 24px; } .features-title { margin-bottom: 16px; + font-size: 20px; } .features-text { + font-size: 18px; + line-height: 1.7; } /* TESTIMONIAL */ .testimonial-section { + background-color: #087f5b; + color: #fff; + padding: 24px; + border-radius: 12px; } .testimonial-box { @@ -89,25 +147,44 @@ img { .testimonial-box h2 { margin-bottom: 24px; + font-size: 24px; +} + +.testimonial-author { + color: #c3fae8; } .testimonial-text { font-style: italic; margin-bottom: 24px; + font-size: 18px; + line-height: 1.7; + color: #e6fcf5; } /* CHAIRS */ +.chair { + box-shadow: 0 20px 30px 0px rgba(0, 0, 0, 0.07); + border-radius: 12px; +} + +.chair img { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + .chair-box { - padding: 24px; + padding: 32px; } h3 { margin-bottom: 24px; + font-size: 20px; } .chair-details { list-style: none; - margin-bottom: 24px; + margin-bottom: 48px; } .chair-details li { @@ -122,13 +199,20 @@ h3 { } .chair-icon { + stroke: #087f5b; + width: 24px; + height: 24px; } .chair-price { display: flex; justify-content: space-between; + font-size: 20px; + align-items: center; } footer { margin-bottom: 48px; + font-size: 14px; + color: #495057; } diff --git a/starter/06-Components/01-accordion.html b/starter/06-Components/01-accordion.html new file mode 100644 index 000000000..e816e84aa --- /dev/null +++ b/starter/06-Components/01-accordion.html @@ -0,0 +1,198 @@ + + + + + + + Accordion Component + + + + + + + +

Where are these chairs assembled?

+ + +

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias + magni sed cumque, corporis earum facilis rem aspernatur dignissimos + et reiciendis deleniti nesciunt omnis voluptates at commodi eveniet + maiores aut id. +

Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ Fugiat libero aperiam minus necessitatibus assumenda pariatur. +
+ Soluta distinctio cumque provident eos autem, temporibus ipsum. +
Rerum eveniet molestias laborum officia tenetur beatae.

How long do I hace to return my chair

+ + +

Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ Fugiat libero aperiam minus necessitatibus assumenda pariatur. +
+ Soluta distinctio cumque provident eos autem, temporibus ipsum. +
Rerum eveniet molestias laborum officia tenetur beatae.

Do you ship to countries outside the EU?

+ + +

Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ Fugiat libero aperiam minus necessitatibus assumenda pariatur. +
+ Soluta distinctio cumque provident eos autem, temporibus ipsum. +
Rerum eveniet molestias laborum officia tenetur beatae.

+ + + \ No newline at end of file diff --git a/starter/06-Components/02-carousel.html b/starter/06-Components/02-carousel.html new file mode 100644 index 000000000..334813a73 --- /dev/null +++ b/starter/06-Components/02-carousel.html @@ -0,0 +1,172 @@ + + + + + + + Carousel Component + + + + + + + + +

+
+ "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam voluptatum cumque, aspernatur iusto + mollitia sunt magnam." +
+
Maria de Almeida
+
Senior Product Manager at EDP Comercial
+

+ + + +

+ + + + +

+ + + \ No newline at end of file diff --git a/starter/06-Components/03-table.html b/starter/06-Components/03-table.html new file mode 100644 index 000000000..bd39287c1 --- /dev/null +++ b/starter/06-Components/03-table.html @@ -0,0 +1,115 @@ + + + + + + + Table Component + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Chair	The Laid Back	The Worker Bee	The Chair 4/2
Width	80 cm	60 cm	220 cm
Height	100 cm	110 cm	90 cm
Depth	70 cm	65 cm	80 cm
Weight	16 kg	22 kg	80 kg

+ + + \ No newline at end of file diff --git a/starter/06-Components/04-pagination.html b/starter/06-Components/04-pagination.html new file mode 100644 index 000000000..89762efd9 --- /dev/null +++ b/starter/06-Components/04-pagination.html @@ -0,0 +1,123 @@ + + + + + + + Challenge 01 + + + + + + + +

+ + + + + 1 + 2 + 3 + 4 + 5 + 6 + ... + 23 + + + + +

+ + + \ No newline at end of file diff --git a/starter/06-Components/05-hero.html b/starter/06-Components/05-hero.html new file mode 100644 index 000000000..445ea1337 --- /dev/null +++ b/starter/06-Components/05-hero.html @@ -0,0 +1,121 @@ + + + + + + + Omnifood hero section + + + + + + + +

+ + +

Some random heading

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quisquam corrupti, quis quam qui, quasi quae + dignissimos cumque assumenda doloremque vero, minima officia magnam excepturi quidem repellendus maxime + impedit debitis. Labore.

+ + + \ No newline at end of file diff --git a/starter/06-Components/06-app-layout.html b/starter/06-Components/06-app-layout.html new file mode 100644 index 000000000..7bd5502d5 --- /dev/null +++ b/starter/06-Components/06-app-layout.html @@ -0,0 +1,114 @@ + + + + + + + App Layout + + + + + + + + + + + + +

Email 1

Email 2

Email 3

Email 4

Email 5

Email 6

Email 7

Email 8

Email 9

Email 10

Email view

+ + + + \ No newline at end of file diff --git a/starter/07-Omnifood-Desktop/content/content.md b/starter/07-Omnifood-Desktop/content/content.md index 7193e017f..a5de93a58 100644 --- a/starter/07-Omnifood-Desktop/content/content.md +++ b/starter/07-Omnifood-Desktop/content/content.md @@ -1,4 +1,4 @@ -# Omnifood + # Omnifood ## About Omnifood @@ -126,3 +126,18 @@ Careers Recipe directory Help center Privacy & terms + + +###### + +## sections + +- Logo + Navigation +- Hero +- Featured in +- How it works +- Meals (and list of diets) +- Testimonials + gallery +- Pricing + features +- CTA +- Footer \ No newline at end of file

BLOG

Converse Chuck Taylor All Star Low top

Product details

What is HTML?

Why should you learn HTML?

HTML Fundametals

Ch. 11 - HTML Document Structure

Non-optional Elements

doctype element

Head Element

Body Element

Indentation

Headings

Bold Text

Italicized Text

Converse Chuck Taylor All Star Low top

Product details

Converse Chuck Taylor All Star Low top

Product details

The Basic Language of the Web: HTML

The Basic Language of the Web: HTML

style.css

index.html

style.css

index.html