diff --git a/01_Core/week02/README.md b/01_Core/week02/README.md index 0275cdd5..6d32aee1 100644 --- a/01_Core/week02/README.md +++ b/01_Core/week02/README.md @@ -1,5 +1,8 @@ -Instructions for this week: +# Instructions for this week: 1. Watch videos assigned in https://thecurve.redventures.com/pages/72/ita-front-end 2. Read the Toy Problems in this directory 3. Submit your solutions in the submissions directory by Monday of next week at noon. + +## Resources +How to create a pull request: https://help.github.com/en/desktop/contributing-to-projects/creating-a-pull-request diff --git a/01_Core/week03/README.md b/01_Core/week03/README.md index c4ab3251..9796357c 100644 --- a/01_Core/week03/README.md +++ b/01_Core/week03/README.md @@ -25,6 +25,9 @@ Install Sass - https://sass-lang.com/install * Grid Game: https://cssgridgarden.com/ * Google Fonts: https://fonts.google.com/ * Transitions and Transforms: https://thoughtbot.com/blog/transitions-and-transforms + * CSS Reference: https://cssreference.io/ + * CSS Flexbox Cheatsheet: https://devhints.io/css-flexbox + * HTML and CSS is Hard (but it doesn't have to be): https://internetingishard.com/html-and-css/ ## Key Vocabulary: diff --git a/01_Core/week03/submissions/README.MD b/01_Core/week03/submissions/README.MD new file mode 100644 index 00000000..b8186c60 --- /dev/null +++ b/01_Core/week03/submissions/README.MD @@ -0,0 +1 @@ +Add this week's toy problem solutions to this directory. \ No newline at end of file diff --git a/01_Core/week03/toyProblems/exercise2/exercise 2.png b/01_Core/week03/toyProblems/exercise2/exercise 2.png new file mode 100644 index 00000000..e35a5625 Binary files /dev/null and b/01_Core/week03/toyProblems/exercise2/exercise 2.png differ diff --git a/01_Core/week03/toyProblems/exercise2/exercise1.png b/01_Core/week03/toyProblems/exercise2/exercise1.png deleted file mode 100644 index 7dc5c134..00000000 Binary files a/01_Core/week03/toyProblems/exercise2/exercise1.png and /dev/null differ diff --git a/01_Core/week03/toyProblems/exercise3/exercise 3.png b/01_Core/week03/toyProblems/exercise3/exercise 3.png new file mode 100644 index 00000000..1a4ac10b Binary files /dev/null and b/01_Core/week03/toyProblems/exercise3/exercise 3.png differ diff --git a/01_Core/week03/toyProblems/exercise3/exercise1.png b/01_Core/week03/toyProblems/exercise3/exercise1.png deleted file mode 100644 index 7dc5c134..00000000 Binary files a/01_Core/week03/toyProblems/exercise3/exercise1.png and /dev/null differ diff --git a/01_Core/week03/toyProblems/exercise4/exercise 4.png b/01_Core/week03/toyProblems/exercise4/exercise 4.png new file mode 100644 index 00000000..dfac4687 Binary files /dev/null and b/01_Core/week03/toyProblems/exercise4/exercise 4.png differ diff --git a/01_Core/week03/toyProblems/exercise4/exercise1.png b/01_Core/week03/toyProblems/exercise4/exercise1.png deleted file mode 100644 index 7dc5c134..00000000 Binary files a/01_Core/week03/toyProblems/exercise4/exercise1.png and /dev/null differ diff --git a/01_Core/week03/toyProblems/exercise5/exercise 5.png b/01_Core/week03/toyProblems/exercise5/exercise 5.png new file mode 100644 index 00000000..f64068d5 Binary files /dev/null and b/01_Core/week03/toyProblems/exercise5/exercise 5.png differ diff --git a/01_Core/week03/toyProblems/exercise5/exercise1.png b/01_Core/week03/toyProblems/exercise5/exercise1.png deleted file mode 100644 index 7dc5c134..00000000 Binary files a/01_Core/week03/toyProblems/exercise5/exercise1.png and /dev/null differ diff --git a/01_Core/week03/toyProblems/exercise6/exercise 6.png b/01_Core/week03/toyProblems/exercise6/exercise 6.png new file mode 100644 index 00000000..8080b162 Binary files /dev/null and b/01_Core/week03/toyProblems/exercise6/exercise 6.png differ diff --git a/01_Core/week03/toyProblems/exercise6/exercise1.png b/01_Core/week03/toyProblems/exercise6/exercise1.png deleted file mode 100644 index 7dc5c134..00000000 Binary files a/01_Core/week03/toyProblems/exercise6/exercise1.png and /dev/null differ diff --git a/01_Core/week03/toyProblems/exercise7/exercise 7.png b/01_Core/week03/toyProblems/exercise7/exercise 7.png new file mode 100644 index 00000000..7c602303 Binary files /dev/null and b/01_Core/week03/toyProblems/exercise7/exercise 7.png differ diff --git a/01_Core/week03/toyProblems/exercise7/exercise1.png b/01_Core/week03/toyProblems/exercise7/exercise1.png deleted file mode 100644 index 7dc5c134..00000000 Binary files a/01_Core/week03/toyProblems/exercise7/exercise1.png and /dev/null differ diff --git a/01_Core/week04/README.md b/01_Core/week04/README.md new file mode 100644 index 00000000..4ed51797 --- /dev/null +++ b/01_Core/week04/README.md @@ -0,0 +1,39 @@ +# Instructions for this week: + +We are going to take a break from the videos this week and we're going to start building the front-end to our final project in the ecommerce directory. + +## E-Commerce Site + +You will be building an e-commerce site in four phases. We will build the front-end now and will layer in a database, an API, and an admin page that is password protected as the course progresses. You may choose to “sell” whatever you like, but please consider the following: +- The products must be mainstream and professional. +- You must be able to categorize the products into a minimum of 4 categories +- Each product will have a photo, name, description, and price. + +## The website must have the following pages: + +**Home page:** Have a featured products area that will show several products marked as featured in the database (hard-coded this for now). There should also be a banner image slideshow. The rest of the home page content is up to you. + +**Products page:** This page should be a visual list of all the products on your site. Each product should show an image, the price and a quick description. The user should be able to click on the product and go to a product detail page (only one example of this page is needed. Use the link to this page for all products). The user should also be able to choose to only display products from a particular category. This will obviously just be a mockup for now and now functionality is expected. + +**Product Detail page:** Must show a minimum of one image of the product. Multiple images are encouraged. Price & description must be shown. User should be able to access a form that lets them select the number they wish to purchase. If the product requires other selections (like size or color), they should be able to do that, too. The form should have an add to cart button.This will obviously just be a mockup for now and now functionality is expected. + +**Search page:** This page should allow the user to type in a search term and it should return a list of products. The search term should search the category, the name and the description. The search page should also let you filter by price. This will obviously just be a mockup for now and now functionality is expected. + +**Contact page:** Standard contact form asking for name, email, phone, preferred contact method (radio button, phone/email), How did you hear about us? (checkboxes: conference, TV, Radio, Word of Mouth, other) and comments. + +## Visual requirements: + +Colors, logo, fonts and icons are entirely up to you. Just try to make things neat and organized. +The site should use media queries to do 2 different layouts. One for less than 800 pixels and one for greater than 800 pixels. Set a max width so the site doesn’t look bad as the screen size widens. + +## JavaScript: + +- Implement a form validation for the contact form +- Implement a slider for the home page. + +## The project will be assessed on the following criteria: + +- HTML semantic structure. Validate your HTML! +- CSS validation & usage. Use of media query +- JavaScript: working scripts +- Website must be live on GitHub pages. diff --git a/01_Core/week04/README.md.txt b/01_Core/week04/README.md.txt deleted file mode 100644 index a99922d8..00000000 --- a/01_Core/week04/README.md.txt +++ /dev/null @@ -1 +0,0 @@ -Instructions for this week: \ No newline at end of file diff --git a/01_Core/week04/ecommerce/Assets/rv-header-logo.png b/01_Core/week04/ecommerce/Assets/rv-header-logo.png new file mode 100644 index 00000000..eb3c54a6 Binary files /dev/null and b/01_Core/week04/ecommerce/Assets/rv-header-logo.png differ diff --git a/01_Core/week04/ecommerce/README.MD b/01_Core/week04/ecommerce/README.MD new file mode 100644 index 00000000..69e1098a --- /dev/null +++ b/01_Core/week04/ecommerce/README.MD @@ -0,0 +1 @@ +Add the ecommerce site to this directory. \ No newline at end of file diff --git a/01_Core/week04/ecommerce/contact.html b/01_Core/week04/ecommerce/contact.html new file mode 100644 index 00000000..e1356f61 --- /dev/null +++ b/01_Core/week04/ecommerce/contact.html @@ -0,0 +1,95 @@ + + + + + + + + + + RV IT Catalog + + + + +
+
+ +
+ HOME +
+ +
+ View All + Productivity + Communication + Development + Hosting +
+
+ SEARCH + CONTACT + ATTRIBUTIONS +
+
+
+

