{"id":23208083,"url":"https://github.com/joyapisi/1st-capstone-project","last_synced_at":"2025-08-24T08:20:13.964Z","repository":{"id":162479819,"uuid":"613285618","full_name":"joyapisi/1st-Capstone-Project","owner":"joyapisi","description":"Capstone_Project is a HTML, CSS and JavaScript project that uses a Behance web design to create a UI in both mobile and desktop version. It also uses JavaScript events and DOM elements to create pages dynamically. This project's content is personalized to a Teen Creators Conference that helps teenagers learn production using Adobe products.","archived":false,"fork":false,"pushed_at":"2023-04-05T21:37:37.000Z","size":61308,"stargazers_count":17,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-06T16:48:53.256Z","etag":null,"topics":["best-practices","css","javascript","styleguide"],"latest_commit_sha":null,"homepage":"https://joyapisi.github.io/1st-Capstone-Project/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joyapisi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2023-03-13T09:21:15.000Z","updated_at":"2025-02-20T11:31:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"1f189a75-2ef4-4de3-bc0c-2b4c36f51c6b","html_url":"https://github.com/joyapisi/1st-Capstone-Project","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/joyapisi/1st-Capstone-Project","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joyapisi%2F1st-Capstone-Project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joyapisi%2F1st-Capstone-Project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joyapisi%2F1st-Capstone-Project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joyapisi%2F1st-Capstone-Project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joyapisi","download_url":"https://codeload.github.com/joyapisi/1st-Capstone-Project/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joyapisi%2F1st-Capstone-Project/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264495463,"owners_count":23617556,"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":["best-practices","css","javascript","styleguide"],"created_at":"2024-12-18T17:27:08.688Z","updated_at":"2025-07-09T16:37:40.097Z","avatar_url":"https://github.com/joyapisi.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HTML, CSS \u0026 JavaScript Capstone Project\nHTML, CSS and JavaScript Project\n\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\n\n# 📗 Table of Contents\n\n- [📖 About the Project](#about-project)\n  - [🛠 Built With](#built-with)\n    - [Tech Stack](#tech-stack)\n- [🎥 Video Explanation](#video-explanation)   \n- [🚀 Live Demo](#live-demo)    \n- [💻 Getting Started](#getting-started)\n  - [Setup](#setup)\n  - [Prerequisites](#prerequisites)\n- [👥 Authors](#authors)\n- [🔭 Future Features](#future-features)\n- [🤝 Contributing](#contributing)\n- [⭐️ Show your support](#support)\n-- [🙏 Acknowledgements](#acknowledgements)\n- [❓ FAQ](#faq)\n- [📝 License](#license)\n- [© Attribution](#attribution)\n\n# 📖 [Teen_Creators_Conference] \u003ca name=\"Teen Conference\"\u003e\u003c/a\u003e\n\n\n**[Teen_Creators_Conference]** is a HTML, CSS and JavaScript project that uses \u003ca href=\"https://www.behance.net/gallery/29845175/CC-Global-Summit-2015\"\u003e Behance \u003c/a\u003e web design to create a UI in both mobile and desktop version, use JavaScript events and DOM elements to create pages dynamically. This project's content is personalized to a Teen Creators Conference that helps teenagers learn production using Adobe products.\n\n## 🛠 Built With  \u003ca name=\"built-with\"\u003e\u003c/a\u003e\n\n### Tech Stack \u003ca name=\"tech-stack\"\u003e\u003c/a\u003e\n\n  \u003csummary\u003eJavascript runtime environment\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"https://nodejs.org/en/\"\u003eNode JS\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003csummary\u003eVersion control\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"github.com\"\u003eGit Hub\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/details\u003e\n\n\u003c!-- VIdeo Explanation --\u003e\n## 🎥 Video Explanation \u003ca name=\"video-explanation\"\u003e\u003c/a\u003e\n\nClick \u003ca href=\"https://www.loom.com/share/85f87f3aae2a470b953ee5ea325478a5\"\u003ehere\u003c/a\u003e to see a live demo of this project online: \n\n\u003c!-- LIVE DEMO --\u003e\n\n## 🚀 Live Demo \u003ca name=\"live-demo\"\u003e\u003c/a\u003e\nClick \u003ca href=\"https://joyapisi.github.io/1st-Capstone-Project/\"\u003ehere\u003c/a\u003e to see a live demo of this project online: \n\n\n\u003c!-- GETTING STARTED --\u003e\n\n## 💻 Getting Started \u003ca name=\"getting-started\"\u003e\u003c/a\u003e\n\nCreating your first \"Capstone\" project\n\nTo get a local copy up and running, follow these steps.\n\n### Prerequisites\n\nIn order to run this project you need:\n\n-A Git hub account\n-Git bash\n-Node JS\n-Visual Studio Code as your code editor\n-Figma account\n\n### Setup\n\nClone this repository to your desired folder:\n\n```sh\n  cd my-folder\n  git clone[(https://github.com/joyapisi/1st-Capstone-Project.git)]\n```\n### Set Up Linters\n## Define Linters\nA linter is a tool to help you improve your code. You can learn more about Linters here: (source: (\u003chttps://www.testim.io/blog/what-is-a-linter-heres-a-definition-and-quick-start-guide/\u003e)).\n\nAdvantages of Linting:\n\n1. Fewer errors in production- The use of linters helps to diagnose and fix technical issues such as code smells. As a result, fewer defects make their way to production.\n2. Achieving a more readable and consistent style, through the enforcement of its rules.\n3. Having more secure and performant code.\n4. Having an objective and measurable assessment of code quality.\n5. Having fewer discussions about code style and aesthetic choices during code reviews.\n\n## Install Linters \nYou can find linters for most of the programming languages, e.g. Rubocop for Ruby or ESLint for JavaScript.\n\nAlso, there are many ways you can integrate a linter in your workflow:\n\n-text editor plugin\n-GitHub Actions\n-GitHub apps\n## Set up Linters\n**Note:** The npm package manager is going to create a node_modules directory to install all of your dependencies. You shouldn't commit that directory. To avoid that, you can create a .gitignore file and add node_modules to it:\n\n# .gitignore\nnode_modules/\n\n## ESLint \nRun \n```\nnpm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x\n```\n\n## Web Hint \nThis is a customizable linting tool that helps you improve your site's accessibility, speed, cross-browser compatibility, and more by checking your code for best practices and common errors.\n\n**NOTE:** If you are using Windows, make sure you initialize npm to create `package.json` file. \n   ```\n   npm init -y\n   ```\n\n1. Run\n   ```\n   npm install --save-dev hint@7.x\n   ```\n   *how to use npm: (https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).*\n2. Copy [.hintrc](.hintrc) to the root directory of your project.\n3. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.**\n   - If you think that change is necessary - open a [Pull Request in this repository](../README.md#contributing) and let your code reviewer know about it.\n4. Run\n   ```\n   npx hint .\n   ```\n   [Copy contents of .eslintrc.json to the root directory of your project](https://github.com/microverseinc/linters-config/blob/master/html-css-js/.eslintrc.json)\n5. Fix validation errors.\n\n### [Stylelint](https://stylelint.io/)\n\nA mighty, modern linter that helps you avoid errors and enforce conventions in your styles.\n\n1. Run\n\nnpm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x\nnot sure how to use npm? Read this.\n\n2. Copy .stylelintrc.json to the root directory of your project.\n\n3. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.**\n\nIf you think that change is necessary - open a Pull Request in this repository and let your code reviewer know about it.\n4. Run npx stylelint \"**/*.{css,scss}\" on the root of your directory of your project.\n\n5. Fix linter errors.\n\n6. **IMPORTANT NOTE:** feel free to research auto-correct options for Stylelint if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code!\n\n### Making Your HTML and CSS Code From Figma\n-Pick a figma template to work on and use css and html to build a replica the first 2 sections of the mobile website using the template you have chosen.\n\n-Make sure to replace the contents of helloworld.html with new contents of your own html code which replicates the chosen figma template. \n\n-In your figma template, you will create the toolbar (or header) and the headline section (right after the header)\n\n**note**\n-Make sure to pick the mobile template on figma and not the desktop template.\n-In order to lay out the elements on the page you should use Flexbox in all 2 sections.\n-You don't need to implement any functionality that requires JavaScript, like opening the menu or creating dropdowns.\n-You must stick to the design as much as possible (e.g. font, colors, images, text, margins) using the templates in Figma.\n-Implement the button interactions (enable, hover, etc.).\n\n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n## 👥 Authors \u003ca name=\"authors\"\u003e\u003c/a\u003e\n\n👤 **Joy Phoebe**\n\n- GitHub: (https://github.com/joyapisi)\n- Twitter: (https://twitter.com/joyapisi)\n- LinkedIn: (https://http://www.linkedin.com/in/joy-phoebe-00b80a13a)\n\n\n## 🤝 Contributing \u003ca name=\"contributing\"\u003e\u003c/a\u003e\n Benson Njuguna: (https://github.com/Bennyjoez)\n  Fatiha Jeddaa: (https://github.com/Jeddaa)\n\n\n\u003c!-- FUTURE FEATURES --\u003e\n\n## 🔭 Future Features \u003ca name=\"future-features\"\u003e\u003c/a\u003e\n\n# **[Add_popup_button]**\nIn my speakers section, I would like to make the view more button reveal more speeakers using DOM manipulation\n# **[Create_other_pages]**\nThis website only has the home page and about page. In the future, I would like to add other pages to it.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- CONTRIBUTING --\u003e\n\nContributions, issues, and feature requests are welcome!\n\nFeel free to check the [issues page](https://github.com/joyapisi/ThePortfolio/issues).\n\n## ⭐️ Show your support \u003ca name=\"support\"\u003e\u003c/a\u003e\n\nIf you like this project, kindly leave a comment below and share it with someone who enjoys coding! Coding is all about continuous learning and allowing yourself to be a beginner. Keep going! \n\n\n\u003c!-- ACKNOWLEDGEMENTS --\u003e\n\n## 🙏 Acknowledgments \u003ca name=\"Microverse Inc.\"\u003e\u003c/a\u003e\n\nI'm thankful to Microverse for providing a study platform which guided me through this project and to my coding partners at Microverse for the collaborative effort. \nI'm also thankful to have used the original design idea by [Cindy Shin in Behance](https://www.behance.net/gallery/29845175/CC-Global-Summit-2015)\n\n\n\u003c!-- FAQ (optional) --\u003e\n\n## ❓ FAQ \u003ca name=\"faq\"\u003e\u003c/a\u003e\n\n- **[Question_1]**\nHow can I download figma images?\n\n  - \nYou can watch this video to understand hpw you can download figma images and use CSS provided in figma:\n\u003cul\u003e\n  \u003cli\u003e\u003ca href=\"https://www.loom.com/embed/167236d17f104fc18298c5c9888354c9\"\u003eGit Hub\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n- **[Question_2]**\nWhere can I download node JS for installation?\n\n  - \nNode Js can be downloaded here- \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"https://nodejs.org/en/download/\"\u003e Node JS \u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\n- **[Question_3]**\nHow can I style with flexbox?\n  - \n  Learn everything you need to know about flex boxes here:\n\u003cul\u003e\n    \u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=Vj7NZ6FiQvo\u0026list=PLu8EoSxDXHP7xj_y6NIAhy0wuCd4uVdid\"\u003eFlex Boxes\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\n\u003c!-- LICENSE --\u003e\n\n## 📝 License \u003ca name=\"license\"\u003e\u003c/a\u003e\n\nThis project is [MIT](https://choosealicense.com/licenses/mit/) licensed.\n\n## © Attribution \u003ca name=\"attribution\"\u003e\u003c/a\u003e\nOriginal design idea by [Cindy Shin in Behance](https://www.behance.net/gallery/29845175/CC-Global-Summit-2015)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoyapisi%2F1st-capstone-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoyapisi%2F1st-capstone-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoyapisi%2F1st-capstone-project/lists"}