diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json new file mode 100644 index 000000000..e548c461e --- /dev/null +++ b/.devcontainer/devcontainer.json @@ -0,0 +1,34 @@ +// For format details, see https://aka.ms/devcontainer.json. For config options, see the +// README at: https://github.com/devcontainers/templates/tree/main/src/ubuntu +{ + "name": "Ubuntu", + // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile + "image": "mcr.microsoft.com/devcontainers/base:jammy", + "customizations": { + "vscode": { + "extensions": [ + "formulahendry.auto-close-tag", + "formulahendry.auto-rename-tag", + "naumovs.color-highlight", + "kisstkondoros.vscode-gutter-preview", + "esbenp.prettier-vscode", + "ritwickdey.LiveServer" + ] + } + } + + // Features to add to the dev container. More info: https://containers.dev/features. + // "features": {}, + + // Use 'forwardPorts' to make a list of ports inside the container available locally. + // "forwardPorts": [], + + // Use 'postCreateCommand' to run commands after the container is created. + // "postCreateCommand": "uname -a", + + // Configure tool-specific properties. + // "customizations": {}, + + // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. + // "remoteUser": "root" +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..0f4dff687 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,7 @@ +{ + "files.autoSave": "onFocusChange", + "editor.formatOnSave": true, + "editor.wordWrap": "on", + "editor.tabSize": 2, + "liveServer.settings.port": 5501 +} diff --git a/frameworks/picocss/101_start_page.html b/frameworks/picocss/101_start_page.html new file mode 100644 index 000000000..03991d8df --- /dev/null +++ b/frameworks/picocss/101_start_page.html @@ -0,0 +1,78 @@ + + + + + + + + + + Your Product + + + + + + + + +
+ + +
+

Welcome to Your Product

+

Capable, open-source electronics for your next project.

+ Learn More +
+ + +
+

Features

+
+

Reliable Hardware

+

Our controllers provide unmatched performance in embedded systems.

+
+
+
+ +
1
+
2
+
3
+ +
+
+
+

Open Source

+

We embrace open-source principles, giving you full control of the software stack.

+
+
+

Consulting Services

+

Need help? We offer consultancy for your electronic projects.

+
+
+ + +
+

Get Started with Your Product

+ Contact Us +
+ + +
+ + + + + + diff --git a/frameworks/picocss/basic.html b/frameworks/picocss/basic.html new file mode 100644 index 000000000..19e188591 --- /dev/null +++ b/frameworks/picocss/basic.html @@ -0,0 +1,884 @@ + + + + + + + Basic template • Pico CSS + + + + + + + + + + + + +
+ + + + + + + Basic template • Pico CSS + + + + + + + + + + + + +
+
+

Basic template

+

A basic custom template for Pico using only CSS custom properties (variables).

+
+ +
+ + + +
+ +
+

Preview

+

+ Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla + iaculis eros a elit pharetra egestas. +

+
+
+ + + +
+
+ +
+
+
+ + + +
+

Typography

+

+ Aliquam lobortis vitae nibh nec rhoncus. Morbi mattis neque eget efficitur feugiat. + Vivamus porta nunc a erat mattis, mattis feugiat turpis pretium. Quisque sed tristique + felis. +

+ + +
+ "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet + ipsum cursus ornare." +
+ - Phasellus eget lacinia +
+
+ + +

Lists

+
    +
  • Aliquam lobortis lacus eu libero ornare facilisis.
    • +
  • Nam et magna at libero scelerisque egestas.
    • +
  • Suspendisse id nisl ut leo finibus vehicula quis eu ex.
    • +
  • Proin ultricies turpis et volutpat vehicula.
    • +
+ + +

Inline text elements

+
+

Primary link

+

Secondary link

+

Contrast link

+
+
+

Bold

+

Italic

+

Underline

+
+
+

Deleted

+

Inserted

+

Strikethrough

+
+
+

Small

+

Text Sub

+

Text Sup

+
+
+

Abbr.

+

Kbd

+

Highlighted

+
+ + +

Heading 3

+

+ Integer bibendum malesuada libero vel eleifend. Fusce iaculis turpis ipsum, at efficitur + sem scelerisque vel. Aliquam auctor diam ut purus cursus fringilla. Class aptent taciti + sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. +

+

Heading 4

+

+ Cras fermentum velit vitae auctor aliquet. Nunc non congue urna, at blandit nibh. Donec ac + fermentum felis. Vivamus tincidunt arcu ut lacus hendrerit, eget mattis dui finibus. +

+
Heading 5
+

+ Donec nec egestas nulla. Sed varius placerat felis eu suscipit. Mauris maximus ante in + consequat luctus. Morbi euismod sagittis efficitur. Aenean non eros orci. Vivamus ut diam + sem. +

