As per the mockup, we need to create the ThreeColumn component that will be used initially on the Homepage, but, as expected of any component, should be built in a way we can reuse it in any part of the platform in the future.

Once you have the most up-to-date master branch locally (git pull from your local master branch), create a new branch git checkout -b feature/add-three-column to get started.

Acceptance criteria:

• Create a component called ThreeColumn.js that will receive some properties (props) for the imageOne, imageTwo, imageThree, imageTitleOne, imageTitleTwo, imageTitleThree, imageContentOne, imageContentTwo, imageContentThree and the className for the section styling.

• Use the <Link /> object to link the image content info to about-us and contact-us pages for now.

• Make sure the component is responsive on mobile by stacking when the screen is < 768px

• Update the CHANGELOG.md file

Please, keep in mind that once you assign this task to yourself you'll need to complete it in 5 days

I've created a simple logo for our Slack channel this week and also this wider one (attached) that I think we could add to the top of our repo as a header before the main h1 title, what do you think? I've already added a similar image (a narrower version) to our social media preview so that when we share the repo link, we see something more customized.

To do so, we would have to save this attached image into our images-web-dev-path folder and, then, add some HTML and inline CSS as described here: https://stackoverflow.com/questions/12090472/github-readme-md-center-image. If you're up to the challenge, remove the other assignees from the issue, leave a comment saying this task is yours, and go for it! :D

Let me know if you have any questions! ;)

HOT TIP:
When submitting a Pull Request to solve an issue, mention the issue number on the PR description (not on the title) so that they both get linked.
You can use something like "Solves #26", "Referent to the issue #27", or Closes #27. By using Closes and the issue number, GitHub will automatically close the issue when the PR that is addressing it is merged into the master.

We need to add a 404.js page under pages so that the users can see a message and be redirected to the homepage if they choose so.
Go to your local master branch and run git pull to ensure your local project is in sync with the remote repository. Then, branch out from master by using git checkout -b feature/add-404-page and submit a PR where this issue will be linked.

Acceptance Criteria:

• By following this tutorial, create a new page called 404.js for the slider that will be imported into the Homepage.
• Populate that new NotFound static component with the same content presented in the tutorial above and add the option for returning to the Homepage.
• By adding a class under the globals.scss file, centralize the content and make the link to the Homepage grey (use the $accent-color presented on the _variables.scss file) with an opacity of 0.6 on hover and the default site mixin transition.

As per the mockup, we need to create two components from the attached SVG files that will be initially used on the Homepage, but, as expected of any component, should be built in a way we can reuse it in any part of the platform in the future.

Reference: https://www.sanity.io/guides/import-svg-files-in-react#c125367dce7c

Once you have the most up-to-date master branch locally (git pull from your local master branch), create a new branch git checkout -b feature/add-decorations to get started.

Acceptance criteria:

• Create two components called YellowBracket.js and BlueStick.js that will receive a className prop (for styling the position according to the section) and test how they scale on different screens by adding them to the homepage. You don't need to think about any proper styling for now since it will be defined according to the class added to it depending on the section.

• Update the CHANGELOG.md file

As a user, I want to see the cards from the CardsComponent.js displayed in a slider on mobile and tablets (screens < 769px) as per this reference website (and attached)

Once you have the most up-to-date master branch locally (git pull from your local master branch), create a new branch git checkout -b feature/implement-slider to get started. Check out our Wikipedia page to learn more about that process.

Please, keep in mind that once you assign this task to yourself you'll need to complete it in 10 days.

Approach suggestion:

Use the component from this Flickity React library

Acceptance Criteria:

• Ensure the CardsColumns.js is displayed in a slider on tablets and mobile as per the reference website on the Homepage with no console errors.
• Test the feature in many screen sizes, you can use the Inspect tool for that.
• Test the feature in many browsers, such as Chrome, Firefox, Edge, and Safari (MAC).
• Update the CHANGELOG.md file.

We need to update the grid section content at index.js (Home) to match the wireframe presented on #32.
Please branch out from master by using git checkout -b chore/update-home-content and submit a PR where this issue will be linked.

Acceptance Criteria:

• It follows the wireframe content concept (attached)

.

• Change the blue hover effect to grey, #666, and remove the link's references.

