DEV Community

Cover image for I need feedback on my first website
Ahmad Khalid
Ahmad Khalid

Posted on

I need feedback on my first website

Hello everyone. I hope you having a good day.
I'm Ahmad - 32 yo - from Egypt. I'm currently learning frontend web development and I've completed my first project: Single-page developer portfolio challenge on Frontend Mentor.
I'd be happy to get your feedback on it.
Thanks in advance.
Code: https://github.com/ahmadkdev/developer-portfolio
Live demo: https://devportfoliosp.netlify.app/
My solution page on Frontend Mentor: https://www.frontendmentor.io/solutions/responsive-developer-portfolio-website-using-modern-css-techniques-iFqDLAczRk

Top comments (97)

Collapse
 
ctnkaan profile image
Çetin Kaan Taşkıngenç • Edited

It looks quite good for your first project. One recommendation I could give you is to improve your git commit messages. I've seen you make commits like "updated css stuff". This is not a best practice. I used to do commits like these when I first started coding but if you do proper git commits you can show these projects to other developers/recruiters.

I recommend you to check out and use semantic commit messages in the future. You'll get used to it in no time. Keep on coding!

Semantic Git Commits

Collapse
 
atinypixel profile image
Aziz Kaukawala

Thank you!

Even after 7+ years, I didn't followed any such commit conventions, recently since ~6 months came across this very semantic doc and started using that. Day and night difference between my commits and 10x more easier to generate work reports etc.

Such small tweaks do result into great outcomes.

Happy Coding.

Best of luck @ahmadkdev for the new journey.

Collapse
 
ahmadkdev profile image
Ahmad Khalid

Thank you.

Collapse
 
ahmadkdev profile image
Ahmad Khalid

Thanks for your feedback and recommendation. It's really helpful.

Collapse
 
chasm profile image
Charles F. Munat

Outstanding. A remarkable effort.

Your thinking may align with mine. You can read more about mine at my website, Craft Code, if curious.

I am particularly impressed that you stuck to vanilla code and didn't rush to React or similar; that you managed 100% across the board on Lighthouse and zero errors on axe DevTools (at AAA WCAG 2.2, no less); and that your code, at first glance, appears to conform to semantic HTML and best practies.

You must have put a lot of thought into this.

So, wow! Welcome to coding! We need more like you. I hope you can maintain this "keep it simple" approach, not adding unnecessary frills or pointless dependencies (as at least one commenter has suggested), and using the built-in Web APIs fully. As Arthur Quiller-Couch said, "murder your darlings".

Will try to keep an eye on your work.

Collapse
 
ahmadkdev profile image
Ahmad Khalid

Can't thank you enough your comment really motivated me to put more effort, and more importantly I knew I'm on the right path. I like your methodologies and It's what I've wanted to achieve and was in doubt I might be wrong because I see over-complicated websites everywhere.
I'm so happy for knowing about your amazing ideas and for your valuable time ❤️

Collapse
 
chasm profile image
Charles F. Munat

You're very welcome. Keep up the excellent work.

It does often astonish me how many devs seem to be unclear on the subject. The point of programming is to simplify complex problems, breaking them down into simpler and simpler pieces until they can be easily understood and solved. Yet many devs seem to be obsessed with complicating everything they touch.

I tend to think it's a "boys and their toys" situation – and it is clearly a masculine trait – this love of "techy" solutions. I like tech, too, but I take the opposite approach: start as simple as possible and avoid adding anything not truly necessary: YAGNI.

If you have any questions, I'm happy to answer them. And happier still if there are things you can teach me!

Cheers!

Thread Thread
 
ahmadkdev profile image
Ahmad Khalid

I totally agree with you.

I've also checked your linkedin profile and got overwhelmed by your great work and more importantly your good effect on people around you (I read the reviews section) I'm so happy to know about such a great person like you.

You inspired me a lot and I'm sure I'm going to learn a lot from you.

Thank you!

Thread Thread
 
chasm profile image
Charles F. Munat

You're very welcome. Now I'm blushing. Thanks.

Collapse
 
nikl profile image
Nik L.

Looks good, just a suggestion as a user, perhaps use _blank in hyperlinks to make it open in new tab. For example, a user is checking your portfolio section, and wants to see both code and deployed project at once, he/ she when clicks on any one link first, it is currently opening in same, to check other thing that person needs to go back, adding an additional unnecessary friction.

Collapse
 
ahmadkdev profile image
Ahmad Khalid

Good note. I forgot to add _blank I'll fix it. Thank you.

Collapse
 
jennherrarte profile image
Jenn Herrarte

super clean! I don't think you need years of experience for each technology, but that's just my person opinion. I think you have a good eye for design.

Collapse
 
ahmadkdev profile image
Ahmad Khalid

Totally agree. I'm going to change it to something better when I utilize the website for myself. Thank you.

Collapse
 
jennherrarte profile image
Jenn Herrarte

