Hi guys, I just created my portfolio web site and looking for some feedback.
1 Like
Hi @DanDucVira !
I think your page looks good.
A couple of things that I noticed.
The text is cutoff here
There is also a horizontal scroll bar for laptops.
I think it would be nice to have the brand colors here
Hope that helps!
Besides the responsiveness issues that @jwilkins.oboe pointed out, a few other things to consider:
-
I think you need to customize the keyboard focus indicators. I’m using FF and for some links (such as the social media icon links at the bottom) the focus indicator is basically non-existent. In general, I would not rely on the browser’s default indicator as they are almost never good enough.
-
Semantically, the four
<h3>headings under the Services headings should probably not be headings as they don’t really represent headings for content. I would consider putting these in a<ul>since they are a “list” of services you provide. Same thing for the “Hi, I’m Daniel”<h3>heading under About Me, it’s not really a heading. -
Also, you’ve got two
<h1>s. Best practices would dictate that you only have one. I’d get rid of the one in the<nav>since it’s really just acting as a logo. -
For the Technology and Tools section, you just have images in there and all of them have
alt="", which means that anyone using a screen reader will not know what those images are and thus the entire section tells them nothing. Each of those image alt texts should say what the image represents (for example, the html image should havealt="HTML5"). I would also consider putting these in a<ul>as well. -
The social media links at the bottom need text associated with them. The easiest way to do this is to add the text in the
<a>and visibly hide the text. -
For accessibility, you should wrap all of the main content in a
<main>(i.e. all of the content between the<header>and<footer>. -
You have the following
<meta>tag in the<head>:
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />
That last part, maximum-scale=1.0, user-scalable=no, that is a big no-no. That prevents people on mobile devices from zooming the content bigger. This is what your viewport meta tag should look like:
<meta name="viewport" content="width=device-width, initial-scale=1">
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.