Week 1 - Portfolio #27
Conversation
There was a problem hiding this comment.
Great work, Bayram.
I know it seems like there is a lot to correct, but the reality is that there is one issue repeated many times, that can easily be corrected.
Use class selectors. Give each element a class and style it. This will solve many problems now where you have to do overwrites, or use more specific selectors.
Instead of setting styling on all paragraphs and then overwriting it on each place it varies, make a class for all those variants. Make one class for the .section-paragraph, .footer-paragraph etc. Your styles.css will also become more readable, as when you read the class names you would have a better idea of where and what would they effect.
You are on good track. Just this one tip and you will excel greatly.
| <nav> | ||
| <ul> | ||
| <li><a href="#about">About</a></li> | ||
| <li><a href="#skills">Skills</a></li> | ||
| <li><a href="#portfolio">Portfolio</a></li> | ||
| <li><a href="#contact">Contact</a></li> | ||
| </ul> | ||
| </nav> |
There was a problem hiding this comment.
Good use of semantic tags and well structured 👏
| and organizing highly efficient teams—it’s complex, but that’s what | ||
| makes it so exciting. | ||
| </p> | ||
| <p>📫 Reach out on LinkedIn or email me at bayram9erdem@gmail.com.</p> |
There was a problem hiding this comment.
You can make LinkedIn and the email link here.
| <p>📫 Reach out on LinkedIn or email me at bayram9erdem@gmail.com.</p> | |
| <p>📫 Reach out on <a hrtef="https://www.linkedin.com/in/bayramerdem" target="_blank">LinkedIn</a> or email me at <a href="mailto:bayram9erdem@gmail.com">bayram9erdem@gmail.com</a>.</p> |
| <a | ||
| href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form" | ||
| target="_blank" | ||
| >Survey Form</a | ||
| > |
There was a problem hiding this comment.
Unfortunately this links to the survey form exercise, but not to your solution. If you would like to upload your solution, you could use CodePen. It's a nifty little platform, where you can register with GitHub to upload small snippets of code. Once you have an account, you can make the so-called pens, and embed them anywhere you link to them.
| <a href="https://food-survey-for-lunch.netlify.app/" target="_blank" | ||
| >Food Survey for Lunch</a | ||
| > |
There was a problem hiding this comment.
Nice to see you've added more projects. Thinking about it, now you have only titles "Food Suvey for Lunch", "Survey Form", "Payment Form". It would help a lot if you would include a screenshot for each and a short paragraph or sentence of description. For example, you can write what technologies were used, or shortly describe the features of the tool.
| <a href="https://github.com/Bayram89" target="_blank">GitHub</a> | | ||
| <a href="https://www.linkedin.com/in/bayramerdem/" target="_blank" |
There was a problem hiding this comment.
Would be nice if you could use some visuals for the logos here.
| display: grid; | ||
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); | ||
| gap: 1.5em; | ||
| padding-left: 0; |
There was a problem hiding this comment.
This padding-left has already been set to 0 in one place, then you apply global style adding it again, and now you remove it for a second time. This is a lot of overwriting and on a bigger project is could give you headaches to track or you might resolve to bad practices as !important. Have a look at the browser inspector to track such potential issues:
Don't worry too much about it. It will get much better with the time.
| background: #D8AE7E; | ||
| color: #fff; | ||
| padding: 1.5em 0; | ||
| text-align: center; |
There was a problem hiding this comment.
You already have text-align: center; cascading down from body, but I agree it's better to be set here, than there.
| background: #F8C794; | ||
| color: white; | ||
| text-align: center; | ||
| padding: 1.5em; |
There was a problem hiding this comment.
I'd recommend you lowering the padding in mobile, as it squeezes the text too much.
| #portfolio .projects { | ||
| display: flex; | ||
| flex-direction: column; | ||
|
|
There was a problem hiding this comment.
If you add margin: 0 auto; you can center the project boxes on mobile.
| padding: 0; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
There was a problem hiding this comment.
Add the following for smoother navigation between sections when clicking the menu links.
html {
scroll-behavior: smooth;
}
No description provided.