"File:HolyGrail.svg" by David Lark is licensed under CC BY-SA 4.0

Holy Grail is a layout pattern that’s very common on the web. It consists of a header, a main content area with fixed-width navigation on the left, content in the middle and a fixed-width sidebar on the right and then a footer.

It is commonly desired and implemented, but for many years, the various ways in which it could be implemented with available technologies all had drawbacks. Because of this, finding an optimal implementation was likened to searching for the elusive Holy Grail.

Below example is taken from In Search of the Holy Grail

<div id="header"></div><div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div></div><div id="footer"></div>

body {
  min-width: 550px;      /* 2x LC width + RC width */
}
#container {
  padding-left: 200px;   /* LC width */
  padding-right: 150px;  /* RC width */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px;          /* LC width */
  right: 200px;          /* LC width */
  margin-left: -100%;
}
#right {
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
}
#footer {
  clear: both;
}
/*** IE6 Fix ***/
* html #left {
  left: 150px;           /* RC width */
}

References:

• In Search of the Holy Grail
• Holy grail (web design)
• CSS Grid: Holy Grail Layout
• THE HOLY GRAIL LAYOUT WITH 5 LINES OF CSS

"Design Challenge - Remix Jetpack Girl" by ScratchEdTeam is licensed under CC BY 2.0

Scratch is a visual programming tool which allows the user to create animations and games with a drag-and-drop interface. It allows you to create your own computer games, interactive stories, and animations using some programming techniques without actually having to write code. It’s a great way to get started programming on the Raspberry Pi with young people.

The version of Scratch included with the Raspberry Pi has a number of unique features; one of the most useful is its ability to communicate with the GPIO pins (General Purpose Input Output). These pins allow you to connect your Raspberry Pi to a range of devices, from lights and motors to buttons and sensors.

References:

• Scratch
• Getting started with Scratch
• Scratch 3 Desktop for Raspbian on Raspberry Pi
• Scratch 2.0: all-new features for your Raspberry Pi
• GPIO in Scratch 2
• Physical Computing With Scratch
• Raspberry Pi gets MIT’s Scratch 3 programming language for Raspbian

Essential accessories to get started with Raspberry Pi.

"Raspberry-Pi-Model-B-top-with-labels" by mariawebideas is licensed under CC BY 2.0

Power Supply

To connect to a power socket, all Raspberry Pi models have a USB port (the same found on many mobile phones): either USB-C for Raspberry Pi 4, or micro USB for Raspberry Pi 3, 2 and 1.

MicroSD card

Your Raspberry Pi needs an SD card to store all its files and the Raspbian operating system.

A keyboard and a mouse

To start using your Raspberry Pi, you need a USB keyboard and a USB mouse.

A TV or computer screen

To view the Raspbian desktop environment, you need a screen, and a cable to link the screen and the Pi.

HDMI

The Raspberry Pi has a HDMI output port that is compatible with the HDMI port of most modern TVs and computer monitors.

References:

• Setting up your Raspberry Pi

The Raspberry Pi is a low cost, credit-card sized computer that plugs into a computer monitor or TV, and uses a standard keyboard and mouse. It is a capable little device that enables people of all ages to explore computing, and to learn how to program in languages like Scratch and Python. It’s capable of doing everything you’d expect a desktop computer to do, from browsing the internet and playing high-definition video, to making spreadsheets, word-processing, and playing games.

"P1230070" by macgyverapi is licensed under CC PDM 1.0

The Raspberry Pi operates in the open source ecosystem: it runs Linux (a variety of distributions), and its main supported operating system, Raspberry Pi OS (formerly Raspbian), is open source and runs a suite of open source software. The Raspberry Pi Foundation contributes to the Linux kernel and various other open source projects as well as releasing much of its own software as open source.

References:

• What is a Raspberry Pi?
• What is a Raspberry Pi?
• Raspberry Pi

CSS style guides are a group of documents that outline the coding style, best practices, and visual design properties (e.g. colors, layout grid dimensions, etc.) of a site. The goal of having a style guide is to maintain consistency across a product.

Below is a sample list of CSS Style Guides available on the internet,

Airbnb CSS / Sass Styleguide

https://github.com/airbnb/css

Github Style Guide

https://styleguide.github.com/

Wordpress CSS Coding Standards

https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/

Google HTML/CSS Style Guide

https://google.github.io/styleguide/htmlcssguide.html

Bootstrap CSS Code Guide

https://codeguide.co/#css

Lonley Planet CSS Code Guide

https://rizzo.lonelyplanet.com/documentation/css/naming

ThinkUp CSS Code Guide

https://github.com/ThinkUpLLC/ThinkUp/wiki/Code-Style-Guide:-CSS

Idiomatic CSS

https://github.com/necolas/idiomatic-css

CSS Guidlines

https://cssguidelin.es/

CSS Style Guide

https://www.smashingmagazine.com/2008/05/improving-code-readability-with-css-styleguides/

jQuery CSS Style Guide

https://contribute.jquery.org/style-guide/css/

BEM

http://getbem.com/introduction/

Atomic CSS

https://acss.io/

Object-Oriented CSS

http://oocss.org/

Suit CSS

https://suitcss.github.io/

SendGrid Style Guide

https://styleguide.sendgrid.com/

References:

• CSS Style Guides
• 60 CSS Coding Style Guide Examples For Developers
• 5 things to consider when creating your CSS style guide
• CSS Style Guides
• RESOURCES TO USE WHEN CREATING A WEBSITE STYLE GUIDE
• A List of CSS Style Guides for Inspiration
• Maintainable CSS with BEM