├── Blog ├── Demo Food Blog │ ├── README.md │ ├── demo_food_blog_amended.png │ ├── food_blog_demo.html │ ├── food_blog_demo_amended.html │ ├── food_blog_demo_sketch.jpg │ └── food_blog_sketch2code.png └── README.md ├── CONTRIBUTING.md ├── LICENSE ├── News App └── README.MD ├── README.md ├── Result Summary └── README.md ├── Tributary └── README.md ├── Weather App └── README.md ├── Web Article └── README.md ├── Web Survey └── README.md └── img ├── ins_fork.png ├── ins_nav.png ├── ins_pr1.png ├── ins_pr2.png ├── ins_pr3.png ├── ins_s2c1.png ├── ins_s2c2.jpeg ├── ins_upload1.png └── ins_upload2.png /Blog/Demo Food Blog/README.md: -------------------------------------------------------------------------------- 1 | # This is a demo of your submission 2 | 3 | ## Files included 4 | 5 | - HTML file ([food_blog_demo.html](https://github.com/dunmanhigh/web_templates/blob/main/Blog/Demo%20Food%20Blog/food_blog_demo.html)) 6 | - Image of your sketch ([food_blog_demo_sketch.jpg](https://github.com/dunmanhigh/web_templates/blob/main/Blog/Demo%20Food%20Blog/food_blog_demo_sketch.jpg)) 7 | - Optional: Amended HTML file ([food_blog_demo_amended.html](https://github.com/dunmanhigh/web_templates/blob/main/Blog/Demo%20Food%20Blog/food_blog_demo_amended.html)) 8 | 9 | ## Why is Amendment necessary? 10 | 11 | Sketch2Code is not perfectly accurate 12 | 13 |
14 | 15 | ![food_blog_sketch2code.png](food_blog_sketch2code.png) 16 | 17 | As you can see, Sketch2Code did not include the navigation bar, certain title, and a few buttons. I may also want to change the CSS to make the page look closer to my sketch. 18 | 19 | After amendment, it looks much better and is closer to the sketch. 20 | 21 | ![demo_food_blog_amended.png](demo_food_blog_amended.png) 22 | 23 | However this is not necessary if you are unfamiliar with HTML. It is just a bonus :) 24 | -------------------------------------------------------------------------------- /Blog/Demo Food Blog/demo_food_blog_amended.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dunmanhigh/web_templates/e320fc3fdf04dcf3f2fb85a470db276d2608ee21/Blog/Demo Food Blog/demo_food_blog_amended.png -------------------------------------------------------------------------------- /Blog/Demo Food Blog/food_blog_demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | HTML Result 10 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 |
23 | 24 |
25 | 26 | 27 | Image html 28 | 29 | 30 |
31 |
32 |

33 | Lorem ipsum dolor sit amet, consectetur adipiscing elit 34 |
35 | sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 36 |
37 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 38 |

39 |
40 |
41 |
42 | 43 |
44 | 45 | 46 | Image html 47 | 48 | 49 |
50 |
51 |

52 | Lorem ipsum dolor sit amet, consectetur adipiscing elit 53 |
54 | sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 55 |
56 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 57 |

58 |
59 |
60 |
61 | 62 |
63 | 64 | 65 | 66 | 67 |
68 |
69 | 70 | 71 | 72 |
73 |
74 |
75 | 76 |
77 | 78 | 79 | 80 | 81 |
82 |
83 | 84 | 85 | 86 |
87 |
88 |
89 | 90 | 91 | 92 |
93 | 94 | 95 |
96 | 97 | 98 | 99 |
100 | 101 | 102 | -------------------------------------------------------------------------------- /Blog/Demo Food Blog/food_blog_demo_amended.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML Result 6 | 8 | 9 | 10 |
11 | 28 |
29 |
30 |

Food Blog

31 |
32 | Home 33 | Categories 34 | Contact 35 |
36 | 37 |
38 | 39 | 40 |
41 | 42 |
43 | 44 | 45 | Image html 46 | 47 | 48 |
49 |
50 |

Food 1

51 |

52 | Lorem ipsum dolor sit amet, consectetur adipiscing elit 53 |
54 | sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 55 |
56 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 57 |

58 | 59 |
60 |
61 |
62 | 63 |
64 | 65 | 66 | Image html 67 | 68 | 69 |
70 |
71 |

Food 2

72 |

73 | Lorem ipsum dolor sit amet, consectetur adipiscing elit 74 |
75 | sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 76 |
77 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 78 |

79 | 80 |
81 |
82 | 83 |

84 | 85 |
86 |

Categories

87 |
88 |
89 |
90 |
91 | 92 |
93 |
94 | 95 |
96 |
97 | 98 |
99 |
100 |
101 |
102 | 103 |
104 |
105 | 106 |
107 |
108 | 109 |
110 |
111 |
112 |
113 | 114 | 115 | 116 |
117 | 118 | 119 |
120 | 121 | 122 | 123 |
124 | 125 | 126 | -------------------------------------------------------------------------------- /Blog/Demo Food Blog/food_blog_demo_sketch.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dunmanhigh/web_templates/e320fc3fdf04dcf3f2fb85a470db276d2608ee21/Blog/Demo Food Blog/food_blog_demo_sketch.jpg -------------------------------------------------------------------------------- /Blog/Demo Food Blog/food_blog_sketch2code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dunmanhigh/web_templates/e320fc3fdf04dcf3f2fb85a470db276d2608ee21/Blog/Demo Food Blog/food_blog_sketch2code.png -------------------------------------------------------------------------------- /Blog/README.md: -------------------------------------------------------------------------------- 1 | # This is the folder for Blog templates 2 | 3 | Open a Pull Request following the naming convention `Blog/description_of_PR` 4 | 5 | ## For a demo of submission, refer to [Food Blog Demo](https://github.com/dunmanhigh/web_templates/blob/main/Blog/Demo%20Food%20Blog) 6 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing Instructions 2 | 3 | ## Design Categories 4 | 5 | - Tributary 6 | - Blog 7 | - Web Survey 8 | - News app 9 | - Result Summary 10 | - Weather app 11 | - Web Article 12 | 13 | ## Requirements 14 | 15 | - Github account 16 | - Folder (named appropriately) with the following items: 17 | - HTML file 18 | - A picture of your skecth (if you have used Sketch2Code) 19 | - CSS file (optional) 20 | - Provide a short description of your design, or how it is fitting for the category 21 | 22 | # Submission 23 | 24 | ## For Beginners 25 | 26 | ## Reference Resources 27 | 28 | ### HTML 29 | 30 | - [HTML Introduction](https://www.w3schools.com/html/html_intro.asp) 31 | - [HTML Element References](https://www.w3schools.com/tags/) 32 | 33 | ### CSS 34 | 35 | - [CSS Introduction](https://www.w3schools.com/css/css_intro.asp) 36 | - [CSS References](https://www.w3schools.com/cssref/) 37 | 38 | --- 39 | 40 | ## Instructions 41 | 42 | ### Sketch2Code 43 | 44 | 1. Draw your design out on paper 45 | 2. Use to convert your design into html code 46 | - Method 1: Take a picture of your design with your phone and email it to yourself. Download the image onto the computer to upload the design 47 | - Method 2: Use the webcam to take a photo of your design 48 | 49 | ![ins_s2c1.png](img/ins_s2c1.png)

