Capstone project module 1 : Togoville Jazz festival 2022 web page #1

Matthieu96Code · 2023-02-09T09:41:40Z

This project follows design guidelines based on a Cindy Shin design.

It shows:

Two pages: the home page and the about me page
A responsiveness with mobile (up to 768px wide) and desktop (768px or wider)
hamburger button shows the menu on the mobile version
the logo on the nav-bar link to the home page and also "home page" on the menu
"About" on the nav bar and the menu link to "About me" page
Featured speakers section is dynamically added to the home page with javaScript
A README file with a video describing this project

amejid

Good job so far!
There are some issues that you still need to work on to go to the next project but you are almost there!

Highlights

Linter checks passing ✔️
Meaningful commits ✔️
Video highlights the website on different screen sizes ✔️
Correct use of Github flow ✔️
Descriptive PR ✔️

Required Changes ♻️

Check the comments under the review.

Optional suggestions

Every comment with the [OPTIONAL] prefix is not crucial enough to stop the approval of this PR. However, I strongly recommend you to take them into account as they can make your code better.

Cheers and Happy coding!👏👏👏

Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please, remember to tag me in your question so I can receive the notification.

Please, do not open a new Pull Request for re-reviews. You should use the same Pull Request submitted for the first review, either valid or invalid unless it is requested otherwise.

As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.

amejid · 2023-02-09T11:11:43Z

index.html

+        <nav class="nav-bar">
+            <div class="hamburger-class">
+                <a href="#" ><img src="./img/iconmonstr-menu-1-240.png" alt="menu button"></a>
+            </div>
+            <ul class="menu-bar">
+                <li class="menu-logo" ><a href="./index.html"><img src="./img/level production icon 3.png" alt="level production icon"></a></li>
+                <li><a class="lato-font-black aboutme-link" href="./aboutme.html">About</a></li>
+                <li><a class="lato-font-black" href="#program">Program</a></li>
+                <li><a class="lato-font-black" href="#">Join</a></li>
+                <li><a class="lato-font-black" href="#sponsor">Sponsor</a></li>
+                <li><a class="lato-font-black" href="#">News</a></li>
+                <li class="campaign"><a class="lato-font-red" href="#">LP campaign</a></li>
+            </ul>
+        </nav> 


Amazing job with the design and the interactions. There are some minor details remaining to match the template.
I think it is semantically more correct to put the nav in the header section. Kindly move it to the header section. 🤝️
Please decrease the horizontal padding on the LP campaign button to match the design. 😎️
Kindly implement these changes on the About page too.

Your design Template

amejid · 2023-02-09T11:15:49Z

index.html

+                        <div>
+                            <img class="program-content" src="./img/root/debate.png" alt="debate icon">
+                            <h3 class="program-centent lato-font-red">Debate</h3>
+                            <p class="program-content lato-font-black">learn from our special guests and interact by answering and asking questions</p>
+                        </div>


Since this part is a self-contained entity on the page, I think it would be better to use the semantic article tag instead of a div. Kindly do the same for all 5 cards. 🧐️ You can check this MDN documentation to get more insight on when to use the article element.

Please update the font-size of the description paragraph. Currently, the font-size on the title and description are the same.

amejid · 2023-02-09T11:21:51Z

index.html

+
+        </section>
+
+        <section class="main-program" id="program">


In my opinion, there is not enough color contrast between the background image and the color of the cards. I think it would be great if you use a lighter color to match the template. 🙂️

Your design

Template

amejid · 2023-02-09T11:31:14Z

js/main.js

