Skip to content
This repository has been archived by the owner on Feb 27, 2023. It is now read-only.

completed exercises 2 and 3 #61

Open
wants to merge 24 commits into
base: master
Choose a base branch
from
Open

completed exercises 2 and 3 #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
6583347
finished the first task
zenebu Feb 2, 2019
ba1e06f
implemented exrcise 1and 4
zenebu Feb 2, 2019
6a85db9
Fix some formatting errors
zenebu Feb 6, 2019
5ae2215
media screen
zenebu Feb 23, 2019
aeb08e5
modified content
zenebu Feb 23, 2019
b93b81c
modified align items
zenebu Feb 23, 2019
419e79d
modified align self
zenebu Feb 23, 2019
cd6a385
flexbox properties
zenebu Feb 23, 2019
83569eb
navigation menu modified
zenebu Feb 23, 2019
650cc2a
using html form
zenebu Feb 23, 2019
9ae63b7
button modified
zenebu Feb 23, 2019
e297a14
checkout modified
zenebu Feb 23, 2019
5d24c87
checkout modified
zenebu Feb 23, 2019
791413a
comment textarea
zenebu Feb 23, 2019
62a9dd9
checkbox modified
zenebu Feb 23, 2019
b06e3fb
selected attribute
zenebu Feb 23, 2019
3c3f1b9
billing address modified
zenebu Feb 23, 2019
1061549
Some changes
zenebu Feb 23, 2019
5082327
message background colour
zenebu Feb 23, 2019
fd1a6cd
styles css
zenebu Feb 23, 2019
9e75cea
fornatting some error
zenebu Feb 23, 2019
57ae0a5
checkout modified
zenebu Feb 28, 2019
89de248
links colour changes
zenebu Feb 28, 2019
ac03f7c
Merge branch 'master' into master
zenebu Feb 28, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions npm-debug.log
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'week', '1/4' ]
2 info using [email protected]
3 info using [email protected]
4 verbose stack Error: missing script: week
4 verbose stack at run (/usr/share/npm/lib/run-script.js:147:19)
4 verbose stack at /usr/share/npm/lib/run-script.js:57:5
4 verbose stack at /usr/share/npm/node_modules/read-package-json/read-json.js:345:5
4 verbose stack at checkBinReferences_ (/usr/share/npm/node_modules/read-package-json/read-json.js:309:45)
4 verbose stack at final (/usr/share/npm/node_modules/read-package-json/read-json.js:343:3)
4 verbose stack at then (/usr/share/npm/node_modules/read-package-json/read-json.js:113:5)
4 verbose stack at /usr/share/npm/node_modules/read-package-json/read-json.js:300:12
4 verbose stack at /usr/share/npm/node_modules/graceful-fs/graceful-fs.js:76:16
4 verbose stack at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:511:3)
5 verbose cwd /home/coder/html-css-git-exercises
6 error Linux 4.15.0-45-generic
7 error argv "/usr/bin/node" "/usr/bin/npm" "run" "week" "1/4"
8 error node v8.10.0
9 error npm v3.5.2
10 error missing script: week
11 error If you need help, you may report this error at:
11 error <https://github.com/npm/npm/issues>
12 verbose exit [ 1, true ]
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Be careful to review your changes before committing them :). Use git status and git diff to check what's changed and what you are adding, and don't use the commands git add . or git commit -am (even if you see instructions somewhere that say to do that 🙂 ).

20 changes: 11 additions & 9 deletions week-1/1-parent-child/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,25 +10,27 @@
</head>

<body>
<div class="site-wrapper">
<div class="site-header">
<header role="banner"></header>
<main role="main">
<header role="banner">
<div class="site-header__title">Messages</div>
</div>
</header>

<div class="messages">
<div class="message">
<article>
<div class="message__author">Anthony</div>
<p class="message__content">
Who is available to meet this week to work on our group project?
</p>
<span class="message__time">6:48pm</span>
</div>
<div class="message">
<time datetime="19:15"></time>
</article>
<article>
<div class="message__author">Habiba</div>
<p class="message__content">
I can meet on Tuesday and Wednesday after 4.
</p>
</div>
</article>
</div>
</div>
</main>
</body>
</html>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The only thing you're meant to do for exercise 1 is add a time value to the HTML. Exercises 2 and 3 should be changes in other files (you don't seem to have done those?).

2 changes: 2 additions & 0 deletions week-1/4-links-scripts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<meta charset="utf-8" />
<title>4. Adding Links and Scripts - HTML, CSS and Git Exercises</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./css/missing-styles.css" />
</head>