+
Heading 6
+

+ Ut sed quam non mauris placerat consequat vitae id risus. Vestibulum tincidunt nulla ut + tortor posuere, vitae malesuada tortor molestie. Sed nec interdum dolor. Vestibulum id + auctor nisi, a efficitur sem. Aliquam sollicitudin efficitur turpis, sollicitudin + hendrerit ligula semper id. Nunc risus felis, egestas eu tristique eget, convallis in + velit. +

+ + +
+ Minimal landscape +
+ Image from + unsplash.com +
+
+
+ + + +
+

Buttons

+
+ + + +
+
+ + + +
+
+ + + +
+
+

Form elements

+ + + + + + + + + Curabitur consequat lacus at lacus porta finibus. + + + + + + + + + + + + +
+ + + +
+ +
+ + + + + + + + +
+ +
+ +
+ Checkboxes + + +
+ + +
+ Radio buttons + + +
+ + +
+ Switches + + +
+
+ + + + +
+
+ + + +
+

Tables

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#HeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCell
2CellCellCellCellCellCellCell
3CellCellCellCellCellCellCell
+
+
+ + + + + + + +
+

Accordions

+
+ Accordion 1 +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, + tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae + tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis + lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar + mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit + amet, congue turpis. +

+
+
+ Accordion 2 +
    +
  • Vestibulum id elit quis massa interdum sodales.
    • +
  • Nunc quis eros vel odio pretium tincidunt nec quis neque.
    • +
  • Quisque sed eros non eros ornare elementum.
    • +
  • Cras sed libero aliquet, porta dolor quis, dapibus ipsum.
    • +
+
+
+ + + +
+

Article

+

+ Nullam dui arcu, malesuada et sodales eu, efficitur vitae dolor. Sed ultricies dolor non + ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit + pharetra egestas. Nunc placerat facilisis cursus. Sed vestibulum metus eget dolor pharetra + rutrum. +

+
Duis nec elit placerat, suscipit nibh quis, finibus neque.
+
+ + + +
+

Progress bar

+ + +
+ + + +
+

Loading

+
+ +
+ +
+ + + + + + + + +
+ +

Confirm your action!

+

+ Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus + pellentesque. Nullam finibus risus non semper euismod. +

+ +
+ + + + + + + + + + + + +
+

Basic template

+

A basic custom template for Pico using only CSS custom properties (variables).

+
+ +
+ + + +
+ +
+

Preview

+

+ Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla + iaculis eros a elit pharetra egestas. +

+
+
+ + + +
+
+ +
+
+
+ + + +
+

Typography

+

+ Aliquam lobortis vitae nibh nec rhoncus. Morbi mattis neque eget efficitur feugiat. + Vivamus porta nunc a erat mattis, mattis feugiat turpis pretium. Quisque sed tristique + felis. +

+ + +
+ "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet + ipsum cursus ornare." +
+ - Phasellus eget lacinia +
+
+ + +

Lists

+ + + +

Inline text elements

+
+

Primary link

+

Secondary link

+

Contrast link

+
+
+

Bold

+

Italic

+

Underline

+
+
+

Deleted

+

Inserted

+

Strikethrough

+
+
+

Small

+

Text Sub

+

Text Sup

+
+
+

Abbr.

+

Kbd

+

Highlighted

+
+ + +

Heading 3

+

+ Integer bibendum malesuada libero vel eleifend. Fusce iaculis turpis ipsum, at efficitur + sem scelerisque vel. Aliquam auctor diam ut purus cursus fringilla. Class aptent taciti + sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. +

+

Heading 4

+

+ Cras fermentum velit vitae auctor aliquet. Nunc non congue urna, at blandit nibh. Donec ac + fermentum felis. Vivamus tincidunt arcu ut lacus hendrerit, eget mattis dui finibus. +

+
Heading 5
+

+ Donec nec egestas nulla. Sed varius placerat felis eu suscipit. Mauris maximus ante in + consequat luctus. Morbi euismod sagittis efficitur. Aenean non eros orci. Vivamus ut diam + sem. +

+
Heading 6
+

+ Ut sed quam non mauris placerat consequat vitae id risus. Vestibulum tincidunt nulla ut + tortor posuere, vitae malesuada tortor molestie. Sed nec interdum dolor. Vestibulum id + auctor nisi, a efficitur sem. Aliquam sollicitudin efficitur turpis, sollicitudin + hendrerit ligula semper id. Nunc risus felis, egestas eu tristique eget, convallis in + velit. +

+ + +
+ Minimal landscape +
+ Image from + unsplash.com +
+
+
+ + + +
+

Buttons

