Skip to content

Commit fbbdb3b

Browse files
Lavanya-ProjectsLavanya-Projects
committed
Added links to all the articles on read more button and formatted the code alignment
1 parent 1644b8e commit fbbdb3b

4 files changed

Lines changed: 312 additions & 134 deletions

File tree

‎Form-Controls/firstform.html‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<form action="/my-handling-form-page" method="post">
2+
<style>
3+
/* CSS goes here */
4+
body {
5+
/* Center the form on the page */
6+
text-align: center;
7+
}
8+
9+
form {
10+
display: inline-block;
11+
/* Form outline */
12+
padding: 1em;
13+
border: 1px solid #cccccc;
14+
border-radius: 1em;
15+
}
16+
17+
p+p {
18+
margin-top: 1em;
19+
}
20+
21+
label {
22+
/* Uniform size & alignment */
23+
display: inline-block;
24+
min-width: 90px;
25+
text-align: right;
26+
}
27+
28+
input,
29+
textarea {
30+
/* To make sure that all text fields have the same font settings
31+
By default, text areas have a monospace font */
32+
font: 1em sans-serif;
33+
/* Uniform text field size */
34+
width: 300px;
35+
box-sizing: border-box;
36+
/* Match form field borders */
37+
border: 1px solid #999999;
38+
}
39+
40+
input:focus,
41+
textarea:focus {
42+
/* Set the outline width and style */
43+
outline-style: solid;
44+
/* To give a little highlight on active elements */
45+
outline-color: black;
46+
}
47+
48+
textarea {
49+
/* Align multiline text fields with their labels */
50+
vertical-align: top;
51+
/* Provide space to type some text */
52+
height: 5em;
53+
}
54+
55+
.button {
56+
/* Align buttons with the text fields */
57+
padding-left: 90px;
58+
/* same size as the label elements */
59+
}
60+
61+
button {
62+
/* This extra margin represent roughly the same space as the space
63+
between the labels and their text fields */
64+
margin-left: 0.5em;
65+
}
66+
</style>
67+
<p>
68+
<label for="name">Name:</label>
69+
<input type="text" id="name" name="user_name" />
70+
</p>
71+
<p>
72+
<label for="mail">Email:</label>
73+
<input type="email" id="mail" name="user_email" />
74+
</p>
75+
<p>
76+
<label for="msg">Message:</label>
77+
<textarea id="msg" name="user_message"></textarea>
78+
</p>
79+
</form>

‎Wireframe/index.html‎

Lines changed: 60 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,66 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Wireframe</title>
7-
<link rel="stylesheet" href="style.css" />
8-
</head>
9-
<body>
10-
<header>
11-
<h1>WIREFRAME</h1>
12-
<p class="description">
13-
A wireframe is a simple visual outline of a webpage or app screen. Think of it like a blueprint for a house; it shows the structure, not the decoration. </p>
14-
</header>
15-
<main>
16-
<article>
17-
<img src="https://cdn-thumbnails.huggingface.co/social-thumbnails/spaces/StabRise/README.png" alt="ReadMe file Image" />
18-
<h2>README file</h2>
19-
<p>
20-
A README is the first file people read when they open a project. It explains what the project is, how to install it, how to use it, and any important notes. It helps users and contributors understand the project quickly without reading all the code.
21-
</p>
22-
<a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more</a>
23-
</article>
24-
<article>
25-
<img src="https://tse1.mm.bing.net/th/id/OIP.mVq3zkrWKT_pEi-AgfvHLgHaEY?r=0&rs=1&pid=ImgDetMain&o=7&rm=3" alt="Image of wireframe" />
26-
<h2>Wireframe</h2>
27-
<p>
28-
A wireframe is a simple sketch that maps out the layout of a webpage before any design work begins. It focuses on the placement of elements like headings, images, buttons, and text blocks.<br>
293

30-
Instead of thinking about colours or styling, a wireframe helps you understand how information is organised and how users will move through the page. It’s a planning tool that shows structure first, design later.
31-
</p>
32-
<a href="https://www.figma.com/resource-library/what-is-wireframing/">Read more</a>
33-
</article>
34-
<article>
35-
<img src="https://community.appsmith.com/sites/default/files/styles/wide/public/2023-10/git-branch_0.png?itok=qNGcbtVy" alt="Git Branch Image" />
36-
<h2>Git Branch</h2>
37-
<p>
38-
A Git branch is a separate workspace where you can make changes without affecting the main project.<br>
39-
It lets you develop features, fix bugs, or experiment safely. When the work is ready, the branch is merged back into the main codebase.
40-
</p>
41-
<a href="https://curriculum.codeyourfuture.io/itp/onboarding/sprints/1/prep/#branching">Read more</a>
42-
</article>
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Wireframe</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
4310

44-
</main>
45-
<footer>
11+
<body>
12+
<header>
13+
<h1>WIREFRAME</h1>
14+
<p class="description">
15+
A wireframe is a simple visual outline of a webpage or app screen. Think of it like a blueprint for a house; it
16+
shows the structure, not the decoration. </p>
17+
</header>
18+
<main>
19+
<article>
20+
<img src="https://cdn-thumbnails.huggingface.co/social-thumbnails/spaces/StabRise/README.png"
21+
alt="ReadMe file Image" />
22+
<h2>README file</h2>
4623
<p>
47-
This is the default, provided code and no changes have been made yet.
24+
A README is the first file people read when they open a project. It explains what the project is, how to install
25+
it, how to use it, and any important notes. It helps users and contributors understand the project quickly
26+
without reading all the code.
4827
</p>
49-
</footer>
50-
</body>
51-
</html>
28+
<a
29+
href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read
30+
more</a>
31+
</article>
32+
<article>
33+
<img src="https://tse1.mm.bing.net/th/id/OIP.mVq3zkrWKT_pEi-AgfvHLgHaEY?r=0&rs=1&pid=ImgDetMain&o=7&rm=3"
34+
alt="Image of wireframe" />
35+
<h2>Wireframe</h2>
36+
<p>
37+
A wireframe is a simple sketch that maps out the layout of a webpage before any design work begins. It focuses
38+
on the placement of elements like headings, images, buttons, and text blocks.<br>
39+
40+
Instead of thinking about colours or styling, a wireframe helps you understand how information is organised and
41+
how users will move through the page. It’s a planning tool that shows structure first, design later.
42+
</p>
43+
<a href="https://www.figma.com/resource-library/what-is-wireframing/">Read more</a>
44+
</article>
45+
<article>
46+
<img
47+
src="https://community.appsmith.com/sites/default/files/styles/wide/public/2023-10/git-branch_0.png?itok=qNGcbtVy"
48+
alt="Git Branch Image" />
49+
<h2>Git Branch</h2>
50+
<p>
51+
A Git branch is a separate workspace where you can make changes without affecting the main project.<br>
52+
It lets you develop features, fix bugs, or experiment safely. When the work is ready, the branch is merged back
53+
into the main codebase.
54+
</p>
55+
<a href="https://curriculum.codeyourfuture.io/itp/onboarding/sprints/1/prep/#branching">Read more</a>
56+
</article>
57+
58+
</main>
59+
<footer>
60+
<p>
61+
This is the default, provided code and no changes have been made yet.
62+
</p>
63+
</footer>
64+
</body>
65+
66+
</html>

‎Wireframe/style.css‎

