How to solve the layout tasks on Github

If you are not familiar with Git and Github

• IMPORTANT Install Node.js 14 (not 15)
• Watch the Git and Github lesson
• Finish githowto
• Learn how to use GitHub Pages
• Read about Markdown.
• Create a repo following this workflow

Learn Useful GIT commands

Learn Terminal commands

!!!!!!!!! MUST READ !!!!!!!

To avoid permissions issues DO NOT place your projects folder on desktop There should be NO SPACES in the path. e.g. C:\Users\Your Name\projects. It is better to put repositories into D:\projects or C:\Users\YourName\projects.

Follow this steps:

1. Open the project on Github and Fork the repo.

   Show the screenshot

   • Before the fork
   • After the fork
   If you want to delete the repo

   • Open project settings
   • Delete the repo

2. Clone the forked repo git clone the-link-from-github

   Show the details

   • Open Git Bash (Windows) or Terminal (macOS) in your projects folder
   • The path to your projects should not contain spaces or non-latin letters
   • run git clone the-link-from-github
   • The project link should have your name but not mate-academy
   How to open Git Bash

   

   How to paste the project URL to Terminal (Git Bash)

   

   Clone success screenshot

   

3. Open the project in IDE

   • run code project-folder-name
   • or just run VSCode and open the project folder
   Project is opened correctly

   

   Project is opened WRONG

   

4. Open the Terminal in your IDE

   Show the details

   • Use the shortcut ctrl + `
   • Check if you are inside the project (The project name is the last part in the terminal)
   • Check if you use Git Bash (Windows) of zsh (macOS)
   How to Select default shell

   • Choose Select default shell option
   • Select Git Bash (Windows) or zsh (macOS)
   • Close all the opened terminals
   • All the new terminals will be Git Bash (or zsh)

5. Run npm install (or just npm i).

   If you don't have Node.js

   

   If you run `npm i` outside the project

   

   If you have Node.js 15 or later

   

   How to reinstall Node.js

   • Open Add and remove programs
   • Uninstall Node.js
   • Download Node.js LTS
   • Delete node_modules
   • Run npm i again

6. Run npm start to check if it works.

   Show the details

   • At this point you should see the starting markup of the page at http://localhost:8080/ opened in your Google Chrome
   • Add some text to src/index.html. The change should be immediately updated in the browser.
   • If the page is not updated automatically press ctrl + r (cmd + r for macOS)
   If the page is empty after you added some text

   • Update the page by pressing ctrl + r (cmd + r for macOS)
   • If the page is still empty check if you saved the changes
   • Enable autosave
   If the page is opened at the other port (not :8080)

   • If you see the other port
   • It means you already have another terminal running npm start command (maybe it is another project)
   • Stop the npm start command in current terminal by pressing ctrl + c (all operating systems)
   • Close the other terminal running npm start
   • Run the command again for your current project
   • The URL should be now http://localhost:8080/
   • If the URL is still wrong, just restart the computer

7. Open one more terminal for the next steps.

   Show the screenshot

   

8. Create the develop branch (run git checkout -b develop)

   If you see that develop already exists

   

   • run git branch to see all existent branches
   • If develop is marked with * then everything is correct
   • Otherwise, run git checkout develop (without -b key)

9. Open readme.md file and replace a text <your_account> with your Github username in the DEMO LINK and TEST REPORT LINK

   Example

   

10. Implement the task described in readme.md.

    • You should write the code in index.html and other files inside src folder.

11. Run npm run lint to check the code style.

    If you have some errors

    • Fix all the errors and run the command again

    

    How to find the lines with linter errors

    

    This error means you need to fix CRLF

    

    • run git config --global core.autocrlf false
    • and fix the CRLF in all the files you changed

    

    How to fix autoformatting in VSCode

    • Here is the documentation
    • Run Alt + Shift + F to format the document

    

12. To check if your solution matches all the expectations you can run npm test

    • If test results are not opened in a browser, check if you fixed all the code style errors (npm run lint)
    • If you can't run tests for some weird reason just use a screenshot from backstop_data/bitmaps_reference/Entire_document.png to ensure your page looks as expected.
    If you see a failing test

    

    If you see ERR_CONNECTION_REFUSED

    

    • it means you don't have a running server
    • Open new terminal and run npm start
    • Check if the page is opened at :8080 port (http://localhost:8080/)
    • Run npm test again to see the results

13. Save your changes git commit -am 'some message'

    • If you created some new files you should add them before running commit git add path/to/new_file1 path/to/new_file2.
    fatal: unable to auto detect email address

    • it means you forgot to configure you GIT name and email
    • See the commands above the error message and run them one by one with your email and name

    

    no changes added to commit

    

    LF will be replaced with CRLF

    • You forgot to fix CRLF

    

14. Send your code to Github by running git push origin develop

    failed to push some refs

    

    • Commit changes again after creating develop branch
    If you asked for the Authorization

    

    fatal: unable to access

    

15. Run npm run deploy to publish your site to GitHub pages.

    • Open Setting tab of your repo on Github and choose Pages section from panel on the left
    • There should be a link to your public page (the same as DEMO LINK in your readme.md)
    • Wait until it becomes green (refresh a page if needed)
    • Open the page and check if you see the all the latest changes
    • If the page is not updated yet, just add ?any-random-text after the URL in the Browser and press Enter to reload the page discarding cached data (if any)

16. Create a Pull Request (PR) from your branch develop to branch master of original repo.

17. Copy DEMO LINK and TEST REPORT LINK from readme.md to the PR description.

    Check your DEMO LINK

    • You forgot to put your Github name into DEMO_LINK and TEST_REPORT_LINK

    

    Check your TEST REPORT LINK

    • You forgot to run tests before npm run deploy

    

18. Check your work using checklist (look for it in the root directory of the project) before submitting it for review.

19. To update you PR repeat steps 10-15 (no need to create the PR one more time).

If you need an ADDITIONAL CODE REVIEW, click on re-request button at the PR page.

Linux users

If you use linux please make sure you adjusted writing permissions to let scripts work without sudo. Correct permissions mean you don't see errors like permission denied after running commands in terminal.

NPM commands

• npm install installs the project dependencies and runs postinstall
  • which create reference files for pixel perfect and tests
• npm start runs the server required for development and tests
• npm test runs linter and tests
  • npm run lint runs linter (code style check)
  • npm run test:only runs pixel perfect tests
• npm run deploy publishes the page and test report to gh-pages

Useful links

• Useful GIT commands
• Terminal commands
• HTML, CSS styleguide
• Working with figma
• Creating a pull request from a fork
• How to use pixel perfect extension