New Website Page - Learn

[excentrickristy]

At @shabnammayel 's request we have created a design for a new page that we would like to exist at https://jakarta.ee/learn/

Design Preview: https://invis.io/2D13DAXWGWK5#/475076177_Learn_Page_1

Design File (1st Artboard): https://www.figma.com/file/Qx9ZrAztX66Rl5wqmWuFUV/Jakarta-EE-Learn-%2B-Starter-Guides?type=design&node-id=0%3A1&mode=design&t=EM3JExlb9Sgl8mU7-1

While we only have 4 starter guides currently, the design is meant to always show and link to the 4 latest starter guides.
The documentation section links can be found here: https://jakarta.ee/resources/#documentation

The Generate a project section should link to the starter: https://start.jakarta.ee/

And this is the overview course link: https://www.linkedin.com/learning/jakarta-ee-overview

[oliviergoulet5]

Hi @excentrickristy, I began implementing the learn page. Could I have the following assets:

• The image in the "Starter Guides" section
• The image in the "Generate a Jakarta EE Project" section
• The image in the "Jakarta EE Overview Course" section

I am planning to use the code file icons from FontAwesome v4: https://fontawesome.com/v4/icon/file-code-o

@shabnammayel, Could I have the text for the "Starter Guides" and "Generate a Jakarta EE Project" sections? The design preview shows Lorem text.

I also need the documentation links listed.

FYI, here is my progress: https://deploy-preview-1759--jakartaee.netlify.app/learn/

[excentrickristy]

here you go!

[excentrickristy]

Suggested text for the starter guides section:
These starter guides provide quick, hands-on instructions for building different applications using Jakarta EE.

I think for the documentation section, we can probably just remove the lorem ipsum and this section can just be the list.

What do you think @shabnammayel ?

[excentrickristy]

New link for the Jakarta EE Tutorial: https://jakarta.ee/learn/docs/jakartaee-tutorial/current/index.html

[oliviergoulet5]

@excentrickristy The preview has been updated with the images and the tutorial link!

@shabnammayel I still require the text content for the remaining sections and the other documentation links. I removed the text for the documentation section, as @excentrickristy suggested, which looks good, in my opinion.

We will also need to figure out where to link this page. We had an existing discussion on where to link it here: #1720.

[excentrickristy]

@oliviergoulet5 can we do font weight 600 and color #1b208b for the text links on this page? I know it wasn't the original design but it will make it stand out.

Also, can you do padding: 8px 15px on the buttons to make them a little more rectangular? This matches what is being used across the site.

For the navigation, @shabnammayel and I had discussed the changes she wants, I was waiting until this page was ready and I was going to file another ticket with the changes. because it involves messing around with the resource page content as well. Would you like me to tack it on here instead?

[oliviergoulet5]

@excentrickristy Reference the buttons; we use 8px across the site except for the navbar CTAs.

8px 15px does look better, and I can make all buttons use it.

[oliviergoulet5]

The preview now has the new link typography and button padding.

[excentrickristy]

I like it! Could maybe use just a bit more white space under the 3rd section with the course.

@oliviergoulet5 would you like me to put all of the nav changes here?

[oliviergoulet5]

Could maybe use just a bit more white space under the 3rd section with the course.

Sure thing!

would you like me to put all of the nav changes here?

Yes, here is fine

[excentrickristy]

@oliviergoulet5 I apologize, I meant to get this to you earlier! There are a few things that need to be done for the learn page to launch.

• Remove from Resources page: Starter for Jakarta EE, Documentation, JakartaOne Livestream
• Remove from Resources menu: Documentation, Starter for Jakarta EE, Jakarta EE Overview Course
• Move Resources menu to live under Community, so resources will be an item under the community menu but when you click on it you will get a 3rd level nav with the resources menu items
• Create a Learn menu item at the end of the navigation, with a dropdown for Overview, Documentation (anchored within the page), Starter Guides, and Jakarta EE Overview Course

[oliviergoulet5]

Here is a preview @excentrickristy: https://deploy-preview-1759--jakartaee.netlify.app/

[excentrickristy]

Wow, that was quick, thanks so much.

I do see an issue though with the 3rd level menu at tablet screen sizes - it's getting cut off.

Is it possible to only show the 3rd level background when someone clicks resources?

I know you are running out of time here before holidays. maybe as an interim measure we can just add the resources page itself to the community dropdown menu and you could work on the 3rd level menu when you get back so we can launch the learn and starter guides pages.

[oliviergoulet5]

@excentrickristy We have an issue tracking the overflowing menu bug #1727, and there's a patch written for it.

As for the menu, I'll do the interim measure to save time. Let's create an issue for this separately.

[oliviergoulet5]

Here is a preview @excentrickristy: https://deploy-preview-1759--jakartaee.netlify.app/

FYI @ZacharySabourin will be taking over this issue from now on.

[excentrickristy]

Just need @shabnammayel to add her +1 here and we can go live

[shabnammayel]

This page looks great! But we need to move the items that are currently under resources and not under learn page anymore to the community page. Do we have that ready so we can go live with both? otherwise those items will be missing from the website @oliviergoulet5 and @excentrickristy

[shabnammayel]

@chrisguindon just checked with Kristy and noticed that you already have the resources in the community dropdown in the preview page. So we should be good to go live! thank you all.

[ZacharySabourin]

These changes are now live! https://jakarta.ee/