├── .gitignore ├── LICENSE ├── README.md ├── contact.html ├── favicon.ico ├── images ├── apple-pie.png ├── background.png ├── banner.png ├── cherry-pie.png └── logo.png ├── index.html ├── order.html ├── pies.html ├── resources.md └── site.css /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Craig Shoemaker 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Building Websites With HTML, CSS, and JavaScript: Getting Started 2 | 3 | ## Tools 4 | 5 | The following tools help make easier to work with sample code. 6 | 7 | - [git](https://git-scm.com/downloads): A tool for managing source code 8 | - [Visual Studio Code](https://code.visualstudio.com/): A source code editor 9 | - [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer): A simple web server utility for Visual Studio Code 10 | - [Echo Post](https://github.com/craigshoemaker/echo-post): A simple Node.js server utility that displays post data. 11 | 12 | ## Setup 13 | 14 | If you installed git you can clone the code to your machine, or download a ZIP of all the files directly. 15 | 16 | [Download the ZIP from this location](https://github.com/craigshoemaker/html-css-javascript-getting-started/archive/master.zip), or run the following [git](https://git-scm.com/downloads) command to clone the files to your machine: 17 | 18 | ```bash 19 | git clone https://github.com/craigshoemaker/html-css-javascript-getting-started 20 | ``` 21 | 22 | - Once the files are on your machine, open the _html-css-javascript-getting-started_ folder in [Visual Studio Code](https://code.visualstudio.com/). 23 | 24 | - With the files open in Visual Studio Code, press the **Go Live** button at the bottom of the window to launch the files with [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer). 25 | 26 | ## Resources 27 | 28 | A list of links to resources used throughout this course is available on the [Resources](resources.md) page. 29 | -------------------------------------------------------------------------------- /contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Contact | Bethany's Pie Shop 8 | 9 | 10 | 11 |

12 | 19 |

20 |

21 | 22 |

23 |

Contact

24 |

We are always glad to hear from you!

25 |

26 | Send us an email 30 | and let us know how we can help make your occasion special. 31 |

32 |

33 |

34 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/craigshoemaker/html-css-javascript-getting-started/db404fe88554300415ad99197a68301181896fc0/favicon.ico -------------------------------------------------------------------------------- /images/apple-pie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/craigshoemaker/html-css-javascript-getting-started/db404fe88554300415ad99197a68301181896fc0/images/apple-pie.png -------------------------------------------------------------------------------- /images/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/craigshoemaker/html-css-javascript-getting-started/db404fe88554300415ad99197a68301181896fc0/images/background.png -------------------------------------------------------------------------------- /images/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/craigshoemaker/html-css-javascript-getting-started/db404fe88554300415ad99197a68301181896fc0/images/banner.png -------------------------------------------------------------------------------- /images/cherry-pie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/craigshoemaker/html-css-javascript-getting-started/db404fe88554300415ad99197a68301181896fc0/images/cherry-pie.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/craigshoemaker/html-css-javascript-getting-started/db404fe88554300415ad99197a68301181896fc0/images/logo.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Bethany's Pie Shop 8 | 9 | 25 | 26 | 27 |

28 | 35 |

36 |

37 | 38 |

39 | 40 |

Welcome to Bethany's Pie Shop

41 |

42 | From pecan to plum, our pies are are made in with the warmth and 43 | tradition of home. Take a moment to 44 | browse our pies and see which of our 45 | delectable desserts are soon to arrive on your doorstep. 46 |

47 |

48 |

49 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /order.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Order | Bethany's Pie Shop 8 | 9 | 50 | 51 | 52 | 53 |

54 | 61 |

62 | 63 |

64 | 65 | 66 |

67 | 68 |

Order

69 | 70 |

71 | 72 |

73 |

74 |

75 |

76 |

77 |

78 | 79 |

80 | 81 | 82 | 83 |

84 |

First name

85 |

86 |

87 | 88 |

89 |

Last name

90 |

91 |

92 | 93 |

94 |

Address

95 |

96 |

97 | 98 |

99 |

State

100 |

101 | 154 |

155 |

156 | 157 |

158 |

Postal code

159 |

160 |

