Man that was difficult! Landing page feedback

Code Feedback
1

Wow! So this took me over 4 days to complete and at times had me totally confused at times on how to progress and achieve the layout and style I wanted. Many times I sat back and just thought to myself I was going to be stuck forever from that point forward.

So initially I started building this as a grid layout page but soon came to the conclusion that was the wrong direction to head and I had totally missed the mark.

Then upon trying to figure out flexbox I realised I didn’t actually understand how to use it whatsoever. So back I went through the lessons, scouring the net for resources and tutorials.

After countless tutorials and references back to FCC I had a little grasp of how flex box actually worked and how to manipulate simple layouts. I started building the page but again, I ran into a lack of understanding and ended up scrapping another two pens. So I went back to basics and spent time building small navigation bars and implementing images and using margins. I repeated the process until I felt comfortable enough to start implementing things.

Finally I started building my page and little did I know things were going to get really difficult. I broke the project into parts (header, text below, video, footer etc) and started finding that every section I came across was a total struggle. I’d end up trying to line something up or move something and having to refer back to the lessons to search the net continually. It was an absolute struggle but despite my negativity it was rewarding and interesting.

Landing page points
*building the header (this soaked up nearly 2 days, aligning my image to the left, padding and margins and flex alignments. Pretty much everything here
*utilising the unordered list to fit the way I wanted, just couldn’t get it to sit in a line or stack. I think this is the first time I had to really sit and read about display: inline vs block. still don’t fully understand it.
*totally messed up implementing the text box and spent a few hours wondering why my text started half way in the middle of the box (it was padding)
*flexbox in general, I didn’t understand how it worked and how to manipulate it or it’s properties
*the font awesome icons and how to change their size, still not sure how to do it from css so just did it inline
*how to implement the youtube video and sort the inline options to remove controls etc
*by this point I was more comfortable with flexbox and it’s layout for my product boxes but got totally stuck on how to vertically centre my select buttons. In the end I just padded them down in a horizontal line using the element above
*the footer, not so much building it but I had a weird 5px border all the way round the bottom of it, found out I needed to set margins to 0px in the html and body even if I was going to set them again after
*back to the header and sorting out its positioning for fixed and not destroying my page
*only discovered half way through classes can be duplicates to save lines in the css but id’s are singular. ended up going back through all my html and css to organise and slim it down
*totally ignored the tests at the start so had to rename a lot of my classes and id’s after

Plus points
*flexbox does feel so alien anymore
*I’m getting the gist of more tags and attributes
*CSS was daunting to me initially but now doesn’t feel so bad
*page layouts feel more comfortable and I can think of simple layouts in my mind and bring them to the screen with better accuracy
*started to use chrome’s inspector to figure out what in the world was happening with my padding / margins / element. So useful!

In the end I left the page void of much colour and just added highlights as I don’t feel I could do it justice. I really need to get used to utilising complimenting colours and design styles but it isn’t something I too worried about at the moment as it will come with time.

Overall I’m quite happy with the page and it’s mostly turned out how I envisaged in my mind. Glad I stuck at it as it’s taught me a lot just purely from referring back to FCC and searching out on the net for answers to my problems. I thought about just filling in the page with placeholder text but decided writing up each section would motivate me to achieve what was in my mind. Generally, I tried to stay parallel to the layout of the example page but give it my own style and feel and not utilise additional elements I wouldn’t have come across yet as I find sticking the regime of the example page forces me to learn how to build things I could otherwise skip over and change out for something else.

Anyway, sorry for the long post and I welcome any feedback to help me improve.

on to the next one…

1 Like
2

Love the page and it’s theme, your choice to use muted colors really works out. It was fun reading through the product description, must have taken you quite some time to come up with creative one’s like ‘Margaret Scratcher’. The only problem I noticed was with the responsiveness of the page below screen widths of 380px, below this threshold a horizontal scroll bar pops up and the leads to creation of whitespace on the right side on the page. The white space gets progressively worse on further reducing the screen width.

image

Hope this helps and keep up the good work.

1 Like
3

I really like the website. It is simple and It works. One thing you could think about is the nav at the top. When you click the button it brings you right to the section and it feels a little snappy. You could use jquery and smooth things up a little bit.

$("#id-of-section")
.click( function() {
$(‘html, body’)
.animate( {
scrollTop: $(“element-class-or-id”)
.offset()
.top
}, 1000 ); // Whatever offset you want here.
} );

Also the page is not mobily responsive.

I love the theme though.
Other than these little problems the page is well built and not too distracting.
Great Job! Keep up the good work!

4

Looks good. Responsivity is tight. If you want to hit that perfectionism 100%, you can look at how to make the video responsive in my CSS cheatsheet.

If there’s anything I can especially compliment, it’s your process: When in doubt, read/break toy examples. W3schools “Try It” function is great for this. Go back to FCC. It’s fine. Reading in context of a problem is a thousand times more impactful than reading in a void.

And do the next one in Grid. It’s not very hard to re-create the layout of the model project they provide using Grid. I think I did flexbox for my landing page, too. Being able to use both raw layout technologies in CSS is important to not cut yourself out of the future and frameworks that abstract the raw concepts.

One last note: If you’re having issues with layout, use false-color to make sure you know what’s going on, and use your browser’s inspector to see if the CSS rules applied to your element are what you think they are.
False color layout: https://codepen.io/vipatron/full/zWKzbX/
Final product: https://codepen.io/vipatron/full/ZxBLgM/

5

The project comes earlier than the Javascript Section of the Curriculum.

As to the mobile responsivity (and this goes for @AdityaVT’s comment, too): I’m not noticing responsivity breakdown until 334 px, narrower than the hardware width of every phone in portrait mode.

Edited: I misremembered the breakpoint that caused a horizontal scrollbar

6

Thanks for your feedback. What would be the best solution to this? Something like another media query to handle sizes below 380px? How low would be best to go?

7

Thanks for the feedback and the cheatsheet. That’ll definitely come in handy. I used grid for my survey page and certainly found it easier to grasp than the dynamic nature of flexbox.

1 Like
8

The unresponsiveness of the page below specified screen width is due to the unresponsiveness of the email input. Adding a media query specifically targeting this element and reducing its width for lower screen widths should make your page perfectly responsive. Try specifying the width in % rather than px, this may help reduce the amount of media queries you will have to use in future projects. You may have to adjust the padding to make the placeholder text completely visible after the width change. Hope this helps.

1 Like
9

No problem. I found it useful to shortcut what I had to look up all the time. As for flexbox, I read CSS tricks’ coverage of flexbox when I was first getting started (before the Beta of the current production version of FCC) because I didn’t understand Bootstrap, which is a framework built on flexbox.

  • Also useful, especially when you get Javascript is MDN. I usually just google “mdn <whatever js concept I don’t understand>” and it’s useful.
  • W3 is okay for a 10,000-foot view of Javascript, and very useful for CSS: “w3 <whatever css concept I don’t understand>”. (Simplified explanations and one-click playgrounds to mess around with the code.)
  • CSS tricks is in-depth on CSS concepts that require some thought, like flexbox and grid.
10

Yep that’s great advice thanks very much. Didn’t even think about the email input.