FCC: Landing Page Product - Apple

Code Feedback
1

Hi everyone!

If possible, I would like to have a critique on a project that I have done. :slight_smile:

MyCodePen

I’m quite content with it only because I feel like I’m beginning to grasp a little bit of how flex works :laughing: but as a beginner coder, I’m sure there are lots of corrections that are needed and I would like to have feedback based on:

  • semantics and practice of my code

  • responsiveness of my web

Thank you in advance, coders!

1 Like
2

Your page looks good @KO-d14. Some things to revisit;

  • The test script, with all tests passing, should be included when you submit your projects.
    • Your page passes 15/16 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
    • Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address. (This is HTML5 so you’ll want to take care fo that)
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Keep all your styling external. Do not use in-line styling.
2 Likes
3

your page looks nice, but there are some issues with responsiveness. My preference would be to have font size slightly larger on big screens, particularly the nav links.
On smaller width, some sections start to overlap and the video section elements shrink too much. You should make them arrange into a column, instead of wrapping two in a row. After all the page is aimed for phones, so it should look good on phone screen :stuck_out_tongue_winking_eye:

1 Like
4

Hello @Roma :wave:

Thank you for your patience!

Oh wow, thank you for pointing that out. I don’t know how it failed again when it went through before :thinking:
Those are very helpful tips :blush:
But to be honest, I don’t think I fully understand how to read the errors aside from the first line like you mentioned. If possible, could you please explain how to read the errors?

Untitled
Untitled1922×914 227 KB

Or possibly sites, etc that will guide me in the right direction to obtaining the said skill of being able to understand and depict my errors?
I am aware that at the moment all I’ve been doing is reaching out to coding community for help (which I’m very grateful for) but I’d like to eventually be able to rely on myself/develop stronger problem-solving skills. :pensive:

In regards to your last bullet point, I was reading a bit on sites i.e StackOverflow about it. Based on what I’ve read so far, I’d like to confirm if separating CSS from markup is important due to:

  • Keeping the code clean and easy to read

  • In case of transferring it globally if needed be

  • Inline styling takes precedence which may affect styling properties in actually CSS

  • Use either a .css extension file or style it in <style> section in HTML

Thank you!

5

Hi @Sylvant :wave:

Thank you for your patience and for the tips as always!

I’ve read about the whole mobile 1st approach, but I guess I still don’t know how to fully implement it. :sweat_smile: :pensive:
But in order to do change the font size on different platforms, do I do so using @media ? I feel like I’ve only starting to understand the basics of flex, and now I’m trying to understand how @media works to make my page more responsive. :joy:

6

Yes, @media is the way to go. Check out how I did it on my personal portfolio page!

The media queries on my site are used to rearrange the elements under my portfolio section when the viewport (?) is equal to or below 500px width. You can add whatever properties you want… Resize the text, hide/show images, rearrange elements, etc. Line 97 and 130 contain the selectors I’m referring to.

Checking if media queries work is simple; just shrink the browser window you are serving your page from, and see if the properties are working as intended.

I’m also confused why your test case #5 is failing (in reference to your screenshot), but I have two guesses…

  • macsection is the first nav-link that appears in the nav-bar, but iphonesection is the first section that appears on your webpage. That may be causing problems with the automated tests
  • Fix the indentation for your musicsection. Your <div class="music-container"> is not indented inside of the section, and the closing tags for those elements are also not indented correctly. This could be causing problems as well.

I really like the way your site looks and I think you did a good job with it. Keep up the good work!

1 Like
7

Hi @liam.stojanovic !

Thank you for your advice and for helping me understand @media by letting me test your code ! :smiley:

Also, I really like your portfolio looks! It’s nicely made. :laughing:

In response to…
(Your first bullet point: )
can the order of sections in the body in correspondence to the order of the nav-link affect the test requirement? :thinking: I imagine as long as it is properly linked, the order shouldn’t matter as much but then again, I could be wrong. :sweat_smile:

(your second bullet point:)
I tried formatting the HTML :smiley: not sure if that have resolved the issue?

Awww thank you! That really means a lot, :blush: I will continue to work hard to code!

-Ko

1 Like
8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.