This project is part of a challenge where our task was to replicate an Instagram-like frontend for a website, featuring only dogs. The goal was to assign classes to HTML elements using HTML and CSS to create an aesthetically pleasing and functional design that represented the site we were told to replicate.
- Objective: Replicate the Instagram frontend with a focus on showcasing adorable dogs.
- Tools Used: HTML and CSS.
-
Initial Observation: Before examining the existing code, I opted to replicate the page visually.
-
Visual Estimation: I eyeballed the site using an HTML browser, guessing spaces, padding, and image sizes based on the original appearance.
-
Image Acquisition: I obtained images from the original site by clicking and downloading them for reference which was done via the browser.
-
Excluded Technology: From inspection, I infer that the original site incorporates JavaScript. This inference is drawn from the dynamic behaviour observed, where the images of dogs change either upon page refresh or after a few seconds.
-
JavaScript Omission: Notably, I have deliberately excluded the use of JavaScript in my version. Consequently, the replicated site lacks the functionality observed in the original, such as automatic image changes.
-
Result: This version represents my attempt to create a visually appealing and dog-centric front-end, focusing on the given site.
- Dog-Centric Design: The layout emphasizes dogs, with a clean and user-friendly interface reminiscent of Instagram's style.
- Responsive: The design is crafted to be responsive, ensuring a seamless viewing experience on various devices.
- HTML and CSS Only: The challenge was completed using only HTML and CSS, showcasing my proficiency in front-end development.
This challenge was a great opportunity to showcase my HTML and CSS skills in recreating a popular front-end design. It allowed me to demonstrate my ability to structure HTML, apply CSS styling, and create an engaging user interface.
Note:
While this version represents my independent attempt without referencing or looking at the existing codebase even once, my next step involves a thorough review of the challenges assigned to me, which led to the creation of the original Dogstram website. By completing these assigned tasks, I aim to gain insights into the construction of the original codebase and the methods employed by the creator, including the use of flex-boxes, grids, classes, and other techniques. This process will not only enhance my understanding of how the original site was crafted but also provide an opportunity to learn new materials. The comparison between the original and my version will contribute to the improvement of my HTML and CSS skills.