On a Trip

See in the link

Overview

On a Trip is an unreal Travel packages website developed as one of the criteria of evaluation in the course of Web Development I. It was developed using HTML5 and CSS3.

Status: Concluded

• Deadline: 08.02.23 ✔️

---

Objectives

• The webpage should be responsive ✅
• Mobile-first design principles ✅
• The desktop layout should have at least two columns ✅
• The webpage should be well-designed:
  • Use CSS flexbox and/or float/clear to design layout ✅
  • Semantic HTML ✅
  • CSS Animations used appropriately ✅
  • All required information (or fake information) included ✅
  • Attention to visual design, including contrast, proximity, alignment, repetition, and typography ✅
  • Provide links to the source of all images used on your page ✅

Built with

• Semantic HTML5 markup
• Mobile-first workflow
• CSS custom properties
• Fleexbox
• CSS-grid

What I learned 💡

This project was helpful to consolidate my knowledge about HTML5 and CSS3.

In the CSS file, I tried as much as possible to select the desired element using advanced selectors and pseudo-classes, which was one of the subjects studied during the discipline of Web Development I.

To animate the cards when the mouse is over them, I used the child combinator > associated with the pseudo-class :hover

.cards > div:hover {
    transform: scale(1.04, 1.04);
    box-shadow: 3px 2px 5px rgb(85, 111, 134);
}

To apply the margin-top property from the second card onwards, on the mobile layout, I used the pseudo-class :nth-of-type(n) associated with the general sibling selector ~

.top-destinations div:nth-of-type(1)~div, .best-deals div:nth-of-type(1)~div {
    margin-top: .75em;
}

In addition to those I mentioned, there were other examples of using the pseudo-classes and advanced selectors, like the adjacent sibling selector +, the pseudo-class :first-of-type, last-of-type, :nth-child(n).

🛠️ Continued development

• Developing other pages to the website, like the Login page.
• Coding refactoring
• Develop the inputs validation

---

Useful resources

• CSS-Tricks Guides - Useful guides to learn and consult about CSS custom properties.

🏅 Acknowledgments

• Instructor Adnan Reza, Langara College