Replicating and coding a Website
Replicating and coding a Website
Replicating and coding a Website
Replicating and coding a Website
This case study explores the coding process of Replicated and coded MoMA website homepage to make it interactive and responsive across devices, gaining front-end development experience.
This case study explores the coding process of Replicated and coded MoMA website homepage to make it interactive and responsive across devices, gaining front-end development experience.
This case study explores the coding process of Replicated and coded MoMA website homepage to make it interactive and responsive across devices, gaining front-end development experience.
Project Context
Fall 2023 (4 weeks)
Team:
Me
Technical Skills Utilized:
HTML5
CSS3
Bootstrap
JavaScript
Project Context
Fall 2023 (4 weeks)
Team:
Me
Technical Skills Utilized:
HTML5
CSS3
Bootstrap
JavaScript
Project Context
Fall 2023 (4 weeks)
Team:
Me
Technical Skills Utilized
HTML5
CSS3
Bootstrap
JavaScript
Context
Context
Context
Context
Context
Context
Context
Context
Approach
Approach
Approach
Approach
Approach
Approach
Approach
Approach
Code
Code
Code
Code
Code
Code
Code
Code
Learning
Learning
Learning
Learning
Learning
Learning
Learning
Learning
Project Overview
Project Overview
This project involved replicating and coding the MoMA (Museum of Modern Art) website homepage, making it interactive and responsive across various devices. The goal was to gain experience with front-end development while maintaining a user-friendly experience.
This project involved replicating and coding the MoMA (Museum of Modern Art) website homepage, making it interactive and responsive across various devices. The goal was to gain experience with front-end development while maintaining a user-friendly experience.
This project involved replicating and coding the MoMA (Museum of Modern Art) website homepage, making it interactive and responsive across various devices. The goal was to gain experience with front-end development while maintaining a user-friendly experience.
This project involved replicating and coding the MoMA (Museum of Modern Art) website homepage, making it interactive and responsive across various devices. The goal was to gain experience with front-end development while maintaining a user-friendly experience.
Technical Approach
Technical Appraoch
Technical Approach
Technical Approach
Semantic Markup: The foundation of the website relied heavily on semantic HTML tags like
<div>,<ul>, and<li>for clear organization and easier CSS styling.Responsive Design with Bootstrap: Bootstrap, a popular front-end framework, played a crucial role in achieving responsiveness. It ensured the website adapts to various screen sizes by utilizing a grid system and responsive classes.
Interactive Elements: JavaScript was employed to create a dynamic carousel for sections like “In the Collection” and “Partners.”
Code explained
Code explained
Code explained
Code explained
Header
Implemented a fixed header using HTML, CSS, and JavaScript.
Utilized unordered and ordered lists (ul & li) to structure the header navigation.
Incorporated Bootstrap framework for styling and responsiveness.
Employed Glyph icon icons for visual elements like search.
Leveraged anchor tags (href) for linking navigation elements.
Header
Implemented a fixed header using HTML, CSS, and JavaScript.
Utilized unordered and ordered lists (ul & li) to structure the header navigation.
Incorporated Bootstrap framework for styling and responsiveness.
Employed Glyph icon icons for visual elements like search.
Leveraged anchor tags (href) for linking navigation elements.
Header
Implemented a fixed header using HTML, CSS, and JavaScript.
Utilized unordered and ordered lists (ul & li) to structure the header navigation.
Incorporated Bootstrap framework for styling and responsiveness.
Employed Glyph icon icons for visual elements like search.
Leveraged anchor tags (href) for linking navigation elements.
Header
Implemented a fixed header using HTML, CSS, and JavaScript.
Utilized unordered and ordered lists (ul & li) to structure the header navigation.
Incorporated Bootstrap framework for styling and responsiveness.
Employed Glyph icon icons for visual elements like search.
Leveraged anchor tags (href) for linking navigation elements.
Events
Coded a visually appealing event page using Bootstrap.
Defined responsive content layout with rows and columns.
Used image tags for event visuals and span tags for text content.
Employed anchor tags (href) for seamless linking within the page.
Events
Coded a visually appealing event page using Bootstrap.
Defined responsive content layout with rows and columns.
Used image tags for event visuals and span tags for text content.
Employed anchor tags (href) for seamless linking within the page.
Events
Coded a visually appealing event page using Bootstrap.
Defined responsive content layout with rows and columns.
Used image tags for event visuals and span tags for text content.
Employed anchor tags (href) for seamless linking within the page.
Info
Utilized span tags for text content and Glyph icon icons for arrows.
Created a responsive two-column layout with Bootstrap.
Implemented anchor tags (href) to link related elements.
Events
Coded a visually appealing event page using Bootstrap.
Defined responsive content layout with rows and columns.
Used image tags for event visuals and span tags for text content.
Employed anchor tags (href) for seamless linking within the page.
Info
Utilized span tags for text content and Glyph icon icons for arrows.
Created a responsive two-column layout with Bootstrap.
Implemented anchor tags (href) to link related elements.
Info
Utilized span tags for text content and Glyph icon icons for arrows.
Created a responsive two-column layout with Bootstrap.
Implemented anchor tags (href) to link related elements.
Sign Up
Used span tags for text content and horizontal rule tag (hr) for a separator line.
Incorporated Bootstrap for responsive layout and Glyph icon for the email icon.
Employed anchor tags (href) for linking elements.
Defined a border around the section using CSS
Sign Up
Used span tags for text content and horizontal rule tag (hr) for a separator line.
Incorporated Bootstrap for responsive layout and Glyph icon for the email icon.
Employed anchor tags (href) for linking elements.
Defined a border around the section using CSS
Sign Up
Used span tags for text content and horizontal rule tag (hr) for a separator line.
Incorporated Bootstrap for responsive layout and Glyph icon for the email icon.
Employed anchor tags (href) for linking elements.
Defined a border around the section using CSS
Info
Utilized span tags for text content and Glyph icon icons for arrows.
Created a responsive two-column layout with Bootstrap.
Implemented anchor tags (href) to link related elements.
Magazine Section
Utilized span tags for text content and image tags (img) for visuals.
Implemented anchor tags (a) for linking elements.
Designed a responsive layout with Bootstrap rows and columns.
In the collection
Utilized span tags for text content and image tags (img) for visuals.
Implemented anchor tags (a) for linking elements.
Designed a responsive layout with Bootstrap rows and columns.
Sign Up
Used span tags for text content and horizontal rule tag (hr) for a separator line.
Incorporated Bootstrap for responsive layout and Glyph icon for the email icon.
Employed anchor tags (href) for linking elements.
Defined a border around the section using CSS
Magazine Section
Utilized span tags for text content and image tags (img) for visuals.
Implemented anchor tags (a) for linking elements.
Designed a responsive layout with Bootstrap rows and columns.
Magazine Section
Utilized span tags for text content and image tags (img) for visuals.
Implemented anchor tags (a) for linking elements.
Designed a responsive layout with Bootstrap rows and columns.
In the collection
Utilized span tags for text content and image tags (img) for visuals.
Implemented anchor tags (a) for linking elements.
Designed a responsive layout with Bootstrap rows and columns.
Magazine Section
Utilized span tags for text content and image tags (img) for visuals.
Implemented anchor tags (a) for linking elements.
Designed a responsive layout with Bootstrap rows and columns.
Discover Section
Used span tags for text content and Glyphicon icons for arrows.
Employed anchor tags (a) for linking text and image.
Inserted images using image tags (img).
Designed a responsive layout with Bootstrap rows and columns.
Discover Section
Used span tags for text content and Glyphicon icons for arrows.
Employed anchor tags (a) for linking text and image.
Inserted images using image tags (img).
Designed a responsive layout with Bootstrap rows and columns.
Store Section
Used span tags for text content and anchor tags (a) for linking.
Inserted images using image tags (img).
Designed a responsive layout with Bootstrap rows and columns.
In the collection
Utilized span tags for text content and image tags (img) for visuals.
Implemented anchor tags (a) for linking elements.
Designed a responsive layout with Bootstrap rows and columns.
Store Section
Used span tags for text content and anchor tags (a) for linking.
Inserted images using image tags (img).
Designed a responsive layout with Bootstrap rows and columns.
Discover Section
Used span tags for text content and Glyphicon icons for arrows.
Employed anchor tags (a) for linking text and image.
Inserted images using image tags (img).
Designed a responsive layout with Bootstrap rows and columns.
Store Section
Used span tags for text content and anchor tags (a) for linking.
Inserted images using image tags (img).
Designed a responsive layout with Bootstrap rows and columns.
In the collection
Utilized span tags for text content and image tags (img) for visuals.
Implemented anchor tags (a) for linking elements.
Designed a responsive layout with Bootstrap rows and columns.
Partner Section
Created a dynamic carousel using JavaScript for automatic image rotation.
Incorporated span tags for text content under each image.
Utilized Bootstrap for element positioning.
Partner Section
Created a dynamic carousel using JavaScript for automatic image rotation.
Incorporated span tags for text content under each image.
Utilized Bootstrap for element positioning.
Partner Section
Created a dynamic carousel using JavaScript for automatic image rotation.
Incorporated span tags for text content under each image.
Utilized Bootstrap for element positioning.
Footer
Divided the footer into three sections for easier CSS styling.
Used unordered and ordered lists (ul & li) for navigation links.
Employed span tags, anchor tags (a), Glyphicon icons, and horizontal rule tag (hr) for various elements within the footer.
Footer
Divided the footer into three sections for easier CSS styling.
Used unordered and ordered lists (ul & li) for navigation links.
Employed span tags, anchor tags (a), Glyphicon icons, and horizontal rule tag (hr) for various elements within the footer.
Footer
Divided the footer into three sections for easier CSS styling.
Used unordered and ordered lists (ul & li) for navigation links.
Employed span tags, anchor tags (a), Glyphicon icons, and horizontal rule tag (hr) for various elements within the footer.
Discover Section
Used span tags for text content and Glyphicon icons for arrows.
Employed anchor tags (a) for linking text and image.
Inserted images using image tags (img).
Designed a responsive layout with Bootstrap rows and columns.
Store Section
Used span tags for text content and anchor tags (a) for linking.
Inserted images using image tags (img).
Designed a responsive layout with Bootstrap rows and columns.
Partner Section
Created a dynamic carousel using JavaScript for automatic image rotation.
Incorporated span tags for text content under each image.
Utilized Bootstrap for element positioning.
Footer
Divided the footer into three sections for easier CSS styling.
Used unordered and ordered lists (ul & li) for navigation links.
Employed span tags, anchor tags (a), Glyphicon icons, and horizontal rule tag (hr) for various elements within the footer.
Limitations
Maintaining consistency with MoMA’s ever-evolving UI proved to be a challenge. The final design reflects the UI state at the time of HTML completion.
Due to coding limitations, some interactive elements on the original MoMA website couldn’t be implemented. Additionally, some functionalities like dropdown menus on hover were omitted as they weren’t present in the original design.
What I learned
Adaptability: Being prepared to adjust and adapt to design changes during development is crucial.
Front-End Development: Hands-on practice with HTML, CSS, and JavaScript for website creation.
Front-End Development: Hands-on practice with HTML, CSS, and JavaScript for website creation.
Responsive Design: Understanding and implementing best practices for responsive web design using Bootstrap.
Reflection
This project offered a valuable opportunity to explore the world of front-end development, deepening my understanding of the collaborative process between design and development. I'm excited to leverage this newfound knowledge to create designs that are not only visually appealing but also technically feasible. I aim to deliver even more robust and user-centered digital products by strengthening my development skills and fostering closer collaboration with developers.
To see the code in more detail, please find the file link attached below:
