Project Feedback

[yufenhsi]

Build a prototype page (i.e. simple example of how it will look, without making it work) for a new search engine

@egillespie Can you take a look at this? It's hosted here and meets the following criteria:

• [x] The page includes the name of your search engine in big letters (you can make it up), with a search input below it, then a button below that to run the search (the button doesn't have to do anything for this prototype)
• [x] The font size of the search engine name is at least 70 pixels, so that it's very easy to see
• [x] span elements are wrapped around each letter of the name, like this: <span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>, so that they can be styled individually with classes
• [x] The on-hover colors from the paragraphs on this page are used to color individual letters of your name (similar to the letters in Google's logo)
• [x] Inspect the input element at the bottom of the Prototyping states page of the lesson to create an identical-looking search box for your own site (it should even use the same styles on focus)
• [x] The styles from the "Create Account" button on this page are used for your "Search" button (it should even use the same styles on hover and active)
• [x] There are no stylelint errors in your CSS (this will also be expected for all future projects)
• [x] All your CSS exists in a .css file

[KatieMFritz]

Hi Yufen, there's a typo in your gh-pages branch (you called it gh-pahes) so the hosted site doesn't work. Please fix that, double check, and then comment back here! 😸

[yufenhsi]

Hi Katie, I've fixed that and checked. Thank you!

[egillespie]

Hi @yufenhsi, the heading on your page looks great and your CSS is really well formatted! 🎉

The text box and button have some noticeable differences from the prototypes. Here are a few ways I think you can improve the project:

1. Text box styles

Your text box is quite a bit different from the prototype that we want you to model. We'd like to see your text box match the styles of the prototype exactly.

Here are screenshots of our prototype and yours before clicking in the text box:

And here are screenshots of our prototype and yours after clicking in the text box:

Would you mind inspecting the prototype and updating your text box styles to match exactly?

2. Search button

There are a few noticeable differences between your search button and the one on our prototype page.

Here are screenshots of our prototype and yours before clicking the button:

And here are screenshots of our prototype and yours while clicking the button:

Could you model the appearance of these features after the "Create Account" button on the prototype page linked in the criteria?

---

After you’ve made your changes and pushed them to GitHub and your hosted site, give it a once-over to make sure it looks right, then comment back here and I’ll take another look.

Thanks! 🤖

[yufenhsi]

Hi Erik,

Thank you for the suggestions. I did some changes and currently my text box and search button look similar to the prototypes. 1 ) add searchBox:hover, searchBox:focus in my css file. 2 ) I also changed the border in .searchBox 3 ) I replaced old styles to new ones in search-Button:hover and search-Button:active.

[egillespie]

Thanks, @yufenhsi, this is looking a lot closer! 🎉 There are a few differences that still jump out at me. Would you mind looking into these?

1. Text box styles

The text box looks really close at a glance. I do see some styles are a little different, though. Namely:

1. Font family
2. Font size

Would you mind inspecting the prototype and updating your text box styles to match?

2. Search button

There are a few noticeable differences between your search button and the one on our prototype page. Here are the things that jump out at me:

1. Your button has a gray border
2. Your button is using the default font family
3. Your button shows an inset border when clicked
4. Your button shows a blue outline when clicked

Here's a screenshot of the button with the blue outline and inset border:

Could you model the appearance of these features after the "Create Account" button on the prototype page linked in the criteria?

---

Once these are done, you should be all set for the next project! Let me know if you have any questions or need some pointers. 😄

[yufenhsi]

Hi Erik,

Thank you! I've made some changes to match the prototypes according to the suggestions.

Text box

1. I’ve added font-size:16px and font: inherit in textBox to match the prototype

Search button

1. I tried to add outline-style: none and border-width: 0 into search-Button to avoid the annoying borders showing, including gray border and inset border and blue outline when clicked
2. After inspecting again, I used font-family: Camphor, Open Sans, Segoe UI, sans-serif; for my search button

[egillespie]

Wow, this is coming along nicely! 🤘

The only remaining detail is the font family of the text box. In the prototype, the font attribute is set to inherit. However, inherit is a keyword that means "use the value that my parent element is using." Since your text box's parent element does not supply a font family, the incorrect font is being used.

To find the actual value of the font-family style that you should use, inspect the text box in our prototype and click on the "Computed" tab of Chrome Devtools. It'll look like this:

If you keep scrolling down, you will see the font-family value. Grab that value and use it in your own CSS and your text box will match the prototype's exactly!

Give it a shot and reach out if you have questions! 🐰

[yufenhsi]

Hi Erik,

Thank you for the detailed description! I think I find out that value for font-family is Merriweather, Merriweatherbody, sans-serif as this screenshot shows. And I put this value in my CSS file and it did not appear any stylelint.

I'm still worried that I would do it wrong then push. Thus, I'd like to make sure if that value for font-family is "Merriweather, Merriweatherbody, sans-serif." If so, then I will push my project again.

[egillespie]

The body, html that you see on the right side of Merriweather is actually a comma-separated list of elements/selectors that the style has been applied to. That means you only want to use Merriweather, sans-serif as your style — which tells the browser to use the Merriweather font if it's available, otherwise use the browser's default sans-serif font. 😄

[yufenhsi]

Thank you for the suggestion. I've used Merriweather, sans-serif for textBox as my style and updated the project.

[egillespie]

Excellent! Nice work on this project! 🎉 :shipit: