Minimal portfolio with materialize

Minimal portfolio with materialize
0

#1

Hey,

I just finished my second project! I spent quite some time working on the design as well, so it would be nice to get some feedback! I tried to keep my css and html as concise as possible. Let me know if you see any sloppy coding. https://codepen.io/zhoujr/full/ZJOJVL/

Also, I feel like I’m spending too much time working on my projects from the front-end development course. What do you think is the best practice for beginner?


#2

Your CSS could use some formatting. There are selectors that are immediately followed by the brace:

nav{
  background-color: transparent;
}

There are also places where the opening brace are below the selector:

body, html
{
	background-color: rgb(217,236,242) ;
}

You should always aim to make your code consistent. In general, you should write CSS like this:

selector1 {
  property1: value;
  property2: value;
}

selector2 {
  property3: value;
  property4: value;
}

Notice: There’s one blank line between CSS rules. The properties are indented (how much to indent is up to you, but it should be consistent). The selector is preceded by a space, then the opening brace. The closing brace is on its own line. There’s a space between a property and its value. Sometimes spaces are just easy to miss though (I do sometimes :stuck_out_tongue: )


Same with the HTML. The code is not properly indented. Other than one unclosed <h5> element around line 46, it doesn’t look like you have missing/misplaced tags though, but it’s easier to avoid/spot them if you indent your code, and it makes reading your code much easier.

Instead of using two <h5> elements for “Aspiring Web Developer Based in Seattle”", you can insert a <br> between “Aspiring” and “Web”.

The alt attribute is required for <img> elements.

Only <li> elements can be direct children of <ul> elements (near the bottom of your code). Instead of <a href="#"><li>...</li></a>, you should use <li><a href="#">...</a></li>.

There’s also a Font Awesome icon for freeCodeCamp (<i class="fa fa-free-code-camp"></i>) :wink:.

The contact link doesn’t work. You seem to have forgotten to give that section its id.

I can’t click on the nav links on small screens? It looks like the navbar is obscured by the dark overlay.


#3

Mine is shabby in comparison, i even used another service for the contact form.
Your site looks great, no surprise it took some time for that kind of look. If you’re feeling like spending too much time then just make uglier stuffs.


#4

:star_struck: Thank you for such a thorough review. I will definitely work on the formatting. I did forget to id the contact section and assigning anchor to the mobile navigation. :stuck_out_tongue:


#5

haha thanks. I can’t wait to move on with freecodecamp and get to the other projects.