CODE REVIEW: Fizen's Landing Page

[ry4-n]

Please provide review on my Landing Page. The review should include ways to improve the look and feel, the HTML code (semantically and syntactically ), CSS code, and any scripts.

Please refrain from saying things like, "I don't like this." A better review would be to provide resources and examples of ways to do it better.

Anyone is free to code review someone's work, but please add yourself as an Assignee to this issue.

[amritpandey23]

These are some of my reviews regarding HTML and CSS code in your landing page.

1. Viewport Meta Tag: Even if your website/webpage is targeted to a specific range of screen sizes, it is important to include meta viewport that that is very important if your audience opens up the page in small screen sizes specially like apple devices.
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

2. It is a good practice to include link to css files in head section as modern browser do not load styles of webpage again and again also, if you keep the css files in body the browser is going to load the files again on page refresh, instead of already having a copy of styles!

3. Use of tags like <small> <sub> etc. have become outdated instead of that we use a <span > tag and give it styles in css files as the person who is goin to handle your code dont have to look HTML to redesign elements on page.

4. Tags like <section> must be used once, it will not make a difference, but section on a page is usually not more than two. It is ethically correct to use not more than two section on page.

5. Instead of having reset styles and custom styles in one file it is usually a good practice to keep them seperate.

6. * {box-sizing:border-box;} I would have used this because every element on the page needs to in their constant width and height, no matter whether the padding or margin changes.

[ry4-n]

@A-pandey Thanks for the review. I've got some follow up comments.

1. Interesting, I hadn't heard about using the view port meta tag. I'll look into this.

2. Ya, the css files are like that because I dumped it from codepen and I had them at the top of my page. I'll fix that.

3. You have this part backwards. You want to use tags that provide more semantic value to your page, for example using <strong> over <span> or <section> over <div>. HTML 5 has actually redefined many of these tags as well.

• https://www.w3.org/TR/html5/text-level-semantics.html#text-level-semantics

4. This is incorrect as well. Section can and should be used as many times as necessary, to define a section. The <main> semantic element, however, should only be used once.

• https://www.w3schools.com/tags/tag_section.asp
• https://www.w3schools.com/tags/tag_main.asp

5. I think honestly it's best to use a pre-built reset style sheet, but in this situation that isn't necessary. There's nothing wrong with including these in the same file.

{box-shadow:border-box;} I would have used this because every element on the page needs to in their constant width and height, no matter whether the padding or margin change

I think you meant to say box-sizing, which I did apply this to all block-level elements I needed to use with my reset styles.