50 | 51 | 3. Download your HTML code, check for mistakes (Open with Notepad++) and proceed to the next section of creating the Pull Request 52 | 53 | ![ins_s2c2.jpeg](img/ins_s2c2.jpeg) 54 | 55 | *Optional: Add or change the CSS of your HTML file* 56 | 57 | ### Creating the Pull Request 58 | 59 | 1. Fork the project 60 | 61 | ![ins_fork.png](img/ins_fork.png) 62 | 63 | 2. Go to your profile and open the forked repository. Navigate to the folder you are going to upload your files into. 64 | 65 | ![ins_nav.png](img/ins_nav.png) 66 | 67 | 3. Click on `Add file` and then `Upload files` 68 | 69 | ![ins_upload.png](img/ins_upload1.png) 70 | 71 | 4. After uploading, select `Create a new branch` and `Propose changes` 72 | 73 | ![ins_upload2.png](img/ins_upload2.png) 74 | 75 | 5. Return to your forked repo and start a `Pull request` 76 | 77 | ![ins_pr1.png](img/ins_pr1.png) 78 | 79 | 6. **Important:** Make sure you are comparing from your newly created branch to the `main` branch of `dunmanhigh/web_templates`. 80 | 81 | Also follow `category/description_of_PR` when naming your pull request. 82 | 83 | ![ins_pr2.png](img/ins_pr2.png) 84 | 85 | 7. When you see this under Pull requests tab in the base repo, your pull request has successfully been created. Wait for it to be accepted. 86 | 87 | ![ins_pr3.png](img/ins_pr3.png) 88 | 89 | 8. You're all set with the pull request! The next set of advanced instructions won't be needed for class. 90 | 91 | ## Advanced (Git) 92 | 93 | ### Creating the Pull Request 94 | 95 | 1. Fork the project 96 | 2. Create a new branch (`git checkout -b "new_contribution"`) 97 | 3. Commit your change (`git commit -m "Added new template"`) 98 | 4. Push to your branch (`git push origin "new_contribution"`) 99 | 5. Return to Github and open the pull request 100 | 101 | **Important:** Naming Convention:`category/description_of_PR` 102 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Dunman High School 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 | -------------------------------------------------------------------------------- /News App/README.MD: -------------------------------------------------------------------------------- 1 | # This is the folder for News App templates 2 | 3 | Open a Pull Request following the naming convention `News App/description_of_PR` 4 | 5 | ## For a demo of submission, refer to [Food Blog Demo](https://github.com/dunmanhigh/web_templates/blob/main/Blog/Demo%20Food%20Blog) 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # About web_templates 2 | 3 | This is a public repository where anyone in the world can help build up website templates especially for young students. The website templates would be categorised based on their purpose/ uses. 4 | 5 |
6 | 7 | # What are the categories available? 8 | 9 | - Tributary 10 | - Blog 11 | - Web Survey 12 | - News app 13 | - Result Summary 14 | - Weather app 15 | - Web Article 16 | 17 |
18 | 19 | # What is inside each folder? 20 | 21 | - HTML file 22 | - CSS file (optional) 23 | - A photo of sketched design (if created with Sketch2Code) 24 | 25 |
26 | 27 | # QnA 28 | 29 | ## Q: What are web templates and why are they needed in the first place? 30 | 31 | A: Web templates are premade webpages for specific uses that allows others to modify to meet their needs. These makes website building much easier than starting from scratch. 32 | 33 | Web templates are usually used for small scale projects, which do not require much modifications. 34 | 35 |
36 | 37 | ## Q: Who am I helping by contributing? 38 | 39 | A: You are helping anyone, from providing beginners trying to learn Web Development with a skeleton to assisting experienced users set up a website quickly. 40 | 41 |
42 | 43 | ## Q: Why can't the person whom I'm helping just use the Sketch2Code website to build their website instead? 44 | 45 | A: Sketch2Code only creates a prototype of the website. It is not helpful for development of the whole project. 46 | 47 |
48 | 49 | # Hacktoberfest 50 | 51 | Refer to [CONTRIBUTING.md](https://github.com/dunmanhigh/web_templates/blob/main/CONTRIBUTING.md) for instructions on how you can contribute! 52 | -------------------------------------------------------------------------------- /Result Summary/README.md: -------------------------------------------------------------------------------- 1 | # This is the folder for Result Summary templates 2 | 3 | Open a Pull Request following the naming convention `Result Summary/description_of_PR` 4 | 5 | ## For a demo of submission, refer to [Food Blog Demo](https://github.com/dunmanhigh/web_templates/blob/main/Blog/Demo%20Food%20Blog) 6 | -------------------------------------------------------------------------------- /Tributary/README.md: -------------------------------------------------------------------------------- 1 | # This is the folder for Tributary templates 2 | 3 | Open a Pull Request following the naming convention `Tributary/description_of_PR` 4 | 5 | ## For a demo of submission, refer to [Food Blog Demo](https://github.com/dunmanhigh/web_templates/blob/main/Blog/Demo%20Food%20Blog) 6 | -------------------------------------------------------------------------------- /Weather App/README.md: -------------------------------------------------------------------------------- 1 | # This is the folder for Weather App templates 2 | 3 | Open a Pull Request following the naming convention `Weather App/description_of_PR` 4 | 5 | ## For a demo of submission, refer to [Food Blog Demo](https://github.com/dunmanhigh/web_templates/blob/main/Blog/Demo%20Food%20Blog) 6 | -------------------------------------------------------------------------------- /Web Article/README.md: -------------------------------------------------------------------------------- 1 | # This is the folder for Web Article templates 2 | 3 | Open a Pull Request following the naming convention `Web Article/description_of_PR` 4 | 5 | ## For a demo of submission, refer to [Food Blog Demo](https://github.com/dunmanhigh/web_templates/blob/main/Blog/Demo%20Food%20Blog) 6 | -------------------------------------------------------------------------------- /Web Survey/README.md: -------------------------------------------------------------------------------- 1 | # This is the folder for Web Survey templates 2 | 3 | Open a Pull Request following the naming convention `Web Survey/description_of_PR` 4 | 5 | ## For a demo of submission, refer to [Food Blog Demo](https://github.com/dunmanhigh/web_templates/blob/main/Blog/Demo%20Food%20Blog) 6 | -------------------------------------------------------------------------------- /img/ins_fork.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dunmanhigh/web_templates/e320fc3fdf04dcf3f2fb85a470db276d2608ee21/img/ins_fork.png -------------------------------------------------------------------------------- /img/ins_nav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dunmanhigh/web_templates/e320fc3fdf04dcf3f2fb85a470db276d2608ee21/img/ins_nav.png -------------------------------------------------------------------------------- /img/ins_pr1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dunmanhigh/web_templates/e320fc3fdf04dcf3f2fb85a470db276d2608ee21/img/ins_pr1.png -------------------------------------------------------------------------------- /img/ins_pr2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dunmanhigh/web_templates/e320fc3fdf04dcf3f2fb85a470db276d2608ee21/img/ins_pr2.png -------------------------------------------------------------------------------- /img/ins_pr3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dunmanhigh/web_templates/e320fc3fdf04dcf3f2fb85a470db276d2608ee21/img/ins_pr3.png -------------------------------------------------------------------------------- /img/ins_s2c1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dunmanhigh/web_templates/e320fc3fdf04dcf3f2fb85a470db276d2608ee21/img/ins_s2c1.png -------------------------------------------------------------------------------- /img/ins_s2c2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dunmanhigh/web_templates/e320fc3fdf04dcf3f2fb85a470db276d2608ee21/img/ins_s2c2.jpeg -------------------------------------------------------------------------------- /img/ins_upload1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dunmanhigh/web_templates/e320fc3fdf04dcf3f2fb85a470db276d2608ee21/img/ins_upload1.png -------------------------------------------------------------------------------- /img/ins_upload2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dunmanhigh/web_templates/e320fc3fdf04dcf3f2fb85a470db276d2608ee21/img/ins_upload2.png --------------------------------------------------------------------------------