Change:
!
I think 'settings ' is better UI, clearer and more obvious for users. Also think 'home' would be better than clicking freeCodeCamp word and icon which doesn't actually look like a button.
I agree. We should have both: a user photo and settings link - both of which will point to the settings. Is this something you'd be interested in helping us implement?
I'd be happy to but I've got a bunch on at the moment so might be a few weeks before I get a chance to look at it. I've it to my to-do list but in the meantime anyone else can pick it up. I'll add a comment if I start working on it.
I would appreciate it if someone told me what I should do and the progress of this issue.
Are you still interested in helping tackle this issue? I think we could add both a "home" button (which would take them to the "welcome page" to the navigation, and a "settings" link to the left of their photo (both the photo and the "settings" link would redirect them to /settings).
see my email - however for this issue I think I saw something being done in another PR which has changed the navs - www, learn and settings are all now different
Yes - we're trying to make the navigation universal across different services. We will add the settings button to the nav when we do so.
Hey there, is this issue still up for grabs? Also, are the requirements still as defined in It seems like it might have changed a bit from reading the conversation above. Thanks!
pointed out to me that we have a number of different navigations. I was wondering if you would be interested in a complete nav redesign to make it more comprehensive and more user friendly?
What is the current of this issue? Can I be of any help?
Thanks for your patience. We want to build a universal navigation component that exists on every page - including the Guide and Learn. Rather than add a ton of buttons up top, we want to add a footer that has links to all the various pages currently linked from The main problem with having a footer is that the curriculum view has 3 independently scrolling elements. Would you be interested in taking a crack at designing this? And We would welcome your help as well if you're interested in collaborating on this.
I made a quick pen at one point that I thought might be a good design to implement or build on... - basically just took all the parts we have on various pages and put them together.
Here's a list of what we might want in a footer.
I suggest finalizing the links that we need to include in the footer and then start working on the footer component. here is a link to bootstrap official sticky footer template: for large number of links, It is the industry standard to group the links for the footer. so we probably need to think of that. here are some examples: khanacademy: <img width="1234" alt="screen shot 2018-12-26 at 7 07 05 pm" src="https://user-"Udacity: <img width="1216" alt="screen shot 2018-12-26 at 7 07 43 pm" src="https://user-"EDX: <img width="1192" alt="screen shot 2018-12-26 at 7 08 12 pm" src="https://user-"Slack: <img width="1304" alt="screen shot 2018-12-26 at 6 59 48 pm" src="https://user-"
Any ideas for resolving the 3 scroller issue Qunicy mentioned? I think if we had only one scroller, the user had to scroll to the bottom of the page anyway to get the footer. Right now, i get a pretty similar behavior. when I have my cursor on a scrolling component and scroll to the end I am able to go where the footer component would be. So I don't think it is a major issue because the behavior is similar.
I like the simplicity of Khan Academy's footer, with it's mission statement and call to action on the side: freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonprofit organization (United States Federal Tax Identification Number: 82-) Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons - all freely available to the public. We also have thousands of freeCodeCamp study groups around the world. Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff. You can . Columns: Our Nonprofit Our Community Our Learning Resources
Here is a quick pen. any thoughts?
This looks great! Very nice clean design, good use of whitespace, and good responsivity.
I have a working footer, and as Qunicy mentioned it does affect the user experience when placed under three scrolling divs. here are some solutions. the separating the columns separating the three panels so campers have something to grab onto to scroll the whole page rather than individual panels; a an expandable fixed bar at the bottom. a sticky expandable small footer at the bottom. removing the footer on this page. Let me know about your feedback so I could proceed with finalizing the footer. Thanks P.S there are other issues with the UI's grid system and markdown that affects the footer implementation. I addressed them in a separate issue.
There's already a lot going on in this area. More scroll bars seems like clutter and possible confusion... I like the expandable option(s) or... the footer within the lesson panel?
Thanks that is definitely an option. we should see how it would like in action. I also like the small expandable option. so if it does get in the way of the user, at least it is a small distraction. I included a gif of the current state of the footer in different screens. let me know what you think. btw, how does the style and the color look? !
Looks good, I was thinking more of a green background to match the nav, but the gray and green buttons look good... might want to get Quincy's opinion there. And actually, that looks pretty good just putting it at the bottom of the other panels... the scrollbar is hidden until you scroll down - I suppose it might be different on other browsers. It could maybe use some white space or something to separate it from the lesson panels a little. But overall, it looks real good - nice job!
I want to be an active participant in designing the footer but as you know I am presently inactive in the community. Fortunately, I landed here while I was looking at the issues. I want to share some ideas on this. Amazing work there . I am a big fan of GitHub's footer! We should do something similar. We should put the full footer only on the main homepage. Few primary links may be put on the authorized user's welcome page. Some screenshots will clear the design I have in mind. ! ! ! ! And I am totally against putting footer on the platform. Before making any UI change we should ask ourselves "As a camper will it improve my learning experience?". Putting footer on platform will not. Presently, we have a lot of scrollbars and buttons on learn platform and putting footer there will conjust things up more. So, no footer on is the way we should be going :)
thanks for the valuable input. That is the industry standard to implement footers. So ideally the footer component will receive some props depending on the page that the user is visiting and output a custom footer. Let's wait for output to see which direction he would like us to pursue.
Nice design of the footer. I was wondering if for the social media part(FB, twitter, medium, Youtube etc.) we could change it to logos.
That looks solid! Rather than simplify the footer as GitHub has done, I propose we keep it the same everywhere so people don't have to adapt to the fact that the footer changes from page to page. We want to keep our navigation up top the same on every page, too. Regarding having the footer on Learn - we do eventually want to do this, but we need to figure out how. As pointed out, with the current multi-pain scrolling, having a footer would be a pain. Let's worry about that later, and focus instead on creating a common component we can use on all the non-learn pages. Since you've already got a working design of the footer, are you interested in tackling this?