Lines changed: 96 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,96 @@
1-
/* Here are some starter styles
2-
You can edit these or replace them entirely
3-
It's showing you a common way to organise CSS
4-
And includes solutions to common problems
5-
As well as useful links to learn more */
6-
7-
/* ====== Design Palette ======
8-
This is our "design palette".
9-
It sets out the colours, fonts, styles etc to be used in this design
10-
At work, a designer will give these to you based on the corporate brand, but while you are learning
11-
You can design it yourself if you like
12-
Inspect the starter design with Devtools
13-
Click on the colour swatches to see what is happening
14-
I've put some useful CSS you won't have learned yet
15-
For you to explore and play with if you are interested
16-
https://web.dev/articles/min-max-clamp
17-
https://scrimba.com/learn-css-variables-c026
18-
====== Design Palette ====== */
19-
:root {
20-
--paper: oklch(7 0 0);
21-
--ink: color-mix(in oklab, var(--color) 5%, black);
22-
--font: 100%/1.5 system-ui;
23-
--space: clamp(6px, 6px + 2vw, 15px);
24-
--line: 1px solid;
25-
--container: 1280px;
26-
}
27-
/* ====== Base Elements ======
28-
General rules for basic HTML elements in any context */
29-
body {
30-
background: var(--paper);
31-
color: var(--ink);
32-
font: var(--font);
33-
}
34-
a {
35-
padding: var(--space);
36-
border: var(--line);
37-
max-width: fit-content;
38-
}
39-
img,
40-
svg {
41-
width: 100%;
42-
object-fit: cover;
43-
}
44-
/* ====== Site Layout ======
45-
Setting the overall rules for page regions
46-
https://www.w3.org/WAI/tutorials/page-structure/regions/
47-
*/
48-
main {
49-
max-width: var(--container);
50-
margin: 0 auto calc(var(--space) * 4) auto;
51-
}
52-
footer {
53-
position: fixed;
54-
bottom: 0;
55-
text-align: center;
56-
}
57-
/* ====== Articles Grid Layout ====
58-
Setting the rules for how articles are placed in the main element.
59-
Inspect this in Devtools and click the "grid" button in the Elements view
60-
Play with the options that come up.
61-
https://developer.chrome.com/docs/devtools/css/grid
62-
https://gridbyexample.com/learn/
63-
*/
64-
main {
65-
display: grid;
66-
grid-template-columns: 1fr 1fr;
67-
gap: var(--space);
68-
> *:first-child {
69-
grid-column: span 2;
70-
}
71-
}
72-
/* ====== Article Layout ======
73-
Setting the rules for how elements are placed in the article.
74-
Now laying out just the INSIDE of the repeated card/article design.
75-
Keeping things orderly and separate is the key to good, simple CSS.
76-
*/
77-
article {
78-
border: var(--line);
79-
padding-bottom: var(--space);
80-
text-align: left;
81-
display: grid;
82-
grid-template-columns: var(--space) 1fr var(--space);
83-
> * {
84-
grid-column: 2/3;
85-
}
86-
> img {
87-
grid-column: span 3;
88-
}
89-
}
1+
/* Here are some starter styles
2+
You can edit these or replace them entirely
3+
It's showing you a common way to organise CSS
4+
And includes solutions to common problems
5+
As well as useful links to learn more */
6+
7+
/* ====== Design Palette ======
8+
This is our "design palette".
9+
It sets out the colours, fonts, styles etc to be used in this design
10+
At work, a designer will give these to you based on the corporate brand, but while you are learning
11+
You can design it yourself if you like
12+
Inspect the starter design with Devtools
13+
Click on the colour swatches to see what is happening
14+
I've put some useful CSS you won't have learned yet
15+
For you to explore and play with if you are interested
16+
https://web.dev/articles/min-max-clamp
17+
https://scrimba.com/learn-css-variables-c026
18+
====== Design Palette ====== */
19+
:root {
20+
--paper: oklch(7 0 0);
21+
--ink: color-mix(in oklab, var(--color) 5%, black);
22+
--font: 100%/1.5 system-ui;
23+
--space: clamp(6px, 6px + 2vw, 15px);
24+
--line: 1px solid;
25+
--container: 1280px;
26+
}
27+
/* ====== Base Elements ======
28+
General rules for basic HTML elements in any context */
29+
h1{
30+
text-align: center;
31+
}
32+
.description{
33+
text-align: center;
34+
35+
}
36+
body {
37+
background: var(--paper);
38+
color: var(--ink);
39+
font: var(--font);
40+
}
41+
a {
42+
padding: var(--space);
43+
border: var(--line);
44+
max-width: fit-content;
45+
}
46+
img,
47+
svg {
48+
width: 100%;
49+
object-fit: cover;
50+
}
51+
/* ====== Site Layout ======
52+
Setting the overall rules for page regions
53+
https://www.w3.org/WAI/tutorials/page-structure/regions/
54+
*/
55+
main {
56+
max-width: var(--container);
57+
margin: 0 auto calc(var(--space) * 4) auto;
58+
}
59+
footer {
60+
position: fixed;
61+
bottom: 0;
62+
text-align: center;
63+
}
64+
/* ====== Articles Grid Layout ====
65+
Setting the rules for how articles are placed in the main element.
66+
Inspect this in Devtools and click the "grid" button in the Elements view
67+
Play with the options that come up.
68+
https://developer.chrome.com/docs/devtools/css/grid
69+
https://gridbyexample.com/learn/
70+
*/
71+
main {
72+
display: grid;
73+
grid-template-columns: 1fr 1fr;
74+
gap: var(--space);
75+
> *:first-child {
76+
grid-column: span 2;
77+
}
78+
}
79+
/* ====== Article Layout ======
80+
Setting the rules for how elements are placed in the article.
81+
Now laying out just the INSIDE of the repeated card/article design.
82+
Keeping things orderly and separate is the key to good, simple CSS.
83+
*/
84+
article {
85+
border: var(--line);
86+
padding-bottom: var(--space);
87+
text-align: left;
88+
display: grid;
89+
grid-template-columns: var(--space) 1fr var(--space);
90+
> * {
91+
grid-column: 2/3;
92+
}
93+
> img {
94+
grid-column: span 3;
95+
}
96+
}

0 commit comments

Comments
 (0)