diff --git a/Form-Controls/README.md b/Form-Controls/README.md deleted file mode 100644 index 86f623d89..000000000 --- a/Form-Controls/README.md +++ /dev/null @@ -1,67 +0,0 @@ -# Form Controls - -## Learning Objectives - - - -- [ ] Interpret requirements and check against a list of criteria -- [ ] Write a valid form -- [ ] Test with Devtools -- [ ] Refactor using Devtools -- [ ] Use version control by committing often and pushing regularly to GitHub -- [ ] Develop the habit of writing clean, well-structured, and error-free code - - -## 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 size. - -Writing that out as a series of questions to ask yourself: - -1. What is the customer's name? I must collect this data and ensure it contains at least two non-space characters. -2. What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern. -3. What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours? -4. What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL - -All fields are required. -Do not write a form action for this project. - -## Acceptance Criteria - -### Developers must test their work. - -Let's write out our testable criteria. Check each one off as you complete it. - -- [ ] I have only used HTML and CSS. -- [ ] I have not used any JavaScript. - -### HTML - -- [ ] My form is semantic HTML. -- [ ] All inputs have associated labels. -- [ ] My Lighthouse Accessibility score is 100. -- [ ] I require a valid name. -- [ ] 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. - -### Developers must adhere to professional standards. - -> Before you say you're done: Is your code readable? Does it run correctly? Does it look professional? - -These practices reflect the level of quality expected in professional work. -They ensure your code is reliable, maintainable, and presents a polished, credible experience to users. - -- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/ -- [ ] My code is consistently formatted -- [ ] My page content is free of typos and grammatical mistakes -- [ ] I commit often and push regularly to GitHub - -## Resources -- [MDN: Form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms) -- [MDN: Form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation) -- [Lighthouse](https://developers.google.com/web/tools/lighthouse) -- [Lighthouse Guide](https://programming.codeyourfuture.io/guides/testing/lighthouse) -- [Format Code and Make Logical Commits in VS Code](../practical_guide.md) diff --git a/Form-Controls/index.html b/Form-Controls/index.html deleted file mode 100644 index 74b591ffc..000000000 --- a/Form-Controls/index.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - My form exercise - - - - -
-

Product Pick

-
-
-
- - -
-
- - - diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..958d5c0eb 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,97 @@ - - - - Wireframe - - - -
-

Wireframe

-

- This is the default, provided code and no changes have been made yet. -

-
-
-
- -

Title

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. -

- Read more -
-
- - - + + + + + My Wireframe Design + + + + + + +
+

Basics of Web Development Designs

+

README files, wireframes, and Git branches explained clearly

+
+ + +
+ readme diagram +
+ + +
+

What is the purpose of a README file?

+

A README file explains what a project is, how it works, and how to use it. It usually includes + installation + steps, usage instructions, and important notes. The purpose is to help anyone understand the project quickly + without reading the entire codebase. + A README.md is an important document in a repository that introduces the project and explains its purpose, setup, + and usage to help users and developers understand and contribute to it. + Uses Markdown (.md) for formatted documentation and is usually the first file users read in a project. + Provides a project overview, installation instructions, configuration details, and usage examples such as code or + command-line commands. + May include license information, contributor credits, and appears well-formatted on platforms like GitHub. + A README file is meant to act as the front door to a project, giving anyone who encounters it a clear and + immediate understanding of what the project is about and how to interact with it. It explains the project’s + purpose, its goals, and the problems it aims to solve, while also guiding users through installation, usage, and + any important requirements. A strong README also helps future contributors by documenting decisions, structure, + and expectations, making collaboration smoother and reducing confusion. It becomes a reference point that keeps + the project understandable even months or years later, ensuring that the work remains accessible not only to + others but also to the original creator when returning after a long break. +

+

+ Read More +
+ + +
+ +
+ wireframe diagram +

What is the purpose of a wireframe?

+

A wireframe is a simple visual layout that shows the structure of a webpage before design or + coding begins. It + helps developers and designers plan where elements should go and how the page should flow.

+ Read More +
+ + +
+ git branching diagram +

What is a branch in Git?

+

A Git branch is a separate version of your project where you can work on new features without + affecting the + main code. Branches allow safe experimentation and make collaboration easier. Therefore.