We need to add a new course section to the repository to include all WordPress related content.

This issue is related to create and upload videos as initial guides about how to use the PRs and other questions.
Feel free to suggest videos and topics on this issue!

We need to add a footer to the project by following our wireframes #32.
Please branch out from master by using git checkout -b feature/add-footer and submit a PR where this issue will be linked.

Acceptance Criteria:

• It follows the wireframe concept
• We can use (black, #000) for the general fonts and grey, #666, for active and hover links for now.
• We can use an opacity effect on hover for the social links

Desktop:

• On the first row, it has a one-level navbar on the left and a subscribe to my newsletter area on the right.
• On the second row, there is a small logo on the left (we can start with a placeholder) and a social link nav on the left.

Mobile:

• All the row items will span 100% on small devices (< 578px)

When resizing the screen to mobile, we notice that the nav items appear and disappear in an arbitrary way. Also, when clicking over the mobile hamburger menu to toggle the nav list on smaller screens, the nav items take a long time to be hidden which causes the impression they are at the top of the main page title.

Check it out on this video:
https://www.loom.com/share/b45047927b914d13a0f77a06f2e4f52d?sharedAppSource=team_library

A way to address that may be adding an overflow: hidden; property to the .nav element. That would hide the nav items completely unless we trigger the menu by activating the .navVisible. We can also create a simple toggle slide effect by adding a height transition to the visible nav.

• Branch out from the up-to-date master -> git checkout master , git pull and git checkout -b fix/mobile-nav-menu
• Apply the changes and test them thoroughly across many browsers: Chrome, Safari, Firefox, and Edge.

After defining the best slider/carousel library for our project, as required on issue #50, we need to implement it on the homepage by following its wireframe #32
Go to your local master branch and run git pull to ensure your local project is in sync with the remote repository. Then, branch out from master by using git checkout -b feature/add-slider-news and submit a PR where this issue will be linked.

Acceptance Criteria:

• Create a new component called NewsSlider for the slider that will be imported into the Homepage.
• Populate the blog cards with "lorem ipsum" content from a JSON file for now and link them to the first-post. We will refactor that later.
• Make sure the feature is responsive and works on all browsers but IE (who cares about IE, right? :P )

Hey web devs,

Now that we have our wireframe, #32, it is time to start talking about color and typography.

As @Marianasouza said on our slack group, we can think of:

• Typography
  2 fonts ( 1 primary and 1 secondary )
• Color Palette
  3-4 colors, 2-3 bases and 1-2 accents
  Coolors
  Color hunt

Let's make it beautiful!! =)

Here, we're reporting all the branding processes by considering points, such as project conceptual approach, core values, initial logo, type font, and colors concept.

Used tooling and how the design process happened
The project was done on Figma, Illustrator, and InVision through a sharing project where both designers worked together and can be accessed through their links.

Besides the tooling, how does the collaboration happen between the design team?
Zoom meetings and Slack conversations, detailed below.

How the ideas were presented to the team leader and to the developers?
The ideas were presented by adding the process to the Branding Process Report on Github and by following up with the comments and suggestions provided by the team.

Our Branding Process

Web Dev Path Concept

The Web Dev Path is a team of professional developers project that aims to provide a comprehensive path for people who seek to begin their web development journey. To do so, we're building a Next.js platform that will be a place to share ideas about web development and where Non-Profit Organizations can get help for their web products by sharing their project and needs and getting connected to volunteer junior web developers.

Core Values

Connection
Supportive [environment]
Energetic
Respect
Personal Development
Cooperation
Learning
Patience
Team Work
Knowledge
Sharing

Branding Ideation | Keywords

collaborative
friendly
approachable
supportive
growth-oriented
energetic/young
professional
credible

Colors

Color Psychology

Color Palette Selections:

Palette 01

Palette 02

Palette 03

Initial logos

Concept 01

Like tree roots, knowledge is distributed through streams at Web Dev Path. This concept is about that network and path suggested through the use of curly brackets - an element intended to link that concept to the world of coding.

Palette 01

Palette 02

Concept 02

This concept explores the curly brackets to create a "path" - a little more abstract. It also suggests two people facing each other "exchanging"[ideas].

Palette 01

Palette 02

Concept 02-B

Same as concept 02, in an alternative arrangement.

Palette 01

Palette 02

Concept 03

"Path" is explored in this concept as an ever-unfolding spiral - resembling the knowledge acquisition journey.

Palette 01

Palette 02

Concept 04

The logo is ideate as a road, followed by the words in different positions as an advance in the road, representing the progress that the user will experience.

Palette 01

Palette 02

Typography

This is an initial exploration of typography and the possibility of different font combinations.

Typefaces used: Inconsolata + Assistant

Typefaces used: Open Sans + Lato

Typefaces used: Open Sans + Assistant

Branding look and feel*

This is a sample of what is being envisioned for the branding look in terms of ELEMENTS and COLOUR. Youthful, modern, having coding elements in a way to portray "friendly".
(PS: This is NOT intended to represent UI. This is meant to convey an early-stage branding vision for feedback/discussion). Typography, colors, and approach are all up for debate.

Palette 01

Palette 02

Palette 03

Comment below your answers to the following:

• Do all the core values resonate with your vision about this project?
• What color palette best represents Web Dev Path's core values?
• What are your top 2 logo concepts that best represent Web Dev Path project? What do you like about them?
• What do you think about the overall branding concept? We will appreciate any comments, suggestions, or questions.

Meetings

Dates:

• 01/11, 18/11, 23/11 (+- 1hr duration)
• 29/11

Topics discussed:

• 01/11: Discussion on core requirements for web dev path's website with @Marianasouza
• 18/11: Logo conceptualization (sketching, ideation) [preliminary logo+branding 1/3]
• 23/11: Logo: first concepts (images attached) + selection of colours [preliminary logo+branding 2/3]
• Upcoming meeting on 29/11: Definition of branding color palette, typography, brand's look, and feel + final selection of logo concepts for proposal to be presented to the team on Nov 30th. [preliminary logo+branding 3/3]
  Release of logo and branding concepts for feedback: Nov 30th, 2021

As a user, I want to learn more about the project's purpose on the About Us page. To do so, the first section should be added to that page as per the mockup (and attached). The section will contain:

• A new component , the Title.js, that will wrap the contents "About Web Dev Path" and later "Our goals". That component will be wrapped by the Container.js to ensure margin consistency.
• New SVG components for the attached .svg files.
• 2 TwoColum.js components.
• Instead of the "#", we are using the attached brackets that will simulate an empty JS array "[ ]" in the first section.
• All the components will be added to the About Us page wrapped by a RevealContentContainer.js to ensure they are revealed on scrolling.

Once you have the most up-to-date master branch locally (git pull from your local master branch), create a new branch git checkout -b feature/about-us-first-section to get started. Check out our Wikipedia page to learn more about that process.

Please, keep in mind that once you assign this task to yourself you'll need to complete it in 10 days.

Acceptance Criteria:

• Ensure the new first section is added to the About Us page while replacing the content placeholder.
• Test the feature in many screen sizes, you can use the Inspect tool for that.
• Test the feature in many browsers, such as Chrome, Firefox, Edge, and Safari (MAC).
• Update the CHANGELOG.md file.

A release package has to be created so that we isolate this first basic boilerplate from the real platform that will be built by following the new design files.
The process will follow the GitHub guidelines

Acceptance criteria:

• Create a branch chore/release-1.0.0 where the attached CHANGELOG.md file will be added. That file should be updated to contain the main functionalities added to this first package
• Make sure the version number 1.0.0 is present on the package.json file

CHANGELOG.md

Our Slack invitation link added to the README is not working anymore :-/

After a quick research, I've found out that the invitation links expire after a month for "security reasons"

We need to investigate it a little further to decide if:

• there is a way to add a permanent link that will not expire.
• we're replacing that README link with the slack channel link itself followed by this tutorial.

Go to your local master branch and run git pull to ensure your local project is in sync with the remote repository. Then, branch out from master by using git checkout -b fix/update-slack-link and submit a PR where this issue will be linked.

Acceptance Criteria:

• Research the invitation link functionality and add your findings into your PR description.
• Update the README.md file accordingly.

This issue will be handled after merging PR #46

We need to convert all the CSS files into SCSS to start using Sass and its goodies, such as nesting, variables, and mixins.
Please branch out from master by using git checkout -b chore/convert-into-sass and submit a PR where this issue will be linked.

Acceptance Criteria:

• Convert all the .css files into .scss and change their respective references. Apply Sass principles, such as nesting, use of mixins, and variables by following the example of Footer.module.scss.
• On the /styles folder, create a partial .scss file called _variables.scss, where to add, initially, the font and background colors. That partial file will be imported on globals.scss as well on any Sass file that requires color's styling. You can use _mixins.scss as a model.

Hey everyone!
@ZahraB21 , @helgakern , @rebecatschiedel , @CarolDill , @kaileegiles

I've created a slack channel for us and we need to add a section with it in our repository.

Hope to see you all there!

HOT TIP:
When submitting a Pull Request to solve an issue, mention the issue number on the PR description (not on the title) so that they both get linked.
You can use something like "Solves #21", "Referent to the issue #21", or Closes #21. By using Closes and the issue number, GitHub will automatically close the issue when the PR that is addressing it is merged into the master.

We need to add reCaptcha to our newsletter subscription form. To do so, the project reCaptcha keys NEXT_PUBLIC_RECAPTCHA_SITE_KEY and RECAPTCHA_SECRET_KEY have already been created and added Netlify. You will have to ask for the keys information to @mariana-caldas on Slack and add that to your local .env file.

Once you have the most up-to-date master branch locally (git pull from your local master branch), create a new branch git checkout -b feature/add-recaptcha to get started.
Check out our Wikipedia page to learn more about the process.

Please, keep in mind that once you assign this task to yourself you'll need to complete it in 10 days.

Approaches' suggestions:

1
2

Acceptance Criteria:

• When trying to subscribe to the newsletter, the user you have to solve the reCaptcha challenge before seeing the success subscription message.

• Update the CHANGELOG.md file

We need to set the footer copyright date dynamically.
Please branch out from master by using git checkout -b chore/set-footer-copyright-dynamically and submit a PR where this issue will be linked.

Acceptance Criteria:

• On Footer.js file, set the footer copyright date dynamically by using this approach or a similar one. You can store that JS getFullYear functionality in a function or variable and call it inside the copyright block as we see here

As per the mockup, we need to create the Non Profit section. We can adapt the TwoColumn component to use it for that section as well. To do so, you need to:

• allow the component to receive props for the background-color and text/content color
• use conditional rendering for the inner__image section in a way that the section is only displayed when there is an image added to the component.

This issue is related to #77 , but it's not a problem to finish it without the respective decoration because it can be positioned later.

Once you have the most up-to-date master branch locally (git pull from your local master branch), create a new branch git checkout -b feature/add-nonprofit-homepage to get started.

Acceptance criteria:

• Add the new section by adapting the TwoColumn.js components with the new required logic. Make sure the other section still works as intended.

• Make sure the component is responsive on mobile by stacking when the screen is < 768px

• Update the CHANGELOG.md file

The first step in creating out website is to have wireframes. This would allow us to understand the structure of our site.

We can use MockingBird for the wireframes.

Hello, wonderful web devs,

this is an issue to gather ideas for our project, how and what we want it to look like, and what would be the best technology to use in order to achieve our goals: Gatsby or NextJS.

Let's get creative!!

We need to create a description for the section about:

No PR needed for this task. Please just send a comment with your idea of a nice and short description (no more than two sentences) to the section ;)

Thanks!

We need to add some React course links under the JavaScript section.

HOT TIP:
When submitting a Pull Request to solve an issue, mention the issue number on the PR description (not on the title) so that they both get linked.
You can use something like "Solves #26", "Referent to the issue #26", or Closes #26. By using Closes and the issue number, GitHub will automatically close the issue when the PR that is addressing it is merged into the master.

After merging PR #72 where the project Next.js version is being updated, we need to create a Newsletter component. As per the design file, it will be added just above the footer.
The footer also needs to have its styling updated to match the mockup.

Once you have the most up-to-date master branch locally (git pull from your local master branch), create a new branch git checkout -b feature/newsletter-footer-styling to get started.

Acceptance criteria

By following the mockup designs :

• Create a Newsletter component with its functionality that is currently present on the footer and add just above the main Footer component only on the Homepage for now. Make sure the Newsletter component is fully responsive on small screens
• Style the Footer component by considering the new white logo that will be extracted as an SVG from the design files. Make sure the Footer component remains responsive on small devices.

We need to add a new course section to the repository to include all Python-related content.

HOT TIP: When submitting a Pull Request to solve an issue, mention the issue number on the PR description (not on the title) so that they both get linked.
You can use something like "Solves #16" or "Referent to the issue #16".

I'll add a video explaining all the PR parts such as the title, the importance of the commit description, the responsibilities of the assignee, where to assign reviewers, the importance of the PR description, and how to link that PR description with an issue.

