Loading repository data…
joyapisi / repository
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.
HTML, CSS and JavaScript Project
[Teen_Creators_Conference] is a HTML, CSS and JavaScript project that uses Behance 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.
Click here to see a live demo of this project online:
Click here to see a live demo of this project online:
Creating your first "Capstone" project
To get a local copy up and running, follow these steps.
In order to run this project you need:
-A Git hub account -Git bash -Node JS -Visual Studio Code as your code editor -Figma account
Clone this repository to your desired folder:
cd my-folder
git clone[(https://github.com/joyapisi/1st-Capstone-Project.git)]
A linter is a tool to help you improve your code. You can learn more about Linters here: (source: (https://www.testim.io/blog/what-is-a-linter-heres-a-definition-and-quick-start-guide/)).
Advantages of Linting:
You can find linters for most of the programming languages, e.g. Rubocop for Ruby or ESLint for JavaScript.
Also, there are many ways you can integrate a linter in your workflow:
-text editor plugin -GitHub Actions -GitHub apps
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:
node_modules/
Run
npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x
This 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.
NOTE: If you are using Windows, make sure you initialize npm to create package.json file.
npm init -y
npm install --save-dev hint@7.x
npx hint .
A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x not sure how to use npm? Read this.
Copy .stylelintrc.json to the root directory of your project.
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.
If you think that change is necessary - open a Pull Request in this repository and let your code reviewer know about it. 4. Run npx stylelint "**/*.{css,scss}" on the root of your directory of your project.
Fix linter errors.
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!
-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.
-Make sure to replace the contents of helloworld.html with new contents of your own html code which replicates the chosen figma template.
-In your figma template, you will create the toolbar (or header) and the headline section (right after the header)
note -Make sure to pick the mobile template on figma and not the desktop template. -In order to lay out the elements on the page you should use Flexbox in all 2 sections. -You don't need to implement any functionality that requires JavaScript, like opening the menu or creating dropdowns. -You must stick to the design as much as possible (e.g. font, colors, images, text, margins) using the templates in Figma. -Implement the button interactions (enable, hover, etc.).
👤 Joy Phoebe
Benson Njuguna: (https://github.com/Bennyjoez) Fatiha Jeddaa: (https://github.com/Jeddaa)
In my speakers section, I would like to make the view more button reveal more speeakers using DOM manipulation
This website only has the home page and about page. In the future, I would like to add other pages to it.
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
If 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!
I'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. I'm also thankful to have used the original design idea by Cindy Shin in Behance
[Question_1] How can I download figma images?
You can watch this video to understand hpw you can download figma images and use CSS provided in figma:
[Question_2] Where can I download node JS for installation?
Node Js can be downloaded here- Node JS
This project is MIT licensed.
Original design idea by Cindy Shin in Behance
Selected from shared topics, language and repository description—not editorial ratings.
baqar-abbas /
This project is made on Web Summit 2023 using html, css and JS best practices. The Original design idea is by Cindy Shin in Behance" Thanks ❤️ to Cindy Shin Creating such a beautiful design.
AbdimulhinYussuf3675 /
In this project, I set up a "MIcroverse Module1 Capstone Project" repository .The goal in this project is to master all of the tools and best practices of HTML,CSS and JavaScript.
TesheMaximillan /
In this capstone project, I created an Art blog website that encourages artists to post their designs and also helps them to participate in different events especially related to the art gallery, and also gives them a chance to present their works at the event show. However, my main intention is to use HTML5/CSS and JavaScript best practices and apply these concepts which is I learned from the Microverse Training - Module 1 to this amazing website.
c00p75 /
The goal of this project is to create an online website for a conference with personalized content while demonstrating ability to create UIs adaptable to different screen sizes using media queries, using a CSS framework, applying best practices in HTML, CSS and JavaScript code.
CobbyElsonfx /
This is a capstone project built to serve as a Web Page for an annual Hackathon Program organized every year for developers in my Zone
Ambrosegithub /
Capstone movie app is a second Capstone project in Microverse. This project summarises all the activities carried out in Module 2. In this project, a movie web application was developed using an external API. This web app has two interfaces and was developed by a team of two persons. The project was built using HTML/CSS and Javascript.