emmadawsondev/guide-to-hf

A guide for super-newbie coders to Hacktoberfest written by super-newbie coders 2020

Hi there 👋 My name is Emma - welcome to my GitHub!

🎓 I work as a software developer consultant at Futurice in Stockholm
🔭 In my spare time I'm working on open source accessibility projects
💬 I would love to talk about open source and accessibility
👨‍💻 My portfolio is available at https://emmadawson.dev
📫 How to reach me: [email protected]
📸 My youtube channel
🔆 Accessible For All - My Github Organization

Languages and Tools:

guide-to-hf's Issues

Profile Image doesn't show for Experience 14

The profile photo for Experience 14 (Shubham Arora) doesn't work or is broken.

Kindly visit https://emmalearnscode.github.io/guide-to-HF/experiences/shubham-arora.html to confirm.

More so, the experience directory https://github.com/emmalearnscode/guide-to-HF/tree/master/experiences doesn't look well arranged. Maybe I can sort it by file type (eg. html, css) or by experience (eg name of the contributor with their files in it).

Add information about setting upstream remotes for returning contributors

These details can be added to the website and to the contributing.md, potentially as separate PRs ;)

When a user intends to make multiple contributions to a repository it is very easy for them to get their forked repo out of sync with this original repo.

To overcome this, they have to set their upstream remote as this repository.

From the command line (UNIX based, I'm afraid I'm not too familiar with Windows these days) they can follow these instructions:

 git remote -v

This will list the current remotes. It should show something like this:

origin [email protected]:JacksonBates/guide-to-HF.git (fetch)
origin [email protected]:JacksonBates/guide-to-HF.git (push)

Then they can do this:

git remote add upstream [email protected]:emmalearnscode/guide-to-HF.git

Now if they do git remote -v again they should see:

origin	[email protected]:JacksonBates/guide-to-HF.git (fetch)
origin	[email protected]:JacksonBates/guide-to-HF.git (push)
upstream	[email protected]:emmalearnscode/guide-to-HF.git (fetch)
upstream	[email protected]:emmalearnscode/guide-to-HF.git (push)

Now, before they do new work on the repo, they should pull any updates in from this original repo like this:

git pull upstream master

This takes all the changes on this repo and applies them to the fork to keep them in sync.

If anyone needs more detail to understand this, feel free to @ mention me :)

Images not found on pull.html

The images are not being viewed on the "Make a PR Request" webpage

Recommend adding info on how to run the code to your README.md

Instructions for 'how to get this to run after I check it out' should be included in the main README. It's the first place people typically look.

Add link to navigation on all pages

On the homepage there the last item in the navigation is a link to my github repo. However it's not on any of the other pages.

Please copy the link from the homepage and add it in the same place in the navbar to the three other pages on the site.

There is extra spaces in CONTRIBUTING.MD

There are extra spaces in CONTRIBUTING.MD between ** and two titles:

• How to contribute
• RULES

Which means that if you view the CONTRIBUTING.MD in github the titles are not bold and the ** is visible

Pull request page doesn't have any content.

The pull.html page doesn't have any content.

Recommend populating it, and/or remove the link until the page does have content.

change username info on fork.html

Point 8 on the fork document shows that git remote -v will output my github fork as the origin repo...this is obviously only true for me 😄

It might make more sense to replace references to JacksonBates on the page with <username>

Very easy issue :)

Change to use CSS custom properties (variables)

The current styles.css file uses normal colour and font properties throughout the CSS file like so:

dark red: #9C4668
pink: #ff8ae2
blue: #93c2db
darkblue: #072540

font-family: 'Inter', sans-serif;
font-family: 'Nunito', sans-serif;

Instead I would like custom CSS properties at the top of the file and the hex codes and fonts replaced throughout the CSS file with custom properties.

