/Capstone-Project

In this capstone project, I'm going to build is based on an online website for a conference using HTML, CSS and JavaScript.

Primary LanguageCSSMIT LicenseMIT

FireShot Capture 002 - Multi Device Website Mockup Generator - techsini com

📗 Table of Contents

📖 Portfolio - mobile menu

In this project, I have implemented the capstone project. It's a online website with 2 pages (home and about) and for both versions (mobile and desktop). My goal here is to master all of the tools and best practices I have learned about in previous steps. I will be using them in all Microverse projects and most likely in my future job as well, so it is important to know them!

🛠 Built With

Tech Stack

Client
Server
  • N/A
Database
  • N/A

Key Features

  • Follow a correct Gitflow
  • Comply with linters
  • Parse a Figma design to create a UI
  • Grid layout
  • Flexbox to place elements in the page
  • Build a personal portfolio site movil version
  • Use images and backgrounds, button interactions to enhance the look of the website
  • Create forms with HTML5 validations
  • Understand the importance of UX
  • Collect data by using teh Formspree service
  • create UIs adaptable to different screen sizes using media queries
  • Accesisibility Checked
  • DOM events with Javascript
  • Javascript events
  • Use objects to store and access data
  • Process user input according to business rules
  • Use client-side validation to catch and throw errors in the UI

(back to top)

🚀 Live Demo

(back to top)

💻 Getting Started

To get a local copy up and running, follow these steps:

Prerequisites

In order to run this project you need:

✅ Github account
✅ Visual Studio Code installed
✅ Node.js installed
✅ Git Bash installed (optional)

Setup

Clone this repository to your desired folder:

  cd [my-folder]
  git clone git@github.com:CarlosIgreda/Capstone-Project.git

(back to top)

👥 Author

Carlos Igreda

Credits: Original design idea by Cindy Shin in Behance

(back to top)

🔭 Future Features

  • Add more pages

(back to top)

📹 Loom Video

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

If you like this project you can follow me on Github.

(back to top)

🙏 Acknowledgments

I would like to thank all Microverse staff and my coding partners as well. Credits: Original design idea by Cindy Shin in Behance

(back to top)

❓ FAQ

  • What is a Linter?

    • Linter is a tool that analyzes source code to flag programming errors, bugs, stylistic errors, and suspicious constructs.

  • What is meant by Gitflow?

    • Gitflow is an alternative Git branching model that involves the use of feature branches and multiple primary branches.

  • How to use flexbox?

    • The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.

  • What is grid layout?

    • CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

  • What is hover effect?

    • Creating CSS link hover effects can add a bit of flair to an otherwise bland webpage. If you’ve ever found yourself stumped trying to make a slick hover effect, then I have six CSS effects for you to take and use for your next project.

  • What is form validation?

    • When you enter data, the browser and/or the web server will check to see that the data is in the correct format and within the constraints set by the application. Validation done in the browser is called client-side validation, while validation done on the server is called server-side validation. In this chapter we are focusing on client-side validation.

  • What is UX?

    • User experience (UX) design is the process design teams use to create products that provide meaningful and relevant experiences to users.

  • What is media query?

    • Media queries allow you to apply CSS styles depending on a device's general type (such as print vs. screen) or other characteristics such as screen resolution or browser viewport width.

  • What is accessibility?

    • Accessibility is essential for developers and organizations that want to create high quality websites and web tools, and not exclude people from using their products and services.

  • What is DOM?

    • The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web.

(back to top)

📝 License

This project is MIT licensed.

(back to top)