Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Week 1 - Portfolio #27

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Week 1 - Portfolio #27

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
21acb23
portfolio-updated
Bayram89 Jan 23, 2025
6273629
test
Bayram89 Jan 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 102 additions & 0 deletions html-css/week1/bayram/portfolio/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Welcome to My Personal Portfolio!</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<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>
Comment on lines +10 to +17
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good use of semantic tags and well structured 👏


<header>
<h1>Bayram Erdem</h1>
<p>Junior Developer</p>
</header>

<section id="about">
<h2>About Me</h2>
<p>
👋 Hi, I’m Bayram, an expat in Copenhagen. Coding isn’t just my
career—it’s my passion! I’m all about exploring new languages and adding
them to my toolkit. Right now, I’m diving into CSS and JavaScript, and
I’m hungry for more.
</p>
<p>
As a HYF participant, I’m excited to unlock the wonders of Frontend,
Backend Development Libraries, and even Python. 💡
</p>
<p>
<strong>I’m looking to:</strong> Collaborate on frontend projects. Find
an internship in tech that challenges me and lets me make an impact. Ask
me about how synergy works in a team! I love bringing people together
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>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can make LinkedIn and the email link here.

Suggested change
<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>

<p>
<em>Fun Fact:</em> Frontend is like dressing up for a party—everything’s
about looking sharp. Backend? It’s the party planner making sure
everything works behind the scenes. Luckily, I enjoy both aesthetics and
logistics!
</p>
</section>

<section id="skills">
<h2>Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</section>

<section id="portfolio">
<h2>Portfolio</h2>
<p>Here are some of my projects:</p>
<ul class="projects">
<li>
<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
>
Comment on lines +66 to +70
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

</li>
<li>
<a href="https://food-survey-for-lunch.netlify.app/" target="_blank"
>Food Survey for Lunch</a
>
Comment on lines +73 to +75
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

</li>

<li>
<a href="https://orderdesktop-bayram.netlify.app/" target="_blank"
>Payment Form</a
>
</li>
</ul>
</section>

<section id="contact">
<h2>Contact Me</h2>
<p>Email: bayram9erdem@gmail.com</p>
<p>
Follow me on:
<a href="https://github.com/Bayram89" target="_blank">GitHub</a> |
<a href="https://www.linkedin.com/in/bayramerdem/" target="_blank"
Comment on lines +91 to +92
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would be nice if you could use some visuals for the logos here.

>LinkedIn</a
>
</p>
</section>

<footer>
<p>&copy; 2025 Bayram Erdem</p>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not very well known, but there is a HTML tag which is need exactly for small copy like this - copyright notices, disclaimers. The tag is <small> - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small

</footer>
</body>
</html>
207 changes: 207 additions & 0 deletions html-css/week1/bayram/portfolio/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,207 @@
*,
*::before,
*::after {
Comment on lines +2 to +3
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Those 2 pseudo-selectors don't hold any styling by default. There is no need to reset them.

margin: 0;
padding: 0;
box-sizing: border-box;
}

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add the following for smoother navigation between sections when clicking the menu links.

html {
  scroll-behavior: smooth;
}

body {
font-family: 'Playfair Display', serif;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You don't load this font anywhere. If it's a Google font, you would need to load it in the top of your CSS file or as a separate <link> in the HTML

background-color: #FFF2D7;
line-height: 1.6;
color: #333;
text-align: center;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a bit risky adding such a property on that high level, and further more on a tag selector. The issue is that now all HTML documents that include this CSS file would have all their text centered. Instead, it's preferred to create class names and rely on them.

padding: 0;
}

h1, h2, p {
margin-bottom: 1.5em;
font-size: 20px;
}
Comment on lines +18 to +21
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You have nearly exclusively relied on tag selectors instead of classes. This would make it hard to introduce more pages or variants on the site. Classes provide more flexibility, as you can always create new class with a new style, instead of having to do combinations of classes and tag in order to overwrite previous styles.

There is also a practice called CSS Reset and CSS Normalize. Those practices use styling on tags, but with a very specific purpose - the first resets well known browser default differences, the second, sets some general structure, which is built on top of later with class names.


