NOTE Use this template to initialize the contents of a README.md file for your application. As you work on your assignment over the course of the week, update the required or stretch features lists to indicate which features you have completed by changing [ ] to [x]. (🚫 Remove this paragraph before submitting your assignment.)

Unit 1 Assignment: Globetrotter

Submitted by: Sydney Brown

Estimated time spent: 10 hours spent in total

Deployed Application (optional): didn't deploy the site

Application Features

CORE FEATURES

• Home Page

  • A heading that captures the essence of the destination.
  • An introductory paragraph that welcomes visitors and sets the context for the site.
  • An evocative image that represents the location.
  • Content organized using Flexbox for a fluid layout.

• Top Attractions Page

  • A minimum of three attractions, each with a name, a photo, and a brief description.
  • Content arranged with Flexbox for consistency and responsiveness.

• Guide Section (Choose One)

  • Either a Food Guide, Accommodations Guide, or Upcoming Local Events guide.
  • At least three entries that provide a name, address, and a description catered to a specific type of traveler (families, backpackers, etc.).
  • Links to more information for each entry, laid out using Flexbox.

• Photo Gallery

  • At least five images with captions that convey the local atmosphere or highlights.
  • A gallery presented in a responsive design.

• Navigation Bar

  • Links to each main page of the site (Home, Top Attractions, Photo Gallery, and the chosen Guide section).
  • A navigation bar styled with Flexbox that adapts to different screen sizes.

• Smartphone Friendly

  • A design that is fully functional and aesthetically pleasing on smartphones, achieved with media queries.

STRETCH FEATURES

• Additional Media

  • Embed a map or a video that relates to the travel content.

• Enhanced Layouts

  • Utilize CSS Grid on one or more pages for a unique layout.

• Interactive Features

  • Implement a dropdown menu in the navigation bar for additional categories or sub-pages.

• Deployment: Deploy your website so it's accessible to the public outside of your local machine.

• Interactive Navigation: Enhance the usability of your navigation bar.

  • Implement a dropdown menu in the navigation bar to organize additional categories or sub-pages.

• User Engagement: Encourage interaction and engagement from your site visitors.

  • Create a form to allow users to sign up for a travel newsletter, enhancing user engagement.

• Custom Styling: Add a personal touch to your site's design.

  • Integrate at least one custom font using Google Fonts to add personality to your site.
  • Experiment with at least one CSS property not covered in the lessons or labs to customize your page further.

Walkthrough Video

project 1 demo - Watch Video

Reflection

• Did the topics discussed in your labs prepare you to complete the assignment? Be specific, which features in your weekly assignment did you feel unprepared to complete?

I think the topics discussed in lab correlated very well with the skills we needed to implement in the project. Specifically, the essentials of HTML, like how to organize an HTML file and the important attributes, the essential parts of CSS for styling, and most importantly to this project: flexbox. I think an aspect of the program that I will have to adjust to is trying to implement coding techniques for the first time in a project. For example, I initially felt unprepared to use flexbox after our first lesson on it because I didn't have time to do the corresponding lab project. However, after the day of review, I felt more prepared to execute it today.

• If you had more time, what would you have done differently? Would you have added additional features? Changed the way your project responded to a particular event, etc.

If I had more time, I would definetly change the structure of my HTML code so that I could go through the CSS process more efficiently. For example, I would be more specific and clear on naming the id's and classes of my divs, sections, and elements. I would also try to work on the website's UX. After watching other people's presentations, I would want to add a video in my banner instead of a still photo. I'd also want to learn the code to do get some motion with hovering over buttons (like having a element change color when a mouse is hovering over it before it's actually clicked).

• Reflect on your project demo, what went well? Were there things that maybe didn't go as planned? Did you notice something that your peer did that you would like to try next time?

Overall, I think that my project demo was successful. The envionment was more chill than I expected, so I didn't get nervous. One think that was unplanned was that I ended up explaining my areas of improvement during the part of the presentation where I was actually showing my website on screen. Because I did that, I didn't want to sound repetitive when I actually got to that slide, so I tried to improvise some other presentation content, but still ended up finishing with too much extra time. Next time, I'll try to walk away from the podium and be more interactive & make eye contact with the audience when I present. Also, I did a lot of soley minimum requirements (min number of pictures in the gallery, events, etc.), and I'd want to try to go above if given more time.

Open-source libraries used

• Add any links to open-source libraries used in your project.

Shout out

Shout out to Andy, Hanna, Nathan, and Keith for being integral parts to my completion of the project!