+
Contact Us:
+
+
+ Name:
+ +

+ Email:
+

+ Phone:
+

+
+
+ Preferred contact method:



+ How did you hear about us?
+
+
+ Email
+ SMS Text
+ Invasive At-Home Visit +

+ Friend
+ Coworker
+ YellowPages Ad


+
+
+ Comments:
+
+ +
+
+ + + +
+
+
+ Subscribe to our newsletter to hear the latest about new RV arrivals and apps!
+ +
+
+ SEARCH
+ CONTACT US
+ ATTRIBUTIONS
+
+
+ 704.971.2300
+ 1101 Red Ventures Dr,
+ Fort Mill, SC 29707 +
+
+
copyright info
+
+ + + + + \ No newline at end of file diff --git a/01_Core/week04/ecommerce/index.html b/01_Core/week04/ecommerce/index.html new file mode 100644 index 00000000..80bb8118 --- /dev/null +++ b/01_Core/week04/ecommerce/index.html @@ -0,0 +1,118 @@ + + + + + + + + + + RV IT Catalog + + + + +
+
+ +
+ HOME +
+ +
+ View All + Productivity + Communication + Development + Hosting +
+
+ SEARCH + CONTACT + ATTRIBUTIONS +
+
+
+
+ +
+
1 / 4
+ +
+ +
+
2 / 4
+ +
+ +
+
3 / 4
+ +
+ +
+
4 / 4
+ +
+ + + + +
+
+ +
+ + + + +
+ +
+
Featured Items
+
+
+ +
+ REQUEST +
+
+
+ +
+ REQUEST +
+
+
+ +
+ REQUEST +
+
+
+
+ +
+
+
+ Subscribe to our newsletter to hear the latest about new RV arrivals and apps!
+ +
+
+ SEARCH
+ CONTACT US
+ ATTRIBUTIONS
+
+
+ 704.971.2300
+ 1101 Red Ventures Dr,
+ Fort Mill, SC 29707 +
+
+
copyright info
+
+ + + \ No newline at end of file diff --git a/01_Core/week04/ecommerce/javascript.js b/01_Core/week04/ecommerce/javascript.js new file mode 100644 index 00000000..87523e5d --- /dev/null +++ b/01_Core/week04/ecommerce/javascript.js @@ -0,0 +1,22 @@ +// Slideshow script // +var slideIndex = 0; +showSlides(); + +function showSlides() { + var i; + var slides = document.getElementsByClassName("mySlides"); + var dots = document.getElementsByClassName("dot"); + for (i = 0; i < slides.length; i++) { + slides[i].style.display = "none"; + } + slideIndex++; + if (slideIndex > slides.length) {slideIndex = 1} + for (i = 0; i < dots.length; i++) { + dots[i].className = dots[i].className.replace(" active", ""); + } + slides[slideIndex-1].style.display = "block"; + dots[slideIndex-1].className += " active"; + setTimeout(showSlides, 3000); // Change image every 2 seconds +} + +// end slideshow script // diff --git a/01_Core/week04/ecommerce/product_detail.html b/01_Core/week04/ecommerce/product_detail.html new file mode 100644 index 00000000..21c5a201 --- /dev/null +++ b/01_Core/week04/ecommerce/product_detail.html @@ -0,0 +1,79 @@ + + + + + + + + + + RV IT Catalog + + + + +
+
+ +
+ HOME +
+ +
+ View All + Productivity + Communication + Development + Hosting +
+
+ SEARCH + CONTACT + ATTRIBUTIONS +
+
+
+
+
+ +
+
Slack
+
+
+ $0.00 + + +
+
+ Slack is an American cloud-based set of proprietary team collaboration software tools and online services, developed by Slack Technologies. +
+ +
+
+
+ Subscribe to our newsletter to hear the latest about new RV arrivals and apps!
+ +
+
+ SEARCH
+ CONTACT US
+ ATTRIBUTIONS
+
+
+ 704.971.2300
+ 1101 Red Ventures Dr,
+ Fort Mill, SC 29707 +
+
+
copyright info
+
+ + + \ No newline at end of file diff --git a/01_Core/week04/ecommerce/products.html b/01_Core/week04/ecommerce/products.html new file mode 100644 index 00000000..909f5eca --- /dev/null +++ b/01_Core/week04/ecommerce/products.html @@ -0,0 +1,120 @@ + + + + + + + + + + RV IT Catalog + + + + +
+
+ +
+ HOME +
+ +
+ View All + Productivity + Communication + Development + Hosting +
+
+ SEARCH + CONTACT + ATTRIBUTIONS +
+
+
+
All Products
+ +