Name the properties as follows at the top of the file:
--bg-color: #072540; //dark blue
--bg-color-lt: #ffffff; //white
--text-color-lt: #ffffff; //white
--text-color-dk: #072540; //dark blue
--highlight-lt: #ff8ae2; // light pink
--highlight-dk: #9C4668; //dark pink

--font-header: 'Inter', sans-serif;
--font-normal: 'Nunito', sans-serif;

then change them in the corresponding places throughout the CSS file by using --var(name-of-property)

Format CONTRIBUTING.md

Format the CONTRIBUTING.md file so that it looks more pleasing.

Heading should be made bigger and bolder
Rules should stand out

Title font size on small mobile screens

On 320px screen resolution the "Hacktoberfest" word isn't fitting in a screen a bit in 3rem size.
Also, some side paddings would be good at mobile resoluitons =)

Add media query for cards on index.html page

On screens less than 440px the cards (under section .Experiences on the index.html page) are one column wide but they have quite a lot of white space around them.

1. Add a media query for screens smaller than 440px.
2. Increase the max-width of the card to 300px
3. Reduce margin from 40px 5px to 10px 0

What's the process for adding a link to 'my experience' to the main page?

In the contributors guide you've said to add a 'yourname.html' and css to the experiences folder.

But if a user/developer wants to see a list of their experiences on the main page, how would they see that? Do you add that manually and they need to wait to see that once the PR is approved?

Hamburger navigation

At the moment the current navigation styling breaks at screen sizes smaller than 730px.

Please add a hamburger menu that appears at screen sizes less than 730px.

The navigation links should drop down when the hamburger is clicked on and disappear on a second click.

Add scripts to scripts.js and make a section at the bottom of the CSS file marked /Media Queries/

Live site?

Is this site available live anywhere, such as GitHub pages or Netlify?

It might help encourage new contributors if they could see their work go live on a real page, and gives a little demo of what to expect when it's up and running.

Change hamburger menu icon

I could like the hamburger menu changing to a standard 3 bar instead of the inverted version it is now.

Example : [https://www.google.com/url?sa=i&url=https%3A%2F%2Fcreativemms.com%2Fblog%2Fwhy-the-hamburger-navigation-icon-is-dead%2F&psig=AOvVaw3cZPoniKYtmIF8s8almt-M&ust=1601815287021000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCPCD-o25mOwCFQAAAAAdAAAAABAD]

Format README.md

The readme.md file should be formatted so that it's more pleasing to look at.

1. Add heading
2. Add link to CONTRIBUTING.md file
3. Add link to twitter handle.

Top nav hover 'jitters'

Tiny improvement suggestion for the site:

This should be a reasonably easy first issue, that requires a little CSS knowledge.

Replicate issue

Hover over the top nav menu items. Notice how things jump around a little.

Cause / clues

Some decorative properties change the size of the box-model values (margin, border, padding, content).
There are other decorative properties that do not (box shadow, background-color).

It should be relative simple to reimplement the hover effect without having it jump around on the nav bar.

Add link to README.md

Please add the following line under the heading in the readme.md file:

This repo is hosted at https://emmalearnscode.github.io/guide-to-HF/index.html

Make sure the link works.

Top navigation look & feel on mobile devices

Little improvement suggestion:

It requires a little CSS knowledge.

Replicate issue

In mobile devices (or simulating), open the top navigation menu;
The active menu item has a weird border radius and;
On hover / When active, it overlaps the other menu items.

Cause / clues

The border radius issue is caused by the CSS 'border-radius' property, since it sets only the bottom radius.

About the overlapping, my guess is that the display 'block' set to the nav when the menu is open and/or the 'margin' set to the 'li' items, is causing this overlapping.

Add styles to media queries

On screens smaller than 600px add a media query for the p tag so that it has 5px padding on the right and left sides.

Needs an easier link to your github home.

I arrived to your website from a twitter link (the tweet is one of the top on the #hacktoberfest hashtag).

It's hard to actually get to the github repo itself. Suggest a prominent github logo link.