This is the second phase of the AirBnB project, which is part of the coursework for students in the ALX software engineering program and Holberton School.
If you haven't had a chance to review the first part, I recommend taking a look. In that section, I explained the project and discussed its different components.
The Airbnb Clone WebStatic project involves replicating the front end of the popular Airbnb website using HTML and CSS. Students are required to simply design and implement static web pages that emulate specific features and styles of the original platform. This includes the layout, navigation, and overall user interface, challenging participants to apply their acquired knowledge in a real-world context.
Key Learning Objectives
HTML and CSS: The project specifies the importance of HTML and CSS in web development. Students are encouraged to refine their skills in structuring content (HTML) and styling it effectively (CSS) to create visually appealing and functional web pages.
Responsive Design: As users access websites across various devices, understanding responsive design is crucial. This project prompts students to consider and implement responsive design principles, ensuring a seamless user experience across different screen sizes.
Obstacles encountered
Our choices for HTML tags were restricted, requiring us to work within a predefined set. Essentially, we were provided with a specific list of HTML tags and a desired output, challenging us to construct it accordingly. However, we had the flexibility to apply any CSS styling to achieve the desired presentation.
One issue I had with that was I hadn't tried or didn't know how to add an image to a page without using the img HTML tag and then we were not allowed to use it but one way or the other use images in the site. I did a couple of tasks without bothering about it. I later solved it by using CSS background properties. This involves styling an HTML element and specifying the image URL within the style rules.
Content Overflow and Misalignment on Smaller Screens also gave me a headache cause I was new to the whole CSS flexbox or grid concept so I had to take my time to learn about them and how they work.
Employ CSS media queries to create responsive breakpoints, adjusting the layout and styling for different screen sizes. Implement flexible units, like percentages or viewport width, to allow content to scale appropriately. Utilize CSS properties such as flexbox or grid to maintain proper alignment and prevent content overflow on smaller screens.
Aligning text within a circle proved to be more challenging than I expected. However, in this project, centering text in a circle became a real hurdle.
The text was housed in a div, and I employed the border and border-radius properties to craft the circular shape. The challenge arose when attempting to position the text precisely in the center. Traditional methods such as paddings and margins disrupted the alignment of other elements on the page.
It was only later that I discovered a simpler solution: utilizing the text-align and line-height properties. These properties proved to be effective in achieving the desired centering within the circle without causing disruptions to the overall layout.
Insights gained from the project experience
Try to study ahead of a project
Ask for help from peers
While some individuals perceive HTML and CSS as easy due to their foundational nature, it's essential not to underestimate the significance of any project and approach each one with the seriousness it deserves.
Conclusion
As students progress through the second part of this project, they are poised to deepen their understanding of web development fundamentals and refine their problem-solving abilities. Ultimately, the Airbnb Clone WebStatic project serves as a stepping stone for students, preparing them for more complex challenges in their journey toward becoming proficient software engineers.
I invite you to share your thoughts and feedback on this. Feel free to comment with your insights, and if you've already completed this project, I encourage you to share any challenges or lessons learned in the comments section. Your experiences and perspectives can contribute valuable insights to the collective learning process.
Stay updated on my ALX program journey by subscribing to my blog. Receive notifications for new articles, and your feedback is highly appreciated – it keeps me motivated to create more content like this.
You can connect with me on Twitter, or LinkedIn I welcome constructive feedback and am eager to learn from your insights.