+
+
+
+
+ Enterprise video conferencing with real-time messaging and content sharing
$0.00 + +
+ Zoom +
+
+
+
+ Slack brings all your communication together in one place. It's real-time messaging, archiving and search for modern teams.
$0.00 +
+ Slack +
+
+
+
+ LastPass remembers all your passwords, so you don't have to.
$0.00 +
+ LastPass +
+
+
+
+ Amazon Web Services is a subsidiary of Amazon that provides on-demand cloud computing platforms to individuals, companies and governments, on a metered pay-as-you-go basis.
$0.00 +
+ AWS +
+
+
+
+ Atom makes collaborating on code just as easy as it is to code alone, right from your editor.
$0.00 +
+ Atom
+
+
+
+ GitHub is a company that provides hosting for software development version control using Git.
$0.00 +
+ GitHub
+
+
+
+ Docker is a full development platform for creating containerized apps.
$0.00 +
+ Docker
+
+
+
+ + +
+
+
+ Subscribe to our newsletter to hear the latest about new RV arrivals and apps!
+ +
+
+ SEARCH
+ CONTACT US
+ ATTRIBUTIONS
+
+
+ 704.971.2300
+ 1101 Red Ventures Dr,
+ Fort Mill, SC 29707 +
+
+
copyright info
+
+ + + \ No newline at end of file diff --git a/01_Core/week04/ecommerce/search.html b/01_Core/week04/ecommerce/search.html new file mode 100644 index 00000000..a1a8e32b --- /dev/null +++ b/01_Core/week04/ecommerce/search.html @@ -0,0 +1,72 @@ + + + + + + + + + + RV IT Catalog + + + + +
+
+ +
+ HOME +
+ +
+ View All + Productivity + Communication + Development + Hosting +
+
+ SEARCH + CONTACT + ATTRIBUTIONS +
+
+
+
Search