Discussion:
<ins> footer{ position: absolute; background-color: #E0E0E0; color:#555555; background-size: cover; font-size: .9em; width:100%; margin-top: 5px; padding-top: 40px; } footer b { padding-bottom: 5px; } </ins>

<ins> /* eslint-disable max-len*/ import React from 'react'; import './footer.css'; function Footer() { return ( <footer className='pt-5 pb-4 footer' id='contact'> <div className='container'> <div className='row'> <div className='col-lg-5 col-md-6 col-sm-6  '> <p> freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonprofit organization (United States Federal Tax Identification Number: 82-0779546) </p> <p> Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons - all freely available to the public. We also have thousands of freeCodeCamp study groups around the world. </p><p> Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff. You can&nbsp; <a className='underline  white' href='https://donate.freecodecamp.org'>make a tax-deductible donation here</a>. </p> </div> <div className='col-lg-2 col-md-2 col-sm-2 col-xs-6'> <div className='row'> <b className='paddingLow  font-weight-bold col-xs-12'>Our Nonprofit</b> <a className=' col-xs-12' href='https://about.freecodecamp.org'>About </a> <a className=' col-xs-12' href='https://donate.freecodecamp.org'>Donate</a> <a className=' col-xs-12' href='https://shop.freecodecamp.org'>Shop</a> <a className=' col-xs-12' href='https://sponsors.freecodecamp.org'>Sponsors</a> <a className=' col-xs-12' href='mailto:team@freecodecamp.org'>Contact email</a> </div> </div> <div className='col-lg-2 col-md-2 col-sm-2 col-xs-6'> <div className='row'> <b className='paddingLow  font-weight-bold col-xs-12'>Our Community</b> <a className=' col-xs-12' href='https://www.linkedin.com/school/free-code-camp/people/'>Alumni Network </a> <a className=' col-xs-12' href='https://study-group-directory.freecodecamp.org'>Study Groups </a> <a className=' col-xs-12' href='https://www.freecodecamp.org/forum'>Forum </a> <a className=' col-xs-12' href='https://gitter.im/FreeCodeCamp/home'>Gitter </a> <a className=' col-xs-12' href='https://github.com/freeCodeCamp/'>GitHub</a> <a className=' col-xs-12' href='https://support.freecodecamp.org'>Support </a> <a className=' col-xs-12' href='https://code-of-conduct.freecodecamp.org'>Code of Conduct </a> <a className=' col-xs-12' href='https://privacy.freecodecamp.org'>Privacy Policy</a> <a className=' col-xs-12' href='https://terms-of-service.freecodecamp.org'>Terms of Service </a> </div> </div> <div className='col-lg-3 col-md-2 col-sm-2 col-xs-12'> <div className='row'> <b className='paddingLow  font-weight-bold col-xs-12'>Our Learning Resources</b> <a className=' col-xs-12' href='https://learn.freecodecamp.org'>Curriculum </a> <a className=' col-xs-12' href='https://guide.freecodecamp.org'>Guide </a> <a className=' col-xs-12' href='https://www.youtube.com/freecodecamp'>Youtube </a> <a className=' col-xs-12' href='https://podcast.freecodecamp.org'>Podcast </a> <a className=' col-xs-12' href='https://twitter.com/freecodecamp'>Twitter </a> <a className=' col-xs-12' href='https://medium.freecodecamp.org'>Medium </a> <a className=' col-xs-12' href='https://instagram.com/freecodecamp'>Instagram </a> </div> </div> </div> </div> </footer> ); } export default Footer; </ins>

import OfflineWarning from '../OfflineWarning'; import Flash from '../Flash'; import Header from '../Header'; <ins> import Footer from '../Footer'; </ins> import './global.css'; import './layout.css';

) : null} {children} </div> <ins> <Footer/> </ins> </Fragment> ); }

.btn-invert { background-color: #fff; color: #006400; <del> } </del>  No newline at end of file <ins> } </ins>

} #learn-app-wrapper { <del> margin: 0 2em; position: absolute; width: 100%; right: -1.4em; padding: 5px 10px 5px 10px; </del> <ins> overflow-x:hidden; </ins> } @media screen, (max-width: 767px) {

} .reflex-layout.reflex-container.vertical { <del> width: 100%; </del> margin: 0 18px; }