I need feedback on my first website
source link: https://dev.to/ahmadkdev/i-need-feedback-on-my-first-website-1fl7
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
45
7
6
6
9
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 (90)
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!
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.
Thanks for your feedback and recommendation. It's really helpful.
CollapseExpand
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!
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.
Good luck fellow developer!
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.
CollapseExpand
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.
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 ❤️
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
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!
CollapseExpand
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.
Good note. I forgot to add _blank I'll fix it. Thank you.
CollapseExpand
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.
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.
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
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.
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
I'm going to utilize it for myself soon adding my social profiles. Thanks for your advices.
CollapseExpand
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.
Showing skill level (of some description) on a portfolio page is good (if kept current), and YoE beats self-assigned star ratings any day.
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.
Totally agree. I'm going to change it to something better when I utilize the website for myself. Thank you.
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!
CollapseExpand
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.
Thank you. Two good points on my ToDo list.
CollapseExpand
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:
This is really helpful. Thank you.
CollapseExpand
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 :)
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.
CollapseExpand
Your social links don't point to your profiles, and if the budget is not too tight, you should consider to pay for a own domain.
Thanks for your good points. Already on my ToDo list.
CollapseExpand
Your website is very clean and pleasant, minimal, and quick to load. It has good responsiveness.
I would suggest improving it by adding some transitions on mouse hover.
A more pleasant feedback should be given when scrolling through the page.
A few lightweight animations wouldn't hurt.
Consider adding a button for quick scrolling to the top.
Thanks for your valuable time and detailed feedback. I've put your points on my ToDo list they're good notices.
CollapseExpand
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!
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.
CollapseExpandCollapseExpand
It's a very well-made portfolio, but I think it's a good idea to select font as something more readable.
Thank you. I'll consider your point.
CollapseExpand
It looks like you're already a pro in design. Great future ahead.
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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK