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

html-css/Ali #2

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

html-css/Ali #2

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
82b12dc
Add files via upload
AliNematollahi-HackYourFuture Jan 15, 2025
e05ecd4
Create index.html
AliNematollahi-HackYourFuture Jan 19, 2025
1489ee9
Create style.css
AliNematollahi-HackYourFuture Jan 19, 2025
b9aad03
files updated
alinematollahi Jan 22, 2025
688fc6b
Portfolio page issues fixed
alinematollahi Jan 23, 2025
e9b577e
Similar issues(not to use id in css, etc) in Order Desktop fixed
alinematollahi Jan 23, 2025
44d33fd
The Order Desktop project rebuilt using pure CSS.
alinematollahi Jan 30, 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
126 changes: 126 additions & 0 deletions html-css/week1/Ali-Nematollahi/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ali-Nematollahi-CV</title>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=calendar_month,language,location_on,menu,schedule" />
<link rel="stylesheet" href="style.css">
</head>

<body>

<div id="container">
<nav>
<ul>
<li>
<a href="#">SUMMARY</a>
</li>
<li>
<a href="#">SKILLS</a>
</li>
<li>
<a href="#">PORTFOLIO</a>
</li>
<li>
<a href="#">CONTACT</a>
Copy link

Choose a reason for hiding this comment

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

You've forgotten to add the links that would lead to each section

Suggested change
<a href="#">SUMMARY</a>
</li>
<li>
<a href="#">SKILLS</a>
</li>
<li>
<a href="#">PORTFOLIO</a>
</li>
<li>
<a href="#">CONTACT</a>
<a href="#summary">SUMMARY</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>
<header>
<div id="name">
Ali Nematollahi
</div>
<div id="title">
Full-Stack Developer
</div>
Copy link

Choose a reason for hiding this comment

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

Div tags don't hold any semantic meaning. They just wrap content. Instead, you could use one of the H1 to H6 headlines.
For example:

Suggested change
<div id="name">
Ali Nematollahi
</div>
<div id="title">
Full-Stack Developer
</div>
<h1 class="header__title">Ali Nematollahi </h1>
<p class="header__description">Full-Stack Developer</p>

</header>

<div id="menu">
<span class="material-symbols-outlined">
menu
</span>
</div>
<main>
<div id="space1"></div>
<section id="summary">
<h4 class="section-title">
SUMMARY
</h4>
Copy link

Choose a reason for hiding this comment

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

It's recommended not to jump the title order. For example, you should first have on the page somewhere an H1, then follow up with h2, h3, and just then use a h4. You cannot jump directly to h4, without breaking some accessibility features. A bit better explanation can be found in the 3rd bullet point here - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#usage_notes

<p>
Full-stack developer with 2+ years of experience in building and maintaining web pages and single
page applications.
Seeking for new opportunities and challenges that will expand my skill set.
Proficient with CSS and JavaScript frameworks, with extensive knowledge of back-end languages,
Databases and API.
</p>

<p>
As a Full-stack developer, my goal is to continually increase my programming skills in order to
present
better solutions to my employers and their clients.
</p>
</section>

<section id="skills">
<h4 class="section-title">
SKILLS
</h4>
<div></div>
<div class="section-item"> HTML and CSS</div>
<div></div>
<div class="section-item"> JavaScript </div>
<div></div>
<div class="section-item">TypeScript </div>
<div></div>
<div class="section-item"> React.js </div>
<div></div>
<div class="section-item"> Node.js </div>
<div></div>
<div class="section-item"> MySQL and MongoDB </div>
<div></div>
<div class="section-item"> Restfull API </div>
<div></div>
<div class="section-item"> GraphQL </div>
<div></div>
<div class="section-item"> Git and GitHub </div>
Copy link

Choose a reason for hiding this comment

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

You could take a few different approaches here.

  1. Remove the empty <div></div> and change the other <div> tags to <span>. Then let them stack as multiples on one line - there is nothing wrong with that.

  2. Same as above related to removing the empty <div></div>, then use flex-box on #skills (preferably you would use a class selector instead of ID):

    display: flex;
    flex-direction: column;
    align-items: flex-start;

</section>

<section id="contact">
<h4 class="section-title">
CONTACT
</h4>
<div class="contact-title">Email</div>
<div class="section-item">ali.nematollahi2020@gmail.com</div>
<div class="contact-title">GitHub</div>
<div class="section-item">AliNematollahi-HackYourFuture</div>
<div class="contact-title">Linkedin</div>
<div class="section-item">
Copy link

Choose a reason for hiding this comment

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

You could use a more semantic markup here than <div> tags. For example this could be a definition list or unordered list.

<a id="linkedin"
href="https://www.linkedin.com/in/ali-nematollahi">linkedin.com/in/ali-nematollahi</a>
</div>
<div class="contact-title">Address</div>
<div class="section-item"> Copenhagen, Denmark</div>
<div class="contact-title">Mobile</div>
<div class="section-item">+45 71557785</div>
Copy link

Choose a reason for hiding this comment

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

You can find a good option for <a href=""> for making phone numbers easier to use. Now anyone who would like to use the phone number would have to manually copy it or type it.

</section>

<section id="portfolio">
<h4 class="section-title">
PORTFOLIO
</h4>
<div></div>
<div class="section-item">
<a href="https://www.freecodecamp.org/Ali-Nematollahi">FCC Survey Form</a>
</div>
</section>
<div id="space2"></div>

</main>
</div>

</body>

</html>
207 changes: 207 additions & 0 deletions html-css/week1/Ali-Nematollahi/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,207 @@
/*############ General styles (both mobile and desktop) ############*/

* {
margin: 0;
padding: 0;
font-family: 'Arial Narrow', Arial, sans-serif;
}

body {
box-sizing: border-box;
}

a {
text-decoration: none;
}
Copy link

Choose a reason for hiding this comment

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

I guess this is part of a reset, but generally it's nice to have some visual separation between regular text and links, which doesn't rely only on colour. Text decoration in the form of underline is perfect for this, and that's how most people expect links to behave - to have an underline (:


li {
list-style-type: none;
}

header {
background-color: rgb(80, 156, 172);
}

main{
background-color: rgb(26, 115, 138);
margin-top: 0;
}

section {
margin: 20px auto;
border: solid 2px rgb(223, 218, 231);
border-radius: 10px;
padding: 10px;
font-size: 18px;
}
Copy link

Choose a reason for hiding this comment

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

It's better to create class selectors and style them, instead of directly HTML elements. This is a better practice, especially when you get to have many more HTML files and you might not want to have the same style on all <section>, <head> or <main> tags.




.section-title{
position: relative;
left: 5px;
top: -20px;
z-index: 1;
display: inline;
padding: 0 3px;
color: white;
background-color: rgb(26, 115, 138);
}

#summary{
color: white;
font-size: 20px;
}
Copy link

Choose a reason for hiding this comment

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

Avoid using ID selectors in CSS. IDs are preferred for selecting and manipulating elements through JavaScript. You can read here more about pros and cons of using Classes vs IDs - https://medium.com/@clairecodes/reasons-not-to-use-ids-in-css-a42204fb0d97


.contact-title {
color: white;
margin-top: 0.25cm;
margin-left: 0.1cm;
Copy link

Choose a reason for hiding this comment

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

It's best to use px, %, rem, vw, or vh.
CM is really not popular on websites.

}

.section-item{
margin: 0.1cm 0.1cm;
background-color: rgb(197, 227, 233);
border-radius: 0.2cm;
display:inline-block;
padding: 0.1cm 0.1cm;
box-sizing: border-box;
}
.section-item a{
color: black;
}

#space2{
height: 5px;
}


/*########################## Mobile styles ##########################*/

@media only screen and (max-width: 600px) {
#container {
margin: 0 10px;
}

nav {
display: none;
}

header {
width: 80%;
float: left;
height: 70px;
}
#name{
font-size: 30px;
padding: 3px 5px;
}
#title{
font-size: 20px;
padding: 0 5px;
}

#menu {
background-color: rgb(80, 156, 172);
width: 20%;
float: right;
height: 70px;
direction: rtl;
box-sizing: border-box;
padding: 25px 10px;
}
section {
width: 90%;
}

#space1{
height: 75px;
}

}


/*########################## Desktop styles ##########################*/


@media only screen and (min-width: 600px) {
#container {
margin: 0 100px;
}

#menu {
display: none;
}

nav {
width: 100%;
min-height: 50px;
background-color: rgb(26, 115, 138);
}

nav ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
nav ul li:hover{
background-color: rgb(197, 227, 233);
}

nav ul li a:hover{
color: black;
}

li a {
display: block;
padding: 15px 20px;
color: aliceblue;
font-size: large;
}

header {
width: 100%;
height: 120px;
}
#name{
font-size: 60px;
padding: 5px 10px;
}
#title{
font-size: 30px;
padding: 0 10px;
}

#summary{
width: 95%;
margin: 0px auto 40px;
position: relative;
top: 20px;
}

#skills {
box-sizing: border-box;
width: 47.25%;
min-height:375px;
margin: 20px 1.25% 20px 1.5%;
float: left;
}

#contact {
box-sizing: border-box;
width: 47.25%;
min-height: 375px;
margin: 20px 1.5% 20px 1.25%;
float: left;
}

#portfolio{
Copy link

Choose a reason for hiding this comment

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

Would be good if you can change this and all other ID selectors with class selectors.

width: 95%;
margin: 20px auto;
clear: both;
}




}
Loading