populate with HTML-CSS starting content

CodeYourFuture · May 14, 2024 · 6ff65de · 6ff65de
1 parent 967400c
commit 6ff65de
Show file tree

Hide file tree

Showing 33 changed files with 1,008 additions and 7 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+**/.DS_Store
+.DS_Store
+node_modules/
+.vscode/
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,19 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "embeddedLanguageFormatting": "auto",
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "printWidth": 80,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "vueIndentScriptAndStyle": false
+}
diff --git a/Cakes-Co/design/cakes wireframe - desktop.png b/Cakes-Co/design/cakes wireframe - desktop.png
diff --git a/Cakes-Co/design/cakes wireframe - mobile.png b/Cakes-Co/design/cakes wireframe - mobile.png
diff --git a/Cakes-Co/img/background-img.webp b/Cakes-Co/img/background-img.webp
diff --git a/Cakes-Co/img/img1.avif b/Cakes-Co/img/img1.avif
diff --git a/Cakes-Co/img/img2.jpeg b/Cakes-Co/img/img2.jpeg
diff --git a/Cakes-Co/img/img3.jpeg b/Cakes-Co/img/img3.jpeg
diff --git a/Cakes-Co/img/img4.jpeg b/Cakes-Co/img/img4.jpeg
diff --git a/Cakes-Co/img/logo.png b/Cakes-Co/img/logo.png
diff --git a/Cakes-Co/index.html b/Cakes-Co/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Responsive Cake webpage</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+
+  <body>
+    <!-- header -->
+    <header>
+      <img class="logo-img" src="./img/logo.png" alt="logo" />
+      <div class="inner-header">
+        <label class="ham-label" for="ham-checkbox">
+          <input type="checkbox" id="ham-checkbox" />
+        </label>
+        <aside class="menu-aside">
+          <nav>
+            <a href="">Home</a>
+            <a href="">Cakes</a>
+            <a href="">Order</a>
+            <a href="">Lessons</a>
+            <a href="">About</a>
+          </nav>
+        </aside>
+        <p class="motto-p">The best cakes in town delivered to your door</p>
+      </div>
+    </header>
+    <!-- main -->
+    <main>
+      <section class="p-sec">
+        <h1>Welcome</h1>
+        <p>
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae
+          voluptatem accusantium, necessitatibus cum accusamus, id cumque harum
+          voluptates ipsum nisi vero illo dolore! Doloribus, quae hic. Facilis
+          voluptate nobis eum.
+        </p>
+      </section>
+      <section class="hero-sec">
+        <img src="./img/background-img.webp" alt="vanilla chocolate cake" />
+      </section>
+      <section class="img-sec">
+        <img src="./img/img1.avif" alt="" />
+        <img src="./img/img2.jpeg" alt="" />
+        <img src="./img/img3.jpeg" alt="" />
+        <img src="./img/img4.jpeg" alt="" />
+      </section>
+    </main>
+
+    <!-- Add your markup here -->
+    <!-- Add your markup here -->
+    <!-- Add your markup here -->
+    <!-- Add your markup here -->
+  </body>
+</html>
diff --git a/Cakes-Co/readme.md b/Cakes-Co/readme.md
@@ -0,0 +1,70 @@
+# Cakes Co STRETCH
+
+The objective of this exercise is to create a responsive webpage showcasing your imaginary cake business. You are not required to found an actual cake business, but cakes brought to class this week will be welcomed with joy.
+
+## Learning Objectives
+
+- Translate wireframe designs to a fully featured web page.
+- Implement a responsive design using the Mobile First approach
+- Adapt the page layout for larger screens using media queries
+- Select appropriate fonts and color schemes to create an aesthetically pleasing design
+- Use hover/focus effects to add interactivity to buttons and images
+
+## Requirements
+
+This project develops your skills in creating responsive webpages using the Mobile First approach. You are expected to have a basic understanding of HTML and CSS.
+
+Start by implementing the mobile design in HTML and CSS. Then use media queries to adapt the layout for larger screens. Use `min-width` for your media queries and create three different variants of the layout using two different breakpoints.
+
+Choose appropriate fonts and colors and find visually appealing cake pictures to replace the placeholders in the wireframes. You are encouraged to add hover/focus effects to buttons and images to enhance interactivity.
+
+Make sure that all elements are visible and functional on both mobile and desktop devices.
+
+## Acceptance Criteria
+
+- [ ] The webpage is responsive and follows the Mobile First approach
+- [ ] The layout adapts appropriately for larger screens using media queries
+- [ ] Fonts and colors are selected appropriately and cake pictures are visually appealing
+- [ ] The webpage includes hover effects to add interactivity
+- [ ] All elements are visible and function as intended on both mobile and desktop devices according to the wireframes
+- [ ] Your page scores 100 on Lighthouse Accessibility
+- [ ] Your site is deployed to Netlify and the link is included in your PR message.
+
+## Tips for success
+
+When you're ready to start coding:
+
+### Start with mobile
+
+- Write the HTML following the mobile design
+- Then write your CSS for everything to look great on mobile
+- Remember to link your CSS file to your HTML file inside the `<head>` in `index.html`
+- You don't need to use any media queries yet, because we're following a [Mobile First](https://www.invisionapp.com/inside-design/mobile-first-design/) approach!
+
+### Then adapt the page for larger screens
+
+- Now add media queries to your CSS, and change the layout and sizing of elements so they make better use of a wider screen (see the desktop wireframe design below).
+- To follow Mobile First principles, we will only be using `min-width` in our media queries (no max-width!)
+- You should **use 2 different breakpoints**, meaning you should have **3** different variants of your layout. Here's an example.
+
+  If we have the following **2 breakpoints**:
+
+  > - breakpoint 1 --> 540px
+  > - breakpoint 2 --> 900px
+
+  Then our CSS code will be split into **3**:
+
+  > 1. **"default"**: default styles, should implement the mobile design (no media query used for these). These styles will apply to all screen sizes by default.
+  > 2. **"medium"**: Our first media query `@media (min-width: 540px) {...}` **will overwrite our default styles** for screens at least 540px wide. Screens _below_ 540px will apply the styles from the "default".
+  > 3. **"large"**: Our second media query `@media (min-width: 900px) {...}` **will overwrite our default AND medium styles** for screens at least 900px wide (no upper limit).
+
+### Define your own style
+
+- Choose 1-2 fonts to use (lots of [free fonts here](https://fonts.google.com/))
+- Choose 2-3 colours that you think go together well, and try to limit yourself to those in your CSS ([look here at palettes](https://coolors.co/palettes/trending) for inspiration)
+- Select some nice cake pictures to replace the placeholders in the wireframes (good [photo source here](https://unsplash.com/images/food/cake)).
+- Get creative! Can you add some cool hover/focus effects to buttons and [images](https://www.wix.com/website-template/view/html/1911?siteId=c1c72d26-c040-41f2-80ce-0b0f8aef01b4&metaSiteId=5d77fab8-f068-4228-8b61-4181af054ca6&originUrl=https%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates&tpClick=view_button)?
+
+### Also
+
+- It's up to you to find a solution for any elements that are visible in desktop and not on mobile - and vice versa.
diff --git a/Cakes-Co/style.css b/Cakes-Co/style.css
@@ -0,0 +1,153 @@
+* {
+  margin: 0px;
+  padding: 0px;
+}
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0px;
+  padding: 0px;
+}
+img {
+  width: 100%;
+  height: 100%;
+}
+:root {
+  --bar-width: 30px;
+  --bar-height: 5px;
+  --gap: 30px;
+}
+
+.logo-img {
+  width: 100px;
+  height: 100px;
+  align-self: center;
+}
+header {
+  background-color: blanchedalmond;
+  width: auto;
+  height: 140px;
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+  padding: 30px;
+}
+.inner-header {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+.motto-p {
+  text-align: right;
+  max-width: 20ch;
+}
+
+.ham-label {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  z-index: 3;
+}
+
+.ham-label input,
+.ham-label::before,
+.ham-label::after {
+  content: "";
+  width: var(--bar-width);
+  height: var(--bar-height);
+  background-color: black;
+}
+
+.ham-label input {
+  appearance: none;
+  outline: none;
+  pointer-events: none;
+}
+
+.menu-aside {
+  position: absolute;
+  background-color: grey;
+  width: 220px;
+  height: 400px;
+  top: 0px;
+  right: 0px;
+  z-index: 2;
+  display: none;
+}
+
+.ham-label:has(input:checked) + .menu-aside {
+  display: block;
+}
+
+nav {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+main {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: repeat(3, auto);
+  gap: var(--gap);
+}
+
+.p-sec {
+  grid-column: 1/-1;
+  grid-row: 1/2;
+}
+.hero-sec {
+  grid-column: 1/-1;
+  grid-row: 2/3;
+}
+.img-sec {
+  grid-column: 1/-1;
+  grid-row: 3/-1;
+
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, auto);
+  gap: var(--gap);
+}
+
+@media screen and (min-width: 640px) {
+  main {
+    margin-top: 100px;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: 2fr 1fr;
+  }
+  .p-sec {
+    grid-column: 2/-1;
+    grid-row: 1/2;
+  }
+  .hero-sec {
+    grid-column: 1/2;
+    grid-row: 1/2;
+  }
+
+  .img-sec {
+    grid-column: 1/-1;
+    grid-row: 2/-1;
+
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: auto;
+  }
+
+  .ham-label {
+    display: none;
+  }
+  .menu-aside {
+    position: absolute;
+    background-color: grey;
+    width: 220px;
+    height: 400px;
+    top: 0px;
+    right: 0px;
+    z-index: 2;
+    display: block;
+  }
+}
diff --git a/Example-Image.jpeg b/Example-Image.jpeg
diff --git a/Form-Controls/README.md b/Form-Controls/README.md
@@ -0,0 +1,66 @@
+# HTML/ CSS Week 3
+
+## Forms, styling forms, and Devtools
+
+## Aims
+
+- Interpret requirements
+- Write a valid form
+- Style form controls
+- Test with Devtools
+- Refactor using Devtools
+
+## Task
+
+We are selling t-shirts. Write a form to collect the following data:
+
+Our customers already have accounts, so we know their addresses and charging details already. We don't need to collect that data. We want to confirm they are the right person, then get them to choose a colour and then pick a delivery date.
+
+Writing that out as a series of questions to ask yourself:
+
+1. What is the customer's name? I must collect this data, and validate it. But what is a valid name? I must decide something.
+2. What is the customer's email? I must make sure the email is valid. Email addresses have a consistent pattern.
+3. What colour should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colours?
+4. What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL
+5. When do they want the t-shirt to be delivered? I must collect a date and make sure that date is in the next four weeks. How will I do this? How will I make sure there are no mistakes about the date?
+
+All fields are required.
+Do not write a form action for this project.
+
+## Developers must test their work.
+
+Let's write out our testable criteria:
+
+- [ ] I have used HTML and CSS only.
+
+### HTML
+
+- [ ] My form is semantic html.
+- [ ] All inputs have associated labels.
+- [ ] My Lighthouse Accessibility score is 100.
+- [ ] I require a valid name. I have defined a valid name as a text string of two characters or more.
+- [ ] I require a valid email.
+- [ ] I require one colour from a defined set of 3 colours.
+- [ ] I require one size from a defined set of 6 sizes.
+- [ ] I require one date from a constrained date range.
+
+### CSS
+
+- [ ] I show which element is focused.
+- [ ] My Lighthouse Accessibility score is 100.
+
+## Extension Task
+
+If you have done all these things and you would like a really big challenge, run a further test and refactor your code.
+
+- In Chrome Devtools, open the Command Palette
+  https://developer.chrome.com/docs/devtools/command-menu/
+- Type 'coverage' and open the Coverage drawer
+  https://developer.chrome.com/docs/devtools/coverage/
+- Refactor your code until you have no unused CSS, or as close to that as you can get. Prettier will prevent you minifying your code so the last few bytes are out of your reach, sorry!
+- This challenge isn't about writing less CSS, it's about writing less _pointless_ CSS, so don't remove code that is actually being used in your layout.
+- Insider tip: you might have to select some elements so their focus states don't get miscounted as unused. You can force state in Devtools:
+  https://twitter.com/ChromeDevTools/status/986992837127319552
+- Take a screenshot of your coverage stats.
+
+Sanity check: this extension is tough! Try it in your own time and don't let it hold up your coursework submission.