First-contributions: Cool background for header in web app

[Roshanjossey]

A cooler background can really lift the looks of first contributions

🐞 Problem

Currently header background is plane. It could be better if there was some additional graphics to improve the looks

💡 Possible solutions

There could be some graphics related to git or branches.

I like the ones in https://opensource.google.com/ and https://about.gitlab.com/

📋 Steps to solve the problem

• Comment below about what you've started working on.
• Add, commit, push your changes
• Submit a pull request and add this in comments - Addresses #<put issue number here>
• Ask for a review in comments section of pull request
• Celebrate your contribution to this project 🎉

[Roshanjossey]

Here's a screenshot from https://about.gitlab.com/

I love the thought behind representing things as commits/ branches

[Roshanjossey]

Here's a screenshot from https://opensource.google.com/

This has a sense of continuity to it. Like things are connected.

[organdonor86]

I'm going to pick this up and see what I can do

[clanmaster]

I will try to provide some insight. I would say that the header should have an ideal reflection to what the site is in general. Give me a few and I will commit.

[CodHeK]

I'd like to add a background to this !

[clanmaster]

Hi, background to your page or to an element? If it's the background, use CSS selector body { background: url(address);}
If it's an element, target the element in CSS or use inline style

[Roshanjossey]

@clanmaster, the background is just for the header section of the web app (the element at the beginning with title and get started button) right now it's just plain blue. I was thinking of something more dynamic like the one in https://opensource.google.com

[Bentley912]

Has anyone tackled this yet? I'd be happy to address this issue

[Roshanjossey]

@Bentley912, go ahead

[shiraz1]

Can I contribute to this project?

I need to contribute to an Open Source project for my module at uni.

[Roshanjossey]

@shiraz1, sure. Do you have clarity on what you're gonna do?

[shiraz1]

what do you mean?

[Roshanjossey]

Things like what back ground are you adding? How are you gonna build it etc

[shiraz1]

ohh ok.

[shiraz1]

Can I add any background color?

On 11 January 2018 at 17:02, Roshan Jossey [e-mail] wrote:

Things like what back ground are you adding? How are you gonna build it etc

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/Roshanjossey/first-contributions/issues/130#issuecomment-356993235,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AQhHjTTuk_D9SNK-IZBOfSVMT94gctAUks5tJj62gaJpZM4MwzHd
.

[Roshanjossey]

Check the comments on the top of this issue thread

[shiraz1]

ok

On 11 January 2018 at 17:07, Roshan Jossey [e-mail] wrote:

Check the comments on the top of this issue thread

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/Roshanjossey/first-contributions/issues/130#issuecomment-356994691,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AQhHje3x1vNqxfEQ2PyTdt6zgc5jwA5pks5tJj_LgaJpZM4MwzHd
.

[shiraz1]

How do I start? Do you have the html files?

I'm confused. I haven't done this before.

On 11 January 2018 at 17:07, Shiraz Shahbaz [e-mail] wrote:

ok

On 11 January 2018 at 17:07, Roshan Jossey [e-mail]
wrote:

Check the comments on the top of this issue thread

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/Roshanjossey/first-contributions/issues/130#issuecomment-356994691,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AQhHje3x1vNqxfEQ2PyTdt6zgc5jwA5pks5tJj_LgaJpZM4MwzHd
.

[Roshanjossey]

Do you know React.js?

[shiraz1]

nope not really

On 11 January 2018 at 17:14, Roshan Jossey [e-mail] wrote:

Do you know React.js?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/Roshanjossey/first-contributions/issues/130#issuecomment-356996638,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AQhHjfgtsyUS_ziwofQZcdypgu1peQ36ks5tJkFngaJpZM4MwzHd
.

[Roshanjossey]

Our web app is built with React. If you don't know it, you might spent a lot of time learning it, get frustrated and ultimately not contribute at all.

So here's my suggestion. Drop this issue. Do the tutorial. After that, try contributing to the following projects
https://github.com/danthareja/contribute-to-open-source
https://github.com/the-ethan-hunt/first-timers-guide

[shiraz1]

ok I'll try that

thanks

On 11 January 2018 at 17:18, Roshan Jossey [e-mail] wrote:

Our web app is built with React. If you don't know it, you might spent a
lot of time learning it, get frustrated and ultimately not contribute at
all.

