Product Landing Structure Page Help

HTML-CSS
1

Hello FCC,

I started the product landing page project a few days ago and have made (what I consider to be) decent progress on it. But…It’s mess of spaghetti code. I still need to add some of the functionalities required to pass the tests but I’m worried about the overall structure and want to fix that first.

Right now my main issues are:

-Not sure if I made the correct call to use grid instead of flex-box

-Certain the grid structure is trash

-Not sure how to properly define “display” property in order to align content

-Every other small detail I’m missing because I don’t know whats good design .

Any help with this doubts would be greatly appreciated. Here’s the pen

2

Hey so I’m pretty new as well, but I think one of the test requires you to use flexbox instead of grid.

3

Seems like a perfectly valid use case for Grid. But I’m not sure I can answer your questions without them being more specific.

  1. On the images use background-size: cover; instead of the 100% 100%

  2. The lower-right-container content is causing an overflow.

First, use max-width to constrain widths, otherwise, you prevent elements from shrinking as needed when the layout decreases in size.

Second, if you want to use positioning, use percentages for the top/right/bottom/left properties, you can also use the transform: translate() function. Or instead of using positioning you can try using FlexBox or Grid to place the icons and form/form elements.

4

Boricua, Design looks great!
From Villa Carolina here, living in Florida.

Before you spend too much time on how the site looks, I suggest that first you add the test suite script and focus on the html. That way you can be sure you have met the project requirements before you start spending too much time on how things look.
image

first thing you want to do is drop this line into the head seaction

<meta name="viewport" content="width=device-width, initial-scale=1">

I will need some time to review the rest of the code.
I have made a fork of it
https://codepen.io/chriscline1138/pen/wNWqRN
If you like I will be happy to work with you on this project.

making some progress I have made comments to explain the changes I made
image
You still need to add a video and elements for your links to connect to
but it is responsive and passing all other test

5

Here are some resources you can use to get a more in-depth grasp on Grid and Flexbox https://gridbyexample.com/resources/ to get you started.

Some others;



Rachel is the one to follow when it comes to Grid and Flexbox. Jen Simmons is the other one you should follow if you want to learn and know Grid and Flexbox.

6

nice resources, thanks for sharing

7

Saludos!

I’ll check your fork now. Thanks for the tips.

8

Thanks for the tips! I’m working on the project now

9

awesome! let me know if there are any other questions,
here to help