+SpeakersSection.append(moreSpeakers);
+
+function callSpeakers(guest) {
+  const everyFeatureDiv = document.createElement('div');


I suggest you use an article element instead of a div for the reasons discussed earlier. Please update the font-size and font-style to match the design. The orange text is in italics style on the design. 🤓️ There's also a pattern behind the image. Please update it accordingly.

Your design Template

amejid · 2023-02-09T11:33:47Z

aboutme.html

+    <main>
+        <nav class="nav-bar">
+            <div class="hamburger-class">
+                <a href="#" ><img src="./img/iconmonstr-menu-1-240.png" alt=""></a>


To make our website accessible to everyone, it is a best practice to provide an alt attribute on all images. Kindly add the alt attribute to this one. ✍️

amejid · 2023-02-09T11:37:25Z

aboutme.html

+        <section class="partner-pool" id="sponsor">
+            <h3 class="lato-font-black">Partner<span class="underline-style"></span></h3>
+            <ul class="partner-logo">
+                <li><img class="partner" src="./img/logo/inst fr 2.jpg" alt="fanga music logo"></li>
+                <li><img class="partner" src="./img/logo/fangamusic.jpg" alt="fanga music logo"></li>
+                <li><img class="partner" src="./img/logo/goethe inst 2.jpg" alt="goet institute logo"></li>
+                <li><img class="partner" src="./img/logo/onomo 1.jpg" alt="onomo hotel logo"></li>
+                <li><img class="partner" src="./img/logo/cafe info 1.png" alt="cafe informatique logo"></li>
+                <li><img class="partner" src="./img/logo/moov on arts 1.png" alt="aldus logo"></li>
+            </ul>
+        </section>
+
+    </main>
+    <footer class="copyright">
+        <img src="./img/level production icon 3.png" alt="level production icon">
+        <div class="right-reseved">
+            <p class="lato-font-black">2022 Level Production.</p>
+            <p class="lato-font-black">Some Right Reserved.</p>
+        </div>
+    </footer>


According to the template the partner section is not displayed on the About page. The footer also has a dark background. Kindly implement it accordingly. 🧐️

Your design

Template

Hi @amejid
Thank you for your insightful reviews. I have a couple of questions regarding the design of the mobile version of our website:

Should the partner section be removed from the About Me page for the mobile version?

Is it acceptable to maintain the current light color for the footer on the mobile version?

Hi @Matthieu96Code, the partner section should be displayed on the About page for the mobile version.
The footer should be light on the mobile version. The color variation is required for the desktop version only.

OyePriscilla

Hi @Matthieu96Code😄,

Your project is complete! There is nothing else to say other than... it's time to merge it
Congratulations! 🎉

Highlights

✔️GitHub flow observed 👍
✔️App worked properly 👍
✔️Made required changes 👍

Optional suggestions

Every comment with the [OPTIONAL] prefix won't stop the approval of this PR. However, I strongly recommend you to take them into account as they can make your code better. Some of them were simply missed by the previous reviewer and addressing them will really improve your application.

Cheers and Happy coding!👏👏👏

Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please, remember to tag me in your question so I can receive the notification.

As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.

OyePriscilla · 2023-02-09T16:32:45Z

js/menu.js

+  const mainMenuList = document.querySelector('.main-menu');
+
+  const menuList = document.querySelectorAll('.main-menu');
+  console.log(menuList);


[optional] Please kindly remove this console.log statement, there are serious security implications leaving that kind of info lying around and it also increase computational time. ℹ️

OyePriscilla · 2023-02-09T16:36:41Z

aboutme.html

+            </div>
+            <ul class="menu-bar">
+                <li class="menu-logo" ><a href="./index.html"><img src="./img/level production icon 3.png" alt="level production icon"></a></li>
+                <li><a class="lato-font-black aboutme-link" href="./aboutme.html">About</a></li>


[optional] I think it will be more professional to have homepage link in About page, not aboutpage link in About page. Kindly implement this for both mobile and desktop versions. 👍

Hi @OyePriscilla,
Thank you for your review.
Please do I need to replace the "About" with "Home page" in the nav bar when I will be on the about me page?
Please note that my logo is already linked to the home page in line 25 of aboutme.html

@Matthieu96Code, yes please! This will enhance the user experience. 👍

Matthieu96Code added 30 commits February 6, 2023 08:00

add index.html file with minimal structure

429f52a

add project html structure and Lorem ipsum for test

c91aa85

add lato font

b9c928e

add primaries style of font in css file

402fd1a

add style for nav-bar-first approach

be48f26

add style for headline and main program section-first approach

ad7e3a9

add style for partner section and footer-first approach

63fda16

add images forlder and set media querie for screen wider than 768px

6228ea1

add main.js file add an object with draft data for speaker in js file

eea3485

add featured speakers dynamically in with js file

0c7b8d1

style featured spekers section - first approach

5cec309

add aboutme html file and nav-bars to aboutme file

a883e8b

add sections and footer to aboutme html with a styling

29d43d4

add picture, imrpove styling

fcabc6a

add partners logo, speakers picture and desktop nav bar

fa467c3

styled menu bar on desktop version

584909d

add style to headline section in desktop

bc3e220

add style for main program section

7ff1230

add style at partner section and footer on desktop version

5c2ccf2

add more button to speakers section and dynamic function

30ebaf8

styling past event section in aboutme page

d3bc66c

fill imformation and update partner logo

f0d1834

add menu page appear function

8646d41

add style to menu list

79bf4dd

link some menu item to the his section

1a8dcd2

add real content on home page according to the topic

5c51b82

add right content acrording to the topic choosen on aboutme page

b44b286

add html css linters and fix linters errors

b955a4d

add readme template file

1d19a79

install eslint

8af3e99

Matthieu96Code added 6 commits February 8, 2023 20:01

fix js linters error

1320552

fill the readme file and transition when hover some element

9ace3ec

transition on past event section

e7860a2

deployement, update the readme file

0ae2b4a

fix css linters error descending-specificity

cbe4961

add description video link to readme file

7fe272c

Matthieu96Code temporarily deployed to github-pages February 9, 2023 09:45 — with GitHub Pages Inactive

amejid suggested changes Feb 9, 2023

View reviewed changes

Matthieu96Code added 6 commits February 9, 2023 12:22

move the nav tag in the header in html files

28941b6

LP campaign padding decrease

4fbb378

change card's dic on article tag and update font size

7422c6c

add a lighter color for the cards

f490938

update featured speakers font size

2713363

fix css linters error

c33069d

Matthieu96Code temporarily deployed to github-pages February 9, 2023 16:06 — with GitHub Pages Inactive

OyePriscilla approved these changes Feb 9, 2023

View reviewed changes

remove extra console.log() from menu.js file

e00c049

Matthieu96Code temporarily deployed to github-pages February 9, 2023 18:07 — with GitHub Pages Inactive

add home on the about me page nav bar

316c194

Matthieu96Code deployed to github-pages February 10, 2023 07:10 — with GitHub Pages View deployment

Matthieu96Code merged commit 0050b5c into main Feb 10, 2023

Capstone project module 1 : Togoville Jazz festival 2022 web page #1

Capstone project module 1 : Togoville Jazz festival 2022 web page #1

Uh oh!

Conversation

Matthieu96Code commented Feb 9, 2023

Uh oh!

amejid left a comment

Choose a reason for hiding this comment

Highlights

Required Changes ♻️

Optional suggestions

Uh oh!

amejid Feb 9, 2023 • edited by Matthieu96Code Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amejid Feb 9, 2023 • edited by Matthieu96Code Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amejid Feb 9, 2023 • edited by Matthieu96Code Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amejid Feb 9, 2023 • edited by Matthieu96Code Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amejid Feb 9, 2023 • edited by Matthieu96Code Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amejid Feb 9, 2023 • edited by Matthieu96Code Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Matthieu96Code Feb 9, 2023

Choose a reason for hiding this comment

Uh oh!

amejid Feb 9, 2023

Choose a reason for hiding this comment

Uh oh!

OyePriscilla left a comment

Choose a reason for hiding this comment

Highlights

Optional suggestions

Uh oh!

OyePriscilla Feb 9, 2023

Choose a reason for hiding this comment

Uh oh!

OyePriscilla Feb 9, 2023

Choose a reason for hiding this comment

Uh oh!

Matthieu96Code Feb 9, 2023

Choose a reason for hiding this comment

Uh oh!

OyePriscilla Feb 9, 2023

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

amejid Feb 9, 2023 •

edited by Matthieu96Code

Loading

amejid Feb 9, 2023 •

edited by Matthieu96Code

Loading

amejid Feb 9, 2023 •

edited by Matthieu96Code

Loading

amejid Feb 9, 2023 •

edited by Matthieu96Code

Loading

amejid Feb 9, 2023 •

edited by Matthieu96Code

Loading

amejid Feb 9, 2023 •

edited by Matthieu96Code

Loading