<body>
Expand Down Expand Up @@ -33,5 +34,6 @@
</div>
</div>
</div>
<script src="./js/convertUrls.js"></script>
</body>
</html>
11 changes: 11 additions & 0 deletions week-1/5-css-selectors/message-backgrounds.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,12 @@
/* Add your CSS code below */
article {
background-color: cadetblue;
}

.message--latest {
background-color: yellow;
}

#first-message {
background-color: red;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good!

16 changes: 16 additions & 0 deletions week-1/6-css-properties/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,17 @@
/* Add your CSS code below */
.link-link--gif,
.link-link--map {
color: red;
font-weight: bold;
text-decoration: none;
}
.message_time {
font-size: 0.9rem;
}
.message_content {
opacity: 1;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you check whether this works? Always run the code (or view the web page here) and make sure the changes you make have the intended effect. Look up what opacity does and try to experiment with different values.

line-height: 36px;
}
.message_unread {
border-left: 5px dashed blue;
}
11 changes: 11 additions & 0 deletions week-2/10-media-queries/columns.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,12 @@
/* Add your own CSS code below */
@media screen and (min-width: 768px) {
.countries {
columns: 2;
}
}

@media screen and (min-width: 1200px) {
.countries {
columns: 3;
}
}
10 changes: 10 additions & 0 deletions week-2/12-justify-content/flexbox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,13 @@
}

/* Add your own CSS code below */
.countries--second {
display: flex;
flex-direction: flex-end;
justify-content: space-between;
}
.countries--first {
display: flex;
flex-direction: flex-end;
justify-content: flex-end;
}
21 changes: 21 additions & 0 deletions week-2/13-align-items/flexbox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,24 @@
display: flex;
}
/* Add your own CSS code below */

.countries--third {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.countries--first {
display: flex;
flex-direction: row;
align-items: center;
}
.countries--second {
display: flex;
flex-direction: row-reverse;
align-items: flex-end;
}
.countries--fourth {
display: flex;
flex-direction: column-reverse;
align-items: center;
}
22 changes: 22 additions & 0 deletions week-2/14-order/flexbox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,25 @@
}

/* Add your own CSS code below */

.countries--first .country--brazil {
order: 1;
}

.countries--second .country--croatia {
order: 1;
}
.countries--second .country--ethiopia {
order: -1;
}
.countries--second .country--laos {
order: -1;
}
.countries--second .country--brazil {
order: -1;
}
.countries--countries--third {
display: flex;
flex-direction: row-reverse;
align-items: flex-end;
}
23 changes: 23 additions & 0 deletions week-2/15-align-self/flexbox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,26 @@
}

/* Add your own CSS code below */
countries--first {
display: flex;
}

.countries--first .country--ethiopia {
align-self: flex-end;
}
.countries--second {
display: flex;
align-items: center;
}
.country--croatia {
align-self: flex-end;
}
.country--laos {
align-self: flex-end;
}
.country--brazil {
align-self: flex-start;
}
.country--uganda {
align-self: flex-start;
}
38 changes: 38 additions & 0 deletions week-2/16-more-flexbox/flexbox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,41 @@
}

/* Add your own CSS code below */
.countries--first {
flex-direction: row;
align-items: flex-end;
justify-content: flex-end;
}
.countries--second {
flex-direction: row;
align-items: flex-end;
justify-content: center;
}
.countries--third {
flex-direction: row;
align-items: flex-start;
}
.countries--third .country--brazil {
flex-direction: column;
align-items: flex-end;
}
.countries--fourth {
flex-direction: column;
align-items: flex-end;
justify-content: center;
}
.countries--fourth .country--ethiopis,
.countries--fourth .country--laos {
align-self: center;
}
.countries--fifth {
flex-direction: column-reverse;
align-items: flex-end;
justify-content: space-between;
}
.countries--fifth .country--uganda {
align-self: center;
}
.countries--fifth .country--laos {
order: 1;
}
19 changes: 19 additions & 0 deletions week-2/17-nav-menu/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,20 @@
/* Write your media queries and flexbox CSS below */
@media (min-width: 480px) {
.site-header__nav {
display: flex;
align-items: center;
}
}
@media (min-width: 700px) {
.site-header {
display: flex;
align-items: center;
}
}
@media (min-width: 992px) {
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
}
}
4 changes: 3 additions & 1 deletion week-3/19-search/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@
<body>
<div class="site-wrapper">
<main>
<p>Delete this line and add your form.</p>
<form action="https://www.google.com/search" method="Git">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're confusing GET with Git here 🙂

