initial setup

README.md

@@ -1,2 +1,67 @@
-# solid-knowledge
-"Solid Knowledge" is an essential everyday knowledge management resource. This repository serves as an indispensable tool for individuals seeking to excel in their roles as full stack engineers, providing a comprehensive and accessible collection of vital information.
+# Solid Knowledge:
+## Empowering Front End Engineers with Everyday Know-How
+
+"Solid Knowledge" is an essential everyday knowledge management resource. This repository serves as an indispensable tool for individuals seeking to excel in their roles as front end web development engineers, providing a comprehensive and accessible collection of vital information.
+
+## Table of Contents
+[description](#description)
+[screenshots](#screenshots)
+[contributing](#contributing)
+[accessibility testing](#accessibility-testing)
+[resources](#resources)
+[licence](#license)
+
+## Description
+"Solid Knowledge" is a groundbreaking GitHub repository meticulously crafted to equip full stack engineers with essential everyday knowledge management resources. This repository serves as an indispensable tool for individuals seeking to excel in their roles as full stack engineers, providing a comprehensive and accessible collection of vital information.
+
+The primary purpose of "Solid Knowledge" is to bridge the gap between theoretical understanding and practical application, offering a wealth of resources curated specifically for the challenges faced by full stack engineers in their day-to-day work. From fundamental concepts to advanced techniques, this repository covers a wide spectrum of topics, enabling engineers to deepen their expertise and tackle real-world development scenarios with confidence.
+
+At its core, "Solid Knowledge" embraces the principles of accessibility and continuous learning. The repository is designed to cater to engineers of all levels, from novices seeking to lay a strong foundation to seasoned professionals aiming to stay at the cutting edge of technology. The content is structured in a user-friendly format, facilitating easy navigation and swift access to relevant information.
+
+The repository encompasses a plethora of subjects vital for full stack engineers, such as front-end and back-end development, database management, server configuration, cloud computing, security best practices, software testing, and version control, among others. It also includes curated best practices, coding standards, and optimization techniques to foster efficient and high-quality development practices.
+
+Through "Solid Knowledge," full stack engineers can enhance their skills, problem-solving abilities, and decision-making processes, ultimately empowering them to build robust, scalable, and innovative solutions. By providing a platform for everyday knowledge management, this repository becomes a go-to resource for engineers seeking reliable guidance and continuous improvement in their professional journey.
+
+In conclusion, "Solid Knowledge" emerges as a vital repository catering to the needs of full stack engineers. Its comprehensive collection of everyday knowledge and practical insights fosters excellence and agility in the dynamic world of software development. Embrace the power of "Solid Knowledge" to elevate your capabilities as a full stack engineer and embark on a journey of continuous growth and success.
+
+## Screenshots
+
+![Screenshot 1](./images/screenshot1.png)
+![Screenshot 2](./images/screenshot2.png)
+
+## Contributing
+
+I welcome contributions from the community to enhance the Bootstrap Portfolio Project. By participating in this project, you contribute to a vibrant and inclusive environment. To ensure a positive experience the code of conduct we will adhere to is based on [The Contributor Covenant](https://www.contributor-covenant.org/version/2/1/code_of_conduct/code_of_conduct.md). Please review and follow these guidelines when contributing.
+
+## Accessibility Testing
+I aim to ensure websites that I build are built with accessibility in mind. I welcome feedback, and would ask that you test for accessibility by visiting this page: [Accessibility Testing and Inclusive Design](./assets/Accessibility%20Testing%20and%20Inclusive%20Design.md).
+
+## Resources
+- [MDN Web Docs (n.d.) CSS transition property](https://developer.mozilla.org/en-US/docs/Web/CSS/transition).
+- [MDN Web Docs (n.d.)CSS linear-gradient function](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient).
+- [MDN Web Docs (n.d.) CSS user-select property](https://developer.mozilla.org/en-US/docs/Web/CSS/user-select).
+- [Chris Coyier (2016, updated 2020) considerations for styling the pre tag. CSS Tricks.](https://css-tricks.com/considerations-styling-pre-tag/).
+- Tutorial: [07. MINI PROJECT 👩‍🎓👨‍🎓 MINI-PROJECT: CSS SNIPPET CHEAT SHEET](https://fantastic-pudding.vercel.app/02-css-module/activities/day-03/07-mini-project/)
+
+- [Alex Birkett Creating & Managing a Knowledge Base: The Ultimate Guide How to Create, Manage, and Optimize Your Knowledge Base to Improve Customer Success and Happiness](https://www.hubspot.com/knowledge-base)
+
+- [DEFINITION knowledge base by Ben Lutkevich](https://www.techtarget.com/whatis/definition/knowledge-base)
+
+- [Codecademy Team - HTML Glossary: Programming reference for HTML elements.](https://www.codecademy.com/article/glossary-html)
+
+- https://www.freecodecamp.org/ Learn to code — for free. Build projects. Earn certifications.
+
+- https://www.atlassian.com/itsm/knowledge-management/what-is-a-knowledge-base
+- https://www.figma.com/
+- https://flexboxfroggy.com/
+- https://cssgridgarden.com/
+- https://codepen.io/matt-boisseau/pen/zYqVaxv?editors=1100
+- https://www.freecodecamp.org/news/tag/html/
+- [W3Schools (n.d.) CSS Grid](https://www.w3schools.com/css/css_grid.asp)
+- [Ellen Spertus (2021) Best practices for writing code comments. code-for-a-living - stack over flow](https://stackoverflow.blog/2021/12/23/best-practices-for-writing-code-comments/)
+
+## License
+This project is licensed under [MIT License](./LICENSE).
+
+---
+© 2023 Dairon Reijna. Confidential and Proprietary. All Rights Reserved.

assets/Accessibility Testing and Inclusive Design.md

@@ -0,0 +1,31 @@
+## Accessibility Testing and Inclusive Design
+
+### Importance of Accessibility Testing
+
+In the pursuit of creating a digital world that is inclusive and equitable for all users, accessibility testing plays a pivotal role. At its core, accessible design ensures that digital content and applications are usable by individuals with a diverse range of abilities, including those with disabilities. Accessibility testing is not just a legal or ethical obligation; it's a means to provide equal access and a positive user experience to everyone, regardless of their physical or cognitive capabilities.
+
+### Be Part of the Solution
+
+As you engage with the concept of accessible design, consider your role as a developer in contributing to a more inclusive web. Companies are increasingly recognizing the significance of accessible design, not only for ethical reasons but also due to legal requirements and business advantages. In the UK, the Equality Act 2010 mandates that website owners make "reasonable adjustments" to ensure accessibility.
+
+### Your Impact
+
+By implementing accessible design principles and conducting thorough accessibility testing, you contribute to making the digital landscape a more accessible and inclusive space. It's important to remember that your work as a developer can directly impact the lives of over one billion people globally who have disabilities, as identified by the World Health Organization.
+
+### Testing for Accessibility
+
+We encourage you to actively engage in accessibility testing for your projects. Try out tools such as the WCAG Color Contrast Checker to ensure your color choices meet accessibility standards. Explore the Accessibility Inspector in Firefox Developer Tools to identify and rectify accessibility issues in your web content.
+
+### Your Feedback Matters
+
+Testing for accessibility is an ongoing process, and user feedback is invaluable. We invite you to experience your projects from the perspective of diverse users. Try using screen readers, keyboard navigation, and other assistive technologies to identify potential barriers. Your feedback will not only improve your projects but contribute to a more inclusive digital ecosystem.
+
+### Resources for Accessibility Testing
+
+- [WCAG Color Contrast Checker](https://chrome.google.com/webstore/detail/wcag-color-contrast-check/plnahcmalebffmaghcpcmpaciebdhgdf?hl=en)
+- [Accessibility Inspector in Firefox Developer Tools](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/)
+- [Web Content Accessibility Guidelines (WCAG) - Decision Tree](https://www.w3.org/WAI/tutorials/images/decision-tree/)
+
+By prioritizing accessibility testing and inclusive design, you're fostering a web that empowers everyone to engage, interact, and experience digital content without limitations. Your commitment to accessibility aligns with industry standards, legal requirements, and, most importantly, the principles of digital equality.
+
+Remember, every step you take toward accessibility is a step toward a more inclusive future.

assets/Wire framing.txt

@@ -0,0 +1,10 @@
+Website wire frame created using https://cloud.smartdraw.com/?nsu=1
+
+Reviewed: 
+https://en.wikipedia.org/wiki/Website_wireframe
+
+Osman, M. (2021) Website Wireframe Beginner's Guide: Processes, Tools, & Examples - https://blog.hubspot.com/website/website-wireframe
+
+Orlee Gillis, O. (2021) How To Wireframe A Website in 3 Easy Steps - https://elementor.com/blog/wireframe-website/ 
+Wireframing is a fundamental part of every web creator’s design workflow. 
+

assets/css/index.css

@@ -0,0 +1,44 @@
+.containerGrid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  grid-template-rows: repeat(6, 1fr); */
+  grid-template-areas: 
+    "topRow topRow topRow topRow topRow topRow"
+    "topRow topRow topRow topRow topRow topRow"
+    /*"gridOne gridOne gridTwo gridTwo gridThree gridThree"
+    "gridFour gridFour gridFive gridFive gridSix gridSix"
+    */
+    "gridArea gridArea gridArea gridArea gridArea gridArea"
+    "gridArea gridArea gridArea gridArea gridArea gridArea"
+    "gridArea gridArea gridArea gridArea gridArea gridArea"
+    "footer footer footer footer footer footer"
+
+  /*width: 200px;
+  height: 150px; */
+}
+
+.topRow {
+  grid-area: topRow;
+}
+
+.gridArea {
+  grid-area: gridArea;
+  column-span: 2;
+  border-radius: 25px;
+  border: 2px dotted #73AD21;
+  padding: 20px;
+}
+
+.footer {
+  grid-area: footer;
+}
+
+
+
+/*
+}
+
+/*
+.test {
+    background-color: red;
+}

index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en-gb">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <meta name="description" content="Free knowledge base for web developers">
+    <meta name="keywords" content="HTML, CSS, JavaScript, Front End, Full Stack, Knowledge Hub">
+    <meta name="author" content="Dairon Reijna">
+
+    <link href="./assets/css/index.css" rel="stylesheet">
+
+    <title>Solid Knowledge Website</title>
+
+</head>
+
+<body class="containerGrid">
+    <div class="topRow">
+        <h1>CSS Snippet Cheatsheet</h1>
+    </div>
+    <h1> Welcome to my page</h1>
+    <div class="containerGrid">
+        <div class="gridArea">Box 1</div>
+        <div class="gridArea">Box 2</div>
+        <div class="gridArea">Box 3</div>
+        <div class="gridArea">Box 4</div>
+        <div class="gridArea">Box 5</div>
+        <div class="gridArea">Box 6</div>
+    </div>
+</body>
+
+</html>
+