+ Read More +
+ +
+ + + + + + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..dc204c830 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,89 +1,176 @@ -/* Here are some starter styles -You can edit these or replace them entirely -It's showing you a common way to organise CSS -And includes solutions to common problems -As well as useful links to learn more */ - -/* ====== Design Palette ====== - This is our "design palette". - It sets out the colours, fonts, styles etc to be used in this design - At work, a designer will give these to you based on the corporate brand, but while you are learning - You can design it yourself if you like - Inspect the starter design with Devtools - Click on the colour swatches to see what is happening - I've put some useful CSS you won't have learned yet - For you to explore and play with if you are interested - https://web.dev/articles/min-max-clamp - https://scrimba.com/learn-css-variables-c026 -====== Design Palette ====== */ -:root { - --paper: oklch(7 0 0); - --ink: color-mix(in oklab, var(--color) 5%, black); - --font: 100%/1.5 system-ui; - --space: clamp(6px, 6px + 2vw, 15px); - --line: 1px solid; - --container: 1280px; -} -/* ====== Base Elements ====== - General rules for basic HTML elements in any context */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Arial', sans-serif; +} + +html, +body { + height: 100%; +} + body { - background: var(--paper); - color: var(--ink); - font: var(--font); + background-color: #3c3f72; + color: #080000; + font-family: 'Arial', sans-serif; + line-height: 1.5; + font-size: 1em; + display: flex; + flex-direction: column; +} + +.page-header { + background-color: #d0bee3; + color: #1a082c; + text-align: center; + text-shadow: 2px 2px 4px rgba(225, 226, 237, 0.982); + margin-bottom: 40px; + padding: 30px; + font-size: 1.5em; } -a { - padding: var(--space); - border: var(--line); - max-width: fit-content; + +.page-header h1 { + font-size: 2em; + margin-bottom: 5px; } -img, -svg { + +.hero .placeholder { width: 100%; - object-fit: cover; + height: 600px; + background-color: #d0bee3; + border: 2px dashed #1a082c; + border-radius: 10px; + margin-bottom: 20px; + +} + +.hero { + margin-right: 20px; + margin-left: 20px; +} + +.main-article { + flex: 1; + background: white; + padding-top: 45px; + padding-left: 15px; + padding-right: 15px; + padding-bottom: 15px; + border: 2px solid #000; + border-radius: 10px; + margin-bottom: 20px; + text-align: justify; + margin-right: 20px; + margin-left: 20px; + +} + +.main-article p, +.small-article p { + font-size: 1.2em; } -/* ====== Site Layout ====== -Setting the overall rules for page regions -https://www.w3.org/WAI/tutorials/page-structure/regions/ -*/ -main { - max-width: var(--container); - margin: 0 auto calc(var(--space) * 4) auto; + + +.small-article h3 { + font-size: 1em; + color: #350763; + margin-bottom: 15px; + text-shadow: 2px 2px 4px rgba(225, 226, 237, 0.982); +} + + +.main-article h2 { + color: #350763; + margin-bottom: 15px; + text-shadow: 2px 2px 4px rgba(225, 226, 237, 0.982); } + +.btn { + display: inline-block; + padding: 4px 14px; + background-color: #350763; + color: white; + text-decoration: none; + border-radius: 5px; + margin-top: 10px; + font-size: 1.2em; + font-weight: bold; +} + +.btn:hover { + background-color: #c3e7fb; + color: #1a082c; +} + +.small-articles { + display: flex; + gap: 20px; + margin-bottom: 20px; + margin-right: 20px; + margin-left: 20px; + text-align: justify; + + +} + +.small-article { + flex: 1; + background: white; + padding: 15px; + border: 2px solid #000; + border-radius: 10px; +} + +.small-article h3 { + color: #350763; + margin-bottom: 10px; + font-size: 1.2em; +} + +.placeholder-small { + width: 100%; + height: 450px; + background-color: #d0bee3; + border: 2px dashed #1a082c; + border-radius: 10px; + margin-bottom: 15px; +} + footer { - position: fixed; - bottom: 0; + background-color: #d0bee3; + color: #1a082c; text-align: center; + text-shadow: 2px 2px 4px rgba(225, 226, 237, 0.982); + padding: 10px 15px; + line-height: 1.3; + font-size: 1em; + margin-top: auto; + } -/* ====== Articles Grid Layout ==== -Setting the rules for how articles are placed in the main element. -Inspect this in Devtools and click the "grid" button in the Elements view -Play with the options that come up. -https://developer.chrome.com/docs/devtools/css/grid -https://gridbyexample.com/learn/ -*/ -main { - display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--space); - > *:first-child { - grid-column: span 2; - } -} -/* ====== Article Layout ====== -Setting the rules for how elements are placed in the article. -Now laying out just the INSIDE of the repeated card/article design. -Keeping things orderly and separate is the key to good, simple CSS. -*/ -article { - border: var(--line); - padding-bottom: var(--space); - text-align: left; - display: grid; - grid-template-columns: var(--space) 1fr var(--space); - > * { - grid-column: 2/3; - } - > img { - grid-column: span 3; - } + +footer p { + font-weight: bold; } + +.footer-note { + font-size: 22px; + color: #1a082c; + margin-bottom: 5px; + text-shadow: 2px 2px 4px rgba(210, 213, 244, 0.982); + padding-top: 10px; + padding-bottom: 10px; + padding-left: 15px; + padding-right: 15px; + border-bottom: none; + /* optional: remove the thick bar */ + border-radius: 10px; + + +} + +.footer-note a:hover { + color: #c6e9e9; + text-shadow: 2px 2px 4px rgba(25, 32, 112, 0.982); + +} \ No newline at end of file diff --git a/index.html b/index.html deleted file mode 100644 index 80aa49666..000000000 --- a/index.html +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - Coursework - - - -

🧐 CYF Coursework Disposable Branch Previews

-
-
    -
  1. -

    Project 1: Wireframe

    -

    - Mentors: - open the assignment in a tab -

    -
    2. -
  2. -

    Project 2: Form Controls

    -

    - Mentors: - open the assignment in a tab -

    -
    3. -
-
- - -