Today #Day105 of #100DaysOfCode, I am Building Portfolio Website Using HTML CSS & JavaScript.
Qualification
define a section with class with h2 tag and span as its child elements,
<section class="qualification section">
<h2 class="section__title">Qualification</h2>
<span class="section__subtitle">My Academics</span>
</section>
define another div as a child,
<div class="qualification__container container">
</div>
define a div for education heading,
<div class="qualification__tabs">
<div class="qualification__button button--flex">
<i class="fa-solid fa-graduation-cap qualification__icon"></i>
Education
</div>
<div class="qualification__button button--flex">
<i class="fa-solid fa-briefcase qualification__icon"></i>Experience
</div>
</div>
define a div for qualifications sections
<div class="qualification__sections">
<!-- Qualification content 1 -->
<div class="qualification__content">
<!-- Qualification 1 -->
<div class="qualification__data">
<div>
<h3 class="qualification__title">Automobile Engineer</h3>
<span class="qualification__subtitle">University</span>
<div class="qualification__calender">
<i class="fa-solid fa-calendar-days"></i>
2015 - 2019
</div>
</div>
<div>
<span class="qualification__rounder"></span>
<span class="qualification__line"></span>
</div>
</div>
</div>
</div>
duplicate the div qualification__data x3
2 qualification
<div class="qualification__data">
<div></div>
<div>
<span class="qualification__rounder"></span>
<span class="qualification__line"></span>
</div>
<div>
<h3 class="qualification__title">Web Design</h3>
<span class="qualification__subtitle">University</span>
<div class="qualification__calender">
<i class="fa-solid fa-calendar-days"></i>
2022 - 2023
</div>
</div>
</div>
3rd qualification
<div class="qualification__data">
<div>
<h3 class="qualification__title">Web Developer</h3>
<span class="qualification__subtitle">University</span>
<div class="qualification__calender">
<i class="fa-solid fa-calendar-days"></i>
2022 - 2023
</div>
</div>
<div>
<span class="qualification__rounder"></span>
<span class="qualification__line"></span>
</div>
</div>
4th qualification
Tip: To comment use ctrl + /
<!-- Qualification 4 -->
<div class="qualification__data">
<div></div>
<div>
<span class="qualification__rounder"></span>
<!-- <span class="qualification__line"></span> -->
</div>
<div>
<h3 class="qualification__title">Master in UI/UX</h3>
<span class="qualification__subtitle">University</span>
<div class="qualification__calender">
<i class="fa-solid fa-calendar-days"></i>
2015 - 2019
</div>
</div>
</div>
duplicate the qualification content,
change the necessary info like titles and subtitles,
delete qualification 4 in qualification content 2 div,
<!-- Qualification content 2 -->
<div class="qualification__content">
<!-- Qualification 1 -->
<div class="qualification__data">
<div>
<h3 class="qualification__title">Software Engineer</h3>
<span class="qualification__subtitle">Company</span>
<div class="qualification__calender">
<i class="fa-solid fa-calendar-days"></i>
2022 - 2023
</div>
</div>
<div>
<span class="qualification__rounder"></span>
<span class="qualification__line"></span>
</div>
</div>
<!-- Qualification 2 -->
<div class="qualification__data">
<div></div>
<div>
<span class="qualification__rounder"></span>
<span class="qualification__line"></span>
</div>
<div>
<h3 class="qualification__title">Frontend Developer</h3>
<span class="qualification__subtitle">Company</span>
<div class="qualification__calender">
<i class="fa-solid fa-calendar-days"></i>
2022 - 2023
</div>
</div>
</div>
<!-- Qualification 3 -->
<div class="qualification__data">
<div>
<h3 class="qualification__title">UI Designer</h3>
<span class="qualification__subtitle">Figma</span>
<div class="qualification__calender">
<i class="fa-solid fa-calendar-days"></i>
2022 - 2023
</div>
</div>
<div>
<span class="qualification__rounder"></span>
<!-- <span class="qualification__line"></span> -->
</div>
</div>
</div>
CSS
Now, Styling the Qualification part,
styling qualification__tabs,
.qualification__tabs{
display: flex;
justify-content: space-evenly;
margin-bottom: var(--mb-2);
}
now styling the qualification button ,
add hover effect with colour property,
.qualification__button{
font-size: var(--h3-font-size);
font-weight: var(--font-medium);
cursor: pointer;
}
.qualification__button:hover{
color: var(--first-color);
}
give the margin to the qualification icon,
.qualification__icon{
font-size: 1.8rem;
margin-right: var(--mb-0-25);
}
Styling the qualification data,
.qualification__data{
display: grid;
grid-template-columns: 1fr max-content 1fr;
column-gap: 1.5rem;
}
In the above code the first column will be expanding to 1fr and hence you see the empty space, but for the second column its just 1fr,
but qualification 2 that is row 2 you will see an empty dev hence that will be reflecting in the second row first column as a result you will see the qualification to gets pushed to the right because of that empty dip in the second row first column,
Styling the qualification title and subtitle and calendar icon div,
.qualification__title{
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
}
.qualification__subtitle{
display: inline-block;
font-size: var(--small-font-size);
margin-bottom: var(--mb-1);
}
.qualification__calendar{
font-size: var(--smaller-font-size);
color: var(--text-color-light);
}
Now, working on the time line,
.qualification__rounder{
display: inline-block;
width: 13px;
height: 13px;
background-color: var(--first-color);
border-radius: 50%;
}
.qualification__line{
display: block;
width: 1px;
height: 100%;
background-color: var(--first-color);
transform: translate(6px,-7px);
}
Give data attributes for Qualification content 1
<div class="qualification__content qualification__active" data-content id="education">
Give data attributes for Qualification content 2
<div class="qualification__content"data-content id="experience">
Now, select this data attribute in CSS,
.qualification [data-content]{
display: none;
}
.qualification__active[data-content]{
display: block;
}
qualification__button.qualification__active{
color: var(--first-color);
}
JavaScript
define a tabs variable and using the query selector all select all the data attributes having the 'target',
now the tabs variable is an array which is consisting of the education and experience buttons,
the defined constant tab contains will be an array as we are picking the data attribute having the 'content' as its value
const tabs = document.querySelectorAll("[data-target]"),
tabContents = document.querySelectorAll("[data-content]");
Now, we add an event listener for each tab using for each method and add event,
tabs.forEach((tab) => {
tab.addEventListener("click", () => {
});
});
Now, we define a target constant variable which will store the element with ID, but ID we are getting from the click tab data set,
const target = document.querySelector(`${tab.dataset.target}`);
Now we remove list for all the table contents, then we add the class list to the target holding element which is our qualification content with ID,
tabContents.forEach((tabContent) => {
tabContent.classList.remove("qualification__active");
});
target.classList.add("qualification__active");
now we remove the class list for all the tabs, and then we add class list to the tab click, for this the end result will be color change which is what we have done in this CSS,
tabs.forEach((tab) => {
tab.classList.remove("qualification__active");
});
tab.classList.add("qualification__active");
Note:
But In the video, he used a tab which is not an array so use a tabs array.
Conclusion
I completed the Qualifications portion of my Portfolio website and used Js to switch between classlists.
Code
code
preview
