My Web Design Project Build a Tribute Page

[icxc]

Project Tribute Page

Feedback please!

[JoeDorseyJr]

I think it looks nice. It doesn’t seem like your page is responsive though. Was that intentional?

[icxc]

Hi Joe,

Thank you for the reply.
I really don’t understand what “responsive” means.
Wasn’t intentional.

[chauhannandini234]

Hello, responsive means that your page adjusts itself with the size of screen. Means it will look same at your phone as laptop/pc and please visit my project

Please someone review my project

Hello everyone, I am from India and enjoys designing webpages. I learnt most of things oneline resourses. But, nothing worked like freecodecamp. I did my first project on Web designing. I will appreciate your comments on this pen if you have extra 2 minutes for reviewing my project. All suggestions for improvement are welcomed. Enjoy your day and keep coding.

[jwilkins.oboe]

@icxc

I really don’t understand what “responsive” means.

This is what people see on smaller devices.

All of your content does not fit on the page and there is a horizontal scrollbar.
I would suggest using rem or em for font sizes and percentages for width and height.

Also, make sure that you are passing all of the test before submitting the project.

Right now you are passing 6/10.

For codepen, you don’t need to include the doctype, html and head tags.
That is already built into codepen.

Hope that helps!

[SamHobbs]

I am trying to understand. I am interested in understanding what needs to be adjusted. Do you mean that the problem is that the text needs to be scrolled when the viewing area is too narrow? Sometimes people generalize the use of a term and the term is used to refer to much more than it meant originally. For this the word wrap problem exists regardless of orientation so I do not understand why it is a problem with responsiveness.

[jwilkins.oboe]

This is what I am currently looking at in my phone.

I can only read a few words at a time before I have to swipe right to left just to finish the sentence.
Then I have to swipe back to start a new sentence and the process repeats itself.

The user experience of having to swipe constantly just to read a few sentences is not a pleasant one.

Now look at my revised version of @icxc 's page.

On a phone, this is much easier to read.
I no longer have to scroll from left to right just to finish sentences.
All of the content fits inside the width of the page which makes for a more pleasant experience.

[icxc]

Thnks Jessica!
Your advice is useful.

[SamHobbs]

@jwilkins.oboe

I no longer have to scroll from left to right just to finish sentences.
All of the content fits inside the width of the page which makes for a more pleasant experience.

Yes, of course. That is called word wrap. And the scrolling problem exists whenever the viewing area is too narrow. Word wrapping can and should be used for that text for all devices and orientations, not just some. Therefore it is not a responsiveness problem.

Update: Except I see that word wrap is working in that page; the problem I think is that the width is set to a specific width. If that is the problem then I think it would help icxc to have that specific guidance.

[icxc]

Hi Sam,

The intention is that everyone the project can watch completely on any device (smartphone, tablet, desk top,…).
I use a desktop and for me it’s okay. I don’t know what the project looks like on a smartphone or tablet yet.

[SamHobbs]

I am not an expert on testing sites for multiple devices. I hope that there are others here that can help with that. Something I have discovered using the debugging feature in Microsoft Edge is that there is a feature for simulating various devices. Perhaps someone can help with that; probably there is something in this site that helps.

[jwilkins.oboe]

@SamHobbs

I think is that the width is set to a specific width.

Yes that is the issue.
That’s why I suggested using percentages for width and height instead of hardcoding everything in pixels.

[jwilkins.oboe]

@SamHobbs

I am not an expert on testing sites for multiple devices. I hope that there are others here that can help with that.

FCC does touch on media queries in the responsive design course.

freeCodeCamp.org

For more in depth articles, CSS tricks is a good resource.

A Complete Guide to CSS Media Queries | CSS-Tricks

Media Queries for Standard Devices | CSS-Tricks

9 basic principles of responsive web design | CSS-Tricks

[icxc]

After googling I see this answer:
To create a responsive website, add the following <meta> tag to all your web pages:

But I have already added this text to my project. It must be something else.

[jwilkins.oboe]

Take a close look here

/* main */
#main{
	width: 980px;

This isn’t going to work well for devices with a width smaller than that. You could just delete that width and it would fix the issue. Or you could experiment with using a percentage instead. Maybe something like 85or 90%? I would suggest adjusting the browser window as narrow as it can go and seeing what width would work. Hope that helps!

[Roma]

Your page looks good @icxc. Some things to revisit;

• The test script, with all tests passing, should be included when you submit your projects.
  • Your page passes 6/10 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.
• Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
• Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
  • The one for CSS is good. Use it and address the issue(s). (Be wary of duplicating selectors. It can make maintenance a nightmare)
• Keep all your styling external. Do not use in-line styling.
• Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
  • “catch the rainbow” is not accessible

[icxc]

Thnx Jessica! I will take your advice.

[icxc]

Thnx Roma!
I will carefully re-read the exercise and your feedback and I will try to solve it correctly.

[icxc]

I want to add that I worked on the project in Notepad ++ on my desktop and then I just copied everything in Codepen (html to html page and css to css page).
Looks like it wasn’t right.

[Roma]

@icxc

I want to add that I worked on the project in Notepad ++ on my desktop and then I just copied everything in Codepen (html to html page and css to css page).

In codepen, when in the Pen view the three sections (HTML, CSS and JS) are editors.

@icxc

Looks like it wasn’t right.

If you mean because I mentioned what the HTML editor expects, that’s okay. You’re not the first.
In the HTML editor, delete those first two blank lines so your doctype starts on line 1 and you’ll see codepen puts a little exclamation mark in the lower right. Clicking that will give you additional information.

Codepen gives you the option to export your code. The export button is in the bottom right when in the editor view. The exported code will contain all the boilerplate elements. If they are in the HTML editor that boilerplate code will be duplicated when using the export button.

A majority of new coders do not use the boilerplate elements so good on you for using them correctly.