orghmaitr / landing-page

An Entire Web Page From a Design

landing-page

An Entire Web Page From a Design

Live Preview ⦿ Setup and Usage ⦿ Contact and Support

🚨 This project is no longer being actively worked upon. 🚨

Contents

• Live Demo
• General Info
  • Description
  • Technologies
  • Setup and Usage
• Reflections and Process
  • Development
  • Improvements
  • Extra Additions
  • Self Reflections
• Screenshots and Others
  • Screenshots
  • Acknowledgements
  • Contact and Support

Live Demo

General Info

Description

landing-page is an entire web page from a design with a header, four sections (hero, info, quote, and action), and a footer¹.

Technologies

• Git
• HTML
• CSS
• GitHub Pages

Setup and Usage

• Fork and/or git clone the landing-page repository
• Open index.html with the help of your favorite text editor

Reflections and Process

Development

• Create header section
• Style header section
• Create hero section
• Style hero section
• Create info section
• Style info section
• Create quote section
• Style quote section
• Create action section
• Style action section
• Create footer section
• Style footer section

Improvements

• Match the design images
  • based on image one (full design)
  • image two (color and fonts)
• Personalize the design with unique content
  • Modify HTML content for all sections
  • Modify CSS for HTML using flexbox properties

Extra Additions

• Make sure wrapping is respected when narrowing viewport
• Recreate README more fashionably using all the inspiration gathered so far

Self Reflections

• Firstly, by having a look at the design image, I made a mental model that there can be 4 sections, a header, and a footer.

• Secondly, I utilized the following pattern while working on any one of the sections: I added the HTML content for a particular section followed by CSS and then I would modify CSS to mimic the design image (i.e., essentially going back and forth between making adjustments to the CSS and HTML).

• Lastly, when all sections were finished and the design image was replicated perfectly, I personalized all the content on the landing page to suit my own unique ideas (stolen from Super Mario World lol!).

• This wasn't easy at the beginning because the concepts of CSS flexbox properties and wrapping were still new to me. On top of that, the division of sections in order to properly replicate the design image (given in the specifications) also proved to be quite cumbersome.

• But with practice, I was able to understand how to deal with these sections. The idea (given by TOP) of first putting the HTML content and then going back and forth with the CSS proved to be extremely helpful. Some other aspects relating to choosing proper values for flex-basis and brainstorming about the number of divs definitely gave me a headache.

Screenshots and Others

Screenshots

Acknowledgements

• Credit for the logo image goes to kreatikar (Pixabay).
• Credit for README goes to ritaly's README cheatsheet and ArjunSaili1's README advice.
• Credits for images goes to:
  • Pixabay for the Mario, Luigi, and Yoshi image and Mario gameboy image in the hero section.
  • Alexas_Fotos (Pixabay) for the Yoshi image and Luigi image in the info section.
  • Taha (Unsplash) for the Princess Peach image in the info section.
  • Lernestorod (Pixabay) for the Wario image in the info section.
• Credit for the info section goes to Wikipedia.
• Credit for the quote section goes to Nintendo Fandom Wiki.

Contact and Support

• Feel free to contact orghmaitr_92650 on discord for project queries.
• No further feature additions or support will be provided for this project².

Footnotes

1. landing-page is the second project from the Foundations Course in the The Odin Project. ↩

2. This project will no longer be actively worked upon because the TOP strategy guide mentions to only to focus on the point of the assignment and that projects in foundations isn't a strong portfolio generator. ↩