To make sure we all keep the same configurations while coding, we need to:

• Install and use VS Code when working with the project
• Set prettier as our default code formatter

After installing Prettier on your extensions, check if you have those configurations activated by going to File-> Preferences -> Settings and using the search bar to define:

• The Default Formatter to Prettier
• To set Format On Save as the default
• Check if you have Tab Size to 4 to prevent any indentation issues

Finally :), let's add a .prettierrc file to define the use of single quotes and no arrow on single parameter functions.

Go to your local master branch and run git pull to ensure your local project is in sync with the remote repository. Then, branch out from master by using git checkout -b chore/add-prettier-config and submit a PR where this issue will be linked.

Acceptance Criteria:

After setting Prettier as your default code formatter, follow this example to add the .prettierrc configuration file into the project.

Hello, wonderful web devs,

this is an issue to set the project structure in NextJS.
@Marianasouza will locally create the project and do a pull request to our repository, this way we can all understand each step of the project.

Thank you all!!

Let's start coding!!

As per the mockup, we need to create the TwoColumn component that will be used initially on the Homepage, but, as expected of any component, should be built in a way we can reuse it in any part of the platform in the future.

Once you have the most up-to-date master branch locally (git pull from your local master branch), create a new branch git checkout -b feature/add-two-column to get started.

