Skip to content

latorreandrea/domenico-mondelli-first-black-aviator

Repository files navigation

Domenico Mondelli

the first black aviator in history


Code Institute Portfolio Project 1: HTML/CSS Essentials


Welcome to the first site I'am creating. The site will be created to testify the skills learned on HTML and CSS with the Code Institute course.

The site will focus on a character from Italian military history: "Domenico Mondelli" (Asmara 30/06/1886 – Rome 13/12/1974)

responsivemp1

Unlike Italian society, the Italian army in its history has not been racist. In fact, in Italian military history, it is not uncommon to find black people even in the highest ranks.

This aspect of Italian history is not well known (especially among Italians themselves), and I would like to take advantage of this exam to be able to create a website that talks about a character who, for history and honors, can be fascinating but that we risk forgetting. To say one of his firsts it would only be necessary to remember that he was the first black aviator in the history of aviation. You will be able to find out more by visiting the site.

This is because, even if the Italian army was "inclusive", Italian society, its prejudices, twenty years of fascism plus the simple passage of time have created real black holes in the history of this man.

I hope to make you appreciate a mostly unknown character. Enjoy the site!

UX

The site aims to present "Domenico Mondelli" life and education, primates and honors capture the attention of those interested in history (especially those in military history) and encourage experts to provide additional information, correlated with evidence (all this via a form).

Strategy

Project goal: Introduce Domenico Mondelli

The main goal for the website is to build a History website that talks about a character who, for history and honors, can be fascinating but that we risk forgetting.

Unlike Italian society, the Italian army in its history has not been racist. In fact, in Italian military history, it is not uncommon to find black people even in the highest ranks.

This aspect of Italian history is not well known (especially among Italians themselves), To say one of his firsts it would only be necessary to remember that he was the first black aviator in the history of aviation.

User goals:

  • Know more about Domenico Mondelli
  • Know more about the Italian military history
  • Help the comunnity to grow up

The user should be encouraged to find out more about this character, if the site manages to attract him, it can convince him to participate or to report useful events for the community.

If the user is a history expert, he or she can contribute to the knowledge of the community by reporting, through a specific form, any evidence (writings, photos, etc.)

Site owner's goal:

The main goal of the site is to provide a reliable source of information pertaining to the history of Domenico Mondelli, trying to create a community in which experts and amateurs converge, and can contribute, through evidence, to expand what we know about Domenico Mondelli (as happens for wikipedia).

The site would also like to indirectly raise awareness on the issue of inclusion and demonstrate how in history an environment generally considered closed like the military one has always proved to be the first channel of inclusion of a society (a striking example is the history of the Roman Empire, and without going too far back in time in Italian history itself army has greatly accelerated the process of literacy and unification of the country especially in the 60s), a real paradox given that military metaphors are often used above all in politics to create racism.


Features

Navbar

navextended

  • Displayed in order to present this character in an ever more exhaustive way, remains consistent and fixed to the top.
  • This helps guide users and includes short menu titles.
  • It collapses into a hamburger icon when viewed on smaller devices. It is also interactive and closes when a user clicks on a nav item.

navsmall

Expand community section

expand

  • This section can be found on all pages, positioned immediately after the main information and and is linked to the form page.
  • The purpose of this section is to encourage the user to contribute to the growth of the community by reporting events or by expanding (using evidence) the Mondelli's wiki.
  • The section expands to attract the user's attention when the cursor is hovered over it (only on screens with a width greater than 748px) on smaller screens I have eliminated the function because I could not get it to work as I wanted. expandhoover
  • N.B. this section on the form page is instead linked to the bio and Honors page, in this way the user can see how the information he has provided to the community has contributed to its growth

Social media links

footer

  • All links load onto a new tab allowing the userto join the community we want to create and stay updated via social channels on the events in which the community will participate
  • Allow the user to stay updated via social channels on any news that the community has collected

Landing Page

  • Home page with hero image and a suggestive phrase heroimage
  • The main part is divided into paragraphs with concise and deliberately captivating sentences that encourage the user to become curious about Mondelli's life. home
  • All paragraphs end with a sentence that prompts the user to place the cursor over it and that are linked to the bio page

Bio Page

  • The Bio page main feature is the synoptic table of the life and career of domenico mondelli which also has a photo of his passport inside which refers to the style of wikipedia

