"Tango de Maret" is an Argetinean tango dancer's professional website. It is the first Milestone Project using HTML, CSS and a framework, created for the "User Centric Frontend" module of the FullStack Software Development Course offered by Code Institute.

Deployed web-site on: Tango de Maret

The purpose of the site is to provide simple, fast-loading and easy to use format evoking interest in users to join a tango class.

• As a user I can get inspired by what emotions tango evokes, who is Maret and get a brief over-view of the history of Argentinean tango.
• As a user I can find information about when and where tango classes take place and where tango parties are organised with additional references to the organisation's social media pages.
• As a user I can get convinced why learn to tango with Maret.
• As a user I can contact Maret.

• A fixed header - navigation between 4 pages, fixed, so the user can always navigate.
• Home - has an introduction to tango, introduction to Maret's dream about tango and a brief over-view of the history of the dance.
• Classes & Events - an overview of where and when do classes and events take place.
• Facebook icons- to navigate to the mentioned organisation's facebook communities.
• About Me - a biography of Maret.
• Contact - a contact form.
• Footer - simple copyright footer.

• Maret's Stories - a page with Maret's short stories and aphorisms. She writes inspiring texts.
• Replace the text of Classes & Events into calendars so that users can add them into their own calendars to be more UX friendly.
• Instead of one of the color-columns on index.html, I would like to add an Argentinean tango video with dancers, using the color layer as an overlay.

• HTML, or Hyper Text Markup Language: Used to construct all the pages of this web site.

• CSS, or Cascading Style Sheets: Is used to style various elements on a web page via coloring, spacing etc.

• Bootstrap 4: A CSS framework that assists the programmer in creating responsive, mobile first front-end web sites.

• Gitpod: An online IDE also used for creating & saving code that runs in a browser.

• Git: A version control system for tracking changes in source code during software development.

• GitHub: A company that provides hosting for software development version control using Git.

• Chrome DevTools: A set of web developer tools built directly into the Google Chrome browser.

• HTML Formatting: to format the GitHub files separately.

A standard layout is fully responsive on mobile devices and larger screens.

Original wireframe

Original wireframe

• W3schools.com: General knowledge.

• CommonMark.org: Common markdown cheat-sheet.

• FontAwesome: for social media icons.

• Google fonts: "Piazzolla" (body) & "Montserrat" (navigation bar).

• Coolors.co: generating colors in the same palette:

  

• Unsplash for photos: photographer- Toufic Mobarak- https://unsplash.com/photos/Kx2IgM3Q5jA; photographer- Axel Eres- https://unsplash.com/photos/5K0U0Gc5Nmk;

• Quote-article: Quote about Argentinean tango on HOME page.

• Brief-history: brief-history of Argentinean tango on HOME page.

• Am I Responsive: Mock-up image.

• Portraits are the property of Maret Laanes.

• The resonsiveness of all the different sized text/color/photo section-divisions was a challenge. The text was cut/hidden on smaller resolutions. Therefore I manually set each sections' custom minimum-height.
• "Why Tango?" section image "portrait-of-Maret"- purpose of the photo diminishes on the Ipad width, meaning, the face area of the image goes hidden. The photo needs to be cut so it shifts better.
• After user testing it was mentioned that after clicking the hero image area arrow to jump to the next section, the title of the "Why Tango?" is hidden. That is due to the space the fixed navbar is taking over. I corrigated the margin and padding of the title and the paragraph.

• Ran code through HTML Validator - no errors, except a warning "From line 42, column 3; to line 42, column 24- section lacks heading" - because it is an empty element used for styiling in CSS.

• Ran code through CSS Validator - no errors found.

• Created Lighthouse report through Devtools. You can manually access this through Tango de Maret, right-click "inspect", in the header click forward arrows, choose "Lighthouse" and pull the report.

You can find testing on a separate file Testing.md

1. All of the code was written in GitPod to a GitHub repository.
2. Under the Settings section of the GitHub, scrolled down to GitHub Pages section.
3. Under the Source drop-down, the Master branch was selected.
4. Once selected, this publishes the project to GitHub Pages and displays the site's URL Tango de Maret.
5. There is no difference between the deployed version and the development version.
6. The code can be run locally through clone or download.
7. You can do this by opening the repository, clicking on the green Code button and selecting either 'clone or download'.
8. The Clone option provides a URL, which you can use on your desktop IDE.
9. The Download ZIP option below provides a link to download a ZIP file which can be unzipped on your local machine.

1. Code Institute tutors and my mentor Adegbenga Adeye for guiding me to the right track.
2. Code Institute Slack community for all their patience in beginners questions.
3. Maret Laanes for providing me with all the necessary information, inspiration and photo material.