Applied Design Projects - Feedback Appreciated

Code Feedback
1

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

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 :slight_smile:

1 Like
2

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.

1 Like
3

@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.
    • 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
1 Like
4

@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.

1 Like
5

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

6

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).

7

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 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.

1 Like
8

Hey @Roma. The Survey Form is cleaned up. 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

9

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">

1 Like
10

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

And here’s the cleaned up Tech Doc too.

11

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

1 Like
12

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.

13

https://codepen.io/martinrombach88/full/gOayEEz

Personal Portfolio cleaned up.

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

1 Like
14

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

:slightly_smiling_face: Good :slightly_smiling_face:

15

Good job cleaning everything up @martinrombach88

16

Thank you! :slight_smile: :+1: