Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Convert hand-drawn mockup to HTML & CSS - you can choose colours, fonts, etc. #12

Closed
yochannah opened this issue Oct 18, 2017 · 23 comments
Labels
code-task This task will involve writing code of some sort - but it's okay to pick up and ask for help too! design task Want to contribute to open source with your nifty design skills? Pick up this issue! first-timers-only New to open source? Pick up this task & we'll help with any questions <3 good first issue Great for new-to-open source folk. We'll help you, step-by-step help wanted Input from others appreciated but not necessarily as easy at first-timers-only or good first issue
Projects

Comments

@yochannah
Copy link
Collaborator

yochannah commented Oct 18, 2017

Task

Convert hand-drawn homepage mock to basic html and css.

  1. Comment on this task stating that you intend to complete this task
  2. When you're ready, add your html mocks to the static directory and create a pull request.
  3. Bask in glory and email me your address if you'd like to have some codeisscience stickers for your trouble.

Basic tech and design specs:

  1. Pure native HTML5 & CSS please. No CSS frameworks (e.g. no bootstrap) or font icons (inline svg icons are great though, and can be added to https://github.com/yochannah/code-is-science/blob/master/static/symbol-defs.svg).
  2. Bonus points for responsive, but not mandatory!
  3. Design: There are no colours in the mocks, so use your own imagination! Try to make them generally go well with logo model 1 or model 2: https://github.com/yochannah/code-is-science/tree/master/static/logos and use material colours: http://materialuicolors.co/
  4. Ensure the design is accessible as possible

Page details:

Homepage:

Mock 1 - homepage

  • logo can be found in this repo's /static/logos/model-1 folder
  • header with links title text: (don't worry about the correct href value yet, just leave blank)
    • open source journals
    • contact
    • about
    • search field with magnifying glass icon
  • body
    • sidebar with radio box filters
    • main content:
      • filterable list with headers for journal name, discipline, OSS
      • journal name is a link to an external site
      • oss value is either a checkmark for yes or x for no.
  • footer
  • (c) codeisssciencecom 2017
  • links to contact page, twitter @ codeisscience, github.com/codeissscience.

If at any point my handwriting is unclear, please clarify on this issue!

If you complete this issue, please consider also following on with the second submit-a-journal page.

https://i.imgur.com/QPMmsJJ.jpg

@yochannah yochannah added code-task This task will involve writing code of some sort - but it's okay to pick up and ask for help too! design task Want to contribute to open source with your nifty design skills? Pick up this issue! Hacktoberfest If it's October and you want to contribute to open source, this issue is for you! help wanted Input from others appreciated but not necessarily as easy at first-timers-only or good first issue good first issue Great for new-to-open source folk. We'll help you, step-by-step first-timers-only New to open source? Pick up this task & we'll help with any questions <3 labels Oct 18, 2017
@shmishtopher
Copy link
Contributor

shmishtopher commented Oct 18, 2017

I can get to work on this, just one question: Can you please clarify the footer layout?

@yochannah
Copy link
Collaborator Author

yochannah commented Oct 18, 2017

Hey @shmishtopher and thanks for volunteering to pick it up! sorry, I know the footer is a little bit scribbled-over and messy. It should be just a single straight element with copyright codeisscience and links to contact, twitter, and github - similar to the github footer at the bottom of this issue :) the line I scribbled out shouldn't be in the design.

Does that help?

@shmishtopher
Copy link
Contributor

shmishtopher commented Oct 18, 2017

Yes, I'll submit a pr tonight.

@yochannah yochannah added this to Pre-Mozfest in Roadmap Oct 18, 2017
@geekfred
Copy link

geekfred commented Oct 18, 2017

Hey! I know I'm not like an official contributor on this repository hehe, but I would like to look at the design so I can give my $0.02! If you need! Thanks!

@yochannah
Copy link
Collaborator Author

yochannah commented Oct 18, 2017

@ikayz
Copy link
Collaborator

ikayz commented Dec 31, 2017

Can I still take up this task? It'll be my first contribution to any GitHub project which is not my own. I'm new to open source and GitHub.

@yochannah
Copy link
Collaborator Author

yochannah commented Dec 31, 2017

@ikayz yes, absolutely! :) shmishtofer made a start on this but I think wasn't able to finish it; you can see the details here: #15 - it's merged already, but it's up to you if you'd like to continue the work where it dropped off or make your own version

Feel free to ping me here if you have any questions or need any input!

@ikayz
Copy link
Collaborator

ikayz commented Jan 1, 2018

@yochannah I have looked at shmishtofers' code and I'll make my own version. For any questions I'll surely ask you.

@yochannah
Copy link
Collaborator Author

yochannah commented Jan 1, 2018

Sounds good!

@yochannah yochannah removed the Hacktoberfest If it's October and you want to contribute to open source, this issue is for you! label Jan 1, 2018
@yochannah
Copy link
Collaborator Author

yochannah commented Mar 15, 2018

Hey @ikayz! Did you ever get a chance to look at this? (No worries if you didn't, just following up quickly)

@ikayz
Copy link
Collaborator

ikayz commented Mar 15, 2018

@yochannah yes I did have a look at it. I have the assets cloned locally on my laptop. Is it too late for me to work on it and submit? Had a series of events which were beyond my control.

@yochannah
Copy link
Collaborator Author

yochannah commented Mar 15, 2018

@ikayz
Copy link
Collaborator

ikayz commented Mar 15, 2018

Alright thanks

@ikayz
Copy link
Collaborator

ikayz commented Mar 21, 2018

@yochannah I'm ready to make a pull request so you can have a look at what I worked on.

@yochannah
Copy link
Collaborator Author

yochannah commented Mar 21, 2018

@ikayz
Copy link
Collaborator

ikayz commented Mar 21, 2018

Made the request

@yochannah
Copy link
Collaborator Author

yochannah commented Mar 21, 2018

@ikayz
Copy link
Collaborator

ikayz commented Mar 21, 2018

Alright

@yochannah
Copy link
Collaborator Author

yochannah commented Mar 24, 2018

Ok, this has been completed thanks to @ikayz's awesome work 😻 😍 💯

@yochannah
Copy link
Collaborator Author

yochannah commented Mar 24, 2018

@ikayz P.S. - was this your first open source PR?

@ikayz
Copy link
Collaborator

ikayz commented Mar 24, 2018

@yochannah yes it was and I'm proud of it.

@yochannah
Copy link
Collaborator Author

yochannah commented Mar 24, 2018

omg, that is really cool! well done and THANK YOU!! <3

@ikayz
Copy link
Collaborator

ikayz commented Mar 25, 2018

It was an honour 😃

@yochannah yochannah moved this from Soonest to Done in Roadmap May 10, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
code-task This task will involve writing code of some sort - but it's okay to pick up and ask for help too! design task Want to contribute to open source with your nifty design skills? Pick up this issue! first-timers-only New to open source? Pick up this task & we'll help with any questions <3 good first issue Great for new-to-open source folk. We'll help you, step-by-step help wanted Input from others appreciated but not necessarily as easy at first-timers-only or good first issue
Projects
Development

No branches or pull requests

4 participants