161 | 162 |

163 |

Comments

164 |

165 | 171 |

172 |

173 | 174 | 175 | 176 |

177 |

178 |

179 | 188 | 234 | 235 | 236 | -------------------------------------------------------------------------------- /pies.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pies | Bethany's Pie Shop 8 | 9 | 10 | 11 |

12 | 19 |

20 |

21 | 24 | 25 |

26 |

Pies

27 | 28 |

29 |

30 |

31 |

32 |

Apple Pie

33 |

$12.95

34 |

35 |

Our famous apple pie

36 | 37 |

38 | 39 |

40 |

41 |

42 |

Cherry Pie

43 |

$15.95

44 |

45 |

A summer classic!

46 | 47 |

48 |

49 |

50 |

51 | 52 | 61 | 62 | 87 | 88 | -------------------------------------------------------------------------------- /resources.md: -------------------------------------------------------------------------------- 1 | # Resources 2 | 3 | The following resources can help you better understand the concepts, elements, and APIs presented in this course. 4 | 5 | ## HTML 6 | 7 | - [Overview](https://developer.mozilla.org/docs/Web/HTML) 8 | - [`doctype` element](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode) 9 | - [Elements](https://developer.mozilla.org/docs/Web/HTML/Element) 10 | - [What is the difference between HTML tags and elements?](https://stackoverflow.com/questions/8937384/what-is-the-difference-between-html-tags-and-elements) 11 | - [HTML tags vs. elements vs. attributes](https://www.456bereastreet.com/archive/200508/html_tags_vs_elements_vs_attributes/) 12 | - Images 13 | - [`img` element](https://developer.mozilla.org/docs/Web/HTML/Element/Img) 14 | - [Responsive images](https://developer.mozilla.org/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) 15 | - [Links (anchor element)](https://developer.mozilla.org/docs/Web/HTML/Element/a) 16 | - Tables 17 | - [`table` element](https://developer.mozilla.org/docs/Web/HTML/Element/table) 18 | - [Table basics](https://developer.mozilla.org/docs/Learn/HTML/Tables/Basics) 19 | - Forms 20 | - [`form` element](https://developer.mozilla.org/docs/Web/HTML/Element/form) 21 | - [`input` element](https://developer.mozilla.org/docs/Web/HTML/Element/Input) 22 | - [`label` element](https://developer.mozilla.org/docs/Web/HTML/Element/label) 23 | - [Form basics](https://developer.mozilla.org/docs/Learn/Forms) 24 | - [Sending data](https://developer.mozilla.org/docs/Learn/Forms/Sending_and_retrieving_form_data) 25 | - [Difference between `name` and `id` attributes](https://stackoverflow.com/questions/1397592/difference-between-id-and-name-attributes-in-html) 26 | - [Validation](https://developer.mozilla.org/docs/Learn/Forms/Form_validation) 27 | - [Using the viewport meta tag to control layout on mobile browsers](https://developer.mozilla.org/docs/Mozilla/Mobile/Viewport_meta_tag) 28 | - [`meta` element](https://developer.mozilla.org/docs/Web/HTML/Element/meta) 29 | - [`http-equiv` attribute](https://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do) 30 | 31 | ## CSS 32 | 33 | - [Overview](https://developer.mozilla.org/docs/Web/CSS) 34 | - [`style` element](https://developer.mozilla.org/docs/Web/SVG/Element/style) 35 | - [`link` element](https://developer.mozilla.org/docs/Web/HTML/Element/link) 36 | - [How cascading works](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) 37 | - [Selectors](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors) 38 | - [Cheat sheet](https://frontend30.com/css-selectors-cheatsheet/) 39 | - [Box model](https://developer.mozilla.org/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) 40 | - [`float` property](https://developer.mozilla.org/docs/Web/CSS/float) 41 | - [Layout techniques](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Introduction) 42 | - [Beginner's guide to media queries](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Media_queries) 43 | 44 | ## JavaScript 45 | 46 | - [Overview](https://developer.mozilla.org/docs/Web/javascript) 47 | - [`script` element](https://developer.mozilla.org/docs/Web/HTML/Element/script) 48 | - [Client-side APIs](https://developer.mozilla.org/docs/Learn/JavaScript/Client-side_web_APIs/Introduction) 49 | - [List of event targets](https://developer.mozilla.org/docs/Web/Events) 50 | - [`DOMContentLoaded` event](https://developer.mozilla.org/docs/Web/API/Document/DOMContentLoaded_event) 51 | - [List of Web APIs](https://developer.mozilla.org/docs/Web/API) 52 | - [Web Storage](https://developer.mozilla.org/docs/Web/API/Web_Storage_API) 53 | - localStorage 54 | - Geolocation 55 | - [API](https://developer.mozilla.org/docs/Web/API/Geolocation_API) 56 | - [`getCurrentPosition` method](https://developer.mozilla.org/docs/Web/API/Geolocation/getCurrentPosition) 57 | - [`GeolocationPosition` interface](https://developer.mozilla.org/docs/Web/API/GeolocationPosition) 58 | - [`GeolocationCoordinates` interface](https://developer.mozilla.org/docs/Web/API/GeolocationCoordinates) 59 | 60 | ## Tools 61 | 62 | - [Visual Studio Code](https://code.visualstudio.com/) 63 | - [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) 64 | - [Can I Use](https://caniuse.com/) 65 | - [HTML Validator](https://validator.w3.org/) 66 | - [CSS Validator](http://www.css-validator.org/) 67 | - [20 Best Emmet Tips to Help You Code HTML/CSS Crazy Fast](https://beebom.com/best-emmet-tips-to-code-htmlcss-fast/) 68 | -------------------------------------------------------------------------------- /site.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | } 4 | 5 | html, 6 | body { 7 | height: 100%; 8 | } 9 | 10 | body { 11 | font-family: Arial, Helvetica, sans-serif; 12 | background-color: #999; 13 | } 14 | 15 | p { 16 | margin: 0.5em 0 0.5em 0; 17 | } 18 | 19 | header { 20 | display: block; 21 | position: fixed; 22 | top: 0; 23 | left: 0; 24 | width: 100%; 25 | background-color: #a493c0; 26 | padding: 10px; 27 | } 28 | 29 | nav a:visited, 30 | nav a:link { 31 | color: #fff; 32 | text-decoration: none; 33 | } 34 | 35 | nav > ul { 36 | display: inline; 37 | padding: 0; 38 | } 39 | 40 | nav > ul > li { 41 | display: inline-block; 42 | list-style: none; 43 | margin: 0 5px 0 5px; 44 | } 45 | 46 | main { 47 | display: block; 48 | background-image: url("images/background.png"); 49 | padding-top: 3em; 50 | padding-bottom: 3em; 51 | min-height: 85%; 52 | } 53 | 54 | footer { 55 | padding: 15px; 56 | } 57 | 58 | aside, 59 | article { 60 | padding: 2em; 61 | } 62 | 63 | aside { 64 | text-align: center; 65 | } 66 | 67 | article { 68 | width: 75%; 69 | } 70 | 71 | .columns { 72 | display: flex; 73 | } 74 | 75 | @media only screen and (min-width: 768px) { 76 | main { 77 | display: flex; 78 | } 79 | 80 | aside { 81 | margin-left: 2%; 82 | } 83 | 84 | .columns-desktop { 85 | display: flex; 86 | } 87 | } 88 | 89 | /* Pie */ 90 | .pie { 91 | width: 200px; 92 | padding: 10px; 93 | margin: 10px; 94 | background-color: #fff; 95 | border: solid 1px #ccc; 96 | } 97 | 98 | .pie img { 99 | width: 100%; 100 | } 101 | 102 | .pie .title { 103 | font-weight: bold; 104 | } 105 | 106 | .pie .price { 107 | text-align: right; 108 | } 109 | 110 | .pie .columns { 111 | width: 100%; 112 | } 113 | 114 | .pie .columns div { 115 | width: 50%; 116 | } 117 | 118 | .pie button { 119 | background-color: #f6aeae; 120 | padding: 10px; 121 | border: solid 1px #f6aeae; 122 | border-radius: 3px; 123 | color: #fff; 124 | } 125 | --------------------------------------------------------------------------------