👩🏻💻 View an example of this section here
Add a Blurb about the site here, what does it do, why did you build it?
Add an image of the finished site here. I like to use 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.
Add a link to the live site here, for Milestone 1 this will be the GitHub Pages Link from when you deployed the site.
If you want to add optional shields.io badges to your README, I like to add them to this section.
👩🏻💻 View an example of a completed user experience section here
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.
👩🏻💻 View an example of a completed design section here
Add all information about your colour scheme for your site here. You can explain why you choose the colours you did?
I like to include a palette of the colour scheme here, my favourite site for creating a colour palette is coolors, but there are lots of other sites that also do the same thing, like ColorSpace, Muzli Colors, Adobe Colour Wheel and Canva to name a few.
If you've imported fonts to use in your project, add some information about them here. You can include information like:
Why did you choose the font you have? Is this an accessibly friendly font? What weights have you included?
I also like to include an image of the fonts chosen as a reference.
Google Fonts 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.
Use this section to explain what sort of imagery you plan to use through your site.
Add the images or links for your wireframes here.
There are lots of different options to create your wireframes - Code Institute students can access Balsamiq as part of the course.
Some other options include Figma, AdobeXD, Sketch and Mockup 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.
👩🏻💻 View an example of a completed user experience section here
This section can be used to explain what pages your site is made up of.
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.
I then like to add a screenshot of each page of the site here, i use 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.
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.
Be an amazing developer and get used to thinking about accessibility in all of your projects!
This is the place to make a note of anything you have done with accessibility in mind. Some examples include:
Have you used icons and added aria-labels to enable screen readers to understand these? Have you ensured your site meets the minimum contrast requirements? Have you chosen fonts that are dyslexia/accessible friendly?
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.
👩🏻💻 View an example of a completed Technologies Used section here
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.
Add any frameworks, libraries or programs used while creating your project.
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).
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.
👩🏻💻 View an example of a completed Deployment & Local Development section here
Include instructions here on how to deploy your project. For your first project you will most likely be using GitHub Pages.
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.
Place instructions on how to fork your project here.
Place instructions on how to clone your project here.
Start as you mean to go on - and get used to writing a TESTING.md file from the very first project!
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.
Use this part of the README to link to your TESTING.md file - you can view the example TESTING.md file here
👩🏻💻 View an example of a completed Credits section here
The Credits section is where you can credit all the people and sources you used throughout your project.
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.
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.
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.
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.