Product-Landing-Page- Feedback. I am very disappointed in myself

Code Feedback
1

Tell us what’s happening:
I am really disappointed in myself. I have spent quite a bit of time to get this product landing page right.
The more I work it messier it is gets. At the end I don’t really know what is going on.
I tried to copy FCC sample but still messed it up.
I am not sure how to break it down the project to smaller pieces so it does not mess up entire page once I change font or width.
Which elements needs to be styled first, which properties necessary or unnecessary and which one goes first or second. Ughghghg
It seems like big giant puzzle except it has own gazillion puzzles, which has gazillion ways to approach…
I have finished HTML/CSS. and Javascript Algorithms And Data Structures Certification. I liked solving coding algorithm challenges. But HTML/CSS projects makes me think maybe this is not my thing. I have spent lots of time to this point but I really want to give up all of it.
Sorry for the rant. I am sure there are people have/had this. Maybe you can share your struggles.
Your code so far


"use strict";
import subtract from "math_funcions";
subtract(7,4);

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36.

Link to the challenge:

2

You have many syntax issues you need to resolve, which could help you fix many problems I am seeing. Codepen has a nice feature for each module (HTML, CSS, and JS). In the upper right hand corner of each module there is a dropdown menu. The HTML dropdown has a Analyze HTML and there is a corresponding option in the CSS and JS modules. Once you click on this link, it will capture several issues. Work through each one and recheck after each fix to make sure you have not created any further errors. Once all the critical errors are fixed, take a look at your project and see what needs to be adjusted overall in the html and css code.

If you get stuck and need some help, just ask.

FYI - Overall your project looks great on desktop. The problem becomes when the browser width shrinks. Because you are using a lot of fixed widths and heights (vs. percentages or relative units) for certain container elements, some text starts overflowing into other elements. Just try to tackle one thing at a time.

I will show you one such easy fix. Take the following class for the Features div.

.features{
  margin: 0 auto;
  text-align: left;
  padding-left: 25px;
  padding-top: 120px;
  height: 200px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s; 
}

If you just change the height from 200px to 100% or remove the height property all together, it will expand to the full height of the content inside it.

1 Like
3