+ + + + +
+ +
+
+
+ Subscribe to our newsletter to hear the latest about new RV arrivals and apps!
+ +
+
+ SEARCH
+ CONTACT US
+ ATTRIBUTIONS
+
+
+ 704.971.2300
+ 1101 Red Ventures Dr,
+ Fort Mill, SC 29707 +
+
+
copyright info
+
+ + + \ No newline at end of file diff --git a/01_Core/week04/ecommerce/styles.css b/01_Core/week04/ecommerce/styles.css new file mode 100644 index 00000000..1d9b8f48 --- /dev/null +++ b/01_Core/week04/ecommerce/styles.css @@ -0,0 +1,409 @@ +/* Eric Meyer's CSS reset 2.0 begin */ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; + max-width: 100%; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* CSS reset end */ + +/* attempt at BEM CSS globals */ +.flex { + display:inline-flex; +} +.transition { + -o-transition: 1s; + -ms-transition: 1s; + -moz-transition: 1s; + -webkit-transition: 1s; + transition: 1s; +} +.txtcenter { + text-align: center; +} +.textleft { + text-align: left; +} +.textright { + text-align: right; +} +.img--margins { + margin-left: 5%; + margin-right: 5%; +} +.floatleft { + float: left; +} +.floatright { + float: right; +} +.img-large { + display: inline-block; +} +.prod-title{ + text-align: center; + margin-left: 25%; + margin-top: 90px; + font-size: 5em; + display: inline-block; +} +.price { + font-size: 2em; + margin-left: 20%; + margin-top: 20px; +} +.proddescription { + margin: -30px 15% 60px 40%; +} +/* Navbar */ + +.headfootwrap { + background-color: #333; +} +#firstHeader { + margin-top: 0; + padding-top: 0; +} + +.btn-wrap { + flex-direction: row; + align-items: center; + justify-content: space-evenly; +} + +.navbar { + flex-direction: row; + align-items: center; + justify-content: space-between; + height: 101px; + width: 70%; + margin-left: 15%; + margin-right: 15%; +} + +.navbar a { + float: left; + display: block; + color: #f2f2f2; + text-align: center; + text-decoration: none; + padding: 16px 30px 16px 30px; +} +.content { + padding: 16px; +} +.sticky { + position: fixed; + top: 0; + width: 100%; +} +.sticky + .content { + padding-top: 60px; +} +.dropdown { + float: left; + overflow: hidden; +} +.dropdown .dropbtn { + font-size: 16px; + border: none; + outline: none; + color: white; + padding: 14px 16px; + background-color: inherit; + font: inherit; +} +.navbar a:hover, .dropdown:hover .dropbtn { + color: red; + -o-transition: 1s; + -ms-transition: 1s; + -moz-transition: 1s; + -webkit-transition: 1s; + transition: 1s; +} +.dropdown-content { + display: none; + position: absolute; + background-color: #444; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; +} +.dropdown-content a { + float: none; + color: white; + padding: 12px 16px; + text-decoration: none; + display: block; + text-align: left; +} +.dropdown-content a:hover { + background-color: black; +} +.dropdown:hover .dropdown-content { + display: block; +} + +/* NAVBAR END */ + + +/* slideshow container from w3schools.com -------------- */ +* {box-sizing: border-box} +body {font-family: Verdana, sans-serif; margin:0} +.mySlides {display: none} +img {vertical-align: middle;} + +/* Slideshow container */ +.slideshow-container { + max-width: 100%; + position: relative; + margin: auto; +} + +/* Next & previous buttons */ +.prev, .next { + cursor: pointer; + position: absolute; + top: 50%; + width: auto; + padding: 16px; + margin-top: -22px; + color: white; + font-weight: bold; + font-size: 18px; + transition: 0.6s ease; + border-radius: 0 3px 3px 0; + user-select: none; +} + +/* Position the "next button" to the right */ +.next { + right: 0; + border-radius: 3px 0 0 3px; +} + +/* On hover, add a black background color with a little bit see-through */ +.prev:hover, .next:hover { + background-color: rgba(0,0,0,0.8); +} + + +/* Number text (1/3 etc) */ +.numbertext { + color: #f2f2f2; + font-size: 12px; + padding: 8px 12px; + position: absolute; + top: 0; +} + +/* The dots/bullets/indicators */ +.dot { + cursor: pointer; + height: 15px; + width: 15px; + margin: 0 2px; + background-color: #bbb; + border-radius: 50%; + display: inline-block; + transition: background-color 0.6s ease; +} + +.active, .dot:hover { + background-color: #717171; +} + +/* Fading animation */ +.fade { + -webkit-animation-name: fade; + -webkit-animation-duration: 1.5s; + animation-name: fade; + animation-duration: 1.5s; +} + +@-webkit-keyframes fade { + from {opacity: .4} + to {opacity: 1} +} + +@keyframes fade { + from {opacity: .4} + to {opacity: 1} +} + +/* On smaller screens, decrease text size */ +@media only screen and (max-width: 300px) { + .prev, .next,.text {font-size: 11px} +} + +/* -----END SLIDESHOW ----------- */ + +/* column wrapper */ +.main-col { + margin-left: 12.5%; + margin-right: 12.5%; +} +.featitemstext { + display:block; + margin: 60px auto 60px auto; + font-size: 5em; +} +.featwrap { + display: flex; + justify-content: center; + margin-bottom: 50px; + flex-wrap: wrap; +} +.headline { + margin-top: 50px; + margin-bottom: 50px; + font-size: 3em; +} +/* featured items */ +.imgfeat { + max-width: 100%; + max-height: 100%; + opacity: 1; + display: block; + transition: .5s ease; + backface-visibility: hidden; + margin:auto; +} +.imgbox { + width: 25%; + display: inline-block; + position: relative; +} +.imgtrans { + transition: .5s ease; + opacity: 0; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); +} +.imgbox:hover .imgfeat { + opacity: 0.3; + } + +.imgbox:hover .imgtrans { + opacity: 1; + } + +.reglink { + background-color: #333; + color: white; + padding: 16px 32px; + text-decoration: none; +} +.reglink:hover { + color: red; + -o-transition: 1s; + -ms-transition: 1s; + -moz-transition: 1s; + -webkit-transition: 1s; + transition: 1s; +} + +/* end featured items */ +/* footer */ + +.footwrap { + margin: 0 15% 0 15%; + padding-top: 50px; + padding-bottom: 20px; + display: flex; + justify-content: center; +} +.footerfooter { + display: block; + margin: auto; +} +.footbox { + color: #999; + width: 25%; + line-height: 1.5em; +} +.footbox a { + text-decoration: none; + color: #999; +} +.footbox a:hover { + color: red; + -o-transition: 1s; + -ms-transition: 1s; + -moz-transition: 1s; + -webkit-transition: 1s; + transition: 1s; +} + +/* CONTACT PAGE */ + +.contactform { + margin-left: 15%; + margin-right: 15%; + margin-top: 50px; + margin-bottom: 50px; + display: flex; + justify-content: center; +} +.contactbox { + margin: 0 2.5% 0 2.5%; +} + +/* SEARCH TERMS */ +.searchinput { + width: 100%; + font-size: 16px; + padding: 12px 20px 12px 40px; + border: 1px solid #ddd; + margin-bottom: 12px; +} + +/* QUERIES */ +@media screen and (max-width: 800px) { + .main-col { + margin-left: 5%; + margin-right: 5%; + } +} \ No newline at end of file diff --git a/01_Core/week04/submissions/README.MD b/01_Core/week04/submissions/README.MD new file mode 100644 index 00000000..b8186c60 --- /dev/null +++ b/01_Core/week04/submissions/README.MD @@ -0,0 +1 @@ +Add this week's toy problem solutions to this directory. \ No newline at end of file