Hello my fellow campers, I’m Harris from Malaysia. I start learning to code since about a year ago while working a part time job. I did follow some basic and intermediate FCC curriculum, but then move onto paid tutorial site.
But i love this forum. I love how members keep motivate and helping each other, and being with others on the same journey, knowing I’m not alone in this path really helps motivate me. But long short story, few month ago my boss moved to another state, so i am jobless right now and my current financial not allow me to focus on coding alone, so i need a job.
I only looked at your website so far, which looks good, great job on that. However, there are several issues that I’d imagine employers will notice:
In terms of the UI/UX, I was expecting your buttons for Demo, Project, Blog, and Email Me to have a hover action, but they don’t. Also, the buttons don’t change color when one of them is open to show that it’s active. Adding an “active” color state would make your UI more intuitive.
What’s the difference between your Demos and Projects? It’s unclear. Just a rhetorical question that you don’t need to answer in a response, but you should address on your website.
For “dummy” placeholder text (like in your latest blog post), it’s more common to use something called lorem ipsum. There’s a generator for that here: https://www.lipsum.com/
You may want to add the current year to the copyright line in your footer.
Technical stuff:
I’d suggest not minifying your HTML for your personal website to make it easier for employers to view. It’s a better practice on something like a production website or web app (or your demos or projects), but for your site, it makes it a bit inconvenient. And if your HTML file is small anyway (which it should be especially when you’re using React), why bother minifying anything? Just post it as you see it in your editor.
You have a number of errors being reported by the W3C Validator that should be fixed.
Your Google PageSpeed Insights score on Desktop is pretty good but “Low” on Mobile, so you should try and improve that.
You don’t use any HTML5 tags in places that you could.
You have a fairly large amount of CSS code in your STYLE tag, which is large enough that I’d recommend putting it in a separate file.
You also have a bunch of inline CSS styles mixed into your HTML that should be placed together with the rest of the CSS.
Your CSS code lacks a lot of semicolons that should be there.
The ordering of your CSS selectors is incoherent (doesn’t follow the DOM tree layout or your page layout or an alphabetical ordering).
You don’t use the CSS margin or padding shorthand notation in places where you could.
Bad practice in your CSS in applying the universal selector (*). You should avoid using it and only use the “box-sizing: inherit” property where you actually need it.
Based on the code you’ve written, you’ve clearly learned a lot in a short amount of time, which is both good and bad. Good in the sense that you’ve quickly gained working knowledge of HTML, CSS, JS, React, and Node.js/Gulp.js (or some other task runner), but bad in the sense that your code isn’t quite polished and your approach to certain things doesn’t follow “maintainable” protocol. At this point I’d recommend going for a bit more depth of knowledge on HTML, CSS, and JavaScript before you start applying for a job. Lynda’s Front-End Developer learning path will probably be mostly review for you but I’d recommend it anyway: https://www.lynda.com/learning-paths/Web/become-a-front-end-web-developer
Btw, to answer your question in the title, I’d say you’re probably fairly close to being job-ready but you’re not quite there yet. You just need more depth of knowledge on HTML and CSS in particular. In fact, it seems like you skimmed over them in your rush to get to JavaScript and React.
Also, if you haven’t learned it yet, I’d recommend learning a CSS preprocessor before you apply for any jobs. Sass seems to be the most popular one, and there’s a great free course on it over at Udemy: https://www.udemy.com/sass-workflow/learn/v4/overview
Thanks for really going through my portfolio and writing all of this. I thought of maybe receiving just some general comment on my portfolio/project idea. But that’s… a really helpful and thorough insight. I am in shame you have to look at my code. The CSS is quite messy. Is that what they called a spaghetti code?
I admit that I didn’t really dive into CSS best practice yet. In fact, I’m in doubt if CSS is really for me. I feel like I have some kind of obsession with font and design structure which makes it really time consuming, I spent 2 hours just to styling the small popup box. That’s crazy.
We are not even talk about a responsive design yet, with all the different browser and front-end tools. I do realize the importance of CSS but always feel like I should spent more time on app logic, and I enjoy React a lot more than CSS. Maybe I should look for specific React job where i could focus more on app logic instead of UI styling?
Once again, thanks for your comment. I really appreciate your words.