So here's my suggestion. Drop this issue. Do the tutorial. After that, try
contributing to the following projects
https://github.com/danthareja/contribute-to-open-source
https://github.com/the-ethan-hunt/first-timers-guide

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/Roshanjossey/first-contributions/issues/130#issuecomment-356997940,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AQhHjQqn2Z5fJz6oiyTROzav0wm35bBQks5tJkJqgaJpZM4MwzHd
.

[shiraz1]

Which tutorial do I do?

Do you have the HTML file which has the code so I can change the background
colour?

On 11 January 2018 at 17:19, Shiraz Shahbaz [e-mail] wrote:

ok I'll try that

thanks

On 11 January 2018 at 17:18, Roshan Jossey [e-mail]
wrote:

Our web app is built with React. If you don't know it, you might spent a
lot of time learning it, get frustrated and ultimately not contribute at
all.

So here's my suggestion. Drop this issue. Do the tutorial. After that,
try contributing to the following projects
https://github.com/danthareja/contribute-to-open-source
https://github.com/the-ethan-hunt/first-timers-guide

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/Roshanjossey/first-contributions/issues/130#issuecomment-356997940,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AQhHjQqn2Z5fJz6oiyTROzav0wm35bBQks5tJkJqgaJpZM4MwzHd
.

[mangalnathanvg]

Hi , I would like to work on this issue. Would you like a static or a dynamic background?

[Roshanjossey]

@mangalnathanvg, I had something dynamic in my mind. Go ahead with what you're comfortable with.
Also do check the images at the beginning of this thread.

[gurjarshakti]

Hey @Roshanjossey , i dont have knowledge of React.js but As a graphics designer i can design a header, icons, component. Or i can design something like that google header ( https://opensource.google.com/)..
Let me Know ..it can be helpful or not. Thank You

[Roshanjossey]

@gurjarshakti, that'd be awesome. Could you please start working on it? Let's continue this discussion here or in slack. Where ever you're comfortable.

[gurjarshakti]

@roshanjossey sure I will work on it by tomorrow. Kindly share the size of header we have to design. I can create a svg file so we easily resize on mobile screen as well.
I am not a slack user... But going to singup and will also ping you there ! Thanks

[arshadkazmi42]

Is it still available? Should I take this up?

[Roshanjossey]

@arshadkazmi42, yes. This is still available. Please take a look a the screenshots shared at the beginning of this conversation.

I don't have a concrete idea on how this should be. We could discuss more, make updates together and take this forward.

[arshadkazmi42]

@Roshanjossey Sounds good. Let me explore some graphic design and we can discuss further on it..

[arshadkazmi42]

@Roshanjossey A quick question! Are we looking for custom designed banners? Or planning to use some free banner available on web?

[Roshanjossey]

@arshadkazmi42, I'm sorry that I missed this last question.

I'm leaning towards a custom one. Also, I don't prefer a static image as background

If you check https://opensource.google.com/, you can see that that background is a bunch of divs.
What I have in my mind is something dynamic like that.

[arshadkazmi42]

@Roshanjossey Ok. I am not too good with frontend. I think we should have some expert frontend for this.

[gurjarshakti]

I was share one with team... But I didn't get any reply from your side
Roshan. :/

On Wed, Aug 15, 2018, 3:42 PM Arshad Kazmi [e-mail] wrote:

@Roshanjossey https://github.com/Roshanjossey Ok. I am not too good
with frontend. I think we should have some expert frontend for this.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/Roshanjossey/first-contributions/issues/130#issuecomment-413153812,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AWWa1LSWRPr-_1bzE0ro-O5qfrNWa-esks5uQ_QZgaJpZM4MwzHd
.

[swardhan]

@arshadkazmi42, I'm sorry that I missed this last question.

I'm leaning towards a custom one. Also, I don't prefer a static image as background

If you check https://opensource.google.com/, you can see that that background is a bunch of divs.
What I have in my mind is something dynamic like that.

I checked the source of https://opensource.google.com/ and the lines are actually static PNGs. The divs are actually just a background for those static images.
But still I would also like to make a custom one for the web-app.

[Roshanjossey]

Closing this issue for the moment. We'll create it again for Hacktoberfest.