Final FAQ’s

Here are some resources, tutorials and videos that answer questions or difficult areas you identified for the Final Project.

Git Merge Conflicts

Shorter Videos

These videos don’t go into full detail like the videos in the next section. They try to quickly show a process.

Git Merge Conflict Shorter [4:06]

Git Merge Conflict Long [8:22]

Git Merge Conflict Cancel merge

In Depth Merge Conflicts

These two videos go more in depth. They are also in zoom so there is a clickable transcript. This was done with a spilt screen and so may be hard to see on a phone. Best viewed on a laptop or desktop screen.

Part 1: Creating and Resolving Conflicts

View Part 1 [23:36]

In this video I have two windows that are each logged into different GitHub accounts. Then I go from being invited to collaborate through creating the conflict and resolving it.

Note that the typical way to create a conflict is to have two people edit the same file. There are other ways to create conflicts that you can do on your own that are not covered in this video.

Part 2: Pulling other people’s changes

View Part 2 [6:49]

This shows how you can pull your teammates changes.

Citing Images

These videos go through the process to cite images

Part 1: Setup

View Part 1 [6:03]

This video covers where to get images, how to record information on them that you will need to cite the images and how to record that information to use in your project.

Post: Where to find Free Content https://openlab.bmcc.cuny.edu/mmp-350-spring-22/projects/final/where-to-find-free-content/

This post has places where you can find images, video and text with copyright that allows use in your project. Remember:

Only use images with explicit copyright to allow for you to use them.

What info to save

The two most important pieces of information that you need on the image are:

The name of the person who created the image
The URL of the image on the site you found it.

Part 2: Code

View Part 2 [10:45]

This video goes through adding images to your project and writing the HTML to show the image and the citation.

Photo Credit CodePen

This pen has examples of how you can cite images. The video walks through part of the CodePen and how to use it in an 11ty project with the GitPod editor. The rest of the walkthrough of the CodePen is in the next video.

Part 3: Styling

View Part 3 [16:11]

This video walks through writing the CSS to style the citation. It also uses the Photo Credit Codepen as well as shows how to add a new Partial file in Sass where the CSS will be written.

The grid layout is one of the One Line Layout techniques.

One-Line Layouts

Sass

These are some sass how-to’s

Creating and Using Sass Partials

One cool feature of Sass is that it allows you to combine multiple CSS files into one file. This also helps when developing in groups because you can break up your CSS into different files and so different people can work on the CSS at the same time without working on the same file.

Sass Partial Walkthrough [3:37]

This adds a color stylesheet partial as an example.

Wikipedia Content Tips

Removing Reference Numbers

When you copy a Wikipedia article you will also copy the reference numbers that are in square brackets and look like [1].

Here is how you can remove them.

1. Open the file that has the references you want to remove

2. Click the hamburger icon in the top left and then select Replace

3. In the Find box, click this icon: .* it turns on Regular Expression searching

4. Copy and paste this into the Find box:

\[\d+\]

5. Leave Replace blank

6. Click the icon to replace all . There are two icons by Replace and it is the one on the right.

IF you want to do this for every file in your site you can choose Replace in files in step 2 above

Video link

Git Command Line Cheatsheets

Here are some things you can copy and paste when working in the command line with Git.

Create a new Branch

git checkout main
git pull
git checkout -b nameOfNewBranch

You should go to main first so that you are branching off of the main branch. The git pull is so that you make sure you have the latest version of the main branch before making a new one.

Branch-based Workflow

Here is the process for using Git Branches to help keep everyone’s work separate and avoid code conflicts.

NOTE: your branch name should also identify you. It’s best to decide on a group to use first name or initials or something like that at the start of your branches. For example if I wanted to edit the navigation

git checkout -b cs-nav
or
git checkout -b chris-nav

Also, branches are free. You can make a different branch time you work on a part of the project.

Create a new branch
1. git checkout main
2. git pull
3. git checkout -b nameOfNewBranch
Do you work to make the changes you want on the new branch.
When you’re done, commit the changes to the new branch. You can do this through the VS Code interface (or the command line if you like)
Push the branch to GitHub. This will make it visible to your team. VS Code should give you a Publish Branch button after you’ve committed all of the changes.
Go to GitHub and start a Pull Request for your new branch. If you do this right after you published to GitHub then you should see a green Compare & pull request button, click that. If not then:
1. Click Pull Requests
2. Click the green New Pull Request button.
3. Choose your branch in the Compare dropdown (the other should be base: main).
If there are no conflicts you should see an “able to merge” message. If there are conflicts it will say you are unable to merge, It’s OK you can still create the pull request and will just need to deal with the merge conflict later.
Click the Create Pull Request button
1. You can change the commit message and add a comment before clicking the button.
If there are no conflicts there should now be a Merge pull request button.
1. At this point the merge has NOT been done. You can cancel it or get feedback from team before finalizing.
2. They make this many steps because in some companies the workflow is stet up where someone else (more senior) would take over at this point and finalize the merge.
Click Confirm Merge button
1. again there is a chance to change the commit message (optional)
The merge should now be done and you should see a Pull request successfully merged and closed message.
IMPORTANT: go back to Gitpod
Checkout the main branch
1. git checkout main
Pull the changes you just made from the merge into local (gitpod) environment
1. git pull

Miscellaneous

A collection of tips and tutorials that address a variety of issues

Responsive Limit to Site width

This shows how to use the max-width property to keep your site from getting too wide but also allowing it to be responsive on smaller screens.