I was just reviewing from a job hunting perspective. I think there are better ways to showcase the technologies you work on daily on your resume vs your porfolio. You can pick anything up that you haven't worked with if it's similar to something you've worked with before and I think the rating system might make recruiters forget that because they're just focused on how proficient or not proficient you are. just my take but good job!

Collapse
 
fjones profile image
FJones

Showing skill level (of some description) on a portfolio page is good (if kept current), and YoE beats self-assigned star ratings any day.

Collapse
 
ahmadkdev profile image
Ahmad Khalid

Actually I find the whole section pointless. For a front-end developer html and css etc is a must-have and no need to mention it. Would be better if it was something like responsive web design or accessibility etc proved e.g. lighthouse scores and wave/axe tools, and ofcourse users' feedback.

Collapse
 
kedzior_io profile image
Artur Kedzior

Ahlan!

Not bad for the first project!

  • I like the simplicity
  • I like the theme
  • consistent font sizes
  • good separation of sections

Would improve:

  • personally would drop the circle effect from both under the title and over the image
  • I would do logo = h1, intro text = h2, section titles = h3 (and smaller than h2).
  • project links with target blank
  • contact inputs would have them texboxes inputs not lines, they are barely visible

Very nice and keep up the good work!

Collapse
 
ahmadkdev profile image
Ahmad Khalid

Thanks for your detailed feedback.
I agree with you on the circle effect it's a bit odd on desktop. I also agree with you on contact inputs they need a better visibility.
I'll rethink heading levels.
again thanks for your valuable time and detailed feedback.

Collapse
 
kedzior_io profile image
Artur Kedzior

Good luck fellow developer!

Collapse
 
fjones profile image
FJones

Interestingly, I think the circle effect works quite well on mobile. Had to switch to desktop to see what you meant - and there I agree, it looks odd.

Collapse
 
arindam-sahoo profile image
Arindam Sahoo • Edited

It looks quite good, and impressive as a first project. Just wanted to let you know that the social icons lead to the homepages of the respective websites instead of your profile. Second, there are AI Image Resolution Enhancers to Enhance the Resolution of your Image, because currently because of increasing the size of the image, it got pixelated.

Collapse
 
ahmadkdev profile image
Ahmad Khalid

Thanks for your feedback. It's a template page so I chose to put links to homepages of respective websites instead of href="#". Do you think it's a good choice?
And for the image getting pixelated It's also from the template but I'll try to improve it.

Collapse
 
best_codes profile image
Best Codes

It would probably be better if the icons lead to your profile on each of those sites (e.g., github.com/The-Best-Codes for me). It would engage users more and plus you might get followers on those places from your website. 😊
Also, I'm not sure if the contact form works… The website is awesome, and I completely understand if it is just a template, and functionality is coming soon. Keep up the good work!

Thread Thread
 
ahmadkdev profile image
Ahmad Khalid

I'm going to utilize it for myself soon adding my social profiles and hook the contact form to a database. Thanks for your advices.

Collapse
 
fjones profile image
FJones

Unless you plan to add profile links, I would recommend just omitting the social media links (and - personal preference - if there's fewer than three, don't use icon lists).

Thread Thread
 
ahmadkdev profile image
Ahmad Khalid

I'm going to utilize it for myself soon adding my social profiles. Thanks for your advices.

Collapse
 
renancferro profile image
Renan Ferro

Nice work @ahmadkdev , I liked it!

For a second stage, I think you could add some things, like:

  • Animations
  • Accessibility

I think these two things can make your website cooler!

Collapse
 
ahmadkdev profile image
Ahmad Khalid

Thank you. I totally agree with you and for accessibility I already did the bare minimum but I intend to extend it by testing it manually e.g. using just the keyboard. It's on my ToDo list.

Collapse
 
ranjancse profile image
Ranjan Dailata

Looks amazing.

One advice, please try to follow the UI/UX design practices or guidelines. You may follow - semantic-ui.com/.

Also, please update your live demo with the valid social links. I understand that you have created it for the demo purposes, however it's always good to have a realistic data so folks can contact you :)

Collapse
 
ahmadkdev profile image
Ahmad Khalid

Thanks for your feedback. I'm still discovering UI/UX design practices and guidelines. I'm going to utilize the website soon for myself and add my details.

Collapse
 
adhurimgervalla profile image
Adhurim Gervalla • Edited

very cool website.
I would try to integrate some elegant animations. Even just adding at least transitions to the hover effects already helps. I would also make the projects link tags "_blank". Otherwise good job.

Collapse
 
ahmadkdev profile image
Ahmad Khalid

Thank you. Two good points on my ToDo list.

Collapse
 
elanatframework profile image
elanatframework

The client side design is very good. We have added a good article for website coordination in back-end frameworks. If you want to add a back-end to your website, read the article at the link below:

How to Use a Ready-Made Website in Back-End Framework

Collapse
 
ahmadkdev profile image
Ahmad Khalid

This is really helpful. Thank you.

Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more