Skip to content
This repository was archived by the owner on Jan 14, 2024. It is now read-only.

kossivi/Responsive-Cake-Webpage #76

Closed
Kos0606 wants to merge 7 commits into from
Closed

kossivi/Responsive-Cake-Webpage #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
62701a7
Cake project
Kos0606 Nov 24, 2020
37271f7
Responsive Cake Webpage
Kos0606 Nov 25, 2020
62387b6
Responsive Cake Webpage
Kos0606 Nov 25, 2020
735d74d
Responsive Cake Webpage
Kos0606 Nov 26, 2020
ca29565
Responsive Cake Webpage
Kos0606 Nov 26, 2020
9aada3e
Responsive Cake Webpage
Kos0606 Nov 27, 2020
4b2a5ac
practice percentage
Kos0606 Dec 11, 2020
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
60 changes: 60 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,70 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Responsive Cake webpage</title>
<!-- Add a link to your css file here -->
<link rel="stylesheet" href="style.css">

</head>

<body>
<!-- Add your markup here -->
<div class="flex-container">
<div>LOGO</div>
<div>CONTACT</div>


</div>

<br>

@pddys pddys Jan 12, 2021

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

While it's valid HTML, generally it's better to use css padding and margin instead of
to create spacing.

<br>

<div class="nav-bar">

@pddys pddys Jan 12, 2021

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

This could have been an unordered list? ul? or a nav?

As these aren't really divs, it's better to be semantic in your HTML

<div>ABOUT</div>
<div>LESSONS</div>
<div>ORDERING</div>
<div>CAKES</div>
<div>HOME</div>
</div>

<br>
<br>
<div class="main-content">
<div>HELLO
<p>INFORMATION</p>
</div>

<div>IMAGE CAROUSEL
<br>
<br>
<p>IMG1</p>

@pddys pddys Jan 12, 2021

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

If these are images, then it'd be better to use the image tag and some placeholder images.

<p>IMG2</p>
<p>IMG3</p>
<p>IMG4</p>
</div>
<br>
<br>

</div>

<br>
<br>


<div class="order-list">
<div>CAKE1</div>
<div>CAKE2</div>
<div>CAKE3</div>
<div>CAKE4</div>

</div>

<br>
<br>

<footer class="extra-info">

@pddys pddys Jan 12, 2021

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

This is a good use of a semantic HTML tag

<div>SITE MAP</div>
<div>CONTACT</div>
<div>DELIVERY</div>
</footer>
</body>

</html>
10 changes: 10 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
function participant(students, mentors) {

@pddys pddys Jan 12, 2021

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Was this from a different task?

let percentageOfStudent = students / (students + mentors)*100;
let percentageOfMentors = mentors / (students + mentors)*100;
return percentageOfStudent;

}
console.log("The percentage of student participant is" + " " + Math.round(participant(15, 8)) + "%");



11 changes: 6 additions & 5 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,22 @@
Create a responsive webpage showcasing your cake business

## Set up
1) Fork this repository (so you have a copy of it in your own Github account)
2) Clone the repository to your computer (so you can access it locally and can add code to it!)
--
3) Once you've started coding (folllowing the instructions below), remember to commit and push your code frequently.
4) When you're ready to share something (even if it's unfinished!), open a Pull Request so a teacher can review your work.

1. Fork this repository (so you have a copy of it in your own Github account)
2. ## Clone the repository to your computer (so you can access it locally and can add code to it!)
3. Once you've started coding (folllowing the instructions below), remember to commit and push your code frequently.
4. When you're ready to share something (even if it's unfinished!), open a Pull Request so a teacher can review your work.

## Exercise

### Start with your mobile design

- Draw a wireframe of how the website will look like on mobile
- Write the HTML following this mobile design
- Then write your CSS for everything to look great on mobile

### Then adapt the page to look good on desktop

- Now add media queries to your CSS, and change the layout and sizing of elements so they make better use of a wider screen

![Wireframe for inspiration:](./images/mums-w-frame.jpg)
74 changes: 74 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,75 @@
/* Add your styling here */

.flex-container {
display: flex;
background-color: #d3d3d3;
justify-content: space-around;
}

.flex-container > div {
background-color: #a9a9a9;
margin: 0.627em;

@pddys pddys Jan 13, 2021

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

There are some values here without much context as to why they exist. These are called 'magic numbers'.

It may be useful to add a comment explaining why you used these decimals.

padding: 1.255em;
font-size: 1.882em;
}

.nav-bar {
display: flex;

@pddys pddys Jan 13, 2021

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Good use of flex.

background-color: #d3d3d3;
justify-content: space-around;
flex-direction: row-reverse;
}

.nav-bar > div {
background-color: #0a0101;
margin: 0.627em;
padding: 0.1em;
font-size: 1.882em;
color: white;

@pddys pddys Jan 13, 2021

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

You've mixed hex colors and web safe colours here. It's best to stick to one format.

margin-top: 3.764em;
}

.main-content {
display: flex;
background-color: #a9a9a9;
}

.main-content > div {
background-color: #d3d3d3;
margin: 0.627em;
padding: 3.137em;
font-size: 1.875em;
}

.main-content div:nth-child(2) > p {

@pddys pddys Jan 13, 2021

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

In this case, it may have been better to add a new class, than target paragraphs using nth-child.

display: inline-block;
}

.order-list {
display: flex;
background-color: #a9a9a9;
}

.order-list > div {
background-color: #d3d3d3;
margin: 0.627em;
padding: 1.509em;
font-size: 1.882em;
}

.extra-info {
display: flex;
background-color: #a9a9a9;
}

.extra-info > div {
background-color: #f1f1f1;
margin: 0.627em;
padding: 0.937em;
font-size: 1.875;
}

@media only screen and (max-width: 100%) {

@pddys pddys Jan 13, 2021

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

max-width would take in absolute values rather than 100%.

body {

@pddys pddys Jan 13, 2021

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Was this left unfinished?

}
}