A summary page of Ada Lovelace's contributions to the field of computer science.
The purpose of this project was to create a tribute page that fulfills the following user story:
GIVEN a tribute page and repository
WHEN I view the source code
THEN I see an element with a corresponding id="main" that contains all other elements
WHEN I view the source code
THEN I see an element with a corresponding id="title", which contains a string that describes the subject of the page
WHEN I view the source code
THEN I see a div with a corresponding id="img-div", containing an img element with a corresponding id="image" and an element with a corresponding id="img-caption" that describes the image
WHEN I view the source code
THEN I see an element with a corresponding id="tribute-info", which contains textual content describing the subject of the page
WHEN I view the source code
THEN I see an a element with an id="tribute-link", which links to an outside site and that opens in a new tab.
WHEN I view the image element on the site
THEN the image should responsively resize, be positioned relative to the width of its parent element, never exceed its original size, and be centered within its parent elementAs a new developer, I took this opportunity to learn more about a key historical figure in the computer science field. It was truly inspiring to read about Ada Lovelace's contributions to the field, and the ideas she had about computers about 200 years ago.
In terms of coding the page itself, this was a great opportunity for me to revisit key concepts in CSS. I have used Bootstrap and Bulma to create many of my previous projects, but I wanted the chance to practice and hone my custom CSS skills by creating this page. It was helpful to revisit linear gradients, flexbox, pseudoelements, and CSS animations.
I also learned new concepts related to the page's HTML. I learned that to turn all straight quotes on the page into smart quotes, I needed to utilize a few HTML character codes that I haven't used before. Additionally, I used a time HTML tag with a datetime attribute for accessibility, since I learned recently that this tag is in an easy format for screen readers.
Overall, I am excited about what I learned in building this page and look forward to applying these concepts in future projects.
Please find the deployed page here: https://vruss14.github.io/ada-lovelace
- HTML
- CSS
- Google Fonts
No installation steps are required to view this project. To view the page, visit the URL above. The application's source code can be found on GitHub here: https://github.com/vruss14/ada-lovelace.
This page is a summary of Ada Lovelace's contributions to the field of computer science. It is not intended to be a complete biography, and links to external sources are provided within the page to learn more.
This web application includes responsive design and can be viewed on all devices.
Below is a screenshot of the desktop version of the deployed page:
Below is a screenshot of the deployed page on mobile:
Valerie Russell was the sole contributor to this project. Contact her at [email protected].