# Applied Design Projects - Feedback Appreciated

**URL:** <https://forum.freecodecamp.org/t/applied-design-projects-feedback-appreciated/394992>\
**Category:** I Built This\
**Created:** [May 27, 2020, 1:56pm UTC](https://forum.freecodecamp.org/t/applied-design-projects-feedback-appreciated/394992 "2020-05-27T13:56:34Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![martinrombach88](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/martinrombach88/32/135291_2.png) [@martinrombach88](https://forum.freecodecamp.org/u/martinrombach88)\
**Post date:** [May 27, 2020, 1:56pm UTC](https://forum.freecodecamp.org/t/applied-design-projects-feedback-appreciated/394992/1 "2020-05-27T13:56:34Z")

</div>

Hello, I just finished Applied Design. All sites submitted, all tests passed.

[https://codepen.io/martinrombach88](https://codepen.io/martinrombach88)

Would like some judgement from a design perspective. Praise appreciated, criticism very much encouraged. Plan to revise my code with your recommendations to make my portfolio look nicer.

Thanks 🙂

---

<div class="post-metadata">

**Author:** ![germanbobadilla](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/germanbobadilla/32/152727_2.png) [@germanbobadilla](https://forum.freecodecamp.org/u/germanbobadilla)\
**Post date:** [May 27, 2020, 4:06pm UTC](https://forum.freecodecamp.org/t/applied-design-projects-feedback-appreciated/394992/2 "2020-05-27T16:06:37Z")

</div>

Hi @martinrombach88,

Why don’t you give a scroll-behavior smooth to your html on the documentation website?  
It will make the navigation smooth when clicking on the nav links. Speaking of which, it’d be nice if you make the nav-links look like a button.

---

<div class="post-metadata">

**Author:** ![Roma](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/roma/32/112899_2.png) [@Roma](https://forum.freecodecamp.org/u/Roma)\
**Post date:** [May 29, 2020, 7:05pm UTC](https://forum.freecodecamp.org/t/applied-design-projects-feedback-appreciated/394992/3 "2020-05-29T19:05:13Z")

</div>

@martinrombach88, some feedback. First off, it’s very time consuming to go through all of one person’s projects at once. Would have been better to have submitted them as you finished. Plus, it would have prevented you from making the same coding errors.

- Learn to do all your styling externally.
  - I can’t tell if you know how to do internal styling correctly because a lot of the basic elements are missing. Yes, I know codepen only expects the code you’d place in the `body` element but it also expects html code in one section and css in another.

- Run your HTML code through the [W3C validator](https://validator.w3.org/#validate_by_input).
  - There are coding errors you should address.

- Don’t use `<br>` to force line breaks or makes spacing. Use CSS.
- Remember, the “R” is RWD stands for Responsive

**tribute page**

- along with the above, this page needs to be responsive

**survey form**

- same as above re: running code through a validator, correct coding errors and not using `<br>`
- user’s should be able to click on the label to select, not just the radio button / checkbox
- change the cursor to a pointer when hovering over the submit button

**product page**

- same as above re: run through validator, correct coding errors and don’t use `<br>`
- page needs to be responsive. on smaller screens “about” and “video” sections mash together, text cannot be read

**tech doc**

- same as above re: run through validator, correct coding errors and don’t use `<br>`

**portfolio**

- same as above re: run through validator, correct coding errors and don’t use `<br>`
- the page needs to be responsive

> **[: The Line Break element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br)**
>
> The HTML br element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.

---

<div class="post-metadata">

**Author:** ![martinrombach88](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/martinrombach88/32/135291_2.png) [@martinrombach88](https://forum.freecodecamp.org/u/martinrombach88)\
**Post date:** [May 31, 2020, 2:40am UTC](https://forum.freecodecamp.org/t/applied-design-projects-feedback-appreciated/394992/4 "2020-05-31T02:40:13Z")

</div>

@germanbobadilla @Roma Thanks for the feedback, I appreciate it. I’ll repost when I’m happy with them. If you have time for more feedback when I do it’s always appreciated. Sorry to post all at once roma.

---

<div class="post-metadata">

**Author:** ![Roma](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/roma/32/112899_2.png) [@Roma](https://forum.freecodecamp.org/u/Roma)\
**Post date:** [May 31, 2020, 3:00pm UTC](https://forum.freecodecamp.org/t/applied-design-projects-feedback-appreciated/394992/5 "2020-05-31T15:00:56Z")

</div>

Let us know when you’ve cleaned things up. I’ll take a look at them again.

---

<div class="post-metadata">

**Author:** ![martinrombach88](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/martinrombach88/32/135291_2.png) [@martinrombach88](https://forum.freecodecamp.org/u/martinrombach88)\
**Post date:** [May 31, 2020, 3:50pm UTC](https://forum.freecodecamp.org/t/applied-design-projects-feedback-appreciated/394992/6 "2020-05-31T15:50:45Z")

</div>

[https://codepen.io/martinrombach88/full/qBOXBxe](https://codepen.io/martinrombach88/full/qBOXBxe)

Here is a link for the cleaned Tribute Page. All HTML issues from the Markup Validation Service were fixed. No br, and I moved the css to the styles page.

I removed a Youtube video at the bottom of the page and replaced it with a link, I found it very difficult to find the Javascript for a responsive Youtube video that didn’t look oversized on the page. Felt sad to do it, but the Tribute Page isn’t about Javascript.

I made the margins and fonts change for the text depending on the max-width of the view port (740px and 420px).

---

<div class="post-metadata">

**Author:** ![Roma](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/roma/32/112899_2.png) [@Roma](https://forum.freecodecamp.org/u/Roma)\
**Post date:** [May 31, 2020, 5:29pm UTC](https://forum.freecodecamp.org/t/applied-design-projects-feedback-appreciated/394992/7 "2020-05-31T17:29:31Z")

</div>

The tribute page looks good @martinrombach88. Just a few things to mention;

- The link to the font and the stylesheet belongs in the `head` element, not in the `body`. The link to the test script, because it’s JS, would normally go right before the closing `body` tag.  
When using an external stylesheet you don’t need the `style` element. And trust me when I tell you, you don’t want them in codepen. They can cause an issue.  
That being said, codepen provides the boilerplate for you. It only expects the code you’d put within the `body` element in HTML. (No need to include the body tags). For anything you want to add to `<head>` click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for \<head\>’ box.
  - The link to a font would go in the box labeled ‘Stuff for \<head\>’ . There’s not need to link to the stylesheet as that’s part of codepen’s boilerplate.

- Not sure if you noticed but even though you’re using the `<strong>` tag the text on your page doesn’t render as such. This is because when you linked your font you only selected regular (regular 400). Go back to [google fonts](https://fonts.google.com) and add the “bold 700” to the one you have chosen and paste in the new link. You’ll see the difference it makes to your page.  
Let me know if that’s not clear.

This is a side note. You can incorporate it or not. Movie titles, book titles, a television series, are italicized in print. Shorter works like short stories, poems, and articles go in quotes. Episode titles within longer works are put in quotes.

---

<div class="post-metadata">

**Author:** ![martinrombach88](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/martinrombach88/32/135291_2.png) [@martinrombach88](https://forum.freecodecamp.org/u/martinrombach88)\
**Post date:** [June 1, 2020, 10:15am UTC](https://forum.freecodecamp.org/t/applied-design-projects-feedback-appreciated/394992/8 "2020-06-01T10:15:51Z")

</div>

Hey @Roma. The Survey Form is cleaned up. [https://codepen.io/martinrombach88/full/zYvdYmX](https://codepen.io/martinrombach88/full/zYvdYmX)  
Hopefully you’ll see even less this time.

I also made the extra changes to the Tribute Page, apart from the extra italic text, as I don’t feel it fits with the style.  
[https://codepen.io/martinrombach88/full/qBOXBxe](https://codepen.io/martinrombach88/full/qBOXBxe)

---

<div class="post-metadata">

**Author:** ![Roma](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/roma/32/112899_2.png) [@Roma](https://forum.freecodecamp.org/u/Roma)\
**Post date:** [June 1, 2020, 2:39pm UTC](https://forum.freecodecamp.org/t/applied-design-projects-feedback-appreciated/394992/9 "2020-06-01T14:39:33Z")

</div>

Both pages are looking good @martinrombach88. Nice job!

In the future, if you want to import the same font with two (or more) different weights, just select them at the same time and you’ll have them in one link. Like so;  
`<link href="https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2:wght@400;700&display=swap" rel="stylesheet">`

---

<div class="post-metadata">

**Author:** ![martinrombach88](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/martinrombach88/32/135291_2.png) [@martinrombach88](https://forum.freecodecamp.org/u/martinrombach88)\
**Post date:** [June 3, 2020, 7:51am UTC](https://forum.freecodecamp.org/t/applied-design-projects-feedback-appreciated/394992/10 "2020-06-03T07:51:57Z")

</div>

[https://codepen.io/martinrombach88/full/ZEbvgmj](https://codepen.io/martinrombach88/full/ZEbvgmj)

Here’s the cleaned up Product Landing Page. It’s getting easier to follow your directions haha.

[https://codepen.io/martinrombach88/full/zYvXOjb](https://codepen.io/martinrombach88/full/zYvXOjb)

And here’s the cleaned up Tech Doc too.

---

<div class="post-metadata">

**Author:** ![martinrombach88](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/martinrombach88/32/135291_2.png) [@martinrombach88](https://forum.freecodecamp.org/u/martinrombach88)\
**Post date:** [June 3, 2020, 9:11am UTC](https://forum.freecodecamp.org/t/applied-design-projects-feedback-appreciated/394992/11 "2020-06-03T09:11:23Z")

</div>

Just started putting smooth scrolling in. I can see the difference, it’s nice. 👍

---

<div class="post-metadata">

**Author:** ![germanbobadilla](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/germanbobadilla/32/152727_2.png) [@germanbobadilla](https://forum.freecodecamp.org/u/germanbobadilla)\
**Post date:** [June 3, 2020, 9:27am UTC](https://forum.freecodecamp.org/t/applied-design-projects-feedback-appreciated/394992/12 "2020-06-03T09:27:41Z")

</div>

Cool.

I just looked at your survey form.

Why don’t you give it a nice background to what’s holding the form? Or a box-shadow to the form. Make the colors be equal or similar to the main color of the image.

Then you can justify your elements inside the form to the left. Your radios and checkboxes.

Did you know that you can group elements as a column using flex display? Search: How to flex items in columns and you’ll see how many things you can do with all those elements.

---

<div class="post-metadata">

**Author:** ![martinrombach88](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/martinrombach88/32/135291_2.png) [@martinrombach88](https://forum.freecodecamp.org/u/martinrombach88)\
**Post date:** [June 4, 2020, 12:25pm UTC](https://forum.freecodecamp.org/t/applied-design-projects-feedback-appreciated/394992/13 "2020-06-04T12:25:38Z")

</div>

[https://codepen.io/martinrombach88/full/gOayEEz](https://codepen.io/martinrombach88/full/gOayEEz)

Personal Portfolio cleaned up.

@germanbobadilla I’ll have a go at the Survey Form soon.

---

<div class="post-metadata">

**Author:** ![Roma](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/roma/32/112899_2.png) [@Roma](https://forum.freecodecamp.org/u/Roma)\
**Post date:** [June 8, 2020, 9:00pm UTC](https://forum.freecodecamp.org/t/applied-design-projects-feedback-appreciated/394992/14 "2020-06-08T21:00:43Z")

</div>

Nice job cleaning up the Product Landing and Tech Doc pages @martinrombach88

> [@martinrombach88](#):
>
> It’s getting easier to follow your directions

🙂 Good 🙂

---

<div class="post-metadata">

**Author:** ![Roma](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/roma/32/112899_2.png) [@Roma](https://forum.freecodecamp.org/u/Roma)\
**Post date:** [June 8, 2020, 9:03pm UTC](https://forum.freecodecamp.org/t/applied-design-projects-feedback-appreciated/394992/15 "2020-06-08T21:03:55Z")

</div>

Good job cleaning everything up @martinrombach88

---

<div class="post-metadata">

**Author:** ![martinrombach88](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/martinrombach88/32/135291_2.png) [@martinrombach88](https://forum.freecodecamp.org/u/martinrombach88)\
**Post date:** [June 9, 2020, 1:38am UTC](https://forum.freecodecamp.org/t/applied-design-projects-feedback-appreciated/394992/16 "2020-06-09T01:38:41Z")

</div>

Thank you! 🙂 👍

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 1:16pm UTC](https://forum.freecodecamp.org/t/applied-design-projects-feedback-appreciated/394992/17 "2021-06-01T13:16:07Z")

</div>

Closed on June 1, 2021, 1:16pm UTC


