{"id":13428198,"url":"https://github.com/BoilerMake/how-to-webdev","last_synced_at":"2025-03-16T01:32:20.777Z","repository":{"id":51305207,"uuid":"41601828","full_name":"BoilerMake/how-to-webdev","owner":"BoilerMake","description":"A mostly complete introduction into web development.","archived":false,"fork":false,"pushed_at":"2023-11-30T15:14:41.000Z","size":29735,"stargazers_count":33,"open_issues_count":5,"forks_count":6,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-09-10T14:09:28.324Z","etag":null,"topics":["learn-to-code","teaching"],"latest_commit_sha":null,"homepage":"http://boilermake.github.io/how-to-webdev","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BoilerMake.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-08-29T17:39:31.000Z","updated_at":"2023-09-29T04:14:20.000Z","dependencies_parsed_at":"2024-07-31T03:01:10.357Z","dependency_job_id":"2bcea80e-34b6-419f-8988-98f44ef8f178","html_url":"https://github.com/BoilerMake/how-to-webdev","commit_stats":null,"previous_names":["boilercamp/how-to-webdev"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BoilerMake%2Fhow-to-webdev","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BoilerMake%2Fhow-to-webdev/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BoilerMake%2Fhow-to-webdev/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BoilerMake%2Fhow-to-webdev/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BoilerMake","download_url":"https://codeload.github.com/BoilerMake/how-to-webdev/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221631896,"owners_count":16855020,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["learn-to-code","teaching"],"created_at":"2024-07-31T01:00:49.063Z","updated_at":"2024-10-27T05:30:51.061Z","avatar_url":"https://github.com/BoilerMake.png","language":"JavaScript","funding_links":[],"categories":["tutorials / hackpacks"],"sub_categories":[],"readme":"# [How to Webdev](http://boilercamp.github.io/how-to-webdev)\n\nA mostly complete introduction into web development.\n\nIt can be difficult to figure out where to start when you want to get into web\ndevelopment. How to Webdev is a series of accelerated workshops and projects\nthat build on one another with the goal of teaching web development. This course\nwill cover [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML),\n[CSS](https://developer.mozilla.org/en-US/docs/Web/CSS), [JavaScript](https://developer.mozilla.org/en-US/docs/Web/javascript),\n[Node.js](https://nodejs.org/en/), and [MongoDB](https://www.mongodb.com/).\n\nHow to Webdev was first debuted September 2015 at [BoilerCamp](http://boilercamp.org/)\nat Purdue University.\n\nYou can checkout all of the slides from the presentation(s) in both [PDF](https://raw.githubusercontent.com/BoilerCamp/how-to-webdev/master/docs/assets/slides/BoilerCamp.pdf)\nand [Keynote](https://raw.githubusercontent.com/BoilerCamp/how-to-webdev/master/docs/assets/slides/BoilerCamp.key)\nformats.\n\nWritten and developed by [Kirby Kohlmorgen](http://kirby.xyz/) \u0026 [Roy Fu](http://royfu.me/).\n\n## The Goal\n\nBy the end of this tutorial you should have a sound understanding of how to\nbuild an application for the web. Specifically, in this exercise you'll be\nbuilding a personal website and blog.\n\nYou'll start by building a static website with vanilla HTML and CSS. We'll\nquickly introduce the power of frameworks by hooking you up with some [Bootstrap](http://getbootstrap.com/).\nWe'll add a little client-side JavaScript, which will give us a chance to\nintroduce [jQuery](https://jquery.com/). Once we have a pretty static site set\nup we'll the introduce the idea of a backend with Node.js running a webserver\nwith [Express](http://expressjs.com/). This provides us with a nice segway into\nserver-side rendering and templating [Handlebars](http://handlebarsjs.com/). And\nfinally we'll introduce the idea of a database utilizing MongoDB.\n\nYou can see an example of the finished web app [here](http://ricksanchez.herokuapp.com/).\n\n## Getting it Running\n\nThe current state of this [repo](https://github.com/BoilerCamp/how-to-webdev) is\nthe final product after completing all of the walkthroughs. If you want to get\nthis server up and running so you can check it out, you need to do a few things.\n\n### 1. Install Dependancies\n\nYou'll first need to install all of the server-side dependancies with `npm`,\nand the client-side depedancies with `bower`:\n\n```bash\n$ npm install\n$ npm run prepare\n```\n\n### 2. Setup MongoDB\n\nYou'll also need a MongoDB instance running somewhere.\n\nFirst we need to install MongoDB. On Mac you use [Homebrew](http://brew.sh/) to\ninstall MongoDB.\n\n```bash\n$ brew install mongodb\n```\n\nYou'll then need to make a directory for MongoDB to write the database to.\n\n```bash\n$ sudo mkdir -p /data/db\n$ sudo chown `whoami` /data/db\n```\n\nFinally, you'll need to get MongoDB running.\n\n```bash\n$ mongod\n```\n\n### 3. Connecting to MongoDB\n\nWe need our server to be able to connect to MongoDB. We specify the address and\nport to our MongoDB instance with a `.env` file. Go ahead and copy the\n`env.sample` file.\n\n```bash\n$ cp env.sample .env\n```\n\n\u003e If you're running MongoDB locally on a standard address and port, then you\ndon't need to do anything else!\n\nWe want to put some fake data in our MongoDB instance, so we'll have some nice\nblog posts to look at.\n\n```bash\n$ npm run seed\n```\n\n### 4. Starting the Server\n\nLastly, we just need to start our server!\n\n```bash\n$ npm start\n```\n\nThen go to [http://localhost:8080/](http://localhost:8080/) to checkout the\nfinal project!!\n\n## Thanks\n\nMany thanks are due to the entire BoilerCamp Team:\n\n- [Adam Loeb](https://github.com/aloeb)\n- [Ben Alderfer](https://github.com/balderfer)\n- [Fisher Adelakin](https://github.com/fadelakin)\n- [Kedar Vaidya](https://github.com/kedarv)\n- [Kurt Kroeger](https://github.com/kwkroeger)\n- [Shriyash Jalukar](https://github.com/infinitebattery7)\n- [Roy Fu](https://github.com/Roystbeef)\n- [Usmann Khan](https://github.com/UsmannK)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBoilerMake%2Fhow-to-webdev","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBoilerMake%2Fhow-to-webdev","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBoilerMake%2Fhow-to-webdev/lists"}