├── .DS_Store ├── documentation ├── hero.png ├── resources.png ├── heading-links.png ├── link-example.png ├── table-example.png ├── heading-example.png ├── shields-example.png ├── codeblock-example.png ├── imagelink-example.png ├── styledtext-example.png ├── numbered-list-example.png ├── milestone1-testing │ ├── lighthouse.png │ ├── wave-desktop.png │ ├── wqave-extension.png │ ├── w3c-css-validation.png │ ├── w3c-uri-validatation.png │ └── w3c-directinput-validation.png ├── strikethrough-bullet-example.png └── table-justification-example.png ├── milestone1-testing.md ├── milestone1-readme.md ├── README.md └── resources.md /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kera-cudmore/readme-examples/HEAD/.DS_Store -------------------------------------------------------------------------------- /documentation/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kera-cudmore/readme-examples/HEAD/documentation/hero.png -------------------------------------------------------------------------------- /documentation/resources.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kera-cudmore/readme-examples/HEAD/documentation/resources.png -------------------------------------------------------------------------------- /documentation/heading-links.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kera-cudmore/readme-examples/HEAD/documentation/heading-links.png -------------------------------------------------------------------------------- /documentation/link-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kera-cudmore/readme-examples/HEAD/documentation/link-example.png -------------------------------------------------------------------------------- /documentation/table-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kera-cudmore/readme-examples/HEAD/documentation/table-example.png -------------------------------------------------------------------------------- /documentation/heading-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kera-cudmore/readme-examples/HEAD/documentation/heading-example.png -------------------------------------------------------------------------------- /documentation/shields-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kera-cudmore/readme-examples/HEAD/documentation/shields-example.png -------------------------------------------------------------------------------- /documentation/codeblock-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kera-cudmore/readme-examples/HEAD/documentation/codeblock-example.png -------------------------------------------------------------------------------- /documentation/imagelink-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kera-cudmore/readme-examples/HEAD/documentation/imagelink-example.png -------------------------------------------------------------------------------- /documentation/styledtext-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kera-cudmore/readme-examples/HEAD/documentation/styledtext-example.png -------------------------------------------------------------------------------- /documentation/numbered-list-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kera-cudmore/readme-examples/HEAD/documentation/numbered-list-example.png -------------------------------------------------------------------------------- /documentation/milestone1-testing/lighthouse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kera-cudmore/readme-examples/HEAD/documentation/milestone1-testing/lighthouse.png -------------------------------------------------------------------------------- /documentation/strikethrough-bullet-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kera-cudmore/readme-examples/HEAD/documentation/strikethrough-bullet-example.png -------------------------------------------------------------------------------- /documentation/table-justification-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kera-cudmore/readme-examples/HEAD/documentation/table-justification-example.png -------------------------------------------------------------------------------- /documentation/milestone1-testing/wave-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kera-cudmore/readme-examples/HEAD/documentation/milestone1-testing/wave-desktop.png -------------------------------------------------------------------------------- /documentation/milestone1-testing/wqave-extension.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kera-cudmore/readme-examples/HEAD/documentation/milestone1-testing/wqave-extension.png -------------------------------------------------------------------------------- /documentation/milestone1-testing/w3c-css-validation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kera-cudmore/readme-examples/HEAD/documentation/milestone1-testing/w3c-css-validation.png -------------------------------------------------------------------------------- /documentation/milestone1-testing/w3c-uri-validatation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kera-cudmore/readme-examples/HEAD/documentation/milestone1-testing/w3c-uri-validatation.png -------------------------------------------------------------------------------- /documentation/milestone1-testing/w3c-directinput-validation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kera-cudmore/readme-examples/HEAD/documentation/milestone1-testing/w3c-directinput-validation.png -------------------------------------------------------------------------------- /milestone1-testing.md: -------------------------------------------------------------------------------- 1 | # MILESTONE 1 PROJECT NAME - TESTING 2 | 3 | 👩🏻‍💻 View an example of this section [here](https://github.com/kera-cudmore/Found-In-Translation/blob/main/TESTING.md#found-in-translation----testing-documentation) 4 | 5 | Add an image of the finished site here. I like to use [amiresponsive](https://ui.dev/amiresponsive) to get an image of my site on all device sizes, and amiresponsive allows you to click links on the page and scroll, so each device can show a different element of your site. 6 | 7 | Add a link to the live site here, for Milestone 1 this will be the GitHub Pages Link from when you deployed the site. 8 | 9 | If you want to add optional shields.io badges to your TESTING file, I like to add them to this section (Shields.io have some badges for W3C validation which makes it easy to see at a glance whether the project has passed validation). 10 | 11 | --- 12 | 13 | ## CONTENTS 14 | 15 | * [AUTOMATED TESTING](#automated-testing) 16 | * [W3C Validator](#w3c-validator) 17 | * [Lighthouse](#lighthouse) 18 | * [WAVE](#wave) 19 | 20 | * [MANUAL TESTING](#manual-testing) 21 | * [Testing User Stories](#testing-user-stories) 22 | * [Full Testing](#full-testing) 23 | 24 | * [BUGS](#bugs) 25 | * [Known Bugs](#known-bugs) 26 | * [Solved Bugs](#solved-bugs) 27 | 28 | --- 29 | 30 | ## AUTOMATED TESTING 31 | 32 | The Automated Testing includes all the testing that is carried out by a program, like W3C HTML validation. 33 | 34 | ###  W3C Validator 35 | 36 | 👩🏻‍💻 View an example of a completed W3C HTML & CSS validation section [here](https://github.com/kera-cudmore/TheQuizArms/blob/main/TESTING.md#W3C-Validator) 37 | 38 | The most popular HTML validator is [W3C](https://validator.w3.org/). There are two ways to validate the HTML for your first milestone - you can copy the live link for your site page and paste into the validate by URI field, or you can copy all the code for your page and paste this into the validate by direct input field. 39 | 40 | #### **URI Input** 41 | 42 | If you validate with your sites URL, you can run the validation and then copy the link from the address bar and insert the link here as your proof of validation. 43 | 44 | ![W3C URI Validator](documentation/milestone1-testing/w3c-uri-validatation.png) 45 | 46 | #### **Direct Input** 47 | 48 | If you validate with the code, you will need to screenshot the validation results and then link the image here. 49 | 50 | ![W3C Direct Input Validator](documentation/milestone1-testing/w3c-directinput-validation.png) 51 | 52 | #### **CSS Validation** 53 | 54 | CSS Validation can only be done by copying and pasting the CSS file contents into the direct input. Make sure that the checkbox for CSS is selected. 55 | 56 | ![W3C CSS Validation](documentation/milestone1-testing/w3c-css-validation.png) 57 | 58 | ### Lighthouse 59 | 60 | 👩🏻‍💻 View an example of a completed lighthouse testing section [here](https://github.com/kera-cudmore/earth-day-hackathon-2022/blob/main/TESTING.md#Lighthouse) 61 | 62 | Lighthouse Testing is part of the Chrome Developer Tools. For more information on how to use this tool, please visit [chrome Lighthouse](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en#:~:text=Lighthouse%20is%20an%20open%2Dsource,how%20well%20the%20page%20did.). 63 | 64 | You will need to run the Lighthouse testing on each individual page of your site, for desktop as a minimum. If you have time it would be great to also add in the mobile testing. 65 | 66 | ![Lighthouse Testing](documentation/milestone1-testing/lighthouse.png) 67 | 68 | ### WAVE 69 | 70 | 👩🏻‍💻 View an example of a completed WAVE testing section [here](https://github.com/kera-cudmore/earth-day-hackathon-2022/blob/main/TESTING.md#WAVE) 71 | 72 | [WAVE](https://wave.webaim.org/) is an accessibility testing tool. I like to run this on each page of my site and take a screenshot of the results to add here. They have a website for testing and a Chrome extension. 73 | 74 | ![Wave Desktop](documentation/milestone1-testing/wave-desktop.png) 75 | 76 | ![Wave Exetension](documentation/milestone1-testing/wqave-extension.png) 77 | 78 | ## MANUAL TESTING 79 | 80 | ### Testing User Stories 81 | 82 | 👩🏻‍💻 View an example of a completed user stories testing section [here](https://github.com/kera-cudmore/BookWorm/blob/main/TESTING.md#Testing-User-Stories) 83 | 84 | This is where you will test the user stories you created in the README against your site. I like to use a table for this section - I create a column for the user stories goals, how these have been achieved and I use the third column to add any supporting images. 85 | 86 | ### Full Testing 87 | 88 | 👩🏻‍💻 View an example of a completed full testing section [here](https://github.com/kera-cudmore/TheQuizArms/blob/main/TESTING.md#Full-Testing) 89 | 90 | Full testing can be tedious, so it is great to try and break this part up into smaller chunks and do a bit at a time. Full testing is when you go through the site and test every single thing that can be tested. So for example you would test that all links in the navbar correctly redirect the user to where there are supposed to go. A table is the perfect way to display this information. 91 | 92 | ## BUGS 93 | 94 | ### Known Bugs 95 | 96 | List (or put in a table) all known bugs on your site here as soon as you find them. This will prevent you from forgetting any at the end. Some (if not all) of these bugs will hopefully make their way over to the next section, solved bugs, as you progress through your project. 97 | 98 | ### Solved Bugs 99 | 100 | 👩🏻‍💻View an example of a completed bugs section [here](https://github.com/kera-cudmore/BookWorm/blob/main/TESTING.md#BUGS) 101 | 102 | This is where all solved bugs go once squashed. List what the bug was, and how you managed to fix it. You can also include images/videos here if you wanted. 103 | -------------------------------------------------------------------------------- /milestone1-readme.md: -------------------------------------------------------------------------------- 1 | # PROJECT NAME TO GO HERE 2 | 3 | 👩🏻‍💻 View an example of this section [here](https://github.com/kera-cudmore/Bully-Book-Club#bully-book-club-website) 4 | 5 | Add a Blurb about the site here, what does it do, why did you build it? 6 | 7 | Add an image of the finished site here. I like to use [amiresponsive](https://ui.dev/amiresponsive) to get an image of my site on all device sizes, and amiresponsive allows you to click links on the page and scroll, so each device can show a different element of your site. 8 | 9 | Add a link to the live site here, for Milestone 1 this will be the GitHub Pages Link from when you deployed the site. 10 | 11 | If you want to add optional [shields.io](https://shields.io) badges to your README, I like to add them to this section. 12 | 13 | --- 14 | 15 | ## CONTENTS 16 | 17 | * [User Experience](#user-experience-ux) 18 | * [User Stories](#user-stories) 19 | 20 | * [Design](#design) 21 | * [Colour Scheme](#colour-scheme) 22 | * [Typography](#typography) 23 | * [Imagery](#imagery) 24 | * [Wireframes](#wireframes) 25 | 26 | * [Features](#features) 27 | * [General Features on Each Page](#general-features-on-each-page) 28 | * [Future Implementations](#future-implementations) 29 | * [Accessibility](#accessibility) 30 | 31 | * [Technologies Used](#technologies-used) 32 | * [Languages Used](#languages-used) 33 | * [Frameworks, Libraries & Programs Used](#frameworks-libraries--programs-used) 34 | 35 | * [Deployment & Local Development](#deployment--local-development) 36 | * [Deployment](#deployment) 37 | * [Local Development](#local-development) 38 | * [How to Fork](#how-to-fork) 39 | * [How to Clone](#how-to-clone) 40 | 41 | * [Testing](#testing) 42 | 43 | * [Credits](#credits) 44 | * [Code Used](#code-used) 45 | * [Content](#content) 46 | * [Media](#media) 47 | * [Acknowledgments](#acknowledgments) 48 | 49 | --- 50 | 51 | ## User Experience (UX) 52 | 53 | 👩🏻‍💻 View an example of a completed user experience section [here](https://github.com/kera-cudmore/Bully-Book-Club#user-experience-ux) 54 | 55 | ### User Stories 56 | 57 | Add your user stories here. You want to include first time visitors and returning visitors here as a minimum. Think about each group, and the experience and journey you want them to have on your site. It really helps to think about this before you start coding, and will really help with creating your wireframes. 58 | 59 | ## Design 60 | 61 | 👩🏻‍💻 View an example of a completed design section [here](https://github.com/kera-cudmore/earth-day-hackathon-2022#Design) 62 | 63 | ### Colour Scheme 64 | 65 | Add all information about your colour scheme for your site here. You can explain why you choose the colours you did? 66 | 67 | I like to include a palette of the colour scheme here, my favourite site for creating a colour palette is [coolors](https://coolors.co/), but there are lots of other sites that also do the same thing, like [ColorSpace](https://mycolor.space/?hex=%23F5F5F5&sub=1), [Muzli Colors](https://colors.muz.li/), [Adobe Colour Wheel](https://color.adobe.com/create/color-wheel) and [Canva](https://www.canva.com/colors/color-palette-generator/) to name a few. 68 | 69 | ### Typography 70 | 71 | If you've imported fonts to use in your project, add some information about them here. You can include information like: 72 | 73 | Why did you choose the font you have? 74 | Is this an accessibly friendly font? 75 | What weights have you included? 76 | 77 | I also like to include an image of the fonts chosen as a reference. 78 | 79 | [Google Fonts](https://fonts.google.com/) is a popular choice for importing fonts to use in your project, as it doesn't require you to download the fonts to use them. 80 | 81 | ### Imagery 82 | 83 | Use this section to explain what sort of imagery you plan to use through your site. 84 | 85 | ### Wireframes 86 | 87 | Add the images or links for your wireframes here. 88 | 89 | There are lots of different options to create your wireframes - Code Institute students can access [Balsamiq](https://balsamiq.com/) as part of the course. 90 | 91 | Some other options include [Figma](https://www.figma.com/), [AdobeXD](https://www.adobe.com/products/xd.html), [Sketch](https://www.sketch.com/?utm_source=google&utm_medium=cpc&adgroup=uxui&device=c&matchtype=e&utm_campaign=ADDICTMOBILE_SKETCH_GAD_DG_UK_T1_ALWAYS-ON_S_TRF_PROS_BRAND&utm_term=sketch&utm_source=google&utm_medium=cpc&utm_content=TOF_BRND__generic&hsa_acc=8710913982&hsa_cam=16831089317&hsa_grp=134620695759&hsa_ad=592060065319&hsa_src=g&hsa_tgt=kwd-14921750&hsa_kw=sketch&hsa_mt=e&hsa_net=adwords&hsa_ver=3&gclid=Cj0KCQjwr4eYBhDrARIsANPywCjRIFn93DMezYnsyE5Fic_8l8kynJtut0GYMU01TiohHjwziFtlH0gaAhteEALw_wcB) and [Mockup](https://apps.apple.com/us/app/mockup-sketch-ui-ux/id1527554407) to name just a few! Or you can even go old school and get those wireframes completed using pen and paper. Just snap an image of the completed wireframes to add the images to the README. 92 | 93 | ## Features 94 | 95 | 👩🏻‍💻 View an example of a completed user experience section [here](https://github.com/kera-cudmore/TheQuizArms#Features) 96 | 97 | This section can be used to explain what pages your site is made up of. 98 | 99 | ### General features on each page 100 | 101 | If there is a feature that appears on all pages of your site, include it here. Examples of what to include would the the navigation, a footer and a favicon. 102 | 103 | I then like to add a screenshot of each page of the site here, i use [amiresponsive](https://ui.dev/amiresponsive) which allows me to grab an image of the site as it would be displayed on mobile, tablet and desktop, this helps to show the responsiveness of the site. 104 | 105 | ### Future Implementations 106 | 107 | What features would you like to implement in the future on your site? Would you like to add more pages, or create login functionality? Add these plans here. 108 | 109 | ### Accessibility 110 | 111 | Be an amazing developer and get used to thinking about accessibility in all of your projects! 112 | 113 | This is the place to make a note of anything you have done with accessibility in mind. Some examples include: 114 | 115 | Have you used icons and added aria-labels to enable screen readers to understand these? 116 | Have you ensured your site meets the minimum contrast requirements? 117 | Have you chosen fonts that are dyslexia/accessible friendly? 118 | 119 | Code Institute have an amazing channel for all things accessibility (a11y-accessibility) I would highly recommend joining this channel as it contains a wealth of information about accessibility and what we can do as developers to be more inclusive. 120 | 121 | ## Technologies Used 122 | 123 | 👩🏻‍💻 View an example of a completed Technologies Used section [here](https://github.com/kera-cudmore/Bully-Book-Club#Technologies-Used) 124 | 125 | ### Languages Used 126 | 127 | Make a note here of all the languages used in creating your project. For the first project this will most likely just be HTML & CSS. 128 | 129 | ### Frameworks, Libraries & Programs Used 130 | 131 | Add any frameworks, libraries or programs used while creating your project. 132 | 133 | Make sure to include things like git, GitHub, the program used to make your wireframes, any programs used to compress your images, did you use a CSS framework like Bootstrap? If so add it here (add the version used). 134 | 135 | A great tip for this section is to include them as you use them, that way you won't forget what you ended up using when you get to the end of your project. 136 | 137 | ## Deployment & Local Development 138 | 139 | 👩🏻‍💻 View an example of a completed Deployment & Local Development section [here](https://github.com/kera-cudmore/TheQuizArms#Deployment) 140 | 141 | ### Deployment 142 | 143 | Include instructions here on how to deploy your project. For your first project you will most likely be using GitHub Pages. 144 | 145 | ### Local Development 146 | 147 | The local development section gives instructions on how someone else could make a copy of your project to play with on their local machine. This section will get more complex in the later projects, and can be a great reference to yourself if you forget how to do this. 148 | 149 | #### How to Fork 150 | 151 | Place instructions on how to fork your project here. 152 | 153 | #### How to Clone 154 | 155 | Place instructions on how to clone your project here. 156 | 157 | ## Testing 158 | 159 | Start as you mean to go on - and get used to writing a TESTING.md file from the very first project! 160 | 161 | Testing requirements aren't massive for your first project, however if you start using a TESTING.md file from your first project you will thank yourself later when completing your later projects, which will contain much more information. 162 | 163 | Use this part of the README to link to your TESTING.md file - you can view the example TESTING.md file [here](milestone1-testing.md) 164 | 165 | ## Credits 166 | 167 | 👩🏻‍💻 View an example of a completed Credits section [here](https://github.com/kera-cudmore/BookWorm#Credits) 168 | 169 | The Credits section is where you can credit all the people and sources you used throughout your project. 170 | 171 | ### Code Used 172 | 173 | If you have used some code in your project that you didn't write, this is the place to make note of it. Credit the author of the code and if possible a link to where you found the code. You could also add in a brief description of what the code does, or what you are using it for here. 174 | 175 | ### Content 176 | 177 | Who wrote the content for the website? Was it yourself - or have you made the site for someone and they specified what the site was to say? This is the best place to put this information. 178 | 179 | ###  Media 180 | 181 | If you have used any media on your site (images, audio, video etc) you can credit them here. I like to link back to the source where I found the media, and include where on the site the image is used. 182 | 183 | ###  Acknowledgments 184 | 185 | If someone helped you out during your project, you can acknowledge them here! For example someone may have taken the time to help you on slack with a problem. Pop a little thank you here with a note of what they helped you with (I like to try and link back to their GitHub or Linked In account too). This is also a great place to thank your mentor and tutor support if you used them. 186 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Creating your first README hero image](documentation/hero.png) 2 | 3 | # CREATING YOUR FIRST README 4 | 5 | ![Markdown](https://img.shields.io/badge/markdown-%23000000.svg?style=flat=markdown&logoColor=white) ![GitHub contributors](https://img.shields.io/github/contributors/kera-cudmore/readme-examples?style=flat) ![GitHub last commit](https://img.shields.io/github/last-commit/kera-cudmore/readme-examples?style=flat) ![GitHub Repo stars](https://img.shields.io/github/stars/kera-cudmore/readme-examples?style=social) ![GitHub forks](https://img.shields.io/github/forks/kera-cudmore/readme-examples?style=social) 6 | 7 | So you're starting to think about your first milestone project, and are brainstorming ideas - but have you thought about your README? This repository (and accompanying webinar) are an introduction to creating your first README - covering what to include, why you need one and how to write it. 8 | 9 | Find the slide show for this webinar [here](https://docs.google.com/presentation/d/19_7r_To5bu7UjnZD87hrzWQi63Ij0YpaRH1XFnPZZe8/edit?usp=sharing) 10 | 11 | ⭐️ If you found this repo useful for creating your first README, please consider giving the repo a star - and if you mention me in the credits section of your readme, please do send me a message on slack - you'll make my day! 😊 12 | 13 | - - - 14 | 15 | ## CONTENTS 16 | 17 | * [Whats A README?](#whats-a-readme) 18 | * [What Makes a Good README?](#what-makes-a-good-readme) 19 | * [README Examples](#readme-examples) 20 | * [How to Write Your README](#how-to-write-your-readme) 21 | * [Headings](#headings) 22 | * [Links](#links) 23 | * [Inserting Images](#inserting-images) 24 | * [Italic, Bold & Code](#italic-bold-and-code) 25 | * [Strikethrough & Bullet Points](#strikethrough--bullet-points) 26 | * [Code Blocks](#code-blocks) 27 | * [Tables](#tables) 28 | * [Nice Extras & Other Interesting Tools](#nice-extras--other-interesting-tools) 29 | * [Further Reading](#further-reading) 30 | * [Credits](#credits) 31 | * [Media](#media) 32 | * [Acknowledgments](#acknowledgments) 33 | 34 | - - - 35 | 36 | ## What's a README? 37 | 38 | A README file should be the source of all information relating to your project. 39 | 40 | It is where another developer (or yourself in a few months time!) can get an overview of your project, like why was this project made, what technology was used, instructions on how to fork or clone the project if they wanted to have a tinker with it, any future implementations planned for the project and if there were any interesting bugs encountered during the build. 41 | 42 | - - - 43 | 44 | ## What makes a Good README? 45 | 46 | You can never have enough detail! you've spent a large amount of time perfecting your first project (and each subsequent project will be even more labour intensive and detailed) and the readme is the place to document and celebrate all those hours. 47 | 48 | The best piece of advice I was given was to try and complete the bulk of the README before you write a single line of code. 49 | 50 | By incorporating this step into the planning stage of your project you will have taken the time to think about what your user stories will be, what colour palette you want to use for your site, what fonts you want to use, how you plan to layout the site responsively and with accessibility in mind and have these documented in your README file before you begin to code your project. The README will then become your roadmap - it will help you to focus on the project, allow the coding to flow, and prevent you having to complete a whole README at the end of your project when you're suffering from project fatigue! 51 | 52 | - - - 53 | 54 | ## README Examples 55 | 56 | I have included examples of a [README.md](milestone1-readme.md) and [TESTING.md](milestone1-testing.md) for you to look over to get an idea of how you can layout your files and what should be included. I have based this off the README's I have created for my own projects, however I would urge you to make sure that you go through your course criteria for your project to make sure that you include everything required in your own README, as the requirements may change at any point. 57 | 58 | - - - 59 | 60 | ## How to Write Your README 61 | 62 | README files are written using markdown, a lightweight plain text syntax. 63 | 64 | There are some really cool features in markdown that you might want to include in your README, and I've included some below. I've also included some links to some further reading on markdown. 65 | 66 | ### Headings 67 | 68 | Just like with HTML, markdown has headings. Markdown headings are very similar to HTML headings: there are 6 heading levels, you can only use one level 1 heading per page and ach heading level is smaller than the last. 69 | 70 | To create a heading in Markdown you use a hash symbol (#) followed by a space and the heading. The number of hashes denotes the level of the heading - so for a level 1 heading you use 1 hash, a level 2 has 2 hashes etc. The example below shows how you would write a level 3 heading: 71 | 72 | ![Heading Example](documentation/heading-example.png) 73 | 74 | ### Links 75 | 76 | Links are also really useful in Markdown, and are really simple to write. There are two ways to include links in your README: 77 | 78 | You can paste a link into your README and it will display as a link, - but these can throw a markdown lint error, look a bit messy especially if the link is rather lengthy, and sometimes the URL address doesn't make it clear as to what the link redirects to. 79 | 80 | My preferred way to add a link which addresses both these issues is to make a link the following way: place the name of the link that will be visible in the README enclosed in square brackets followed by the link enclosed in parentheses. [View My GitHub Profile Here](https://www.github.com ) 81 | 82 | ![Link Example](documentation/link-example.png) 83 | 84 | You can also create a link with headings. When you create a heading, GitHub will generate an ID based on this. This is really useful if you then want to create a link to that heading within your README. (A good example of this is the contents section.) They are very similar to a link - We need to put the text that will be displayed into the square brackets and then within the parentheses we use a hash followed by the heading - note that we can't use spaces so these need to be changed to a dash) 85 | 86 | ![Heading Links Example](documentation/heading-links.png) 87 | 88 | ### Inserting Images 89 | 90 | Images can be inserted in your README in the same way as a link, if you only want the name of the image to be displayed. 91 | 92 | If you want the image itself to be visible in the README, you just need to place an exclamation mark at the front of the link, example shown below: 93 | 94 | ![Inserting an Image Link Example](documentation/imagelink-example.png) 95 | 96 | Its important to be mindful of what you use in the square brackets of an image link, as this is what will be displayed on the page if the image fails to load, so make sure to use something descriptive, similar to an image alt tag. 97 | 98 | When using images in your README, its good practice to compress the image first (PNG format seems to work best), I can recommend [tinyPNG](https://tinypng.com/). I then like to keep all images etc used within the README in a folder called *documentation*. This is good practice as it keeps the sites assets seperate from the assets used in your documentation. 99 | 100 | ###  Italic, Bold and Code 101 | 102 | *Italic text* we can either use an asterisk or an underscore before and after the text. 103 | 104 | **Bold text** we can either use double asterisks or double underscores before and after the text. 105 | 106 | `Code` we enclose the text in backticks. 107 | 108 | ![Styled Text Examples](documentation/styledtext-example.png) 109 | 110 | ### Strikethrough & Bullet Points 111 | 112 | ~~strikethrough~~ We use double tilder before and after. 113 | 114 | * Bullet points, we use either an asterisk or a dash. 115 | * Nested Bullet Points are created by indenting two spaces 116 | * Another Nested Bullet Point 117 | 118 | ![Strikethrough & Bullet Point Example](documentation/strikethrough-bullet-example.png) 119 | 120 | To create a numbered list we simply put a number followed by a full stop, then a space before the content. 121 | 122 | 1. First item 123 | 2. Second item 124 | 3. Third Item 125 | 126 | ![Numbered list example code](documentation/numbered-list-example.png) 127 | 128 | ### Code Blocks 129 | 130 | Code blocks can be used in Markdown to display a larger block of code. To create a code block you need to prefix the text with three backticks and end with three backticks after. 131 | 132 | Code blocks can be language specific, you simply need to add the language after the first set of backticks - if you don't want to use a specific language, you can use text. 133 | 134 | **Plain Text Code Block:** 135 | 136 | ```text 137 | function fibonacci(num, memo) { 138 | memo = memo || {}; 139 | 140 | if (memo[num]) return memo[num]; 141 | if (num <= 1) return 1; 142 | 143 | return memo[num] = fibonacci(num - 1, memo) + fibonacci(num - 2, memo); 144 | } 145 | ``` 146 | 147 | **JavaScript Code Block:** 148 | 149 | ```javascript 150 | function fibonacci(num, memo) { 151 | memo = memo || {}; 152 | 153 | if (memo[num]) return memo[num]; 154 | if (num <= 1) return 1; 155 | 156 | return memo[num] = fibonacci(num - 1, memo) + fibonacci(num - 2, memo); 157 | } 158 | ``` 159 | 160 | Code Block Markdown Examples: 161 | 162 | ![Code Block Examples](documentation/codeblock-example.png) 163 | 164 | ### Tables 165 | 166 | Tables can be a great way to display information in your README, but can be a bit fiddly to get your head around at first. Tables are created using the pipe symbol ( | ) which is placed on either side of the content, creating the sides of the table. The first row of the table will be the headings for the table. This is then followed by a row with 3 dashes in each cell, and then you just add the contents for the table in the following rows. 167 | 168 | | Table Heading 1 | Table Heading 2 | 169 | | --- | --- | 170 | | I'm a piece of information in a table | Me too! | 171 | | 1| 2 | 172 | | 2 | 3 | 173 | 174 | Markdown for creating a table: 175 | 176 | ![Table Example](documentation/table-example.png) 177 | 178 | You can also justify the contents within a table! You simply need to add a colon to the second row of dashes - place the colon on the left of the dashes for left justification, to the right of the dashes for right justification and to center the text, place a colon on each side of the dashes. 179 | 180 | | Table Heading 1 for justification example | Table Heading 2 For justification example | 181 | | :--- | :--- | 182 | | Justify contents| To the Left | 183 | 184 | | Table Heading 1 for justification example | Table Heading 2 For justification example | 185 | | ---: | ---: | 186 | | Justify contents | To the Right | 187 | 188 | | Table Heading 1 for justification example | Table Heading 2 For justification example | 189 | | :---: | :---: | 190 | | Justify contents | In the Center | 191 | 192 | ![Table Justification Example Code](documentation/table-justification-example.png) 193 | - - - 194 | 195 | ## Nice Extras & Other Interesting Tools 196 | 197 | Nice extras we could include in the README: 198 | 199 | [shields.io Badges](https://shields.io/) - lots of badges relating to site builds. I like to add these after the site image at the top of my README. I like to include the following badges in my projects, but have an explore and see if there are any others you could use (they are also great to include in your GitHub Profile!) 200 | 201 | * GitHub last commit (Shows when the last commit to the repo was) 202 | * GitHub contributors (Great to show at a glance you are the only contributor to your project) 203 | * GitHub language count (Shows how many languages used in project) 204 | * GitHub top language (to display top language used in the project) 205 | * W3C validation (shows at a glance whether your HTML passes validation) 206 | 207 | ![Shields.io Exmaple Badges](documentation/shields-example.png) 208 | 209 | [Gyazo GIF](https://gyazo.com) - A tool that allows you to capture a short video recording of your screen as a GIF. I like to use this to document a bug I might have (For example in my second project, each time a button was pressed the score would increase when it shouldn't have - this was a great way to capture what was happening). Have a look, or perhaps you have your own preferred screen recording tool you prefer. 210 | 211 | [Chrome Extension Spell Checker](https://chrome.google.com/webstore/detail/webpage-spell-check/mgdhaoimpabdhmacaclbbjddhngchjik) - I love to use this both on my site and to check over my README before submission, as its easy to get spelling errors creeping into your project as you burn the midnight oil towards the end as your deadline is looming. 212 | 213 | [Chrome Exension WAVE](https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh) - WAVE is a web accessibility evaluation tool developed by [WebAIM.org](https://wave.webaim.org/). It provides visual feedback about the accessibility of your web content by injecting icons and indicators into your page. No automated tool can tell you if your page is accessible, but WAVE facilitates human evaluation and educates about accessibility issues. All analysis is done entirely within the Chrome browser allowing secure valuation of intranet, local, password protected, and other sensitive web pages. I believe there is also an extension for Firefox. 214 | 215 | [Web Disability Simulator](https://chrome.google.com/webstore/detail/web-disability-simulator/olioanlbgbpmdlgjnnampnnlohigkjla) - A fantastic chrome extension that allows you to simulate how certain disabilities can affect the users experience of your site. Really useful if you're using colour to represent a result - for example in a quiz. 216 | 217 | - - - 218 | 219 | ## Further Reading 220 | 221 | * [Markdown Syntax](https://www.markdownguide.org/basic-syntax/) - This site is really comprehensive on all the different things you can do in Markdown. 222 | * [Markdown Table Generator](https://www.tablesgenerator.com/markdown_tables) - This may be useful to have a play around with to better understand how tables work in Markdown. 223 | * [Markdown Cheatsheet](https://github.com/atapas/markdown-cheatsheet) - A great markdown cheatsheet created by Atapas. 224 | * [Code Institute Sample README](https://github.com/Code-Institute-Solutions/SampleREADME) - Sample README created by the Code Institute 225 | 226 | ## Credits 227 | 228 | ### Media 229 | 230 | • All screenshots of code used in this README were taken by myself from my own milestone project repositories or Code Institute hackathon projects I have participated in. 231 | 232 | • [README hero image](https://www.slidescarnival.com/aliena-free-presentation-template/4597) - Slide template from Slide Carnival 233 | 234 | ### Acknowledgments 235 | 236 | * [Ed](https://github.com/Edb83) - For letting me know about the heading links feature. 237 | * [Dave](https://github.com/daveyjh) - For letting me know about table justification in markdown. 238 | * Nerd Alert - For cheering me on while creating this webinar, and for proof-reading my documents. 239 | * A big thank you to Jim at Code Institute for the opportunity to be a channel lead for the Milestone 1 slack channel. 240 | -------------------------------------------------------------------------------- /resources.md: -------------------------------------------------------------------------------- 1 | ![Resources Banner](documentation/resources.png) 2 | 3 | A list of resources that may be useful when completing your projects 😊 4 | 5 | # Contents 6 | 7 | * [Royalty Free Resources](#royalty-free-resources) 8 | * [Animations](#animations) 9 | * [Audio](#audio) 10 | * [Backgrounds](#backgrounds) 11 | * [Icons](#icons) 12 | * [Illustrations](#illustrations) 13 | * [Photos](#photos) 14 | * [Video](#video) 15 | * [Design Resources](#design-resources) 16 | * [Colour Palettes](#colour-palettes) 17 | * [Typography](#typography) 18 | * [Wireframes](#wireframes) 19 | * [Flowcharts, Diagrams & ERD's](#flowcharts-diagrams--erds) 20 | * [Testing Resources](#testing-resources) 21 | * [HTML & CSS](#html--css) 22 | * [JavaScript](#javascript) 23 | * [Python](#python) 24 | * [Lighthouse](#lighthouse) 25 | * [Accessibility](#accessibility) 26 | * [Other Useful Tools](#other-useful-tools) 27 | * [Badges](#badges) 28 | * [File Conversion & Compression](#file-conversion--compression) 29 | * [Responsive Site Viewers](#responsive-site-viewers) 30 | 31 | 32 | --- 33 | 34 | 35 | ## Royalty Free Resources 36 | 37 | 38 | ### **Animations** 39 | 40 | | | Link | Description | 41 | | :---: |:--- | :--- | 42 | | Animate CSS Logo | [Animate.css](https://animate.style/) |Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. | 43 | | Animejs Logo | [Animejs](https://animejs.com/) | A lightweight JavaScript animation library with a simple, yet powerful API. | 44 | | CSS Shake Logo | [CSS Shake](https://elrumordelaluz.github.io/csshake/) | Some CSS classes to move your DOM! | 45 | | Greensock Logo | [Greensock](https://greensock.com/gsap/) | JavaScript animation built for professionals, GSAP is packed with features that make most other engines look like cheap toys. | 46 | | Loading.io Logo | [Loading.io](https://loading.io/) | Build Your Ajax Loading Icons, Animated Text and More with SVG / CSS / GIF / PNG ! | 47 | | Lottie Files Logo | [Lottie Files](https://lottiefiles.com/?gclid=CjwKCAjww8mWBhABEiwAl6-2RS3WVMkAMbDT84_nKST9znN2UuMJ7vyJVKMAvlN3IuC44dIeSzVQGBoCW9YQAvD_BwE) | Lightweight, scalable animations for your website and apps. | 48 | | Magic Animations Logo | [Magic Animations CSS](https://www.minimamente.com/project/magic/) | Magic CSS are a set of simple animations to include in your web or app project's. | 49 | | Moving Letters Logo | [Moving Letters](https://tobiasahlin.com/moving-letters/) | Letter animation code. | 50 | | Pre Loaders Logo | [Preloaders.net](https://icons8.com/preloaders/) | provides more than 1000 different animations, split into 18 categories including most widely used loading spinners, horizontal bars and more. | 51 | | Spin Kit Logo | [Spinkit](https://tobiasahlin.com/spinkit/) | Simple CSS Spinners. | 52 | | Wicked CSS Logo | [Wicked CSS](http://kristofferandreasen.github.io/wickedCSS/) | For the ones looking to spice up their sites with some sweet animation effects. | 53 | 54 | 55 | ### **Audio** 56 | 57 | | | Link | Description | 58 | | :---: |:--- | :--- | 59 | | Audio Micro Logo | [Audio Micro](https://www.audiomicro.com/free-sound-effects/) | Royalty Free stock music for any project. | 60 | | Pixabay Logo | [Pixabay](https://pixabay.com) | Pixabay is a vibrant community of creatives, sharing copyright free images, videos and music. | 61 | | uppbeat logo| [uppbeat](https://uppbeat.io/) | Free music for creators | 62 | | Videvo Logo | [Videvo](https://www.videvo.net/) | Royalty Free Music. Thousands of royalty-free stock music tracks at your fingertips. | 63 | | Zapsplat Logo | [Zapsplat](https://www.zapsplat.com/) | Over 111,000 free sound effects & more than 450 royalty free music tracks. | 64 | 65 | 66 | ### **Backgrounds** 67 | 68 | | | Link | Description | 69 | | :---: |:--- | :--- | 70 | | Animated Backgrounds | [Animatedbackgrounds.me](https://animatedbackgrounds.me/#mm) | A Collection of 30+ animated backgrounds for websites and blogs. | 71 | | BGJar Logo | [BG Jar](https://bgjar.com/) | Free svg background generator for your websites, blogs and app. | 72 | | Cool Backgrounds Logo | [Cool Backgrounds](https://coolbackgrounds.io/) | A collection of tools to create compelling, colorful images for blogs, social media, and websites. | 73 | | CSS Gradient Logo | [CSS Gradient](https://cssgradient.io/) | A free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile. | 74 | | Get Waves Logo | [Get Waves](https://getwaves.io/) | A free SVG wave generator to make unique SVG waves for your next web design. Choose a curve, adjust complexity, randomize! | 75 | | haikai logo | [Haikei](https://haikei.app/) | Generate unique SVG design assets | 76 | | Mesh.y Logo | [Mesh.y](https://meshgradient.in/) | Generate beautiful mesh gradients | 77 | | Particle JS Logo | [Particles.js](https://marcbruederlin.github.io/particles.js/) | particles.js is a lightweight JavaScript library for creating particles. | 78 | | Pattern Pad Logo | [Pattern Pad](https://patternpad.com/) | PatternPad generates graphical patterns based on a variety of parameters. This results in an endless number of variations. | 79 | | Rawpixel Logo | [RawPixel](https://www.rawpixel.com/) | Free images, PNGs, stickers, backgrounds, wallpapers, graphic templates and PSD mockups. | 80 | | Stock Vault Logo | [Stock Vault](https://www.stockvault.net/) | 139,637 free stock photos, textures, backgrounds and graphics for your next project. | 81 | | superdesigner logo | [Super Designer](https://superdesigner.co/) |A collection of free design tools to create unique backgrounds, patterns, shapes, images, and more with just a few clicks | 82 | | Vecteezy Logo | [Vecteezy](https://www.vecteezy.com/?utm_source=google&utm_medium=cpa&utm_campaign=search&utm_term=freevectors&utm_content=a&gclid=CjwKCAjww8mWBhABEiwAl6-2RXu9c03gxX7SY7212DASIrPCgad0Xr_tQHkyVg7KACQy8GfrMp49ihoC3_gQAvD_BwE) | Explore royalty-free vectors, clipart graphics, icons, stock photos, stock videos, backgrounds, patterns, banners, and designs. | 83 | 84 | 85 | ### **Icons** 86 | 87 | | | Link | Description | 88 | | :---: |:--- | :--- | 89 | | Bootstrap Icons Logo | [Bootstrap Icons](https://icons.getbootstrap.com/) | Free, high quality, open source icon library with over 1,600 icons. | 90 | | Font Awesome Logo | [Font Awesome](https://fontawesome.com/) | Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators. | 91 | | Noun Project Logo | [Noun Project](https://thenounproject.com/) | Noun Project features the most diverse collection of icons and stock photos ever. Download SVG and PNG. Browse over 5 million art-quality icons and photos. | 92 | | Example Icons from Profile Technology Icons | [Profile Technology Icons](https://marwin1991.github.io/profile-technology-icons/) | Search your technologies and then generate markdown code snippet to your GitHub profile. Choose from 143 icons! | 93 | | Reshot Logo | [Reshot](https://www.reshot.com/) | Design freely with instant downloads of curated SVG icons and vector illustrations. All free with commercial licensing. | 94 | | Skill Icons | [Skill Icons](https://skillicons.dev/) | Showcase your skills on your GitHub or resumé with ease! | 95 | | SVG Repo Logo | [SVG Repo](https://www.svgrepo.com/) | Free Vectors and Icons in SVG format. Download free mono or multi color vectors for commercial use. Search in 300.000+ Free SVG Vectors and Icons. | 96 | | Tech Stack Generator Example Icons | [TSG - Animated Tech Stack Generator](https://techstack-generator.vercel.app/) | Techstack generator that can show dynamic technology stack. | 97 | | UXWings Logo | [UXWing](https://uxwing.com/) | Exclusive collection of free icons download for commercial projects without attribution. Well Optimized free SVG and PNG icons that can use on interface design & Web and Application development. | 98 | | Vecteezy Logo | [Vecteezy](https://www.vecteezy.com/?utm_source=google&utm_medium=cpa&utm_campaign=search&utm_term=freevectors&utm_content=a&gclid=CjwKCAjww8mWBhABEiwAl6-2RXu9c03gxX7SY7212DASIrPCgad0Xr_tQHkyVg7KACQy8GfrMp49ihoC3_gQAvD_BwE) | Explore royalty-free vectors, clipart graphics, icons, stock photos, stock videos, backgrounds, patterns, banners, and designs. | 99 | 100 | 101 | ### **Illustrations** 102 | 103 | | | Link | Description | 104 | | :---: |:--- | :--- | 105 | | On Fire Illustrations Logo | [On Fire Illustrations](https://onfire.craftwork.design/) | Free illustrations that will wake any project up with its unique mood. | 106 | | Open Peeps Logo | [Open Peeps](https://www.openpeeps.com/) | Open Peeps is a hand-drawn illustration library to create scenes of people. | 107 | | Reshot Logo | [Reshot](https://www.reshot.com/) | Design freely with instant downloads of curated SVG icons and vector illustrations. All free with commercial licensing | 108 | | Stock Vault Logo | [Stock Vault](https://www.stockvault.net/) | 139.637 free stock photos, textures, backgrounds and graphics for your next project. | 109 | | ![unDraw Logo](https://user-images.githubusercontent.com/92253071/199688423-38f80d4e-01f4-4416-bce0-5bdb89fa1e1f.png) | [unDraw](https://undraw.co/illustrations) | Open-source illustrations for any idea you can imagine and create. | 110 | 111 | 112 | ### **Photos** 113 | 114 | | | Link | Description | 115 | | :---: |:--- | :--- | 116 | | Freepik Logo | [FreePik](https://www.freepik.com/)| All the assets you need, in one place. Find and download the best high-quality photos, designs and mockups. | 117 | | Noun Project Logo | [Noun Project](https://thenounproject.com/) | Noun Project features the most diverse collection of icons and stock photos ever. Download SVG and PNG. Browse over 5 million art-quality icons and photos. | 118 | | Pexels Logo | [Pexels](https://www.pexels.com) | Free stock photos & videos you can use everywhere. Browse millions of high-quality royalty free stock images & copyright free pictures. | 119 | | PicJumbo Logo | [PicJumbo](https://picjumbo.com/) | Picjumbo is a free stock photo site created in 2013 by designer & photographer Viktor Hanacek. | 120 | | PikWizard Logo | [PikWizard](https://pikwizard.com/) | Free images, videos & free stock photos. Unlimited downloads ✓ Royalty-free Images ✓Copyright-free for commercial use. | 121 | | Pixabay Logo | [Pixabay](https://pixabay.com) | Pixabay is a vibrant community of creatives, sharing copyright free images, videos and music. | 122 | | pxhere | [Pxhere](https://pxhere.com) | Over 1,147,466 high quality photos. Free for commercial use. | 123 | | Rawpixel Logo | [RawPixel](https://www.rawpixel.com/) | Free images, PNGs, stickers, backgrounds, wallpapers, graphic templates and PSD mockups. | 124 | | Stock Vault Logo | [Stock Vault](https://www.stockvault.net/) | 139,637 free stock photos, textures, backgrounds and graphics for your next project. | 125 | | Unsplash Logo | [Unsplash](https://unsplash.com) | Beautiful, free images and photos that you can download and use for any project. | 126 | | Vecteezy Logo | [Vecteezy](https://www.vecteezy.com/?utm_source=google&utm_medium=cpa&utm_campaign=search&utm_term=freevectors&utm_content=a&gclid=CjwKCAjww8mWBhABEiwAl6-2RXu9c03gxX7SY7212DASIrPCgad0Xr_tQHkyVg7KACQy8GfrMp49ihoC3_gQAvD_BwE) | Explore royalty-free vectors, clipart graphics, icons, stock photos, stock videos, backgrounds, patterns, banners, and designs. | 127 | 128 | 129 | ### **Video** 130 | 131 | | | Link | Description | 132 | | :---: |:--- | :--- | 133 | | Pexels Logo | [Pexels](https://www.pexels.com) | Free stock photos & videos you can use everywhere. Browse millions of high-quality royalty free stock images & copyright free pictures. | 134 | | Pixabay Logo | [Pixabay](https://pixabay.com) | Pixabay is a vibrant community of creatives, sharing copyright free images, videos and music. | 135 | | Vecteezy Logo | [Vecteezy](https://www.vecteezy.com/?utm_source=google&utm_medium=cpa&utm_campaign=search&utm_term=freevectors&utm_content=a&gclid=CjwKCAjww8mWBhABEiwAl6-2RXu9c03gxX7SY7212DASIrPCgad0Xr_tQHkyVg7KACQy8GfrMp49ihoC3_gQAvD_BwE) | Explore royalty-free vectors, clipart graphics, icons, stock photos, stock videos, backgrounds, patterns, banners, and designs. | 136 | | Videvo Logo | [Videvo](https://www.videvo.net/) | Over 300,000 video clips in 4K and HD | 137 | 138 | 139 | --- 140 | 141 | 142 | ## Design Resources 143 | 144 | 145 | ### **Colour Palettes** 146 | 147 | | | Link | Description | 148 | | :---: |:--- | :--- | 149 | | Adobe Capture Logo | [Adobe Capture](https://www.adobe.com/uk/products/capture.html) | 📱 MOBILE APP - Use your mobile device as a vector converter to turn photos into colour themes, patterns, type, materials, brushes and shapes. | 150 | | Adobe Color Wheel | [Adobe Color Wheel](https://color.adobe.com/create/color-wheel) | Create color palettes with the color wheel or image, browse thousands of color combinations from the Adobe Color community. | 151 | | Canva Logo | [Canva](https://www.canva.com/colors/color-palette-generator/) | Want a color scheme that perfectly matches your favorite images? With Canva's color palette generator, you can create color combinations in seconds. | 152 | | ColorSpace | [ColorSpace](https://mycolor.space/?hex=%23F5F5F5&sub=1) | Here you can find the perfect matching color scheme for your next project! Generate nice color palettes, color gradients and much more! | 153 | | Coolors Logo | [Coolors](https://coolors.co/) | Generate or browse beautiful color combinations for your designs. | 154 | | Muzli Colors Logo | [Muzli Colors](https://colors.muz.li/) | Search, discover, test and create beautiful color palettes for your projects. | 155 | | huemint logo | [Huemint](https://huemint.com/) | Utilises machine learning to create unique colour schemes. | 156 | 157 | 158 | ### **Typography** 159 | 160 | | | Link | Description | 161 | | :---: |:--- | :--- | 162 | | Font Joy | [Font Joy](https://fontjoy.com/) | Fontjoy helps designers choose the best font combinations. Mix and match different fonts for the perfect pairing. | 163 | | Fontpair Logo | [Fontpair](https://www.fontpair.co/) | Free fonts and font pairings to use in your next project. | 164 | | Google Fonts Logo | [Google Fonts](https://fonts.google.com/) | Google Fonts is a library of 1,453 open source font families and APIs for convenient use via CSS and Android. | 165 | | Typesource Logo | [TypeSource](https://tobiasahlin.com/typesource/) | Google Web Font inspiration in HTML & CSS | 166 | 167 | 168 | ### **Wireframes** 169 | 170 | | | Link | Description | 171 | | :---: |:--- | :--- | 172 | | AdobeXD Logo | [AdobeXD](https://www.adobe.com/products/xd.html) | 💰 Subscriprion needed - Adobe XD is a vector design tool for web and mobile applications, developed and published by Adobe Inc. It is available for macOS and Windows, and there are versions for iOS and Android to help preview the result of work directly on mobile devices. | 173 | | Balsamiq Logo | [Balsamiq](https://balsamiq.com/) | 💰 Subscriprion needed - Wireframe tool. 💡 Tip: Code Institute students have access to balsamiq (2022). See slack for more details. | 174 | | Figma Logo | [Figma](https://www.figma.com/) | Figma is a collaborative web application for interface design, with additional offline features enabled by desktop applications for macOS and Windows. | 175 | | Mockup Logo | [Mockup](https://apps.apple.com/us/app/mockup-sketch-ui-ux/id1527554407) | 📱 Mobile App - Sketch your next project. | 176 | | Sketch Logo | [Sketch](https://www.sketch.com/?utm_source=google&utm_medium=cpc&adgroup=uxui&device=c&matchtype=e&utm_campaign=ADDICTMOBILE_SKETCH_GAD_DG_UK_T1_ALWAYS-ON_S_TRF_PROS_BRAND&utm_term=sketch&utm_source=google&utm_medium=cpc&utm_content=TOF_BRND__generic&hsa_acc=8710913982&hsa_cam=16831089317&hsa_grp=134620695759&hsa_ad=592060065319&hsa_src=g&hsa_tgt=kwd-14921750&hsa_kw=sketch&hsa_mt=e&hsa_net=adwords&hsa_ver=3&gclid=Cj0KCQjwr4eYBhDrARIsANPywCjRIFn93DMezYnsyE5Fic_8l8kynJtut0GYMU01TiohHjwziFtlH0gaAhteEALw_wcB) | 💰 Subscriprion needed - Sketch gives you all the tools you need for a truly collaborative design process. From early ideas to pixel-perfect artwork, playable prototypes and developer handoff. | 177 | 178 | 179 | ### **Flowcharts, Diagrams & ERD's** 180 | 181 | | | Link | Description | 182 | | :---: |:--- | :--- | 183 | | drawSQL logo | [drawSQL](https://drawsql.app/) | Simple, beautiful database diagram editor for developers to create, collaborate and visualize their entity relationship diagrams. | 184 | | Lucidchart Logo | [Lucidchart](lucidchart.com/pages/landing?utm_source=google&utm_medium=cpc&utm_campaign=_chart_en_tier1_mixed_search_brand_exact_&km_CPC_CampaignId=1490375427&km_CPC_AdGroupID=55688909257&km_CPC_Keyword=lucidchart&km_CPC_MatchType=e&km_CPC_ExtensionID=&km_CPC_Network=g&km_CPC_AdPosition=&km_CPC_Creative=442433236001&km_CPC_TargetID=kwd-33511936169&km_CPC_Country=9045329&km_CPC_Device=c&km_CPC_placement=&km_CPC_target=&gclid=CjwKCAjwhNWZBhB_EiwAPzlhNk4UE5S6D47XQSncwqACfXUNmr7auFvJ3DXvt3XMqAX5cKDfew63kBoCF6YQAvD_BwE) | Create flowcharts & diagrams online | 185 | | Diagrams.net Logo | [Diagrams.net](https://app.diagrams.net/) | Free online diagram software. | 186 | | Wireflow Logo | [Wireflow](https://wireflow.co/) |A free, online and open source tool for creating beautiful user flow prototypes. | 187 | 188 | 189 | --- 190 | 191 | 192 | ## Testing Resources 193 | 194 | 195 | ### **HTML & CSS** 196 | 197 | | | Link | Description | 198 | | :---: |:--- | :--- | 199 | | Free Formatter Logo | [Free Formatter](https://www.freeformatter.com/html-validator.html) | Free online tools for developers, including formatters (JSON, XML, HTML, SQL, etc.), minifiers (JavaScript, CSS), validators, compactors and many more! | 200 | | W3C Validator Logo | [W3C Validator](https://validator.w3.org/) | This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. It can also validate your CSS. | 201 | 202 | 203 | ### **JavaScript** 204 | 205 | | | Link | Description | 206 | | :---: |:--- | :--- | 207 | | JS Hint Logo | [JS Hint](https://jshint.com) | This is online PEP8 checker. Just paste your code or upload file and see results. | 208 | 209 | 210 | ### **Python** 211 | 212 | | | Link | Description | 213 | | :---: |:--- | :--- | 214 | | ⛔️ Currently Down | [PEP8Online](http://pep8online.com/) | This is online PEP8 checker. Just paste your code or upload file and see results. | 215 | | Code Institute Logo | [Code Insitute Python Linter](https://pep8ci.herokuapp.com/) | Code Institute PEP8 alternative python linter | 216 | 217 | 218 | ### **Lighthouse** 219 | 220 | | | Link | Description | 221 | | :---: |:--- | :--- | 222 | | Google Lighthouse Logo | [Lighthouse Overview](https://developer.chrome.com/docs/lighthouse/overview/) | Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. | 223 | 224 | 225 | ### **Accessibility** 226 | 227 | | | Link | Description | 228 | | :---: |:--- | :--- | 229 | | Color A11y Logo | [Color.a11y](https://color.a11y.com/) | Free color contrast tool that displays color contrast issues of a web page or chosen color-pair per WCAG 2.1 Guidelines | 230 | | Colour Contrast Checker | [Colour Contrast Checker](https://www.siteimprove.com/toolkit/color-contrast-checker/) | This tool tests the contrast ratio of your background and text for accessibility. It will also indicate if the colors pass the WCAG contrast ratio. | 231 | | randoma11y site | [Randoma11y Color Contrast Generator](https://randoma11y.com/?color=white) | Get random, accessible color combinations and train the robots by voting. | 232 | | WAVE Logo | [WAVE Website](https://wave.webaim.org/) | WAVE® is a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities. WAVE can identify many accessibility and Web Content Accessibility Guideline (WCAG) errors, but also facilitates human evaluation of web content. | 233 | | WAVE Logo | [WAVE Website](https://wave.webaim.org/) | [Wave Chrome Extension](https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh) | 🧩 Chrome Extension - WAVE for use directly in the browser. | 234 | 235 | 236 | --- 237 | 238 | ## Other Useful Tools 239 | 240 | 241 | ### **Badges** 242 | 243 | | | Link | Description | 244 | | :---: |:--- | :--- | 245 | | Badgen Logo | [Badgen](https://badgen.net/) | Fast handcrafted svg badge generator. | 246 | | Contrib.rocks example of icons |[Contrib.rocks](https://contrib.rocks/preview?repo=angular%2Fangular-ja) | Generate an image of contributors to keep your readme in sync. | 247 | | For the Badge Logo | [For the Badge](https://forthebadge.com/) | Badges for badges' sake | 248 | | Shields.io Logo | [Shields.io](https://shields.io/) | Fast and scalable informational images as badges for GitHub, Travis CI, Jenkins, WordPress and many more. | 249 | 250 | 251 | 252 | ### **File Conversion & Compression** 253 | 254 | | | Link | Description | 255 | | :---: |:--- | :--- | 256 | | Birme Logo | [Birme](https://www.birme.net/) | Image resizer, cropper and format converter. | 257 | | Tinypng Logo | [TinyPNG]() | Reduce the file size of your WEBP, JPEG and PNG files. | 258 | | Cloud Convert Logo | [Cloud Convert](https://cloudconvert.com/) | Online file converter. | 259 | | Online Convert Logo | [Online Convert](https://www.online-convert.com/) | Free online file converter. | 260 | 261 | 262 | ### **Responsive Site Viewers** 263 | 264 | | | Link | Description | 265 | | :---: |:--- | :--- | 266 | | Am I Responsive Site Image | [Am I Responsive](https://ui.dev/amiresponsive) | Show off how responsive design looks across different browsers easily with this 4 in 1 viewport tool. See how your site looks on desktop, laptop, tablet & mobile. 💡 Tip: You can showcase different pages on each of the devices, simply use your navigation within the device to navigate to the page you want to display.| 267 | | Multi Device Mockup Generator Logo | [Multi Device Mockup Generator](https://techsini.com/multi-mockup/index.php) | Multi device website mockup generator is free online tool to test your responsive website on apple devices including Apple iMac, Macbook, iPad and iPhone. | 268 | | Media Genesis Logo | [Media Genesis](https://responsivedesignchecker.com) | Responsive web design checker. | 269 | | Browserstack Responsive Logo| [BrowserStack](https://www.browserstack.com/) | Responsive design testing on real devices. Note - this is a free trial and then may have to pay for. | 270 | 271 | 272 | ### **Other** 273 | 274 | | | Link | Description | 275 | | :---: |:--- | :--- | 276 | | Digital Samaritan Logo | [Digital Samaritan](https://www.digitalsamaritan.co/) | Various useful digital tools | 277 | --------------------------------------------------------------------------------