Scribd
Upload
4 views2 pages

CSS Github

This document provides a step-by-step guide for forking a repository on GitHub, cloning it to a local machine, and setting up a project in VSCode. It includes instructions on running necessary commands, implementing tasks, checking code style, and deploying to GitHub Pages. Finally, it outlines the process for creating and updating a pull request while emphasizing the importance of not closing or opening multiple PRs.

Uploaded by

oleh.duma.dev
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views2 pages

CSS Github

This document provides a step-by-step guide for forking a repository on GitHub, cloning it to a local machine, and setting up a project in VSCode. It includes instructions on running necessary commands, implementing tasks, checking code style, and deploying to GitHub Pages. Finally, it outlines the process for creating and updating a pull request while emphasizing the importance of not closing or opening multiple PRs.

Uploaded by

oleh.duma.dev
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

1.

Open the Task on the MA Platform


Click the Make a fork button. It will open the task repo on GitHub.

2. Fork the Repo


3. Check the URL of the Forked Repo
After the Fork process is finished, you should see the repo in your account (not the mate-academy).
Now you can check if it was synced to the MA platform.

 Go back to the task on the MA platform.


 The button should change to Open the task.
 If not, reload the page.
 Get back to the forked repo on GitHub.

If you need to delete a forked repo


4. Clone the Forked Repo
Now you need to clone the forked project to your computer. Follow the next steps (and see screenshots below):

 Click the green Code button.


 Select the HTTPS tab.
 Ensure the link contains your GitHub name (NOT mate-academy).
 Copy the link.
 Open Git Bash (Windows) or ZSH (macOS) in your projects folder (You installed it in the Git and Terminal course).
 Run pwd in the terminal to check that you are in the projects folder
 If not, navigate to it using the cd command with the required path.
 Clone the repo by running the git clone command with the URL you copied on GitHub.
 git clone replace-this-with-the-URL-from-github

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

5. Open the Project in VSCode


Now you need to open the project in your code editor (VSCode).
 Run code project-name in the terminal (for example, code layout_hello-world).
 You will see the project name as a root folder name in VSCode.

6. Open the Terminal


 Use the shortcut ctrl + ` (Windows) or cmd + ` (MacOS).
 Check if you are inside the project (The project name is the last part in the terminal).
 Check if the terminal in VSCode is Git Bash (Windows) or ZSH (macOS).

7. npm install (or just npm i).


And wait until it downloads all the packages and finishes.

Note: You should run it once for every new task.

8. npm start to Open the Page


The command in the terminal will never finish.

 The command should open your browser at http://localhost:8080/.


 At this point, you should see the starting markup of the page.
 If the page is empty, add some text to the <body> in the src/index.html file.
 The text should appear in the browser.

9. Open One More Terminal for the Next Steps.


Use + or just press ctrl + shift + ` or cmd + shift + ` .

10. Create the develop Branch


Run:

git checkout -b develop


or

git switch -c develop

11. Update DEMO LINK and TEST REPORT LINK


 Open the readme.md file.
 Replace the text <your_account> with your GitHub username in the DEMO LINK and TEST REPORT LINK.

12. Implement the task described in the readme.md.


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

13. npm run lint to Check the Code Style


Run:

npm run lint


14. npm test to Check if Solution is Correct
 Read the checklist.md;
 Fix your code if needed;
 Run npm run lint again to ensure nothing is broken.
 Run the tests:
 npm test

 Test results should be opened in a browser;


 If not, check if you fixed all the code style errors ( npm run lint).

If you see a failing test

Fix your HTML and CSS to make

15. git add to Prepare Changed Files for Saving


git add ./src
 Don't add irrelevant files at this point, like package-lock.json or test snapshots.
 You can always check which files were changed or added using the git status command.
 Also, don't forget to add the readme.md file.

git add readme.md

16. git commit to Save Changes


Run the commit with a message describing what this code does.
git commit -m 'add task solution'

fatal: unable to auto-detect email addressno changes added to commitLF will be


replaced with CRLF
17. git push to send your code to GitHub
Run:

git push origin develop

failed to push some refsIf you are asked for Authorizationfatal: unable to access
18. npm run deploy to Publish to GitHub Pages.
Run:

npm run deploy


If you are getting some errors, run npm run deploy -- -l to see more details.

The deploy process requires some time to prepare your page on GitHub after the command is finished.

To check if the page was deployed successfully, you need to check in the project settings on GitHub:

 Open the forked repo on GitHub;


 Click the Settings tab at the top;
 Choose the Pages section from the panel on the left;
 There should be a link to your public page at the top (the same as your DEMO LINK in the readme.md).
 If there is no link at the top, check if the gh-pages branch appeared in the repo;
 If not, run npm run deploy -- -l to see more details.
 Wait for about 2 minutes and reload the Settings > Pages again to see the link;
 Open it to see your page.

19. Create a Pull Request (PR)


 Select the Pull Requests tab;
 Click the New pull request green button;
 Change the compare branch on the right to develop;
 Click the Create pull request button;
 Copy the DEMO LINK and TEST REPORT LINK from readme.md to the PR description;
 Links should contain your GitHub name (not mate-academy)!!!
 Click the Create pull request button one more time;
 Check that your DEMO LINK and TEST REPORT LINK work as expected (open the page and test results);
 Check if the task appeared in the table (only for full-time students).

❗ Do NOT close the PR and ❗ do NOT open several PRs. Only the first PR made after the fork is synced to the platform.

 If you have closed the PR - reopen it and request mentor review.


 If you can't open the PR - do another fork and create a new PR.

20. To update your PR, repeat steps 13-18 (no need to create the PR
one more time).

You might also like