Acceptance criteria:

• Create a component called TwoColumn.js that will receive some properties (props) for the image, title, content, and the className rowOrder. The rowOrder will be an optional "class" passed through the component to allow its order can be reversed if necessary. Take a look at the Flexbox documentation, especially to the flex-direction: row-reverse property.

• When clicking on the "learn more" button, the user is redirected to the about-us page. Bonus points if you manage to transform that button into a component too with some props for a className (that will control its styling), text, and link <3

• Make sure the component is responsive on mobile by stacking when the screen is < 768px

We need to add a new course section to the repository to include all JS related content.

As a user, I want to see all the sections but the Hero.js being revealed only on scrolling and with a translateY effect that simulates a smooth movement towards the top as per this reference website. This is the reference website codebase.

Once you have the most up-to-date master branch locally (git pull from your local master branch), create a new branch git checkout -b feature/reveal-sections-scrolling to get started. Check out our Wikipedia page to learn more about the process.

Please, keep in mind that once you assign this task to yourself you'll need to complete it in 10 days.

Approaches' suggestions:

1. Intersection Observer API with useRef, useState, and UseEffect
2. Use a library, React Intersection Observer

Acceptance Criteria:

• Make sure all the homepage sections but the hero are displayed only on scrolling as per the reference website with no console errors both on desktop and mobile.
• Test the feature in many screen sizes, you can use the Inspect tool for that.
• Test the feature in many browsers, such as Chrome, Firefox, Edge, and Safari (MAC).
• Update the CHANGELOG.md file.

Hey dear web devs <3,

I've bought the domain webdevpath.co so that we can build a real platform in a collaborative environment! So, the next step is to start doing what we've been doing so far with real code simulating a real-world scenario. It's going to be a place where we can share our discoveries related to web development.

Initially, I'm thinking about creating something inspired by this idea https://www.samanthaming.com/ by using Gatsby and following the agile methodology. And we already have a project!

I'm keeping our conversation on Slack, but I just thought that would be nice to make an official announcement here :D

If you feel up to the challenge, I invite you all to take a look at Gatsby and React documentation to get ready! Feedback and ideas are MORE than welcome!

Feel free to reach out here or on Slack if you have any questions. Talk soon!

