├── README.md └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # DevClub-Assignment1 2 | 3 | You have learnt about HTML, CSS and GitHub in our first session. Now use them to create a webpage by yourself! 4 | 5 | ## Task: Covid Guide 6 | Create a webpage for users to get information and guidelines about covid 7 | #### Things to include 8 | - A navigation bar with internal links to sections in your page 9 | - The home banner, with a short description of what the webpage is about, and attractive background graphics 10 | - Some Tips with images showing how to follow them 11 | - A table of common symptoms, and recommended advice for them 12 | - A list of common myths or FAQs regarding covid, especially the new variants 13 | - Embed a YouTube video which you think would be helpful for people 14 | - Finish with a footer giving yourself credits and also your contact details 15 | 16 | A [Figma prototype](https://www.figma.com/proto/12aCPysPYYkU0YrhjdOS7e/CovidGuide) has been provided for reference, along with the [Figma source file](https://www.figma.com/file/12aCPysPYYkU0YrhjdOS7e/CovidGuide) for the design. Use the [drive link](https://csciitd-my.sharepoint.com/:f:/g/personal/tt1201099_iitd_ac_in/EtUO6IwxaxNLkX_5PQQisZYBYjcEJP6sAed_DZI2evf3NQ?e=M8xTKO) to download the image files 17 | 18 | ## Bonus Task! 19 | - Create a new branch `bonus` in your fork of this repo. This bonus task has to be done on the `bonus` branch only, while the main task stays on the `main` branch (do *not* merge them) 20 | - Put your IIT Delhi email for contact in the footer, and use [mailto](https://en.wikipedia.org/wiki/Mailto) to give pre-filled subject and body for the query. For example, the subject may be initialized with `Query regarding CovidGuide`, and the body with `Hey! I visited your website and had a query...` 21 | - Add a [favicon](https://en.wikipedia.org/wiki/Favicon) to your website 22 | - Embed a Google Map of hospitals near IIT Delhi 23 | - Make the website responsive, so it looks good on mobile screens 24 | - Feel free to show your creativity in the design! 25 | - You can use the CSS frameworks [Materialize](https://materializecss.com/) or [Tailwind](https://tailwindui.com/) (but *not* Bootstrap) 26 | - You can use [Animate on Scroll](https://michalsnik.github.io/aos/) or [Vanta](https://www.vantajs.com/) too! 27 | - Deploy this `bonus` branch using [Firebase Static Hosting](https://firebase.google.com/docs/hosting/github-integration), set up the GitHub Action such that the site should be rebuilt each time you push a commit to the repo. Finally, put the URL in the description (`About > Website`) for your fork of this repo. The URL should look something like `https://*.web.app/index.html` (where `*` can be your choice) 28 | 29 | Use CDN option for including any libraries/frameworks. 30 | Please take only free subscriptions wherever applicable, using any paid features for the assignments is not allowed. 31 | 32 | ## Submission Instructions 33 | - First create your GitHub account. You can use your personal email id for it. 34 | - **FORK** this repository, by clicking the "Fork" button on top right. 35 | - In your fork of this repo, write the code in the `index.html` file. You can choose to either edit it directly on GitHub website, or maybe download it, edit on your machine and then upload, or maybe clone the repo, make changes, commit and then push. 36 | - Feel free to upload helping-files (css and images) to your repo, make sure you include them properly with relative paths in the `index.html` file. 37 | - Host the webpage using GitHub Pages. 38 | - You do NOT need to create a pull request to this main repository. 39 | - Feel free to add more comments in the `README.md` file. 40 | - Finally, fill this [Google Form](https://forms.gle/zgLhpp4ptMas77yQ6) with your details and URL to the hosted GitHub Pages site. 41 | 42 | Ask any doubts on our [Discord Server](https://discord.gg/Hedc9gw3Ar) in `#html-css-git-14jan` channel 43 | 44 | ## Resources 45 | - [Mozilla Developer Docs](https://developer.mozilla.org/en-US/docs/Learn) 46 | - [W3Schools](https://www.w3schools.com/) 47 | - ProgrammingWithMosh's [HTML](https://www.youtube.com/watch?v=qz0aGYrrlhU) 48 | - Hussein Nasser's [Web](https://www.youtube.com/watch?v=dh406O2v_1c) 49 | - CS50 [HTML CSS JS](https://www.youtube.com/watch?v=2VauFS071pg) 50 | - [web.dev CSS](https://web.dev/learn/css/) 51 | - Kevin Powell's HTML and CSS [basics](https://www.youtube.com/playlist?list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-) and [advanced](https://www.youtube.com/playlist?list=PL4-IK0AVhVjP27yZLwW-gkPggRps0CCnP) playlist 52 | - GitHub Pages [Documentation](https://docs.github.com/en/pages) 53 | - YouTube Player Embed API [Documentation](https://developers.google.com/youtube/iframe_api_reference) 54 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Hello World 5 | 6 | 7 | 8 | Write your code for the submission by editing this file 9 | 10 | 11 | --------------------------------------------------------------------------------