Landing Page construction

I went back to code school to recondition my coding memory. Through Codecademy Pro I’m working with HTML and CSS to build a landing page. Learning and the appreciating the utility of¬†GitHub and Github pages. Once completed I begin intro courses to Bootstrap, Javascript, and JQuery. I worked with a couple of JQuery libraries to create these projects.

As dated, below is my process for building a landing page. It includes my plan of attack and the daily result. The project will be completed by Friday, October 6, 2017.

Day 1, October 2, 2017

Plan Of Attack

  1. Review the wireframes for desktop and mobile.
  2. Find the divs in the wireframe (see photo below). Indicate class names of divs.
  3. Build the skeleton of the landing page with HTML. Add the text and image/video placeholders.
  4. Style sections 1 and 2.

Link to the code of the project on Day 1 > Github

In the gallery below, images 1-4 are screenshots of the wireframe provided by Codecademy Pro. Image 5 is my Div Breakdown, which helps me build the landing page in sections.

Below, screenshot of Day 1 progress. I styled superficially 3 sections. The header, banner and information sections are in place. Content organized within Flexbox. I created the mobile header (not pictured) too. I got farther into the project than I expected. A file provided by Codecademy Pro, reset.css, stripped text and more of its properties. It’s a useful file. When I begin the work with media queries I’ll fewer properties to translate for mobile. Through this project I’m ‘seeing the light’ of CSS, Flexbox and the reset.css file. Little by little the lessons from the Codecademy Pro course are sticking. Daily practice is essential.


Day 2, October 3, 2017

Plan Of Attack

  1. Style remaining sections.
  2. Begin styling type and adjust colors.

Below, screenshot of Day 2 progress. Styled the desktop landing page. Will need detailing. The plan tomorrow is to tackle the mobile version.

Landing Page - Day 2
Landing Page – Day 2

 


Day 3, October 4, 2017

Plan Of Attack

  1. Finesse CSS for each section.
  2. Begin mobile styling.

Below, screenshot of Day 3 progress. Styled the desktop and mobile landing pages. Tomorrow, review the measurements for accuracy.

Takeaways:

  1. Learned to swap images through display: none; and display: block; so desktop and mobile have the appropriate images
  2. Learned to add a class to an image so image is easily manipulated for the size requirement.
  3. Learned to manipulate the navigation for mobile so the icons center in coordination with the screen size.
  4. Need find the appropriate typeface because the one used “feels techie”
  5. Had a glitchy thing happen where the styling wasn’t applied to all the elements with a specific class (want to revisit because I can’t believe the styling didn’t take)
  6. Learned to make the desktop version responsive but the CSS isn’t pretty when the browser gets close to the mobile screen size.

Day 4, October 5, 2017

Plan Of Attack

  1. Finesse typeface.
  2. Refine mobile styling.

Below, screenshot of Day 4 progress. Finished and submitted for review.

Takeaways:

  1. Media queries can be black of hole of queries. Choose max-width thoughtfully.

To see the landing page in action please visit its Github Page.