@ZahraB21 @rebecatschiedel @CarolDill @helgakern @kaileegiles

Steps:

• Meeting in January to define main ideas for the platform (technologies/purpose/initial pages)
• Initial wireframes (issue #32 )

We need to set the footer copyright with a dynamic date.
Once you have the most up-to-date master branch locally (git pull from your local master branch), create a new branch git checkout -b feature/add-footer-copyright to get started.
Check out our Wikipedia page to learn more about the process.

Acceptance Criteria:

• On Footer.js component, we should add the following sentence block with a date set dynamically.

Web Dev Path {date}. All rights reserved.

• The content has to be white and centralized.
• Check if the sentence keeps centralized and it is the last element of the page on mobile
• Update the CHANGELOG.md file

Please, keep in mind that once you assign this task to yourself you'll need to complete it in 5 days

Approaches' suggestion:

• 1
• 2

We need to fix the WordPress section by organizing the links into item lists, such as we see in the HTML/CSS section:

HOT TIP: When submitting a Pull Request to solve an issue, mention the issue number on the PR description (not on the title) so that they both get linked.
You can use something like "Solves #20" or "Closes #20".

We need to select a slider/carousel library to implement the news section on the homepage.
https://www.reddit.com/r/nextjs/comments/n5cztk/a_good_slider_carousel_library/

Acceptance Criteria

When selecting a library, check if:

• its repository has been updated recently and has many forks and good comments.
• it is compatible with the stack you're using at the moment.
• it is easy to implement and has good documentation.

We need to create a Meta component by following this example - from min 1:04 ahead.
Please branch out from master by using `git checkout -b feature/add-meta-component and submit a PR where this issue will be linked.

Acceptance Criteria:

• It follows the video's concepts.
• Add it to the Layout component wrapper, just above the Nav as per the video, so that will appear on every page.
• The title object content: "Web Dev Path"
• keywords: "web development, mentoring, volunteering, Next.js"
• description: "We are a team of professional women with a web development background. We aim to provide a comprehensive path and mentoring for people who seek to begin their web development journey."

Since Next.js now provides an <Image /> component through its next/image API, we need to replace the <img> by that new <Image /> component on the Nav and Footer components.
Go to your local master branch and run git pull to ensure your local project is in sync with the remote repository. Then, branch out from master by using git checkout -b feature/add-image-component and submit a PR where this issue will be linked.

Acceptance Criteria:

• By following this tutorial first 4 min instructions, replace the logo <img /> on the Nav.js and Footer.js. Please do the same to the social media images on the Footer.js too.

We need to add a header navbar to the project by following the wireframes presented on #32.
Please branch out from master by using git checkout -b feature/add-header-navbar and submit a PR where this issue will be linked.

Acceptance Criteria:

• It follows the wireframe concept and has a small logo on the left (we can start with a placeholder) and the nav links justified between on the right on the desktop.
• On mobile and tablet ( < 768px), the navbar will have a hamburger menu that will show the items left-aligned when clicked.
• We can use #000 (black) for the general fonts and grey, #666, for active and hover links for now.

We need to update the favicon (besides adding the other icon elements) and add an Open Graph (OG) file to our project.
You'll find a folder with all the icons and the OG file attached. The icons were generated by using this site.
This is the official documentation to learn more about why the OG file is important.

• Once you have the most up-to-date master branch locally (git pull from your local master branch), create a new branch git checkout -b feature/add-favicon-og to get started.

• Unzip the attached favicon folder and add it to \public . Then, add the following code into the Meta.js component by replacing the current favicon.co. Please notice you're having to adapt the path to include the new folder.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#023047">
<meta name="msapplication-TileColor" content="#023047">
<meta name="theme-color" content="#ffffff">

• Also on Meta.js, reference the attached OG file by considering the meta tags present on the <head> on this website.

Acceptance criteria:

• The new favicon should appear along with the website title.

• The new OG file should appear when sharing the website link in Slack. Sometimes it takes hours to see it, but you can try to check that by using the Netlify preview link provided when submitting the PR.

• Update the CHANGELOG.md file

Please, keep in mind that once you assign this task to yourself you'll need to complete it in 5 days

favicon.zip

x

We need to research and report findings related to a CMS (blogging) implementation for our project.

CMS requirements:

• Integrates with Next.js in the most straightforward way.
• Easy UI so anyone, not just a developer, could access it and add the article with support for images, links, and videos.
• An affordable solution, preferably with an initial free version so we can test it out beforehand.

Please report your findings in the comments or in a Google Stylesheet doc that can be shared here.

As per the design files, homepage and about-us, we need to create a Header.js component to wrap the navbar.

Since the content and image are going to be different on the different pages, we'll need to render the content conditionally per page by using the useRouter hook pathname. We have an example of that hook on the Nav.js component.

Once you have the most up-to-date master branch locally (git pull from your local master branch), create a new branch git checkout -b feature/add-header-component to get started.
Check out our Wikipedia page to learn more about the process.

Please, keep in mind that once you assign this task to yourself you'll need to complete it in 15 days.

Approach suggestion:

• The component should have props that allow to set the title , content, and a customClassname that can be used to set the title color depending on the the page. The homepage also requires we add an special prop, the title_dynamic, that will going to be a yellow <span></span> with content that will change dynamically in the future.

• The component will wrap the Nav.js on Layout.js

• The component should have a 100% height as per this reference site

• Create a JSON or js file under utils where the pages' content, the props content, will be added. Map over that file on Layout.js, where the Header.js will be referred and render the content conditionally per page by using the useRouter hook pathname. We have an example of that hook on the Nav.js component.

Acceptance criteria:

• Once we access the homepage, we need to see the correct header as per mockup, which means its proper image and content without the button.

• Once we access the about-us page, we need to see the correct header as per mockup, which means its proper image and content.

• Make sure the component is responsive in all screen sizes and works on Chrome, Firefox, Edge, and Safari (Mac). Use this site as a reference.

• Update the CHANGELOG.md file

After adding our footer module #38 and creating the MX records #39, we need to integrate the newsletter functionality with MailChimp.
Please branch out from master by using git checkout -b feature/integrate-mailchimp and submit a PR where this issue will be linked.

Acceptance criteria:

• Configure Mailchimp by using the email provided from #39

Resources:

• https://blog.nona.digital/creating-a-newsletter-with-next-js-and-mailchimp/

Considering that it's important to learn how to think algorithmically to solve problems, we need to add the CS50 course link under Courses and Certifications.

We need to add a new course section to the repository to include all PHP related content.

HOT TIP: When submitting a Pull Request to solve an issue, mention the issue number on the PR description (not on the title) so that they both get linked.
You can use something like "Solves #15" or "Referent to the issue #15".

We need to create a session called "Launching a website".
We could start adding this tutorial from freeCodeCamp:

• How to Put a Website Online: Template, Coding, Domain, Hosting, and DNS

HOT TIP:
When submitting a Pull Request to solve an issue, mention the issue number on the PR description (not on the title) so that they both get linked.
You can use something like "Solves #21", "Referent to the issue #21", or Closes #21. By using Closes and the issue number, GitHub will automatically close the issue when the PR that is addressing it is merged into the master.

As per the mockup, we need to update the navbar styles and also implement some logic when scrolling.

• This issue has to be implemented as soon as PR #82 is merged because we're going to use the new <ButtonLink /> styles prop to adapt the "Join us` button width and path, which will be to our slack channel.

• For now, since navbar items are white, add our dark-blue color as a background. Replace the current logo with the SVG present on the footer.

• By using this reference website -> //Sticky Navigation with Intersection Observer API, add a sticky className to the navbar with a position: sticky; when the page scrolls > 300px. When implementing that logic, make sure the white logo is replaced with its black version (attached), the navbar background color becomes white and the navbar items color changes to the project $primary-content-color.

• Implement the same mobile logic and styling we can see on this reference website

Once you have the most up-to-date master branch locally (git pull from your local master branch), create a new branch git checkout -b chore/update-navbar to get started.

Acceptance criteria:

• Update the navbar by considering the mockup styles.

• Implement the sticky navigation logic and styles.

• Implement the mobile hamburger functionality as seen on the reference website.

• Update the CHANGELOG.md file

We need to create MX records so that we can receive and send emails, especially from the newsletter functionality added on #38 .
We'll probably use GoDaddy, but it's TBD.