Hacktoberfest 2019 Day 4
I know, I've skipped a day. Hopefully, I can get three more pull requests real soon. In fact, I'll try to get one, right now!
Alright, I've been looking around GitHub, but I couldn't find anything I could use to quickly get a Pull Request. There's also a ton of stuff that are using languages and tools I'm not familiar with: Go, Ruby, Node.js, etc. So, I'm going to try something Jedulz told me about: I can get generate a Pull Request by merging branches of my own projects into the master branch (or other branches really).
I think my GitHub.io website could really use some work. I was more focused on quickly getting something up and running, rather than having something that looked good. Look at it (as it was at the time of writing):
It's horrible! It's baby's first web page! If I'm going to have the title Web App Developer at my workplace, then I have to do better than this!
I want to center the index's content when the screen is really wide. I tried searching for an example, I found a trick to center a div in the middle of the page but that's not what I wanted. However, I did notice his header, and it gave me an idea. The header is being padded to make it center in the screen. I wrapped my "main content" in a div, and used CSS to add the margin to the left and right of that div. This is so I can make the website be responsive, and grow/shrink to the size of the screen. This allows me to build one website and have it be displayed in a comfortable way on wide PC screens, tablets, and smartphones.
Now, you can either build a responsive page that expands to fill wider screens as the "main" CSS builds a site that would be viewed on small screens, or do the opposite and build for wide screens and make it shrink to fit smaller screens. It all depends on how you want to use the media at-rules. I think a good way to tell how you want to use the tag depends on this question: do you find it easier to apply margins and floats, or do you find it easier to reverse margins and floats? If you like the first option, like me, then you'll be building your site to view on small screens and expanding it to take advantage of the wider screens. You'll want to use "@media screen and (min-width: ...px)" to add effects to expand your site for the wider screens. If you like the second option, then you'll be building your site for wide screens and shrinking it to fit smaller screens. You'll want to use "@media screen and (max-width: ...px)" to add parts in your CSS to cancel margins and floats.
I had to add some extra CSS to get the mainContent div to use the full height of the browser. I also gave that div a background color of gray to make sure it worked. It looked good, but then I found a really cool background to add to the html and body sections of the page. I think it looks way better than before:
I'll have to work on content and its layout later.
I pushed all that new code to a branch called centered-index, and published it on GitHub. GitHub knew I just pushed a commit to the new branch, so it displayed the "centered-index" branch between the commit/branches/.../contributor tabs and the branch selector. So all I had to do was look in that yellow box about the branch, and click on the "Compare & pull request" button inside it. The button took me directly to a "create Pull Request" page, and I just clicked on the "Create pull request" button since my changes could be auto-merged without conflicts. It took me directly to the new pull request, so all I had to do was click on the "Merge pull request" button and then click on the "Confirm merge" button. The pull request was merged and closed, and now my changes are live on my actual GitHub.io page. Sorry, you'll only have that first picture to remember the horrible layout. Unless, the wayback machine captured it.
Nice! It got counted! Two down, two to go!
I don't want to totally cheat my way to a shirt. I think Jedulz won't mind if I help him with his fishy game. The fishy game is live, too. It's based off of the old Xgen Studio's Fishy game. However, this one by Jedulz will be built in JavaScript and won't use Flash. Which is good, because Flash is being phased out real soon.
Alright, I've been looking around GitHub, but I couldn't find anything I could use to quickly get a Pull Request. There's also a ton of stuff that are using languages and tools I'm not familiar with: Go, Ruby, Node.js, etc. So, I'm going to try something Jedulz told me about: I can get generate a Pull Request by merging branches of my own projects into the master branch (or other branches really).
I think my GitHub.io website could really use some work. I was more focused on quickly getting something up and running, rather than having something that looked good. Look at it (as it was at the time of writing):
I want to center the index's content when the screen is really wide. I tried searching for an example, I found a trick to center a div in the middle of the page but that's not what I wanted. However, I did notice his header, and it gave me an idea. The header is being padded to make it center in the screen. I wrapped my "main content" in a div, and used CSS to add the margin to the left and right of that div. This is so I can make the website be responsive, and grow/shrink to the size of the screen. This allows me to build one website and have it be displayed in a comfortable way on wide PC screens, tablets, and smartphones.
Now, you can either build a responsive page that expands to fill wider screens as the "main" CSS builds a site that would be viewed on small screens, or do the opposite and build for wide screens and make it shrink to fit smaller screens. It all depends on how you want to use the media at-rules. I think a good way to tell how you want to use the tag depends on this question: do you find it easier to apply margins and floats, or do you find it easier to reverse margins and floats? If you like the first option, like me, then you'll be building your site to view on small screens and expanding it to take advantage of the wider screens. You'll want to use "@media screen and (min-width: ...px)" to add effects to expand your site for the wider screens. If you like the second option, then you'll be building your site for wide screens and shrinking it to fit smaller screens. You'll want to use "@media screen and (max-width: ...px)" to add parts in your CSS to cancel margins and floats.
I had to add some extra CSS to get the mainContent div to use the full height of the browser. I also gave that div a background color of gray to make sure it worked. It looked good, but then I found a really cool background to add to the html and body sections of the page. I think it looks way better than before:
I pushed all that new code to a branch called centered-index, and published it on GitHub. GitHub knew I just pushed a commit to the new branch, so it displayed the "centered-index" branch between the commit/branches/.../contributor tabs and the branch selector. So all I had to do was look in that yellow box about the branch, and click on the "Compare & pull request" button inside it. The button took me directly to a "create Pull Request" page, and I just clicked on the "Create pull request" button since my changes could be auto-merged without conflicts. It took me directly to the new pull request, so all I had to do was click on the "Merge pull request" button and then click on the "Confirm merge" button. The pull request was merged and closed, and now my changes are live on my actual GitHub.io page. Sorry, you'll only have that first picture to remember the horrible layout. Unless, the wayback machine captured it.
I don't want to totally cheat my way to a shirt. I think Jedulz won't mind if I help him with his fishy game. The fishy game is live, too. It's based off of the old Xgen Studio's Fishy game. However, this one by Jedulz will be built in JavaScript and won't use Flash. Which is good, because Flash is being phased out real soon.
Comments
Post a Comment