+
+ + + +
+
+ + + +
+
+ + + +
+
+

Form elements

+ + + + + + + + + Curabitur consequat lacus at lacus porta finibus. + + + + + + + + + + + + +
+ + + +
+ +
+ + + + + + + + +
+ +
+ +
+ Checkboxes + + +
+ + +
+ Radio buttons + + +
+ + +
+ Switches + + +
+
+ + + + +
+
+ + + +
+

Tables

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#HeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCell
2CellCellCellCellCellCellCell
3CellCellCellCellCellCellCell
+
+
+ + + + + + + +
+

Accordions

+
+ Accordion 1 +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, + tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae + tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis + lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar + mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit + amet, congue turpis. +

+
+
+ Accordion 2 +
    +
  • Vestibulum id elit quis massa interdum sodales.
    • +
  • Nunc quis eros vel odio pretium tincidunt nec quis neque.
    • +
  • Quisque sed eros non eros ornare elementum.
    • +
  • Cras sed libero aliquet, porta dolor quis, dapibus ipsum.
    • +
+
+
+ + + +
+

Article

+

+ Nullam dui arcu, malesuada et sodales eu, efficitur vitae dolor. Sed ultricies dolor non + ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit + pharetra egestas. Nunc placerat facilisis cursus. Sed vestibulum metus eget dolor pharetra + rutrum. +

+
Duis nec elit placerat, suscipit nibh quis, finibus neque.
+
+ + + +
+

Progress bar

+ + +
+ + + +
+

Loading

+
+ +
+ +
+ + + + + + + + +
+ +

Confirm your action!

+

+ Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus + pellentesque. Nullam finibus risus non semper euismod. +

+ +
+ + + + + + + + + + + diff --git a/frameworks/picocss/custom.css b/frameworks/picocss/custom.css new file mode 100644 index 000000000..a44ccbcc1 --- /dev/null +++ b/frameworks/picocss/custom.css @@ -0,0 +1,14 @@ +.demo div { + background-color: greenyellow; + border: 1px solid black; + +} + +/* alternate demo elements */ +.demo div:nth-child(2n) { + background-color: lightblue; +} + +.debug { + border : 1px solid blue; +} diff --git a/frameworks/picocss/dash.html b/frameworks/picocss/dash.html new file mode 100644 index 000000000..209cd2339 --- /dev/null +++ b/frameworks/picocss/dash.html @@ -0,0 +1,78 @@ + + + + + + + + Simple Dashboard + + + + + +
+

Content Area

+ + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1JohnDoejohndoe
+
+ + + + diff --git a/frameworks/picocss/starter.html b/frameworks/picocss/starter.html new file mode 100644 index 000000000..04ece13b3 --- /dev/null +++ b/frameworks/picocss/starter.html @@ -0,0 +1,92 @@ + + + + + + + + + + Hello world! + + + + + +
+ +
+
+

Hello world!

+
+

Some words about nothing...

+
+
+ +
+
+ + +
+ +
+
+ +
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
+
+ +
+ + + + + diff --git a/plotting/plotter.py b/plotting/plotter.py new file mode 100644 index 000000000..78c4127b0 --- /dev/null +++ b/plotting/plotter.py @@ -0,0 +1,61 @@ +from browser import window, timer, document +import random + +GEN_FREQ = 30 # Data generation frequency (Hz) +PLOT_FREQ = 10 # Plot update frequency (Hz) + +# Parameters for random walk +noise_level = 0.2 # Noise level added to random walk +data_size = 100 # Number of data points displayed +x_data = list(range(data_size)) # X values (time steps) + +# Initialize Y data for two random walks +y_data1 = data_size * [0] # First random walk data +y_data2 = data_size * [0] # Second random walk data + +# uPlot chart configuration +opts = { + "title": "Two Random Walks", + "width": 800, + "height": 400, + "scales": {"x": {"time": False}, "y": {"auto": True}}, + "series": [ + {}, # Placeholder for x-axis + {"label": "Random Walk 1", "stroke": "blue", "width": 2}, + {"label": "Random Walk 2", "stroke": "red", "width": 2}, + ], +} + +# Initialize the uPlot chart using Brython +chart = window.uPlot.new(opts, [x_data, y_data1, y_data2], document["chart"]) + + +# Function to generate random walk for the first series +def generate_data1(): + """random walk generator for series 1""" + global y_data1 + y_data1.pop(0) # Remove the oldest data point + prev_y = y_data1[-1] # Get the last data point + noise = (random.random() - 0.5) * noise_level # Add some random noise + y_data1.append(prev_y + noise) + + +# Function to generate random walk for the second series +def generate_data2(): + """random walk generator for series 2""" + global y_data2 + y_data2.pop(0) # Remove the oldest data point + prev_y = y_data2[-1] # Get the last data point + noise = (random.random() - 0.5) * noise_level # Add some random noise + y_data2.append(prev_y + noise) + + +# Function to plot both series +def plot_data(): + chart.setData([x_data, y_data1, y_data2]) + + +# Set intervals for generating and plotting data +timer.set_interval(generate_data1, 1 / GEN_FREQ * 1000) # Generate random walk 1 +timer.set_interval(generate_data2, 1 / GEN_FREQ * 1000) # Generate random walk 2 +timer.set_interval(plot_data, 1 / PLOT_FREQ * 1000) # Plot the updated data diff --git a/plotting/stream_brython.html b/plotting/stream_brython.html new file mode 100644 index 000000000..748ddb0ec --- /dev/null +++ b/plotting/stream_brython.html @@ -0,0 +1,36 @@ + + + + + + + Brython Sine Wave Visualizer + + + + + + + + +
+ + + + + + diff --git a/plotting/stream_plot.html b/plotting/stream_plot.html new file mode 100644 index 000000000..eae5ee15b --- /dev/null +++ b/plotting/stream_plot.html @@ -0,0 +1,116 @@ + + + + + + + Brython Sine Wave Visualizer + + + + + + + + +
+ + + + + + + diff --git a/starter/01-Scratch/index.html b/starter/01-Scratch/index.html new file mode 100644 index 000000000..bab1190f9 --- /dev/null +++ b/starter/01-Scratch/index.html @@ -0,0 +1,15 @@ + + + + + + + Hello + + + +

