Description

In this PR, I added a website map to the About page, and I made the top section background image fit perfectly.

General requirements

• [x] There are no linter errors.
• [x] Followed the Github flow.
• [x] The documentation is professional.

HTML/CSS and JavaScript requirements

• [x] Followed the list of best practices for HTML & CSS.
• [x] Followed the list of best practices for JavaScript

Description

In this capstone project, I built an online website based on an Original design idea by Cindy Shin in Behance. This PR contains all the features implemented in order to achieve the milestones described in the project Project Guidelines

General requirements

• [x] There are no linter errors.
• [x] Followed the Github flow.
• [x] The documentation is professional.

HTML/CSS and JavaScript requirements

• [x] Followed the list of best practices for HTML & CSS.
• [x] Followed the list of best practices for JavaScript

Capstone project requirements

• [x] The content of the page is mostly personalized to fit the theme of a Chess Conference.

• [x] I followed the design guidelines, including:

  • Colors.
  • Typography: font face, size, and weight.
  • Layout: composition and space between elements.

• [x] I tried to make the pages look almost identical to the original design. However, I took some liberties in changing the text content, the images, and some colors for the sake of making the project unique.

• [x] I built two pages

  • The home page.
  • The about page.

• [x] Each of the pages are fairly responsive and fit both mobile and desktop sizes

  • Mobile: up to 768px wide.
  • Desktop: 768px or wider.

• [x] Interactions

  • Links
    • The home page has a link in the menu to the about page.
    • The about page has a link in the menu to the home page.
    • The logo in the header links to the home page.
  • Mobile menu
    • When the user clicks (or taps) the hamburger button on the header, the mobile menu appears over the page.
    • The mobile menu design is consistent with the design of the page (colors, typography, spacings, etc.).
    • The mobile menu has a close (X) button that closes the menu.

• [x] Dynamic page

  • The section "Featured speakers" is created dynamically in JavaScript.

Additional notes

I added some animations and transitions to make the page more interactive. I apologize for the submission delays. The styling using vanilla CSS took much more time than expected. I wanted to use Tailwind for this project, but I couldn't get a timely response on whether I could use it or not. Link. Thus, I started Styling about 24 hours late.

I made a video demo for my website.

Thank you for taking the time to review this pull request. Happy reviewing :grinning:

Description

This PR contains the tasks for this milestone:

Milestone 4 - interactions

Implement the user interactions: hover and active states.

Fix the issues raised in peer code review #3

General requirements

• [x] There are no linter errors.
• [x] Followed the Github flow.
• [x] The documentation is professional.

HTML/CSS and JavaScript requirements

• [x] Followed the list of best practices for HTML & CSS.
• [x] Followed the list of best practices for JavaScript

Thank you for taking the time to review this pull request.

Description

This PR contains the tasks for this milestone:

Milestone 5 - dynamic page & Milestone 4 - interactions (1.5h)

Implement the user interactions: link, mobile menu. Deploy the project. Implement the section "Featured speakers" with dynamic HTML. Add bg images to all sections

General requirements

• [x] There are no linter errors.
• [x] Followed the Github flow.
• [x] The documentation is professional.

HTML/CSS and JavaScript requirements

• [x] Followed the list of best practices for HTML & CSS.
• [x] Followed the list of best practices for JavaScript

Thank you for taking the time to review this pull request.

Please look into the following issues in your code:

• Please use the a tag in the logo section instead of a div
• Please consider adding an opacity to your mobile menu and also set the overflow of the body to hidden when the mobile menu is active.
• Please add a home link button on the about page for easy navigation.
• Please consider adding animations and transition effects to make your website more user friendly and fluid.

Description

This PR contain the tasks for three milestones:

• Milestone 1 - content

Choose the topic for your website. Choose images, text, icons, fonts.

• Milestone 2 - mobile version

Create the 2 pages for mobile. Deploy the project.

• Milestone 3 - desktop version

Adapt the 2 pages to desktop.

General requirements

• [x] There are no linter errors.
• [x] Followed the Github flow.
• [x] The documentation is professional.

HTML/CSS and JavaScript requirements

• [x] Followed the list of best practices for HTML & CSS.
• [x] Followed the list of best practices for JavaScript

Thank you for taking the time to review this pull request.

Description

Milestone 0 - project setup

Set up the repository and tools.

General requirements

• [x] Followed the Github flow.
• [x] The documentation is professional.

Milestone requirements

• [x] Add .gitignore
• [x] Update README
• [x] Set up the linters locally
• [x] Add the pull request template

Additional notes

No response about the use of Tailwind in this project. Decided to stick to vanilla CSS.