tabella

  • The bio page is accompanied by paragraphs arranged in chronological order that speak of Mondelli's life and are accompanied by historical photos relating to the phase he lived bioparagraph
  • The photos are clickable and give access to the original file
  • The paragraphs are deliberately not in columns and have alternating colors to create dynamism, and try not to let the user's attention drop (however compelling we talk about history and it would be nice to be able to attract the attention of even those who are not passionate)

Honors Page

  • The Honors page contains a chronological list of the prizes awarded to Domenico Mondelli onori
  • All honors are symbolized by a small image that, when clicked, opens a tab explaining the meaning of that symbol (knowing that not everyone is an expert in military ribbons)
  • All honors are accompanied by a brief description with dating, if you click, they expand into a quote describing the reason for awarding this medal

onoriexpanded

Join Page

All the pages we have seen so far were intended to bring the user here and motivate him in filling out the forms present here

  • The Join page has 3 forms inside with the same style but in alternating colors and accompanied by a short introduction defining their purpose

  • Documentation form: documentationform

    • This form allows the user to send the site owner some tests on any information to add to the Mondelli wiki.
    • The form is accompanied by a section in which the user enters his data and in the event that the information is interesting but not strictly reliable these data will be used by the owners of the site to begin their investigations on the veracity of such information (when you know what you want to find, searching becomes easier)
  • Events Form eventform

    • This form allows the user to report events in which the community or site owners can participate as the topics covered in these events deal with the topics that are covered on the site (aviation, history, social inclusion, etc.)
    • In this form the user enters his data in order to be contacted and those of the event. In this way, if the owners of the site find the event interesting and compatible with their commitments, they can contact the organizers of the event sent for further information.
  • News Form newsform

    • This form allows the user to stay updated via the email address that he sends on any changes made to the site thanks to the reports of other users
    • This form allows the user to stay updated via the email address that he sends on any real appointments in which the site owners intend to participate (as experts or as an audience) or in any case, other interesting events will be notified via email but in which the owners of the site are not able to participate for logistical reasons

Technologies Used

HTML

used to structure the website and create the essential elements of site.

CSS

used to style the site and make it responsive.

Google Fonts

used to import the font style.

Font Awesome

used to import some icons.

GitPod

used as the development environment to help write my code.

Git

to enable version control and help commit changes to my site.

GitHub

used to store the source code and repository.

GitHub Pages

used to deploy my website.


Testing

Google Developer Tools

I used Google Developer tools to set the responsive feature. It tells you how your site looks across multiple devices, including a 4k screen. with this system I have tried and verified that the site is responsive on mobile phones of all sizes.

I tried the site on browsers like Opera, Google Chrome and Firefox

Validating code

To help validate my HTML and CSS, I used W3C validator tools to ensure my code was clean. I regularly checked if my code was cleared from any errors after each section was created. Here are a couple of errors:

Error: Element summary not allowed as child of element div in this context. (Suppressing further errors from this subtree.) From line 41, column 17; to line 41, column 25

this error was not fixed as it was generated by the nature of the nav menu created for small screens

Error: Attribute target not allowed on element img at this point by mistake I entered the target: "_ blank" attribute for almost all the images on the honors page


Deployment

I used GitHub pages to deploy my website. To do this:

  1. Create a repository on GitHub and a project name/description.
  2. Once this is done, there is an option to open this on GitPod by clicking on the green button.
  3. Initialise your repo by using the git init command
  4. Add files to Git (staging area)
  5. Use the git push command to push this
  6. Go to GitHub and load your repo
  7. Click on Settings
  8. Scroll down to GitHub Pages
  9. Click on master branch.
  10. The page should now load and your website is now live!

I committed regularly throughout the project


Credits

At the moment there are no sites that speak exclusively of Domenico Mondelli, on the internet you can find articles about him taken in part from:

  • Wikipedia (from which the images and references of the medals and honors were taken), and partly taken from two books:
  • Vita del pilota militare Domenico Mondelli (Asmara 30/06/1886 – Roma 13/12/1974 – 88 anni ) by Francesco Pezzoli (from this I took inspiration to tell you about his life)
  • Il generale nero. Domenico Mondelli: bersagliere, aviatore e ardito, Roma, Ed. Odradek by Mauro Valeri (from this I took pictures).

About

milestone-project-1

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published