Hello World

+

Yes.

+ + + diff --git a/starter/03-CSS-Fundamentals/challenge_1/index.html b/starter/03-CSS-Fundamentals/challenge_1/index.html new file mode 100644 index 000000000..0e2a6b85f --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge_1/index.html @@ -0,0 +1,34 @@ + + + + + + The Basic Language of the Web: HTML + + + + +
+ SALE +

Converse Chuck Taylor All Star Low Top

+ Chuck Taylor All Star Shoe + +

$65.00

+

Free shipping

+

Ready to dress up or down, these classic canvas Chucks are an everyday wardrobe staple.

+ + More information → + +

Product details

+ + + + +
+ + + diff --git a/starter/03-CSS-Fundamentals/challenge_1/style.css b/starter/03-CSS-Fundamentals/challenge_1/style.css new file mode 100644 index 000000000..d51e350dc --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge_1/style.css @@ -0,0 +1,78 @@ +body { + font-family: sans-serif; + font-size: small; + line-height: 1.4; + width: 90%; + margin: 40px auto; + +} + +.product { + border: 3px solid black; + position: relative; + +} + +.product .product-title { + font-size: 22px; + background-color: #f1f1f1; + text-transform: uppercase; + text-align: center; +} + +.price { + font-size: large; + +} + +.shipping { + text-transform: uppercase; + color: gray; + font-weight: bold; +} + +.more-info:link, .more-info:visited { + text-decoration: underline; + color: black; + display: inline-block; +} + + + +/* remove underline on hover */ +.more-info:link:hover, .more-info:active{ + text-decoration: none; +} + + +.product li { + list-style-type: square; +} + +/* format button as black */ +.product button { + background-color: black; + color: white; + border: none; + text-align: center; + font-size: large; + text-transform: uppercase; + cursor: pointer; +} + +/* format button as white on hover */ +.product button:hover { + background-color: white; + color: black; +} + +.product mark { + background-color: red; + padding: 5px; + color: white; + letter-spacing: 5px; + font-weight: bold; + position: absolute; + top: -20px; + left: -20px; +} diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index df8a623a8..ef75bb810 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -1,12 +1,14 @@ - - - The Basic Language of the Web: HTML - - - +
+

📘 The Code Magazine

+ + +
+ +
-

📘 The Code Magazine

- - +

The Basic Language of the Web: HTML

+ + Headshot of Laura Jones + +

Posted by Laura Jones on Monday, June 21st 2027

+ + HTML code on a screen
-
-
-

The Basic Language of the Web: HTML

- - Headshot of Laura Jones - -

Posted by Laura Jones on Monday, June 21st 2027

- - HTML code on a screen -
- -

- All modern websites and web applications are built using three - fundamental - technologies: HTML, CSS and JavaScript. These are the languages of the - web. -

- -

- In this post, let's focus on HTML. We will learn what HTML is all about, - and why you too should learn it. -

- -

What is HTML?

-

- HTML stands for HyperText - Markup Language. It's a markup - language that web developers use to structure and describe the content - of a webpage (not a programming language). -

-

- HTML consists of elements that describe different types of content: - paragraphs, links, headings, images, video, etc. Web browsers understand - HTML and render HTML code as websites. -

-

In HTML, each element is made up of 3 parts:

- -
    -
  1. The opening tag
    2. -
  2. The closing tag
    3. -
  3. The actual element
    4. -
- -

- You can learn more at - MDN Web Docs. -

- -

Why should you learn HTML?

- -

- There are countless reasons for learning the fundamental language of the - web. Here are 5 of them: -

- - - -

Hopefully you learned something new here. See you next time!

-
- - - - - +

+ All modern websites and web applications are built using three + fundamental + technologies: HTML, CSS and JavaScript. These are the languages of the + web. +

+ +

+ In this post, let's focus on HTML. We will learn what HTML is all about, + and why you too should learn it. +

+ +

What is HTML?

+

+ HTML stands for HyperText + Markup Language. It's a markup + language that web developers use to structure and describe the content + of a webpage (not a programming language). +

+

+ HTML consists of elements that describe different types of content: + paragraphs, links, headings, images, video, etc. Web browsers understand + HTML and render HTML code as websites. +

+

In HTML, each element is made up of 3 parts:

+ +
    +
  1. The opening tag
    2. +
  2. The closing tag
    3. +
  3. The actual element
    4. +
+ +

+ You can learn more at + MDN Web Docs. +

+ +

Why should you learn HTML?

+ +

+ There are countless reasons for learning the fundamental language of the + web. Here are 5 of them: +

+ + + +

Hopefully you learned something new here. See you next time!

+
+ + + + + + diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css new file mode 100644 index 000000000..e22465e2f --- /dev/null +++ b/starter/03-CSS-Fundamentals/style.css @@ -0,0 +1,44 @@ +body { + font-family: sans-serif; + color: #333; +} + +h1, h2, h3 { + color: #1088ad; +} + +h1 { + + font-size: 3em; + text-transform: uppercase; + text-align: center; + font-style: italic; +} + +.related-posts ul { + list-style: none; +} + +.main-header { + background-color: #f7f7f7; +} + +aside { + background-color: #f7f7f7; + padding: 1em; + border-top: 5px solid #1088ad; + border-bottom: 5px solid #1088ad; +} + +a:link { + color: #1088ad; + text-decoration: none; +} + +a:visited { + color: #1088ad; +} + +a:hover { + text-decoration: underline; +} diff --git a/starter/04-CSS-Layouts/css-grid.html b/starter/04-CSS-Layouts/css-grid.html index e2daa6d42..75b450df1 100644 --- a/starter/04-CSS-Layouts/css-grid.html +++ b/starter/04-CSS-Layouts/css-grid.html @@ -1,80 +1,34 @@ - - - - - CSS Grid - - - -
-
(1) HTML
-
(2) and
-
(3) CSS
-
(4) are
-
(5) amazing
-
(6) languages
-
(7) to
-
(8) learn
-
- -
-
(1)
-
(3)
-
(4)
-
(5)
-
(6)
-
(7)
-
- diff --git a/starter/04-CSS-Layouts/custom-grid.css b/starter/04-CSS-Layouts/custom-grid.css new file mode 100644 index 000000000..bf0585fbd --- /dev/null +++ b/starter/04-CSS-Layouts/custom-grid.css @@ -0,0 +1,63 @@ +.flex { + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 20px; +} + +.main-content { + position: relative; +} + + +.top-promo { + border-radius: var(--pico-border-radius); + position: absolute; + top: -10px; + right: -10px; +} + + +#like-button { + font-size: 22px; + padding: 10px; + cursor: pointer; + + position: absolute; + bottom: 60px; + right: -10px; +} + + + +footer { + position:relative; + padding: 20px; + text-align: center; + + bottom: 0; + width: 100%; + grid-column: 1/-1; + grid-row: 3; +} + +.container { + margin-top: 20px; + display: grid; + column-gap: 20px; + row-gap: 20px; + grid-template-columns: 2fr 1fr; + align-items: stat; +} + +nav { + grid-column: 1/-1; + grid-row: 1; +} + +aside { + + grid-column: 2; + grid-row: 2; +} + diff --git a/starter/04-CSS-Layouts/custom.css b/starter/04-CSS-Layouts/custom.css new file mode 100644 index 000000000..eb5735273 --- /dev/null +++ b/starter/04-CSS-Layouts/custom.css @@ -0,0 +1,57 @@ +.flex { + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 20px; +} + +.main-content { + display:flex; + /* justify-content: flex-start; */ + align-items: flex-start; + gap: 20px; +} + +.main-article { + position: relative; + flex: 1 ; +} + +.main-content aside { + /* background-color: lightgreen; */ + flex: 0 0 300px; +} + + +.top-promo { + border-radius: var(--pico-border-radius); + position: absolute; + top: -10px; + right: -10px; +} + +.author-box { + margin-bottom: 15px; + +} + +#like-button { + font-size: 22px; + padding: 10px; + cursor: pointer; + + position: absolute; + bottom: 60px; + right: -10px; +} + + + +footer { + position:relative; + padding: 20px; + text-align: center; + + bottom: 0; + width: 100%; +} diff --git a/starter/04-CSS-Layouts/flexbox.html b/starter/04-CSS-Layouts/flexbox.html index 496ef372a..ca79f20b4 100644 --- a/starter/04-CSS-Layouts/flexbox.html +++ b/starter/04-CSS-Layouts/flexbox.html @@ -1,58 +1,80 @@ - - - - - Flexbox - - - -
-
HTML
-
and
-
CSS
-
are
-
amazing
-
languages
-
to
-
learn
-
- + + + + + + Flexbox + + + + +
+
HTML
+
and
+
CSS
+
are
+
amazing
+
languages
+
to
+
learn
+
+ + diff --git a/starter/04-CSS-Layouts/grid-style.css b/starter/04-CSS-Layouts/grid-style.css new file mode 100644 index 000000000..7150c91be --- /dev/null +++ b/starter/04-CSS-Layouts/grid-style.css @@ -0,0 +1,74 @@ +.el { + padding: 20px; + /* height: 100px; */ +} + +.el--1 { + background-color: blueviolet; +} + +.el--2 { + background-color: orangered; + grid-column: 1; + grid-row: 2; +} + +.el--3 { + background-color: green; + /* height: 150px; */ +} + +.el--4 { + background-color: goldenrod; +} + +.el--5 { + background-color: palevioletred; +} + +.el--6 { + background-color: steelblue; +} + +.el--7 { + background-color: yellow; +} + +.el--8 { + background-color: crimson; + grid-column: 2/3; + grid-row: 1/2; +} + +.container--1 { + /* STARTER */ + font-family: sans-serif; + background-color: #ddd; + font-size: 20px; + margin: 40px; + + + + /* CSS GRID */ + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); + row-gap: 10px; + column-gap: 10px; + justify-content: center; +} + +.container--2 { + + display: none; + /* STARTER */ + font-family: sans-serif; + background-color: black; + font-size: 40px; + margin: 100px; + + width: 1000px; + height: 600px; + + /* CSS GRID */ +} diff --git a/starter/04-CSS-Layouts/index-grid.html b/starter/04-CSS-Layouts/index-grid.html new file mode 100644 index 000000000..9be751828 --- /dev/null +++ b/starter/04-CSS-Layouts/index-grid.html @@ -0,0 +1,159 @@ + + + + + + + + + + The Basic Language of the Web: HTML + + + + + +
+ + +
+ + TOP +
+

The Basic Language of the Web: HTML

+
+
+ + Headshot of Laura Jones + +
+ Posted by Laura Jones on Monday, June 21st 2027 +
+ +
+ HTML code on a screen + + +

+ All modern websites and web applications are built using three + fundamental + technologies: HTML, CSS and JavaScript. These are the languages of the + web. +

+ +

+ In this post, let's focus on HTML. We will learn what HTML is all + about, and why you too should learn it. +

+ +

What is HTML?

+

+ HTML stands for HyperText + Markup Language. It's a markup + language that web developers use to structure and describe the content + of a webpage (not a programming language). +

+

+ HTML consists of elements that describe different types of content: + paragraphs, links, headings, images, video, etc. Web browsers + understand HTML and render HTML code as websites. +

+

In HTML, each element is made up of 3 parts:

+ +
    +
  1. The opening tag
    2. +
  2. The closing tag
    3. +
  3. The actual element
    4. +
+ +

+ You can learn more at + MDN Web Docs. +

+ +

Why should you learn HTML?

+ +

+ There are countless reasons for learning the fundamental language of + the web. Here are 5 of them: +

+ + + +

Hopefully you learned something new here. See you next time!

+ + +
+ + +
+ + + diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 15ecbeb77..ed0251de1 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -1,59 +1,59 @@ - - - - - - The Basic Language of the Web: HTML - - - - - -
-
-

📘 The Code Magazine

- -
- -
-
+ + + +
+
+ TOP +

The Basic Language of the Web: HTML

+
+
- Headshot of Laura Jones + Headshot of Laura Jones -

+

Posted by Laura Jones on Monday, June 21st 2027 -

- - HTML code on a screen - -
+
+ + + HTML code on a screen +

All modern websites and web applications are built using three @@ -89,11 +89,7 @@

What is HTML?

You can learn more at - MDN Web Docs. + MDN Web Docs.

Why should you learn HTML?

@@ -118,49 +114,46 @@

Why should you learn HTML?

Hopefully you learned something new here. See you next time!

- - - - + + + + + diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css index c879e79d2..7ad60a52c 100644 --- a/starter/04-CSS-Layouts/style.css +++ b/starter/04-CSS-Layouts/style.css @@ -2,6 +2,8 @@ /* border-top: 10px solid #1098ad; */ margin: 0; padding: 0; + /* border: 1px solid #444; */ + box-sizing: border-box; } /* PAGE SECTIONS */ @@ -25,9 +27,12 @@ body { /* padding: 20px; padding-left: 40px; padding-right: 40px; */ - padding: 20px 40px; + /* padding: 20px 40px; */ margin-bottom: 60px; /* height: 80px; */ + display: flex; + justify-content: space-between; + align-items: flex-end; } nav { @@ -87,7 +92,7 @@ h4 { p { font-size: 22px; line-height: 1.5; - margin-bottom: 15px; + } ul, @@ -136,9 +141,6 @@ li:last-child { list-style: none; } -body { - /* background-color: orangered; */ -} /* .first-li { font-weight: bold; @@ -152,14 +154,7 @@ li:last-child { font-style: italic; } -li:nth-child(even) { - /* color: red; */ -} -/* Misconception: this won't work! */ -article p:first-child { - color: red; -} /* Styling links */ a:link { @@ -196,8 +191,7 @@ nav a:link { display: block; */ - margin-right: 30px; - margin-top: 10px; + display: inline-block; } @@ -222,9 +216,6 @@ h1::first-letter { margin-right: 5px; } -h3 + p::first-line { - /* color: red; */ -} h2 { /* background-color: orange; */ @@ -244,24 +235,12 @@ h2::before { right: -25px; } -/* Resolving conflicts */ -/* #copyright { - color: red; -} - -.copyright { - color: blue; +.author-box { + margin-bottom: 15px; } -.text { - color: yellow; +.flex { + display: flex; + align-items: center; + gap: 20px; } - -footer p { - color: green !important; -} */ - -/* nav a:link, -nav p { - font-size: 18px; -} */ diff --git a/starter/05-Design/index.html b/starter/05-Design/index.html index 92b74fd48..eaf294ca1 100644 --- a/starter/05-Design/index.html +++ b/starter/05-Design/index.html @@ -1,162 +1,166 @@ - - - - - - Lisbon Chair Shop - - -
-
-
-

We design and build better chairs, for a better life

-

- In a small shop in the heart of Lisbon, we spend our days - relentlessly perfecting the chair. The result is a perfect blend of - beauty and comfort, that will have a lasting impact on your health. + + + + + + + + Lisbon Chair Shop + + + +

+
+
+

We design and build better chairs, for a better life

+

+ In a small shop in the heart of Lisbon, we spend our days + relentlessly perfecting the chair. The result is a perfect blend of + beauty and comfort, that will have a lasting impact on your health. +

+ Shop chairs +
+ Photo +
+ +
+

What makes our chairs special

+
+
+

Science meets design

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus + similique adipisci praesentium.

- Shop chairs
- Photo -
- -
-

What makes our chairs special

-
-
-

Science meets design

-

- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus - similique adipisci praesentium. -

-
-
-

- Maximal comfort -

-

- Reprehenderit optio placeat quasi excepturi architecto, explicabo - facilis perspiciatis error maxime magnam. -

-
+
+

+ Maximal comfort +

+

+ Reprehenderit optio placeat quasi excepturi architecto, explicabo + facilis perspiciatis error maxime magnam. +

+
-
-

- Ethical and sustainable -

-

- Deleniti recusandae quidem nesciunt, eos dolorum iure, quaerat - omnis est laudantium voluptatem voluptas! -

-
+
+

+ Ethical and sustainable +

+

+ Deleniti recusandae quidem nesciunt, eos dolorum iure, quaerat + omnis est laudantium voluptatem voluptas! +

-
+
+ -
-
- People sitting on chairs -
-

"We couldn't live without these chairs anymore"

-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor - repellat at, nesciunt quia cum minima ipsum culpa totam sapiente - recusandae earum debitis doloribus in quasi voluptatibus! -
-

— Mary and Sarah Johnson

-
+
+
+ People sitting on chairs +
+

"We couldn't live without these chairs anymore"

+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor + repellat at, nesciunt quia cum minima ipsum culpa totam sapiente + recusandae earum debitis doloribus in quasi voluptatibus! +
+

— Mary and Sarah Johnson

-
+
+
-
-

Our bestselling chairs

-
-
- Chair -
-

The Laid Back

-
    -
  • - - Leisure and relaxing -
    • -
  • - Comfortable for 4h -
    • -
  • - Vegan leather -
    • -
  • - Weighs 16 kg -
    • -
-
- 250€ - Add to cart -
+
+

Our bestselling chairs

+
+
+ Chair +
+

The Laid Back

+
    +
  • + + Leisure and relaxing +
    • +
  • + Comfortable for 4h +
    • +
  • + Vegan leather +
    • +
  • + Weighs 16 kg +
    • +
+
+ 250€ + Add to cart
-
+
+
-
- Chair -
-

The Worker Bee

-
    -
  • - Work -
    • -
  • - Comfortable for 8h -
    • -
  • - Vegan leather -
    • -
  • - Weighs 22 kg -
    • -
-
- 525€ - Add to cart -
+
+ Chair +
+

The Worker Bee

+
    +
  • + Work +
    • +
  • + Comfortable for 8h +
    • +
  • + Vegan leather +
    • +
  • + Weighs 22 kg +
    • +
+
+ 525€ + Add to cart
-
+
+
-
- Chair -
-

The Chair 4/2

-
    -
  • - Leisure and relaxing -
    • -
  • - Comfortable all day! -
    • -
  • - Organic cotton -
    • -
  • - Weighs 80 kg -
    • -
-
- 1450€ - Add to cart -
+
+ Chair +
+

The Chair 4/2

+
    +
  • + Leisure and relaxing +
    • +
  • + Comfortable all day! +
    • +
  • + Organic cotton +
    • +
  • + Weighs 80 kg +
    • +
+
+ 1450€ + Add to cart
-
-
-
+ + + + + + + + - - - diff --git a/website_proto/apple-like/custom.css b/website_proto/apple-like/custom.css new file mode 100644 index 000000000..06dfb016d --- /dev/null +++ b/website_proto/apple-like/custom.css @@ -0,0 +1,87 @@ +:root { + --background-light: #ffffff; + --background-dark: #f5f5f7; + --font-family: "Roboto", "Helvetica", "Tahoma", "Arial", sans-serif; +} + + +.banner { + padding: 6rem 1rem; + text-align: center; +} + +.banner-light { + background-color: var(--background-light); + color: #1d1d1f; +} + +.banner-dark { + background-color: var(--background-dark); + color: #1d1d1f; +} + +.banner h2 { + font-size: 3rem; + margin-bottom: 1rem; +} + +.banner p { + font-size: 1.5rem; + max-width: 600px; + margin: 0 auto 2rem; +} + +.banner img { + max-width: 100%; + height: auto; + margin-top: 2rem; +} + +nav { + background-color: rgba(255, 255, 255, 0.8); + backdrop-filter: saturate(180%) blur(20px); + position: sticky; + top: 0; + z-index: 1000; +} + +#home { + background-color: var(--background-light); + padding: 8rem 1rem; + text-align: center; +} + +#home h1 { + font-size: 4rem; + margin-bottom: 1rem; +} + +#home p { + font-size: 1.5rem; + max-width: 600px; + margin: 0 auto 2rem; +} + +footer { + text-align: center; + padding: 2rem; + background-color: var(--background-dark); +} + + +/* debugging */ + +.demo div { + background-color: greenyellow; + border: 1px solid black; + +} + +/* alternate demo elements */ +.demo div:nth-child(2n) { + background-color: lightblue; +} + +.debug { + border : 1px solid blue; +} diff --git a/website_proto/apple-like/index.html b/website_proto/apple-like/index.html new file mode 100644 index 000000000..79e23cb28 --- /dev/null +++ b/website_proto/apple-like/index.html @@ -0,0 +1,100 @@ + + + + + + + + + + + Your Product + + + + + +
+
+

Welcome to Your Product

+

Capable, open-source electronics for your next project.

+ Learn More +
+ +
+ + + + + +
+ + + + + +
+ + + + + + + diff --git a/website_proto/index.html b/website_proto/index.html new file mode 100644 index 000000000..98284fd8c --- /dev/null +++ b/website_proto/index.html @@ -0,0 +1,124 @@ + + + + + + + Your Product Website + + + + + + + + + +
+ Product Image +

Capable Open Source Robotics

+ See in the Store +
+ + +
+

Categories

+
+
+ Servos and Controllers +

Servos and Controllers

+
+
+ Accessories +

Accessories

+
+
+ Connectors +

Connectors

+
+
+
+ + +
+ Moteus Devkit +

Get started with the Moteus Devkit

+

+ Use a moteus devkit to get started with brushless motor control! See the capabilities enabled by accurate, + fast control with low-cost motors. +

+ See in the Store +
+ + + + + + +