diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-4.zip b/INFO-1252 (Front End Dev)/Labs/Lab-4.zip new file mode 100644 index 0000000..57907ab Binary files /dev/null and b/INFO-1252 (Front End Dev)/Labs/Lab-4.zip differ diff --git a/INFO-1252 (Front End Dev)/Labs/Lab 4/images/dinner.jpg b/INFO-1252 (Front End Dev)/Labs/Lab-4/images/dinner.jpg similarity index 100% rename from INFO-1252 (Front End Dev)/Labs/Lab 4/images/dinner.jpg rename to INFO-1252 (Front End Dev)/Labs/Lab-4/images/dinner.jpg diff --git a/INFO-1252 (Front End Dev)/Labs/Lab 4/images/dinnerparty.jpg b/INFO-1252 (Front End Dev)/Labs/Lab-4/images/dinnerparty.jpg similarity index 100% rename from INFO-1252 (Front End Dev)/Labs/Lab 4/images/dinnerparty.jpg rename to INFO-1252 (Front End Dev)/Labs/Lab-4/images/dinnerparty.jpg diff --git a/INFO-1252 (Front End Dev)/Labs/Lab 4/images/nachos.jpg b/INFO-1252 (Front End Dev)/Labs/Lab-4/images/nachos.jpg similarity index 100% rename from INFO-1252 (Front End Dev)/Labs/Lab 4/images/nachos.jpg rename to INFO-1252 (Front End Dev)/Labs/Lab-4/images/nachos.jpg diff --git a/INFO-1252 (Front End Dev)/Labs/Lab 4/images/smileyface.png b/INFO-1252 (Front End Dev)/Labs/Lab-4/images/smileyface.png similarity index 100% rename from INFO-1252 (Front End Dev)/Labs/Lab 4/images/smileyface.png rename to INFO-1252 (Front End Dev)/Labs/Lab-4/images/smileyface.png diff --git a/INFO-1252 (Front End Dev)/Labs/Lab 4/images/squares_bg.png b/INFO-1252 (Front End Dev)/Labs/Lab-4/images/squares_bg.png similarity index 100% rename from INFO-1252 (Front End Dev)/Labs/Lab 4/images/squares_bg.png rename to INFO-1252 (Front End Dev)/Labs/Lab-4/images/squares_bg.png diff --git a/INFO-1252 (Front End Dev)/Labs/Lab 4/index.html b/INFO-1252 (Front End Dev)/Labs/Lab-4/index.html similarity index 100% rename from INFO-1252 (Front End Dev)/Labs/Lab 4/index.html rename to INFO-1252 (Front End Dev)/Labs/Lab-4/index.html diff --git a/INFO-1252 (Front End Dev)/Labs/Lab 4/styles/styles.css b/INFO-1252 (Front End Dev)/Labs/Lab-4/styles/styles.css similarity index 69% rename from INFO-1252 (Front End Dev)/Labs/Lab 4/styles/styles.css rename to INFO-1252 (Front End Dev)/Labs/Lab-4/styles/styles.css index 97f8904..2c12bf7 100644 --- a/INFO-1252 (Front End Dev)/Labs/Lab 4/styles/styles.css +++ b/INFO-1252 (Front End Dev)/Labs/Lab-4/styles/styles.css @@ -1,12 +1,12 @@ /* Beginner elements */ * { - font-size: 62.5%; - padding: 0; margin: 0; } body { background: url(../images/squares_bg.png); + font-family: Helvetica, sans-serif; + font-size: 1rem; } /* Header and logo */ @@ -20,13 +20,13 @@ h1, h2 { font-family: "Dancing Script", cursive; color: teal; - font-size: 3rem; + font-size: 2rem; text-shadow: 2px 2px 4px grey; - margin: 2rem auto; + margin-left: 1.2rem; } .main-heading { - font-size: 4rem; + font-size: 2.2rem; text-align: center; } @@ -38,8 +38,9 @@ nav { margin: 2rem 0; } +ul, a { - font-size: 2rem; + font-size: 1rem; text-decoration: none; list-style: none; display: block; @@ -53,8 +54,7 @@ a { /* Recipe card styling */ .recipe-card { margin: 2rem 1rem; - font-size: 3rem; - font-family: Helvetica, sans-serif; + font-size: 1rem; border: 2px solid grey; background-color: white; border-radius: 5px; @@ -71,32 +71,56 @@ a { text-align: left; line-height: 25px; margin: 2rem; + color: grey; + font-weight: bold; + font-family: Helvetica, sans-serif; } .author { text-align: right; + margin-right: 1rem; + color: grey; } .publish-date { text-align: right; + color: rgba(75, 75, 75, 0.507); + margin-right: 1rem; } /* About section styling */ .about-sandy { background-color: grey; background-image: url(../images/squares_bg.png); + padding-bottom: 1rem; + margin-bottom: 0.3rem; +} + +.about-sandy p { + text-align: left; + line-height: 1.6rem; + margin: 2rem; + color: lightgrey; + font-weight: bold; +} + +.about-sandy h2 { + color: white; + font-size: 3rem; + text-shadow: 2px 2px 4px black; } /* Footer styling */ footer { background: teal; - border-top: 2px solid white; - font-size: 2rem; + font-size: 1rem; color: lightgrey; - margin: 2rem auto; + padding: 2rem; + text-align: center; + line-height: 1.6; } + footer strong { color: white; - font-size: 2rem; } \ No newline at end of file diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-5/Lab 5 - Desktop Version - Screenshot.png b/INFO-1252 (Front End Dev)/Labs/Lab-5/Lab 5 - Desktop Version - Screenshot.png new file mode 100644 index 0000000..fe489b2 Binary files /dev/null and b/INFO-1252 (Front End Dev)/Labs/Lab-5/Lab 5 - Desktop Version - Screenshot.png differ diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-5/Lab 5 - Mobile Version - Screenshot.png b/INFO-1252 (Front End Dev)/Labs/Lab-5/Lab 5 - Mobile Version - Screenshot.png new file mode 100644 index 0000000..fa94c77 Binary files /dev/null and b/INFO-1252 (Front End Dev)/Labs/Lab-5/Lab 5 - Mobile Version - Screenshot.png differ diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-5/Lab 5 - Tablet Version - Screenshot.png b/INFO-1252 (Front End Dev)/Labs/Lab-5/Lab 5 - Tablet Version - Screenshot.png new file mode 100644 index 0000000..6888980 Binary files /dev/null and b/INFO-1252 (Front End Dev)/Labs/Lab-5/Lab 5 - Tablet Version - Screenshot.png differ diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-5/images/dinner.jpg b/INFO-1252 (Front End Dev)/Labs/Lab-5/images/dinner.jpg new file mode 100644 index 0000000..91b1cb6 Binary files /dev/null and b/INFO-1252 (Front End Dev)/Labs/Lab-5/images/dinner.jpg differ diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-5/images/dinnerparty.jpg b/INFO-1252 (Front End Dev)/Labs/Lab-5/images/dinnerparty.jpg new file mode 100644 index 0000000..51be395 Binary files /dev/null and b/INFO-1252 (Front End Dev)/Labs/Lab-5/images/dinnerparty.jpg differ diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-5/images/nachos.jpg b/INFO-1252 (Front End Dev)/Labs/Lab-5/images/nachos.jpg new file mode 100644 index 0000000..d626d75 Binary files /dev/null and b/INFO-1252 (Front End Dev)/Labs/Lab-5/images/nachos.jpg differ diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-5/images/photo-small.jpg b/INFO-1252 (Front End Dev)/Labs/Lab-5/images/photo-small.jpg new file mode 100644 index 0000000..fbd7428 Binary files /dev/null and b/INFO-1252 (Front End Dev)/Labs/Lab-5/images/photo-small.jpg differ diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-5/images/photo.jpg b/INFO-1252 (Front End Dev)/Labs/Lab-5/images/photo.jpg new file mode 100644 index 0000000..50aceca Binary files /dev/null and b/INFO-1252 (Front End Dev)/Labs/Lab-5/images/photo.jpg differ diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-5/images/smileyface.png b/INFO-1252 (Front End Dev)/Labs/Lab-5/images/smileyface.png new file mode 100644 index 0000000..c101a18 Binary files /dev/null and b/INFO-1252 (Front End Dev)/Labs/Lab-5/images/smileyface.png differ diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-5/images/squares_bg.png b/INFO-1252 (Front End Dev)/Labs/Lab-5/images/squares_bg.png new file mode 100644 index 0000000..e20ec33 Binary files /dev/null and b/INFO-1252 (Front End Dev)/Labs/Lab-5/images/squares_bg.png differ diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-5/index.html b/INFO-1252 (Front End Dev)/Labs/Lab-5/index.html new file mode 100644 index 0000000..6a0c6f9 --- /dev/null +++ b/INFO-1252 (Front End Dev)/Labs/Lab-5/index.html @@ -0,0 +1,111 @@ + + + + + Sandy's Cooking Blog + + + + + + + + + +
+ +

Sandy's Cooking Blog

+ + +
+ + +
+ +
+
+

Dinner Party Ideas

+
By: John
+
Jan 11, 2022
+ dinner party food +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc + mollis, nulla non elementum tincidunt, felis ligula sodales lectus, + sit amet dignissim quam massa sit amet lorem. Aenean lorem risus, + tempus nec, gravida eu. +

+
+ +
+

Weeknight Meals

+
By: Mary
+
Jan 07, 2022
+ nice dinner +

+ Donec cursus faucibus turpis. Quisque auctor est at magna. In + sagittis quam ac ante. Etiam et erat. Morbi sem. Mauris faucibus + elit eu est. Nulla wisi eros, vehicula et, congue quis, consectetuer + non, leo. Phasellus suscipit felis non est. +

+
+ +
+

Superbowl Snacks

+
By: Sandy
+
Jan 06, 2022
+ plate of nachos +

+ Pellentesque habitant morbi tristique senectus et netus et malesuada + fames ac turpis egestas. Morbi condimentum, odio sit amet aliquet + adipiscing, nunc odio fermentum tellus, tincidunt pulvinar leo purus + quis libero. Vivamus quam. +

+
+
+ + +
+

About Sandy

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum + gravida mattis molestie. Donec in urna ut dolor imperdiet faucibus. + Pellentesque habitant morbi tristique senectus et netus et malesuada + fames ac turpis egestas. Sed luctus a mi et facilisis. Class aptent + taciti sociosqu ad litora torquent per conubia nostra, per inceptos + himenaeos. Ut condimentum purus eu luctus tincidunt. Maecenas + elementum, augue at vulputate ornare, ipsum enim lacinia orci, id + elementum velit enim gravida diam. Aliquam vitae pharetra ex. In hac + habitasse platea dictumst. Curabitur vitae facilisis nulla. Morbi quis + condimentum lorem. Fusce sit amet orci mauris. Donec fringilla lectus + nec efficitur sagittis. Aliquam sed nunc ligula. +

+

+ Quisque tempus ornare est, eu scelerisque sem ultricies et. Sed sed + interdum odio. Suspendisse id lacinia sem. Cras fermentum tortor sit + amet mollis commodo. Morbi facilisis arcu a est dapibus, vitae laoreet + sapien feugiat. Aenean vel viverra arcu, eu pulvinar nulla. + Pellentesque habitant morbi tristique senectus et netus et malesuada + fames ac turpis egestas. Mauris id viverra leo, sed pellentesque est. + Maecenas quis hendrerit dui, tincidunt maximus velit. +

+
+
+ + + + + + \ No newline at end of file diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-5/notes.txt b/INFO-1252 (Front End Dev)/Labs/Lab-5/notes.txt new file mode 100644 index 0000000..9b560b0 --- /dev/null +++ b/INFO-1252 (Front End Dev)/Labs/Lab-5/notes.txt @@ -0,0 +1,22 @@ + This project has all the css code in one giant file and there are + pros and cons of doing this. + + pros: + slightly faster webpage load times and less network traffic. + cons: + you have one big giant css file which can be hard to maintain if the + project is just a little bit larger than this. + + In the industry, we separate the css codes into multiple files. + The css code can easily be thousands of lines in a small real-world projects + and we have no choice but to separate the codes. + By doing this we get the benefit of maintainability. + + When the code is actually sent to the clients/users there are tools + to combine the css(and JavaScript) code into less css file. + By doing this we get the benefit of less network traffic and slightly + faster load times. + + Do not worry about it for now if this does not make sense. + Try different approaches and see how you like it. + You will learn/experience more about this throughout the journey of IWD. \ No newline at end of file diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-5/styles/main.css b/INFO-1252 (Front End Dev)/Labs/Lab-5/styles/main.css new file mode 100644 index 0000000..165a2a3 --- /dev/null +++ b/INFO-1252 (Front End Dev)/Labs/Lab-5/styles/main.css @@ -0,0 +1,192 @@ +/* global settings */ +*, +*::before, +*::after { + box-sizing: inherit; + padding: 0; + margin: 0; +} + +html { + box-sizing: border-box; + font-size: 62.5%; + line-height: 1.6; +} + +body { + font-family: "Roboto", sans-serif; + background: url(../images/squares_bg.png); + color: #686868; +} + +li { + list-style-type: none; +} + +a { + text-decoration: none; +} + +/* Header */ +.header-logo { + display: block; + margin: 2rem auto; + opacity: 30%; + width: 50%; +} + +.header-title { + font-family: "Dancing script"; + font-size: 4.2rem; + text-align: center; + color: teal; +} + +.header-nav { + background-color: #fff; + text-align: center; + border-top: 5px solid teal; + border-bottom: 5px solid teal; + padding: 0.4rem 0; + margin-top: 2.4rem; +} + +.header-nav-list-item { + margin: 0.8rem 0; +} + +.header-nav-list-item a:link, +.header-nav-list-item a:visited { + font-size: 2.4rem; + color: #686868; +} + +.header-nav-list-item a:hover, +.header-nav-list-item a:active { + color: teal; + font-weight: 600; +} + +/* Main */ +.recipes { + margin-top: 2.4rem; +} + +.recipe { + margin: 2rem 1rem; + border: 1px solid grey; + background-color: white; + border-radius: 20px; + padding: 2.4rem 1.2rem; +} + +.recipe:hover { + box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25); + transform: translateY(-10px); + /* we will learn this later. Don't worry about this line*/ +} + +.recipe-title { + font-family: "Dancing script"; + text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25); + font-size: 3.6rem; + color: teal; + margin-bottom: 2.4rem; +} + +.recipe-by, +.recipe-by strong, +.recipe-date { + text-align: right; + font-size: 1.6rem; +} + +.recipe-image { + width: 80%; + border-radius: 50%; + display: block; + margin: 1rem auto; +} + +.recipe-desc { + font-size: 1.8rem; + margin-top: 2.4rem; + padding: 0 1.2rem; +} + +/* About */ +.about { + padding: 2.4rem; + background-color: rgb(82, 82, 82); + opacity: 70%; +} + +.about-title { + font-family: "Dancing script"; + font-size: 4.8rem; + color: #fff; + margin-top: 2rem; + text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.75); +} + +.about-text { + /* use white colour + opacity or grey font color to achieve this result*/ + color: #fff; + opacity: 0.75; + font-size: 1.8rem; + margin: 2rem 0; + text-shadow: 1px 1px 0 black; +} + +.about-logo { + display: none; +} + +/* Footer */ +.footer { + background-color: teal; + color: rgb(207, 207, 207); + text-align: center; + padding: 3.6rem 0; + font-size: 2.4rem; +} + +.footer-name { + color: #fff; + font-size: 2.4rem; +} + +@media (min-width: 820px) { + .header { + position: relative; + } + + .header-logo { + position: absolute; + left: 5%; + top: 33%; + transform: translateY(-50%); + width: 15%; + opacity: 0.3; + z-index: 0; + } + + .header-nav { + position: relative; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + padding: 1rem 0; + } + + .header-nav-list { + display: flex; + justify-content: center; + align-items: center; + gap: 4rem; + width: 100%; + } +} + +@media (min-width: 1200px) {} \ No newline at end of file diff --git a/INFO-1272 (JS 1)/Labs/Lab 5/Lab 5.pdf b/INFO-1272 (JS 1)/Labs/Lab 5/Lab 5.pdf new file mode 100644 index 0000000..5be4e8d Binary files /dev/null and b/INFO-1272 (JS 1)/Labs/Lab 5/Lab 5.pdf differ diff --git a/INFO-1272 (JS 1)/Labs/Lab 5/Levi_Lab5.html b/INFO-1272 (JS 1)/Labs/Lab 5/Levi_Lab5.html new file mode 100644 index 0000000..0c8958a --- /dev/null +++ b/INFO-1272 (JS 1)/Labs/Lab 5/Levi_Lab5.html @@ -0,0 +1,93 @@ + + + + + Lab 5 + + + + +

Lab 5

+ + + + \ No newline at end of file diff --git a/INFO-1272 (JS 1)/Labs/Lab 5/Levi_Lab5.zip b/INFO-1272 (JS 1)/Labs/Lab 5/Levi_Lab5.zip new file mode 100644 index 0000000..b850db3 Binary files /dev/null and b/INFO-1272 (JS 1)/Labs/Lab 5/Levi_Lab5.zip differ diff --git a/INFO-1274 (Graphic Design)/Projects/Project 1/160 x 600 ad.jpg b/INFO-1274 (Graphic Design)/Projects/Project 1/160 x 600 ad.jpg new file mode 100644 index 0000000..e3b07aa Binary files /dev/null and b/INFO-1274 (Graphic Design)/Projects/Project 1/160 x 600 ad.jpg differ diff --git a/INFO-1274 (Graphic Design)/Projects/Project 1/250 x 250 ad.jpg b/INFO-1274 (Graphic Design)/Projects/Project 1/250 x 250 ad.jpg new file mode 100644 index 0000000..7dc0018 Binary files /dev/null and b/INFO-1274 (Graphic Design)/Projects/Project 1/250 x 250 ad.jpg differ diff --git a/INFO-1274 (Graphic Design)/Projects/Project 1/728 x 90 ad.jpg b/INFO-1274 (Graphic Design)/Projects/Project 1/728 x 90 ad.jpg new file mode 100644 index 0000000..9f79b57 Binary files /dev/null and b/INFO-1274 (Graphic Design)/Projects/Project 1/728 x 90 ad.jpg differ diff --git a/INFO-1274 (Graphic Design)/Projects/Project 1/McLean_DesignJustification.pdf b/INFO-1274 (Graphic Design)/Projects/Project 1/McLean_DesignJustification.pdf new file mode 100644 index 0000000..51d3f17 Binary files /dev/null and b/INFO-1274 (Graphic Design)/Projects/Project 1/McLean_DesignJustification.pdf differ diff --git a/INFO-1274 (Graphic Design)/Projects/Project 1/McLean_Project1_displayAds.psd b/INFO-1274 (Graphic Design)/Projects/Project 1/McLean_Project1_displayAds.psd index 617ed12..44ccec6 100644 Binary files a/INFO-1274 (Graphic Design)/Projects/Project 1/McLean_Project1_displayAds.psd and b/INFO-1274 (Graphic Design)/Projects/Project 1/McLean_Project1_displayAds.psd differ diff --git a/INFO-1274 (Graphic Design)/Projects/Project 1/McLean_Project1_website.psd b/INFO-1274 (Graphic Design)/Projects/Project 1/McLean_Project1_website.psd index 8a180f7..0ee7b28 100644 Binary files a/INFO-1274 (Graphic Design)/Projects/Project 1/McLean_Project1_website.psd and b/INFO-1274 (Graphic Design)/Projects/Project 1/McLean_Project1_website.psd differ