<input type="submit" value="Google search" />
</form>
</main>
</div>
</body>
Expand Down
3 changes: 2 additions & 1 deletion week-3/21-buttons/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
<form method="GET" action="https://www.google.com/search">
<label for="search-input">Search on Google</label>
<input type="text" name="q" id="search-input" />
<!-- Add a submit button here -->
<input type="text" name="q" id="search-input" />
<button>search</button>
</form>
</main>
</div>
Expand Down
8 changes: 6 additions & 2 deletions week-3/22-checkout/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,12 @@ <h1 class="shopping-basket__title">Your Shopping Basket</h1>
<div class="checkout">
<h2 class="checkout__title">Checkout</h2>
<form method="GET" id="checkout-form" class="checkout__form">
<!-- Add the form fields here -->

<label> for="customer-name">customer-name</label>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The text values for the labels should be normal text the user will see on screen, so something like "Name" rather than "customer-name", and "Email" rather than "customer-email".

<input id="customer-name" type="text" name="customer-name">
<label for="email">customer-email</label>
<input id="email" type="email" name="customer-email">
<label for="tel">customer-phone</label>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The for attribute must match the id attribute of the element it corresponds to. The id isn't tel in this case.

<input id="cusomer-phone" type="tel" name="cusomer-phone">
<button type="submit">Complete Purchase</button>
</form>
</div>
Expand Down
6 changes: 5 additions & 1 deletion week-3/23-comments/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,12 @@ <h1>Our t-shirts are amazing!</h1>

<div class="comments">
<p>Add your comments and let us know what you think!</p>
<form>
<label>Add Your Message</label>
<textarea> comment </textarea>
<button>Send Comment</button>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remember the label must always be explicitly matched to another element (even if it seems obvious to you what it is for here, because there is only one input field. We saw two ways to do this, you can use either.

</form>

<!-- Your comment form goes here -->
</div>
</main>
</div>
Expand Down
24 changes: 23 additions & 1 deletion week-3/24-dietary/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,29 @@ <h1>CodeYourFuture Summit</h1>
</p>

<form>
<!-- Your multiple choice goes here -->
<fieldset>
<legend>dietry requirments</legend>
<label>
<input type="checkbox" name="yumy food" value="ha" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Watch out for typos. You have two fields here, one called yumy food and one called yummy food.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tanks for your feedback and recommendation.i will finish the rest of exercises.

Halal
</label>
<label>
<input type="checkbox" name="yummy food" value="ko" />
Kosher
</label>
<label>
<input type="checkbox" name="yummy food" value="ve" />
Vegeterian
</label>
<label>
<input type="checkbox" name="yummy food" value="ve" />
Vegan
</label>
<label>
<input type="checkbox" name="yummy food" value="gl" />
Gluten Free
</label>
</fieldset>
<button type="submit">Submit</button>
</form>
</main>
Expand Down
9 changes: 8 additions & 1 deletion week-3/25-shirt-size/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,14 @@ <h1 class="shopping-basket__title">Your Shopping Basket</h1>
</div>
</td>
<td>
Medium
<form>
<label class="screenreader">Choose a size</label>
<select>
<option>Small</option>
<option selected>Medium</option>
<option>Large</option>
</select>
</form>
</td>
<td>
1
Expand Down
14 changes: 13 additions & 1 deletion week-3/26-checkout-groups/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
<main>
<div class="shopping-basket">
<h1 class="shopping-basket__title">Your Shopping Basket</h1>

<table class="shopping-basket__items">
<tr>
<th>Product</th>
Expand All @@ -37,7 +38,18 @@ <h1 class="shopping-basket__title">Your Shopping Basket</h1>
<div class="checkout">
<h2 class="checkout__title">Checkout</h2>
<form method="GET" id="checkout-form" class="checkout__form">
<!-- Add the form fields here -->
<fieldset>
<legend>"Billing Address"</legend>

<label for="Address-line-1">Address-line-1</label>
<input type="text" name="address-line-1" id="address-line-2" />
<label for="Address-line-2">Address-line-2</label>
<input type="text" name="address-line-2" id="address-line-2" />
<label for="Postcode">Postcode</label>
<input type="text" name="Postcode" id="Postcode" />
<label for="City">City</label>
<input type="text" name="city" id="city" />
</fieldset>

<button type="submit">Complete Purchase</button>
</form>
Expand Down
Loading