Skip to content

Commit 6b78f16

Browse files
author
Sally McGrath
committed
in class pair code project from NW4 W2
grid and flexbox
1 parent 13b764e commit 6b78f16

File tree

5 files changed

+99
-0
lines changed

5 files changed

+99
-0
lines changed

‎Two-Truths-One-Lie/README.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# HTML-CSS-W2-InClassProject
2+
3+
## Aim
4+
5+
- use CSS grid
6+
- use CSS flexbox
7+
- test your code
8+
9+
##
10+
11+
- Work in pairs.
12+
- Write two truths and a lie each.
13+
- Mark up your content with semantic HTML
14+
- Lay out your page using flexbox and grid
15+
- Test your work with Devtools.
16+
- You can get pictures and choose custom size in the download at https://www.pexels.com/
17+
- If you want to use a different font, get them from https://fonts.google.com/
18+
- You can change the colours if you like
19+
20+
## Testing your work
21+
22+
Developers must test their work. Here are the tests for your project. Read your tests before you start coding.
23+
24+
### CSS tests
25+
26+
- [ ] we have used grid
27+
- [ ] we have used flexbox
28+
- [ ] we have used at least one media query
29+
30+
### HTML tests
31+
32+
- [ ] our names are at the bottom
33+
- [ ] we have written semantic HTML
34+
- [ ] we have looked in the Accessibility tree
35+
- [ ] our Lighthouse Access score is 100
36+
37+
### Design tests
38+
39+
- [ ] our layout works on desktop and mobile
40+
- [ ] our cards are side by side on large screens and stacked on smaller screens
41+
- [ ] we have taken a screenshot at laptop and Moto G4 device sizes using Devtools
42+
- [ ] when we size the text up by 200%, our layout does not break

‎Two-Truths-One-Lie/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title>Our Grid Project</title>
7+
<meta name="description" content="">
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<link rel="stylesheet" href="styles.css">
10+
<link rel="preconnect" href="https://fonts.gstatic.com">
11+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap" rel="stylesheet">
12+
</head>
13+
<body>
14+
<header>
15+
<h1>Two Truths, One Lie</h1>
16+
</header>
17+
<main>
18+
<!-- how will you mark up your media objects -->
19+
</main>
20+
<footer>
21+
<h3>By YOUR NAMES HERE</h3>
22+
</footer>
23+
</body>
24+
</html>

‎Two-Truths-One-Lie/laptop.png‎

600 KB
Loading

‎Two-Truths-One-Lie/moto-g4.png‎

523 KB
Loading

‎Two-Truths-One-Lie/styles.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/* HTML/CSS W2 Project
2+
* Work in pairs
3+
* Mark up your content with semantic html
4+
* Lay out your page using flexbox and grid
5+
* Test your work with Devtools.
6+
* You can get pictures and choose custom size in the download at
7+
* https://www.pexels.com/
8+
* If you want to use a different font, get them from
9+
* https://fonts.google.com/
10+
*/
11+
12+
/* Testing your work
13+
== check your CSS
14+
* uses grid
15+
* uses flexbox
16+
* uses at least one media query
17+
18+
== check your HTML
19+
* uses semantic HTML
20+
* has a Lighthouse Access score of 100 <--
21+
* works on desktop and mobile
22+
* works when you size the text up by 200%
23+
24+
== check your design
25+
* follows the example
26+
* you can choose your own colours and fonts if you like
27+
* write your names at the bottom
28+
* take a screenshot at laptop and Moto G4 device sizes in Devtools
29+
*/
30+
31+
body {
32+
font: 100% "Poppins", sans-serif;
33+
}

0 commit comments

Comments
 (0)