nav {
background: #D8AE7E;
color: #fff;
padding: 1.5em 0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

nav ul {
display: flex;
justify-content: center;
list-style: none;
gap: 2em;
}

nav ul li {
font-weight: bold;
}

nav ul li a {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This selector has a very hight level of specificity. It will be hard to overwrite it if needed later. If you would use a class name it won't be as a bad.

Here you can read a bit about selector specificity and how to calculate it:

W3Schools - https://www.w3schools.com/css/css_specificity.asp
MDN web docs - https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Specificity score calculators:
https://specificity.keegan.st/
https://cssbootcamp.com/css/specificity-calculator

A good class name might be .main-menu__link. Notice the underline. In BEM (naming convention principle - https://css-tricks.com/bem-101/) this indicates Element. The first part .main-menu would be the Block. This should give you an idea how to name the classes for the other tags there.

color: #fff;
text-decoration: none;
font-size: 1.4em;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

em values are hard to calculate. It's preferred to use rem instead, as it's always based on the text-size set on body - the root of the document.

transition: color 0.3s ease;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice touch with the transition.

}

nav ul li a:hover {
color: #F8C794;
}

header {
background: linear-gradient(to right, #FFE0B5, #F8C794);
color: #333;
padding: 6em 0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

header h1 {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

YOu don't have h1 in any other element. It's not necessary to add header in front. It just necessarily increases the specificity. But back to classes - best would be just to use a .h1 class.

font-size: 4.5em;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: bold;
}

header p {
font-size: 2em;
font-style: italic;
margin-top: 0.5em;
}

section {
padding: 3.5em;
margin: 0 auto;
max-width: 1000px;
text-align: left;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why set text-align: center on body when you overwrite it for a big part of the page? That's why it's better to avoid styling on a high level and just apply styles only where you know you would need them and directly on the elements where you need them. Inheriting styles can quickly make a project hard to manage and debug.

background: #fff;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
margin-bottom: 2.5em;
}

h2 {
color: #D8AE7E;
font-size: 2.8em;
font-weight: bold;
border-bottom: 3px solid #D8AE7E;
padding-bottom: 0.6em;
margin-bottom: 1.5em;
}

ul {
list-style: none;
padding-left: 1.5em;
}

ul li {
margin-bottom: 1.2em;
font-size: 1.3em;
}

#portfolio ul {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid using IDs for styling. Here is a good read on the cons - https://medium.com/@clairecodes/reasons-not-to-use-ids-in-css-a42204fb0d97

display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
Comment on lines +103 to +104
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Those two properties are never used, because at line 149 you overwrite them with a stronger selector - #portfolio .projects. You can delete them from here.

gap: 1.5em;
padding-left: 0;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:
padding

Don't worry too much about it. It will get much better with the time.

}

#portfolio a {
display: block;
background: #F8C794;
color: white;
text-align: center;
padding: 1.5em;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd recommend you lowering the padding in mobile, as it squeezes the text too much.
big-padding

border-radius: 10px;
text-decoration: none;
transition: background-color 0.3s ease;
font-size: 1.4em;
font-weight: bold;
}

#portfolio a:hover {
background-color: #D8AE7E;
}

#contact a {
text-decoration: none;
color: #D8AE7E;
font-weight: bold;
font-size: 1.3em;
transition: color 0.3s ease;
}

#contact a:hover {
color: #F8C794;
}

footer {
background: #D8AE7E;
color: #fff;
padding: 1.5em 0;
text-align: center;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You already have text-align: center; cascading down from body, but I agree it's better to be set here, than there.

font-size: 1.3em;
}

footer p {
margin: 0;
}
#portfolio .projects {
display: flex;
flex-direction: column;

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you add margin: 0 auto; you can center the project boxes on mobile.

}
.projects {
width: 100%;
height: auto;
border-radius: 10px;
margin-bottom: 1em;
}

@media (max-width: 400px) {
nav ul {
flex-direction: column;
gap: 1.5em;
}

header h1 {
font-size: 3.5em;
}

header p {
font-size: 1.8em;
}

section {
padding: 2.5em;
}

h2 {
font-size: 2.5em;
}

.projects {
width: 200px;
height: auto;
border-radius: 10px;
margin-bottom: 1em;
}
}

@media (max-width: 640px) {
nav ul {
gap: 1em;
}

header h1 {
font-size: 2.8em;
}

header p {
font-size: 1.6em;
}

section {
padding: 2em;
}
}