How to create a website using only javascript

The biggest cons of it are that you must rely on the end user's client browser to correctly render all of your content. An out of date browser or an untested browser is likely to result in broken content or no content. This is distinct from and more severe than the problems those same browsers encounter with HTML & CSS they cannot correctly render. If the markup is supplied to the browser, it may incorrectly render the CSS, but at least the content will be accessible. Using a script to generate all the markup can easily result in no markup being generated.

Then there are the users who run without JavaScript, or with something like NoScript blocking most scripts. They'll not see any of your content either. Thirdly, your content will not be indexed by most search engines.

Addendum

Relating to developer skill sets, working strictly from a JavaScript framework could tromp on the web development division of labor somewhat, if you have such a division. Unless the framework is able to maintain a good separation between the generation of markup, CSS, & application script, your programmers may find themselves more deeply in the role of designer and content editor than they are accustomed to (if you have a division of labor between those aspects of development).

From the comments below, we learn that this is intended for an intranet application in a controlled browser environment. This moots the end-user testing issues mentioned above to some degree, but there is always a danger of a browser upgrade breaking application code in JavaScript.

I cannot think of any positive outcomes that would outweight the potential negative outcomes (by my own judgement, anyway)

How to create a website using only javascript

If you are looking for a web developer job it can be helpful to have a portfolio website. It can also be helpful to have projects you've created to show to potential employers. You can accomplish both tasks at once by creating your own portfolio website with HTML, CSS, & JavaScript.

We just published a course on the freeCodeCamp.org YouTube channel that will help you improve your frontend development skills by teaching you how to build a portfolio website.

MacLinz developed this course. He is an experienced frontend developer that has created many great courses on his YouTube channel.

In this course you will lean how to build a responsive portfolio website with a modern design and cool JavaScript-based effects. You can use what you learn in this course and customize your portfolio website to show off your work history and design skills.

This is a great beginner's project for people that want to improve their skills with HTML, CSS, and JavaScript.

The course includes the following sections:

  • Introduction
  • Switch Between Sections
  • Header Content
  • About Section
  • Portfolios Section
  • Blogs Section
  • Contact Section
  • Media Queries

Watch the full course below or on the freeCodeCamp.org YouTube channel (3-hour watch).

Transcript

(autogenerated)

In this course, you will improve your HTML, CSS and JavaScript skills by building a portfolio website.

Hello, everyone. In today's video, we're going to be building a portfolio website using HTML, CSS and JavaScript.

So this is the main homepage of the portfolio. Okay, so we have some nice hover effects. On the buttons and images. We can also toggle between light and dark theme.

Okay, so the next section is going to be the upper section, we're going to have some information with also nice after effects. And we're going to have some stats here with progress bars. And they're also going to have a timeline.

Okay, so it also looks nice on the light theme.

Okay, and then the next section is going to be the portfolio section with an SRO effect, one of these patterns can lead us to any work suggests that you link it to, okay, so for example, you want to get to GitHub, you can click, and then it goes to GitHub, or YouTube, whatever.

Okay, and then the next section is going to be the blog section. We also have a nice hover effect on images in the blog item. And then finally, we have the contact section, you can put your contact information here.

Anything that you want, it's up to you.

This website is also responsive, it's going to support multiple screens, you can even make it more responsive as much as you want.

So when I decrease the width, it's going to check those controls here, and then put them down here, you can sort of, you know, switch between the pages within the controls down here, instead of them to be on the right side.

Okay, so as you can see, everything's going to respond nicely to different screen sizes.

Okay.

So Sam is the about is going to be NASA responsive.

And also the portfolio is going to be nested responsive.

Yeah, also, everything is responsive.

So I'll show you everything out to make it even more responsive, you have the knowledge to make a difference.

So yeah, I think that's it for this quick demonstration.

I'll see you in the video.

I have an images folder here.

So there isn't many images.

So these are the images that we're going to be using this project, I'm going to start by creating a new HTML file, index dot HTML, then I'm going to create a new folder.

So this one is going to be storing our all of our styles inside the styles for them when to create a new style.

So the extension we're going to be using for this one is s CSS.

So that's the sass preprocessor.

It's much quicker to do styles than normal CSS.

So to be able to use Sass, you need to go to the extensions, and look for SAS, and then you're going to find the SAS and then install that.

And also, there's a live compiler.

So we don't need to restart every time that we make updates to the code.

So we can just compile the code life.

Okay.

So now, I, you might also want to download HTML CSS snippets.

So future HTML, CSS support, just install these two.

Okay, I think that's it for now, we just need to go to the styles and let's do basic page resetting.

So I'm going to set the margin to zero, because by default, the page is whenever margin and padding zero, box sizing, zero box, actually, box and then list style to none.

Okay, so in the body, I'm just going to give it a background color of red just to check out if our styles are working.

So we need to compile this Sass file into the styles folder.

So here you're going to see a button says what Sass click the button.

Okay, and then it's going to generate a style css file here.

So let's go to the index and generate HTML boilerplate.

So to do that, hold Shift and one and then click enter.

Shift, hold Shift, one, enter.

Okay, so I'm going to I'm going to name this portfolio.

Portfolio.

Okay, so now I'm just going to link the style css file styles.

Start with CSS.

So I'm going to run this with live server.

So you can go to the extensions and look for live server plug extension.

Okay, so I'm going to run this now.

With the live server.

There it is.

Okay, so that means our styles are working.

So I'm going to get rid of the background color of red Margarida that, I am going to actually get some fonts first.

Google Fonts, Google Fonts, I'm going to get the font called Poppins.

Okay, so you need to select some font weights.

So we're going to be using regular 405 and 400 500, the regular ones only, all the way to 800.

So once you've done that, you just need to copy this link, once you've copied, go to the index below the styles, and then paste in the Font weights.

Okay, so I'm also going to copy the font family name, and then when I put it in the body.

Okay, so now that we've done the fonts, we're going to be able to toggle between dark and light mode.

So to do that, we're going to be using some variables, some CSS variables to to do variables, we're going to type root, and then we're going to put some variables inside the root.

Okay, so the mainly the variables are going to do for the colors.

Okay, so you can do a variable literally for anything from mainly in this video, I'm going to do colors.

So the first one is going to be color primary.

So this cover primary is going to be like a dark color 191 And then D to B, I think that's the color.

Yeah.

Okay, so that's the color, I'm going to paste in the rest of the colors, because I don't waste your time typing because one by one.

Okay, so these are the variables that we're going to be using.

So now, for the body, I'm going to give it a background color.

So to be able to use the variable duva.

Primary, so VA primary color, we're going to be utilizing this variable, which is a color a dot one.

Okay, so I went to also do a font size, a default font size is going to be 1.1 RM.

So that's going to be our default font size.

Also, I'm going to give a different color, the default color is going to be white.

So by default on the text to be white, okay, and then I want also a transition.

Transition.

So the transition is going to be all point four seconds is in a nice out.

Okay, so like that.

So now that we've done that, let's go to the index.

So in here, I'm going to give the body class of main content, so main content, so that's the body.

And then in the body, we're going to have a header header with the class of section.

And then another class name of Section sec, one, section one, and then another class of header.

And then it's going to have another class of active, they want to see why we're using active, I will explain as we go, we press enter.

Okay, so now if we had and the underscore to your main, in the main are going to have session, dot section.

Section is going to have a class of section and then doats, another class, section two, and then another class about.

Okay, so now I'm going to click enter.

So now we have a section.

Okay, so we're going to have five more sections.

Okay, so we have section, section two, about some dessert, that's the class name, I'm going to duplicate this.

Tomato three more times 123.

Okay, so it's going to all of them are going to contain a class of section, all of them.

I'm just going to change this from sector to sec three, section four, and Section Five.

Okay, you can just change the class names here from about to portfolio.

And then the other one, this one's going to be blogs.

And then this one is going to be contact.

Contacts.

Okay.

So does that.

Now we have the sections, we need to, let's start by selling all these sections.

Before we add any content.

Let's work on the functionality to switch between the sections, okay, using the JavaScript.

I'm going to introduce you to Font Awesome.

I'm going to say font, awesome CDN.

CDN.

And then look for the Font Awesome CDN, look for the version, version 5.5 point one, and then copy the link tag, and then go below the Google Fonts even above and then just paste in the link Okay, so now we've pasted the link for font awesome font, awesome.

We can, you know, like, sort of get icons from font awesome font, awesome.

Instagram, let's say we want to use the Instagram icon.

So we can copy this Instagram icon, let's see if it's working, I'm just gonna paste it down here.

And when I save, let's see in the preview if it's working or not.

Let's see, there it is.

So that means it's working.

So it's white.

So that's the default color of the website.

And the icon is working.

So that means what was some is installed successfully.

So now, let's start by installing the sections, okay.

Most of them are going to target all of the links, the anchor tags, I'm going to say, display, inline block, nine block, and then text decoration to none.

And then I'm going to say I'm going to actually give it was this I forgot the name, color color is going to be inherits we're going to inherit the color we have in the body.

And then font family is going to be inherit inherited.

Okay, so now that let's go start each individual section.

So these sections are going to be able to switch between the sections, because of the positioning they're going to have, they're going to have a percent of absolute.

So each section is going to have a minimum height of 100 VH.

Okay, so that's the minimum height and then a width of 100%.

And then we're going to do position of absolutes.

And then we're going to do left, zero, top to zero is our top zero.

And then we're going to do padding.

So padding spacing.

So top and bottom, the spacing between top and bottom is going to be three RAM, and then 18 Ram left and right.

Okay, so each and every second is going to have this this tiles, okay.

And actually, we need to also do the header.

So the head is going to have a height, a fixed height of 100 VH.

So the height for the head is going to be fixed.

Okay, and then we're going to do a color, the color for that is going to be white color.

White for the color.

White, I don't know why I didn't autocomplete.

And then we're also going to have an overflow of hidden just in case something overflows.

Okay, so now, nothing happens.

When I inspect this, we have all of this, all of those sections that are on top of each other.

Okay, because we're using position of absolute.

So now they're all laying on top of each other.

So to create the effect of switching between these sections, we need a way to hide the rest of the sections and then only display the one that we've clicked on.

Okay, we're going to do the light and JavaScript.

But now let's keep going.

I'm going to target a section class.

So this section class I'm going to do so by default, I wanted to be away from this screen, I wanted to be off screen.

Okay, so I'm going to use a transform for that for that.

And then I'm going to translate to y minus one represent.

Because by default only to be off screen.

Okay, and then I'm also going to do a transition, you can create a variable for this transition actually, if you want, because we're going to reuse this a lot of times in this video.

So you can, you know, make it easier by creating a variable for that.

Okay, so now we've transition.

And also we need the background color.

So for this one is going to have a VA primary color.

Primary color, okay, so that's, that's the one.

So each individual sections, we can style them differently, we can give them a different background color, a different whatever.

So I'm going to tag a section one, sec, one, sec one.

So this one, you can give it a different background color if you want to, by by by default only to be none the display.

I don't want to display anything because I want to be able to switch between these sections.

Okay, I'm going to do transform as all translate.

Translate Y sheets, y one to translate y zero for now.

And then we're going to do scale.

We're going to do one.

Okay, so now, when we the second is active, is going to come back to the default place.

So here we did transform, Translate Y minus 100% and scale which is zero here.

So once we come back to the default place is going to you know, it's going to make like an animation coming in, off screen and scaling all the way to one So this scale works from one, zero to between zero, and one.

Okay, so we need to do this for the rest of the sections.

So I'm just going to paste in some code for the, for the rest of the sections.

So this sections, each individual section, you can give it a different background color.

Okay, you can kind of, you know, give it a different background color, just to see your to your liking.

Okay, nothing much, nothing much happens here, nothing much.

So now for now, let's, let's do the buttons, which are going to let us control these sections.

So this buttons, I'm going to do dot controls.

So make sure controls pressure, this is the wrong spelling, well, it doesn't matter.

So inside the controls, we're going to have the buttons, okay, so each individual button is going to have a class of control.

So I'm going to do Dutch Control.

Control.

So that's a button is going to have a control.

And then it's going to have control one.

So the first one's going to be control one, the second one control to control three, and so on.

So I'm going to say, control.

So this one is Ctrl.

One, I'm going to use the dollar sign.

So the dollar sign means increment the numbers automatically, depending on how many classes on how many divs we've created.

Okay, so control, and then it's going to have another class of actually is not going to win any other class.

And yeah, I'm just going to hit enter a play, I'm just going to put a class of active BTN.

So that's the first one is going to have a class of Active button, I'm going to multiply this by five.

Okay, so we don't need the Active button on the rest of the diffs.

Okay, so thinking like get rid of this will only want the first one to have active buttons.

So we have control, control one, control two, three, all the way to five.

Okay, so inside each of these divs, I'm going to put a corresponding icon.

So in this case, you can go to Font Awesome, and then you can, for example, search, let's say, home, you can look for an icon that you're looking for, in this case, this one, and then you just gonna copy this, and then you paste it in, like so.

So that's the icon we're looking for.

This is going to paste in the this data instead of me doing number one.

Okay, so we are using a warm briefcase newspaper envelope open, agree to this one later.

Okay, so now, I'm going to save this, as you can see with the icons there.

So for us when these icons will be here on the right side.

So to do that, we're going to be using position of fixed because we need to be at a fixed position.

Okay, so we're going to target the controls.

You can make a comment here, say controls, controls, and then here, you just do control dirt control.

Okay, so this is the parent.

So position, we're going to do person a fixed, so that's the parent container, and then Z index is going to be 10 was only to be always at the top.

And then I'm going to do top 50%.

Okay, and then right is going to be 3%.

So when did you be aligned to live space of 3% from the right.

So there they are.

So now the living 3% of space from the right side.

Okay, so now we're going to do display, flex, flex direction, column.

And then we're also going to, I think we might be able to give him a font size some sometime later, but I want to actually send this in the y axis.

So to center this in the y, we can do transform, Translate Y minus 50% to center this in the y so as I save, as you can see there, they now they've updated, they've now nicely centered.

Okay, so we've kind of centered, I'm going to do align items to center, and then just for content to center as well.

Okay, so I'm going to target the control class control.

Control class.

So for the control class, I'm going to give it a padding, so it's like spacing around it.

So the spacing is going to be one room and then a cursor is going to be pointer.

Okay, so pointer and then I'm going to give it a background color.

Background color is going to be so it's going to be for grateful.

So it's going to be grateful.

So that's the background color.

So width and height is going to be 55 pixels because I want it to be rounded.

So within it has to be the same, we want to make something rounded.

So the border radius is going to be 50% to make them rounded.

Okay, so as you can see now the rounded, but I want to center these icons that are centered nicely.

So to do that, we're just going to use flex, it's easy display, flex and align and just for content to center, okay, so I'm also going to make a spacing between these icons.

So the spacing that we're going to use is margin.

So top and bottom is going to be point four 0.7, Rem, and then zero, left and right.

Okay, also, we're going to give a box shadow box shadow, we might also want to put this box shadow in a variable, to be honest.

I'm gonna create a here I'm gonna say, folks, Shadow shadow one.

And then these are the values or zero on the x axis, three pixels on the Y 15 pixels for the blur and then the opacity is 0.3.

Okay, so this is the processor that we're gonna be using.

And this is going to do over, and then I'm just gonna paste in the variable, just in case we don't like redo this picture, because I want to be reusing this bookseller a lot in this video.

Okay, so they're, they're showing nicely.

So I want to also resize this icon, the icon size.

So to do that, I'm going to target the eye, which is the eye inside the icon.

If you don't already know about Sass, we can nest in the elements.

Okay, so we can nest some HTML elements.

So that's what I'm doing right now.

So I'm gonna say font size, I'm gonna put this to 1.2.

Rem, I want it to be slightly bigger.

And then I'm going to also give it a color, and pointer events of none.

So pointer events, it means I want to, if when I click, I don't need to do anything, it doesn't react to the click, or to the mouse, whatever.

Okay, so now with let's save, everything looks nice.

Everything looks on point.

Okay, so now, I'm going to, so if you remember, here, I've given this a class of Active button.

So the whatever button, I want this active class, to be applied to whatever element that I've clicked on, and also, at the same time, remove other elements with that class, okay, so when I click this, on only this button to have that class action button, Active button, and then remove the remaining active buttons, class names.

So that definitely that feature is a little bit tricky for you know, for beginners, but it's actually easy to do.

So what we're going to do now, actually, I'm going to tell the Active button first.

So whatever Active button, so in here, above the control, I'm gonna say, dots, active version, I'm going to stop that.

So it's just giving it a background color and the transition.

Okay, like, so background color is going to be the secondary color, which is the green color.

And then I'm going to toggle the icon inside the eye.

So I'm gonna just target the icon and give it a color of white.

Okay, so there it is.

So that's the Active button.

It seems like everything is nicely centered now.

Yeah, so now the Active button is going to be green.

Okay, so now that actually button is green, we just need to go to the JavaScript.

And let's create a new JavaScript file, actually.

So let's do new file, it's going to be up to j s.

So this object is going to select some HTML elements.

So I'm going to select all items or elements using the section class.

So const sections document query selector, query selector, all everything that says the class of section.

So remember, we've given all of the sections the class of section, so it means I'm selecting everything with the class of section.

So I'm targeting this.

I'm also going to select I'm also going to select the bad section buttons.

So the second buttons is the parent container of this of these buttons.

So the controls so these are the section buttons, so it's like the parent, I'm selecting this parent container, and then inside and we're to also select the each individual button with a class of control.

Okay, so I'm just going to Okay, so there is a second button controls.

So this is the parent This is the actual button I'm also going to select the body, the body is a class of main content.

So there is the body main content, that's the class.

Okay, so in here, I'm just going to create a new function.

I'm going to use the function function to create a new function.

And then we'll say page.

Transition transitions.

Maybe we can name this function, whatever you want.

It's up to you, really.

So now, we're going to come in here, I'm going to say, button.

Click, active class.

Active class.

Okay, so what, what do I want to happen when I click the button? So this, I want to be able to get rid of the class that is not active, only the active class, that's, that's what I want to have the class one.

So we're going to do a loop, we're going to do four.

So we're going to do let we're going to create a new variable.

So let i Okay, so it's going to be initially set to zero and then we're going to say i is less than as long as i is less than is less than the length, the length of the button, okay? To section BTN.

Session btn is this one.

Okay, so as long as the is i is less than that.

We're going to increment increment.

Alright, so now does that.

So in here, I'm going to say, sick person button.

So the second set button is meant to look for the index, the eye.

Okay, whatever index we're on.

And then I'm going to say it goes through.

Actually, I'm going to add an event listener to whatever index we've clicked on.

So this is Is this the index? Okay, so I'm going to say dot add event listener.

So the event listener is going to take two.

The first one is going to be click, and then the second one is going to be a callback function.

So what am I doing? This one is going to be a cubic function.

So in in this callback function.

Okay, so in this case, I'm going to select the current button, whatever button was clicked on the current button, you can button well on current BTN.

And then I'm going to say is close to document.

So we're going to do query selector with a class of Active button, okay, so if you remember, the buttons are going to have a class of active BTN.

Okay, so I'm selecting that it's, it's with the name of current button.

So I'm going to say current button.

The first one, with an index index of zero, I'm going to say to a class name, then I'm going to say current btn index zero, then I'm going to do class name, I'm going to not list class name.

And then I'm going to replace that with an empty string.

Once we're out of the ones, it's not active, active, B, TN, and then I went to replace with an empty string.

Okay, so whatever button clicked on, when we're not letting clicking it anymore, we're going to go to the class and press the empty string.

So here, I'm going to do this dot class name.

So this is referring to this function.

Okay, so this is like a confusing topic to learn about the this keyword in JavaScript.

So kind of weird.

And then I'm going to do plus equal to active person, active BTN.

Like that.

So now, when I save, we need to call this function, page patients patients.

So let's go the function.

Let's go actually worse, I need to link this JavaScript file, going to scripts.

Scripts, and then we'll go to source and then up to j s.

Then let's save save everything and then go to the page inspect.

And then when we click this button or free a class you should appear on whatever button have clicked on.

And then it's going to get rid of this activity.

pattern here.

Okay, that's a stat.

We have an error.

But we're going to say it didn't work.

So when I click the class is off, but it's not working.

Let me inspect what's going on.

Canary properties of undefined class name.

Okay and prefers the this one.

This keyword.

Class Name to replace.

Okay, something is wrong class list.

Oh, this no cloud is supposed to be class name, not list.

Okay, so let's save this.

Hopefully, issue work, click.

Nothing happens we have an error again.

undefined.

That's weird.

Current btn class name replace active BTN.

So you just need to make sure let me double check, maybe just double check to see if the namings are correct.

I'm just going to copy and paste and replace everything except Well, I think the naming is correct.

Okay, let's try to figure out what's going on.

Undefined current button at evaton Okay, the, the class naming is correct.

Document query selector.

All don't get what, what? Undefined here I just realized something I didn't I didn't find the error, but must have supposed to use an arrow function here.

I'm pretty sure.

I'm supposed to use a regular function.

I'm gonna do function like that, instead of, because this keyword doesn't exist in in an arrow function.

Okay, so it only exists on the regular function.

Oops, why did I click? OK, so let me just show you from recording.

Only right after I stopped the video, that's when I realized that I've used the error function.

Okay, so when I go to console, okay, everything works fine.

So now it's working as expected.

Only, so Jenny's error functions for the, if you want to use the this keyword doesn't exist in arrow functions.

Okay.

So now let's, let's move on to the next step to the next step.

So for the next stage, let's touch actually doing the content.

But to be able to do that we need to be able to cycle between these sections.

Okay, so now we've done the active class for the button.

So now we need to do the content.

So each button is going to have something called a data data ID.

And then this data ID.

So when I click the button is going to look for a section with this ID.

So in this case, it's going to look for the about section with an ID of about portfolio about portfolios, blogs, and contacts.

So make sure you add the data ID next to the next to the code to the class after the class.

And then here I'm going to also add a data ID so this one is going to be the header so this one is going to look for the header.

Actually, we can do main, a home.

It's up to you home.

Okay, so I'm gonna give the IDs so do ID.

So this one is going to be home so give the Christmas Id make sure this ID matches the data ID here.

So for the home, the first one, the first pattern is going to be home.

The second is about about.

So this section about section, one, two ID, ID, so this one is going to be about, and then this third one, ID, Port folio, then Id, this one is going to be blogs.

And then finally, we have contact, ID, contact.

Okay, so these IDs are going to help us navigate through these sections.

Okay, so now that we have those IDs, we've done these sections, let's let me inspect this section.

They're there, but they're right on top of each other.

For the main, the sections that are there, actually, we need to style these out different background colors.

Okay, you know what we want to give them different background color, background color, slate blue, so you can see the difference, but we don't see them yet.

Because there's a scale scale is zero.

And actually translate is minus 100%.

So they're off screen, and the scale is zero as well.

So you don't see them yet, so we just need to do a little bit of JavaScript.

So we'll be able to see them later on.

Alright, just for you to see these sections.

Okay, I'm going to save this.

So we don't see these sections.

Now we just need to do the active class.

So when we click each button is going to do an active class.

Okay, so the active class is going to be the active class is going to be added to the sections.

Okay? So here, I'm going to say sections.

Active class.

Okay, so we have all sections, we are selecting all of these sections here.

So this section is targeting.

So this, the main content here is the body.

Okay, so the body.

That's the all of this section is like a parent of all of these sections.

So I'm going to say, all a section, all of these sections, dot for each, so I'm going to loop over whatever is inside the body.

Okay.

So in this case, all of the sections are inside the body.

So it's going to take in a callback function, I'm going to say section.

Okay, so we have section, actually, we need to add an event listener, we'll look through later add event listener.

And then when I click inside, what's the trick? Okay, so you can do your cover function here, and then we'll go into an event.

So the E is for the event.

Okay, so I'm going to, I'm just going to say E, control log here, I'm going to say e dot target.

Okay, so I'm going to save, let's go to the console, let me just click anywhere.

So it's not doing anything yet, because the sessions are outside.

Okay, so you won't, you won't, you won't see it.

But now it's targeting whatever element of its console logging element that I've clicked on, as you can see, and then it's showing the class or whatever element in the name of development have clicked on.

Okay, so we're just adding event listener to whatever element but in this case, we want to target these buttons here.

Okay, so let's get rid of this.

So in here, I want to say const.

ID.

And then we're going to say is cost to e to a target dot data set data set like this and then.id.

So the data set is like referring to whatever.

I've clicked on whatever element have clicked on the target, what going to target the data set.

So the data set is this one here.

Get a data ID here.

So whatever element that I've clicked on, I want to target the data sets, whatever element I've clicked on, especially these buttons, I want to get the data set for that.

So I want to get take the names of these data sets here.

Okay, so that's what this is referring to.

So I'm like taking the data set and put it into a variable called ID.

Okay, so I'm going to say, if, if this was true, or if we have an ID, whatever we're going to do, we're going to first remove the Remove, selected, selected from the other button.

Okay, that's something like that.

So am will do section buttons, which is the container of the buttons.

But I want to look through each individual button inside.

Okay, so to do that, we're just going to do with for each, so each button so for each button, I'm going to do by btn is button to a class this class list and then I'm going to remove the class of Active button active actually, active active button is a different class for the styling of the buttons.

But this is a class referring to.

So this active class, we're going to use this for the sections, not the active styles like this.

So this this different thing, different class name.

Okay, so we're looping through the button, each individual button.

If we click New button, we're just getting getting rid of the class.

And then we're just going to say eat or target.

And then we're going to say class list, we just want to add the class to whatever button that was clicked on.

So here, we're just going to do either target or classless the is gonna is coming from here the event.

Okay? So we're going to add a class of active.

Okay, so now that we've added the class, I'm also going to hide other sections.

Other sections.

So as we're doing, so we've done that already, but like, I'm just gonna do that sections.

So this, we're not seeing the sections yet.

But when I click the Active button, I want to be able to set the display and the transcript translate translation to default.

Okay, so I'm going to do sections.

I'm going to do that for each section.

So if you remember, the sections is coming here from the section.

So it's every second I'm looking through every section.

Okay, so for every section, I'm gonna say a section, I'm gonna section the class list.

Now add or remove, it's like the same thing that we've done with the button.

I'm going to say active.

Alright, so that's pretty much it actually done.

Yeah, I'm just gonna do one more thing, constant elements.

element, and then you're just going to do document.

document.

And then we're going to do dot get element by ID, element by ID.

And then we're going to pass in the ID.

So whatever ID is coming from the data set is going to be inside the element, element variable, we're saving the ID.

So remember, here we give we give the ID here, Id about portfolio.

So whatever element we're on, we're going to pass in the ID.

And also this data ID is it's linked to the to these IDs.

So whatever element we're on, and then we're targeting the ID.

So now we're just going to say element.

You can name and then we'll do Class and Class List.

And then also just going to add active.

Okay, so now I'm going to save let's see what we have.

So let's inspect to see our sections.

So, home hopefully should have an active class header.

We've added this manually, but when I click something else, hopefully should get rid of this and put it somewhere else.

When I click Yep, it got rid of the activity.

Last from the header, now this one is active.

These about when I click, this one is active now is getting rid of the existing class on other.

Okay, so now we can only use the active on one element.

But we don't see our sections here.

They are there, but we don't see them.

Because they're hidden, we just need to display those sections.

So I'm going to go under Search SEC five, I'm just going to do dot active.

So it's telling the active display block, so we only want to display whatever element is active.

Okay.

Now, let's say so now the head is active, it has a color of green.

It's working.

Okay, so everything works.

We can cycle through the sections.

Okay? But this sections, they're not animating? No, no, that's not what we want.

So down here, I'm just gonna say, animation.

I'm gonna say scale.

And him.

So that's never the animation, the duration is going to be one second.

And then we're going to have an ease in and ease out.

So I'm going to do an animation down here.

I'm going to do it keyframes, and then this one is going to be scale.

And him.

So that's the name of the animation scaler name.

And then I'm going to do at 0% What we want is zero, transform, translate.

France, late transformed, transform, translate 0%.

Translate Y.

Okay, so for the Y here is the same thing we've done before.

Scale, zero.

Okay, so it's only gonna have two states, the 10% 0% and the 100%.

Okay, what's my maths is broken, by the way, he double clicks when I don't need to.

So when I tried to do a single click in double clicks automatically, and to get a new mouse, okay, so here is just resetting the values to back to zero and the scaled that to one.

Okay, let's save this.

Hopefully it should work.

Now.

As you can see, we can scale.

Okay, we can see, but that's not the effects we're looking for.

We are looking for Scale Y.

Okay, so we're looking for Scale Y.

Okay, we run the scale everything.

So we want only to scale the Y axis.

So when the content come from, you know, up.

As you can see, now we can, you know, do those effects.

Okay, that's it for the effects now can scrub through the sections.

I'm going to take a break now.

And then I'll be back in a way, I'm just gonna drink some water.

And then we'll continue where we left off.

Okay, I'm back.

So now let's do the header.

So let's throw the header to the content, insert the header and then we'll move on to other sections.

So for the header, we're only mainly going to have some images and stuff.

So here, I'm going to do a class header content.

So the header content is going to have a left hand side and the right left header and then we're going to have the right header so the right side.

So those are going to display grid.

Okay, so for the left side is there's there is nothing anything here is just an image.

We're going to do header shape.

And then below that want to do an image is inside image TIFF.

IMG, IMG hero, does the image name and then go to the right side.

So here's just a bunch of text.

So we're gonna have h2, with name.

I'm just gonna paste in the name Okay, so this pan is surrounding the name because I want to color this color in the Name the only this bit a different color that I'm surrounding with this pan.

Okay, so this pan or save a class of name, I don't know I have the same, I'm gonna get rid of the span class, class name is gonna sound like this expand.

Okay.

Below that, we're gonna have a p a p tag, who I'm just going to paste in some text as well.

I'm sorry, I'm sorry for the background noise, my mates I playing a video game when I do a dot, main, main BTN.

Okay, so that's an anchor tag.

So it's going to have an icon.

And it's going to have two spans, this is the first pan, it's going to have a class of btn text.

Okay, so it's just text, the text gonna say download CV, you can put any text that you want.

So this an anchor tag is a link, you can make it go somewhere, or to Google Drive, wherever you're saving your CV, or whatever, you can send it there.

And then another span is going to have an icon for the download icon come from Font Awesome.

Okay, so now that's it for the header content, we just need to do the styles, I'm going to get rid of this green color here.

So that was just for testing purposes for you to see, to show you that the sections are working, I'm just going to get rid of this guy read when I get rid of every thing.

Okay, so now we're left with the default colors.

So now let's touch doing the header.

So for the header content.

After the controls, I'm just gonna say header content and the content and then I'm gonna do another duplicate this, I'm gonna say in the content components, so some components that we might want to reuse, we're gonna put them down here.

Okay, so now, I'm going to target header content.

Header content.

So for the other content, we're going to do display of the grid, we're going to put two column grid, grid template columns, we're going to do repeat, so one to two columns, and then one Fr.

So they're all going to be equal.

So when I save, so now we have two columns, when I inspect this, as you can see, we have two columns, one, two.

Okay, so that's what we want.

And then yeah, the height is going to be one or 2% with the height, and then I'm going to target the left header, left hander.

So for that display, flex, align items, align items relative to center.

Okay, and then position is going to be relative because when to position absolute a shape, that's going to be behind our image.

So this image save this is going to have a shape behind it.

Okay, so that's why we're doing the person relative the parent container.

So the shape we've named that shape, ah, shape, if you remember, just the header shape, the shape is going to have a transition that we've been using before, I'm just going to paste in transition and then a height of one represent with 65%.

The wrong color is going to be far, it's going to be secondary color, it's going to be the background color, and then position absolute, and then we're going to do left, zero, top zero, top zero.

And then we're going to do Z index wanted to be behind the image of one minus one actually wanted to be behind.

And then I'm going to do clip path.

So clip path, I'll show you what, what he does, I'll just paste in the corner and then I'll show you.

So this is the clip path, these are the values are using the clip path is like altering the shape.

So to do that, we can do clip path generator.

And then we can generate kind of a clip path.

For example, then this trapezoid, trapezoid the name, it's kind of confusing to read.

And then we can you know, generate the shape that we're looking for.

And then you can just copy this code and then you can paste it wherever on whatever shapes want to customize.

So in this case, these are the, these are the values that I'm using.

And then after that after the shape, I'm going to target the image.

So for the image, I'm going to give it a border radius.

So the border radius is going to be VA, I'm going to do MD, I can't remember the border radius.

Small, too.

So missing the border radius mod two is a variable.

Okay? When I do width, and height, so it is going to be 90%, height 100, height 90% with 68%.

And then I'm big on color, background color is going to be far.

So the background color is going to be black.

That's going to be the background color, and then the transition when the transition.

So we've used this transition multiple times, and then I'm going to edit the image.

Inside the image container, we have an image, the actual image, width and height is going to be set to 1%.

Okay, and then object fit to cover so it doesn't stretch out of the feet to cover.

So this image is going to stretch out, we also want to transition this image again, copy this transition we're going to read you can put that into a variable, so you don't have to copy and paste like this.

And then want this image to be in a grayscale for someone say future grayscale.

And then I'm going to put the guilt, Grace, grayscale to 100%.

Then when we have when we have the image and hover.

So this is the beauty of sass, we can nest components, HTML elements, and then we're going to set filter.

grayscale, zero.

Okay, let's save.

Let's see what we get.

Okay, so when I have the image is changing color.

Alright.

Doesn't get rid of these.

So now yeah, leave me cynical.

So now let's go to the right side.

So on to the right side.

It's mainly, so we have left header, I'm going to collapse the left header.

I'm going to save right header.

Okay, so for the right header, and when I do display flex, display this play flex, flex direction to column because I want everything to be in a column direction.

Okay, and then just for content to center, and then padding right? To put a large value here, hmm, I think that works name, then font size.

So for the name is the main title, I'm going to make it bigger.

Okay, and then I'm going to target this pan inside it.

So there's a span in there.

So this pan is gonna have a color, different color, the color, this color is going to be a secondary color.

Secondary, so via secondary color.

So that's the color of that.

And then after the name, we have a paragraph, I'm going to give them margin, top and bottom is going to be 1.5 Ram.

And then left or right is going to be zero.

And then after that, I'm going to give you the line height.

So line eight is the spacing of lines of text.

So the letter is going to be sort of like something like that I'm going to save let's see what we get.

So there it is.

Looks nice.

So we just need to start this pattern.

So to start the button, we're going to reuse this button so it's independent component.

So I'm going to say dot main btn Okay, so this main btn actually, it's I think it's wise to put it into a container dot btn container like that.

Okay, so now we can try to can start styling the main button.

Okay, so this button is going to have a lot of styles.

Okay.

So border radius is going to be 30 pixels.

Wanted to be nicely rounded, not that not 20 by 30.

Okay font size.

We'll do color.

Inherit and then we're going to font weight, it's going to be 600 on the text to be thick.

Okay? And then I'm going to do percent of well And then I'm going to give you a border with one pixel and the color of secondary.

That's the border, I'm going to do display flex and align everything to center.

Okay, and then I'm going to say overflow to hidden.

Okay.

So inside the button, we have btn text or BTN.

Text, and then I'm just going to give it a padding, top and bottom zero to REM left or right.

Okay, so in the button, we also have, we also have dot btn, we have the icon.

Okay.

Btn icon.

So if you don't remember the class names, this one btn icon.

Okay, so the btn icon, it's gonna have a color of a green color, secondary and then sent, everything is in Flex.

Okay, so we've done that over and over.

So sometimes I'm just gonna have to copy and paste.

So to set everything just display flex align items center justify content center.

So padding while RAM, so it's like spacing around.

I'm gonna save let's see what we got.

So there's our button, but it's filling in the entire width, because we're using flex on the parent container.

So to get rid of this effect, we can do btn can be tn container, if you remember, to put in the apparent container called BT and corn.

Here, there it is, between corn, we're just going to do display flex on that display.

Flex.

And then we're going to say align self.

Pressure.

Sure.

flexter.

Yeah.

So now now now we need to have an bring in something here when you have an bringing like a shape that similar to a button.

So we're going to use a pseudo pseudo element before pseudo element, we'll say end for four.

And then we're going to say content to an empty string.

So we can start this to whatever styles we desire.

Pacino salutes top 00 And then write is going to be zero.

Right zero, and then we're going to do transform, Translate X.

So we're going to take the shift away from the button, man, as well as the percent is going to go like to the side away from the button, man as one of the percent.

We're also going to do the transition.

I'm just going to paste in the transition.

And then I'm going to do Z index wanted to be behind the text of the button, and as one okay.

So now this shape is there, but it doesn't have a width, height, anything defined.

So I'm going to say and hover when I have the button.

Have the button and we're taking the before pseudo element.

What do I need to oil What do I want to happen? I'm going to put your width and height 100% And then the set a background color to the secondary color.

Okay, so now when I inspect, let me inspect this.

Let's look for the before is there the before suderman Is there, but remember we are translating on the x axis minus one represent so we need to bring it back to the default position which is zero.

Okay, when we have and then when we are not having it's going to go back to away from the button.

String A which is doing this effect from the wrong direction.

So it's it's from minus it's actually 100% Because we're going one 2% On the positive value minus is gonna go negative.

Okay, so I wanted to amend positive so it's coming from the right side now.

So see, but yeah, there it is.

I think we need to add a transition somewhere.

In here, too.

We need to transition here so somewhere safe.

Safe scratch I don't know it's glitching sometimes glitches not doing it before transition.

I think in the hover, that's when we need to transition, let's say start doing it.

If it doesn't does, if it doesn't work, it doesn't look smart in the icon Okay, doesn't matter, but works.

Okay, so now what we need to do is go on to the next section, which is the about section.

This ABA section, it's a it's a, it's just, I just say it's too much.

So much content there.

Okay, so I'm just gonna go to the About About me check how long I've been recording, I'm so tired.

I've recorded this video like a couple of times, and then I made an error which was too bad I couldn't even edit out so now I'm going to go to the About section so on to the Mac labs the controls about in there about I'm going to create a new div called main title.

So we want to be able to reuse this title was to so this is like a title this pan inside it's like the main title.

So we have about me and then we have a span covering the me.

Okay, so when to color this differently.

So we first learning something with span, it means we're going to style that difference test that particular element differently.

Okay, so in the independent components, so we finished the button now on to do main title.

Alright, so, for the maintainer.

It's just the text align to center.

text align to center, and then now we're going to tie to the edge to the header position relative and then we're going to do text transform, uppercase.

Swap uppercase, and then we're going to do font weight, font size first forum.

font weight is going to be 700.

And then that's it for now, let's tidy this pans.

So for this pan, I'm gonna do color, it's going to be VA, it's gonna be a secondary color.

Okay, so after that we're gonna target PG, PG text so the big Tex is going to a position of absolute is going to be like behind the main test.

I'm going to say top 50% And then we're going to do lifts 50% as well.

And then we're going to do color, a gray color and then the transition okay, I'm just going to paste in so transition is usually Z index minus one I want it to be behind the text Okay, and then the font weight 800 So this transform translate minor C to cinema suit percent it means when to send or something.

Okay? And then the font size is going to be 6.3 Ram.

Okay, let's save this.

Let's see what we get.

Okay, so there it is.

Okay, so about me then yes is my stats in the background.

Okay, so now we have the main title, the big title.

Now let's to talk about content.

So it's like a div that's gonna contain everything about container container, and then I'm gonna have a left container left about in the right about left and right.

Okay, so we're going to have an h4 in the paragraph.

I'm just going to paste this.

So on the left about, okay, that's what we're starting with h4 In a paragraph h4 Is the heading.

Okay? And then I'm going to copy that button again, the button that we've used in the header.

Okay, so below, below the paragraph, I'm going to put the button the button container main button.

Okay, I'm just reusing the baton.

I'm going to save this.

So there it is.

So we're reusing this same button over and over again.

I think that's good.

Okay, so on the right side, right about I'm going to collapse this pattern.

And then I'm gonna collapse this paragraph.

And then I'm going to be left with the ratable.

So in here, and we're just gonna say talked about item.

Okay, so the bot item is going to have a class of dots, a B, T.

Text.

Okay, so in here, we're just gonna have a p p dot large text.

Okay, I'm going to say maybe 650 or 560 Plus projects.

Okay.

So here, I'm just going to paste in another paragraph, the class of small, small text, and then we're going to the neuron line br It means Break, break the line, go to the new line.

And then yeah, we're just breaking the text.

Okay, so that's it for that.

So mainly, on the right about, we're just going to have like, a grid.

Okay, so we're gonna go independent components, I'm gonna say here about Okay, so in here, I'm going to say, about container.

So in about container, I'm gonna do display, display grid.

Then grid, template columns, also repeats, I'm gonna have two columns.

Two, and then one EFA.

They're all going to equal sizes.

And then I'm going to do padding top and padding bottom of, I'm just going to paste in this.

So it's a no brainer, padding, top 345 padding, bottom left and right about.

Okay, so on the right about, it's also going to be a grid.

Okay, display grid, then grid, somebody columns, so this one is going to be TFT.

Same thing.

Repeat two columns, one Fr.

Like that.

And then below that, we're going to do grid gap.

So it's like spacing between grid items.

We gap when the term so that's like the spacing between two items.

Okay.

Now, let's save.

Let's go there.

So that's the about item, there it is.

The write about item, we just need to keep starting.

Okay, so we're going to talk about item, I will give it a border one pixels on pixel, and a border radius and a transform and shadow, the ones we've been using for one pixel and the color of gray.

Okay, so And however, when we have this when we have a, I'm just going to say cursor to default.

Okay, and then I'm going to say transform, translate, I won't translate y minus 50 minutes left, minus five fixes.

Minus five pixels, I want to have and then goes up.

So that's the kind of effect I'm looking for.

And then the border, I'm going to change the border color from primary to secondary.

And then the box shadow.

I'm just going to increase the intensity, the opacity Okay, so from open one to open three, two.

Okay, I'm going to save this go to the About section.

So there it is.

So now we have a border surrounding you only have it turns green.

Okay, so below that, below the hover.

We're going to do the about text the vertex, okay, so padding.

Padding 1.5 REM Now we're going to do is display flex, display to flex.

And then we're also going to change the direction to column.

Alright, so now we're going to look for large text.

So the left text, I'm just going to change the font size to three REM font weight to 700.

And then we're also going to change the color, color Tuva, secondary Saundra color.

Okay, and then now we're going to target the small text.

For this small text, I'm just going to have padding, left of three REM through RAM, and then when to position of relative, and then text transform text transform to uppercase, so I wanted the text to be in uppercase.

And then when do font size 1.2 REM then the color is going to be gray.

And then late letter spacing, letter spacing, I want these to be two pixels and then end I'm going to give it a before pseudo element.

So it's going to be like a small line.

Okay, with a person of absolute, I'm just gonna paste in the code for that.

So the content empty string person absolute left zero, top 250 pixels with two RAM, high two pixels, I'm going to save this.

Okay, so there it is.

So this is the before pseudo element, the literal line here, I'm gonna inspect this.

So there it is.

Okay, so this is a grid, where we have two columns here.

So we need three more objects here.

For us to have like four items.

So you can clone this grid items here you can about item, you can clone this three more times 123, safe, and then just change the data to whatever data fits your need.

So there it is.

So now we have more items.

For me to change every item here, I'm not going to do that, I'm just going to paste in the items that I've changed the data already.

So I don't want to waste your time changing the information about these items.

I'm just going to paste in all of the items that with data down to them already.

Okay, so the idea of like sort of already feeding the data.

So now let's go to the left side.

Okay, so this is the right about.

And then what to do at dusk.

About so left about is just there isn't much in there.

So we're going to do padding, right? Padding, right it's going to be from from, and then one tag at a p tag, line height.

So the line height for this p tag, I'm going to set it to two REM Azhar and then we're going to do padding top and bottom is going to be our RAM or RAM, and then the color is going to be gray one.

Okay, that and then I'm going to tell you the h4 is just putting into uppercase the text, the h4 and then the container of the button.

Actually Do I need to tell you the container, the button just save everything should be nice already.

There it is.

So everything it looks nice.

We are about.

So now we just need to add more, more stuff below here.

So we have like progress bars in the timeline stuff.

So let's just do that.

Now.

So let's go to the HTML.

I'm going to collapse the the about container I'm going to collapse that.

So now I just want to sort of like add the stats, the I'm gonna do about stats first, that's okay.

So in here the bus stats nothing much nothing much is going on here.

Just an h4 Seeing my skills.

And then when I create a class called progress progress bars, the div, program, progress bars and then another div called progress.

Bar.

Progress Bar.

Okay, so that's another class.

In there, we have a title called P.

Progress.

Title.

Okay, so that's a P progress title, I'm going to say HTML five for this one.

Okay.

And then below that, we're going to have progress container.

Okay, so in there, we're going to we're going to have like the progress text, P does Frog, frog text.

So this is the text, it's going to be like 80% or 90, it's up to you what whatever with whatever percentage of your skill.

So in this case, I can just say maybe 90%.

That's like a p tag.

And then below that, I'm gonna have a cluster progress.

So this is the actual progress bar.

And then in this whenever span, and then the class for this plan is going to be actually M L.

Okay, so that's that for the so this is the progress bar item.

We can duplicate this many times as many, depending on how many progress bars you want to do.

Okay, so now let's just go to the styles.

So about container.

After that, I'm just going to say dot about stats.

Above stats.

So here, I'm just gonna do padding bottom to forum was I want a bit of spacing, I'm gonna say progress.

Progress bars.

Okay, so I'm just going to do a display grid, we've done that to columns.

And then below that, I'm going to toggle the progress bar like that.

Here, I'm just going to do display, flex, flex direction to column Okay, I want them to be one after another.

So that's what we're using the column and then I'm going to select the progress title, drug title.

Here I'm just going to give it you know, text transform text transform to uppercase, so I'm gonna put it into uppercase font weights, I'm gonna put it the five hundreds Okay, so after the progress title, I'm going to say progress progress container, the progress icon class display flex align items to center so in there we have a prompt text as or prog text so the text is never just a great color.

Okay, now let's save and let's see what we have so far.

Okay, so there it is a one next to this text here to have a progress bar okay.

So something is missing here my skills Okay, nothing is missing you just need to stop this h4 Okay, so now we just need to let me check h4 stat title.

Ah, okay, so we have a class was that title for the h4, I'm gonna say starch.

Starch that's tight.

Okay, it's not there.

Although we need to start that later.

Okay, so now we need to do the progress bar now.

So if the progress text after that we have the progress.

So the actual progress I'm gonna say width with one or 2%.

So for this one height, it's going to be point four, five for this for the height, and then the background color.

I'm going to put a position of relative because save this Alright, let's see what we get.

So there it is.

So that's our progress bar.

But we need something also inside to show the progress, the actual progress.

Okay, so that's how we have that span inside that inside the progress.

So, so the span is going to be responsible for filling in the width.

So this pan is going to be a person of absolutes.

That's why we did percent relative here.

So left and top is going to be zero, and then the height is going to be 100%.

Okay, and then the background color is going to be the secondary color the green one.

But if I set the width here, for say, maybe with 60% As you can see, is there.

But if I want to create more items here, if I see a progress bar, I'm gonna say 12345, I'm gonna save when I go, as you can see, they all have the same width, I want them to have like different width according to maybe different programming language or something, a different width.

So to do that, we need to give each individual progress bar, I'm gonna redo this undo.

Okay, so you see this pan, it is a class of HTML.

So whatever language you're doing, give it a class of that.

And then after this pan, and then you target each individual language and give it a different width according to whatever data you want.

So in this case is 90%.

Okay, so now it's going to be in safe, because I didn't save.

Okay, so now it's going to be 90%.

As you can see, it's 90.

And they want to do another programming language when I copy the progress bar.

So this is the actual progress bar that I need to copy multiple times.

I just need to change the class names for the progress span.

Okay, so this fan, I just need to change the class name and then put a div to a different width.

So in this case, I'm just going to paste in the the stats.

That does ups.

I'm just going to paste in the stats.

Okay, so progress bars.

That, so there, so now I've done the progress bars off camera.

So now we should have like six different progress bars.

Okay, there.

But now there's something missing.

Look, this progress bar progress bar has, they have different class names.

Okay, so I'm just gonna copy those class names here and give them different width.

So here we've done the HTML already.

And that's gonna paste in HTML, CSS, JavaScript.

So make sure your width, so our full name, so this one should be 90%.

Actually, at, for me, I've put HTML 280.

And then the rest of the classes, it's up to you what you decide to do with them.

So as you can see, now we have different now we have different progress bars.

So it's only a matter of giving a different class name to a different progress bar, because we're using a grid.

Okay, so each progress bar, I can give it a different class name, you can actually do as many progress bars, as many as you want.

It's not limited to six was it's a grid, right? So you can do as many as you want.

As many as you want.

It's up to you.

Okay.

So now, let's do this title here.

Why did we name this title? I'm going to collapse the progress bars.

So we see what we're looking for.

So the is called stats.

So it's actually stat stats title.

Okay, so this chair tighter.

On this to be independent, I wanted to be outside of this container.

I'm just going to go outside.

I'm just gonna do that down here.

I said text transform to uppercase.

Then I'm going to give it a font size of 1.4.

Rem and then text align to say Enter.

And then I'm going to do padding.

Top and bottom is going to be 3.5 3.5, left, left and right zombies zero.

And then position relative.

Because I want to create a before so the element inside it.

So I'm going to say before.

So you know the drill.

Before we've done this before, I'm going to say content, set content to an empty string.

And then left, I'm just going to set some properties here, left 50%, top 0% When I give it a background color of gray, and then I'm going to center this on the x axis.

So my say transform, Translate X and then minus 50%.

to center this on the x axis, okay, now I'm going to go to the Okay, so now we've title my skill.

Okay, but we need their border.

Actually, I think we need a border.

So we can give this title maybe a border border top or something.

I don't know.

Yeah, let's do a border.

I think that's that's the better way to do it actually not a border.

So this before so the element is responsible for that.

content.

So we just need to give this a width with is there percent of absolutes let me inspect to see why it's not showing.

Inspect before pseudo elements.

says is there transformation Translate X? Left 50% The know why the O is height? bone color.

I think this there's something wrong with the big one color.

Background Nope, it's not showing still content empty string.

Person relative have no idea why it's not showing.

Save everything again.

I'm gonna inspect.

It's interesting.

Let me try to redo the background color.

Still, it's not working.

I think I've done something wrong somewhere.

And before so check your naming.

Start tighter.

I'm just trying to figure out why the let me see if I have this variable.

Right? It's there.

Okay, let's do something else.

I'll figure I'll figure out later what's going on.

Why it's not working.

So let's do something else.

So now we need to do the timeline.

So I was wanted to put like a line here onto the title, but for some reason, it's not showing.

I'll try to figure out why.

It's not showing later on.

Let's focus on the syllabus.

That's I'm going to collapse.

So now we need to do the timeline.

For the timeline.

I'm just going to say dot timeline.

Okay, so for the timeline, we're just going is going to be a grid.

So same same as will same stuff we've been doing.

So it's going to be a grid and We're going to have two columns of the grid.

So we're going to have a timeline, Timeline Item.

Okay, so it's a grid item.

So Timeline Item.

So anytime I make a Timeline Item and when, say dots timeline icon, so we're going to have an icon as well.

And then icon is going to be like a briefcase icon.

I'm going to pull that you can go to folder Summon, look for any icon that you're looking for.

And then P dots to timeline to ration.

And then here you can put like a duration of when you started working for a company and stuff, blah, blah, blah.

And then we're just going to have an h five with the span inside.

And then a paragraph with some random, remedied some texts.

Okay, that's it.

That's it for the Timeline Item.

That's pretty much it.

Okay, we just need to add the title above the timeline.

Here.

We can just say, my timeline.

Okay, so let's save.

Let's see what we got.

So there it is.

So my timeline, so we just need to determine item to do a grid for this terminal item.

Okay.

So to do that, we just need to go to the styles.

Main here, I'm just going to say timeline.

Okay, so dots timeline.

And when I say display grid to columns, we've been doing this, so my gonna waste your time rewriting.

And then I'm going to say dots timeline, Timeline Item.

So for the terminal an item, I'm going to say, for suitability because I'm going to person absolute the icon, coding left, padding left is going to be three REM, left three rem and then a border of one pixel border left.

So I'm going to give you the border left of one pixel with a color of gray five, and then I'm going to toggle the to icon the individual icon, the actual icon, and I say percent of absolute.

And then I'm going to say left minus 27 pixels, you can play around with this value to find whatever value suits your need.

Okay, I'm going to save just show you what I mean.

So I'm going to I'm going to inspect.

So this is the T icon, okay, I haven't saved yet.

Okay, so to icon Okay, so now, so there is our icon, okay, so you can sort of play with this value the left left value to see whatever you need.

So the minus 27 was the value that I found to be better.

So I'm gonna say zero and then I'm gonna say give it a building color of secondary and then I wanted to be rounded so width and height must be the same for it to be rounded and then a border radius of 50% make sure it's rounded.

Okay, so that's why I did width and height as the same.

So there it is.

So we just want to set this icon using flex.

So display flex align items and just for content to center to center the icon Okay, so and then I just typed it the icon itself and then give it a font size of 1.3 Ram slightly bigger.

Okay, that's it, the icon should be should be appearing nicely.

There it is.

So now we just need to style this text and the title.

Okay, so after here I'm just going to duration to rate shown okay.

So to duration when I give it a padding and the color, padding top and bottom is going to be point to ram left and right point six RAM and then border radius is going to be 15 pixels.

I want it to be rounded and then display is going to be inline block.

Okay and then font size I want to be smaller.

font size is going to be point eight RAM and then We're going to text transform uppercase, uppercase, and then we're just going to change the font weight to 500 something, you know, thicker.

Let's now just save everything.

So there is our timeline icon item, I mean, okay, so we just need to do the title in the paragraph.

So after determined duration, there is an h5.

So there's five, there's only many styling, the padding, text transform in font size, just the standard stuff.

Okay, man, I'm going to tell you the span inside the and then I'm going to give it a color and the font weight and the font size, just the standard normal stuff.

Okay, after after the f5, I'm gonna tell you the paragraph, I'm gonna give it a color of gray, using a variable color.

Gray to reverse the color for that green number two for the paragraph.

So I'm gonna go again.

So there it is, everything is nicely styled.

So now we just need to duplicate this multiple times, and then change the values.

So what you need to do go back, and then go to determine item need to duplicate the actual term line item, because we've done this display grid on this timeline, two columns.

So we just need to duplicate to promote grid items 12345.

And then you just need to change in the data to whatever suits your need.

Okay, so in this case, I'm also going to paste in some, some values again, because I don't want to waste your time me changing these values again and again.

So you can put it to whatever values that you want.

Okay, so Verity, so for me, I've changed all of the data or just made the random.

So for it to look something, you know, somewhat random.

Okay, so for the line, we'll come back into the later because I don't know as much showing.

Yeah, I think I'll take a break for now.

I'll see you in the next session.

So now it's time to work on the portfolio's page.

So this one is going to be super quick and easy.

So it's just like a grid.

So let's go to the portfolio section.

Okay, so in this section, we're going to put some grid items.

So mainly, you're going to put the title, we're reusing the title that we've created already.

And then just put, change the name to my portfolio just copied the title, from where we've done it before.

And then, yeah, put it in there.

So my portfolio with the title.

And then when I go to the portfolio page, you can see the title of my portfolio.

There it is.

So now, let's do the content.

So for the, I want to have a paragraph here, P with a class of portfolio, text, just put some text in the paragraph, like random text.

Okay, in this case, I'm just going to put some random text.

So I'm going to say, dots, what? What Foleo folios, something like that.

And then here, we're gonna say dot portfolio item.

So in Portfolio item, we're going to have an image to its image.

And then IMG, image portfolio one.

So we have portfolio all the way to seven, the images.

And then below that, we're going to have below the image, we're going to have dot hover items.

So when I have the portfolio item, I want to display the links, where you can download the project if you if a user wants to.

Okay, so I'm going to have an h3 in there.

I'm going to say, Project source.

So the source of the project like the source code or something, maybe your GitHub links.

Okay, below that, I'm going to have a class with icons, of icons.

So here I'm going to have an anchor tag a link.

So each link is going to lead to whatever website you want to.

So for example, if I say WWE does google.com And then I'm going to say Target, Target.

And when I put the target to blank, so it means open a new page.

So if the target is close to blank, it's going to open a new page.

And then in there, I'm just going to add an icon.

Okay, so you can put as many icons as you want.

So in this case, I'm going to do GitHub.

I want to do GitHub, YouTube.

Okay, GitHub, YouTube and GitHub issue Behance.

That's the icons I'm going to be using.

So now, we have one grid item.

So we need like, six grid items, or more, whatever is depends, it's up to you.

So we're going to have like a grid with three columns.

Because once you have three grid triggered items per row, okay, so let's go to the styles, I'm going to say put folios so that that's the smacking my way, I'm going to start doing the portfolio.

So I'm going to say dot portfolio texts.

Put text portfolio text, I'm going to give it a padding, padding top and bottom is going to be to ram left and right zero.

And then text align.

text align, it's going to be the center.

And then after that, I'm going to target the portfolio's folios the container.

And then I'm going to do a display grid.

We've been doing this for ages grid template columns.

And then we're going to do repeats and then I'm going to throw in one fr Okay, so we're going to have three columns and then grid gap spacing between grid items.

So it's going to be two REM as usual.

And then I'm going to tell you the margin top I'm going to give it a margin top three RAM and then I went to do to put folio item the actual individual item, portfolio item and we'll do percentage relative and then I'm going to tag the image inside is the portfolio item and we'll give it a width 40% Okay in height of 300 pixels and then I'm going to do object fit to cover and then what a radius but the rate is going to be 15 pixels 15 pixels, okay? And then below that below the image I'm going to say dot hover items, hover items Okay, so with actually before I do that I've just saved save save save Okay, so there it is.

So it looks looking nice.

Says looking nice.

So image we just need to keep going the border radius for some reasons didn't apply border radius 15 pixels we also need to put I think you need to put this also on the item itself belief not it's not working let me inspect this for the radius doesn't seem to be working whether re order Oh border radius okay, we'll fix it later.

So now on the have items.

Portfolio item, let me just double check the class name.

So make sure the class names Okay, that's that's okay.

Have items with one or 2% Right one or 2%.

The background color is going to be the primary and then position is going to be absolute.

So when we have Okay, so it's not showing yet.

Okay.

border radius which will be sent as well.

Border Radius 15 pixels.

Okay, so they have items positioned relative.

Let me just double check.

In inspect Oh, it's have item have a or is it like that? Okay, so there is our have item, that's this, this, this this green color here.

So we're going to center all of this content here on the center.

So you already know how to do this, we're going to use flex, flex align items to center and flex direction to column.

Okay, like so.

And then let's see what we get.

It's loading.

It's compiling the styles.

Sometimes he does this.

Okay, so there is all of the items are aligned.

So now we just need to style the individual icons.

Okay.

So to do that, I'm going to start with an h3, the h3 heading inside the inside there, and just want to increase the font size and give it a color in the margin.

So the first is going to be 1.5 RAM, and a margin bottom of 1.5 Ram.

Okay, and then after that, after the three, target the icons, I want to say I wanna, I want to align the items as all display flex, to center.

And then the icon, individual icon, I want to give it a background color of the primary.

So width and height has to be same for us to be to round two measures rounded border radius, 50%, width and height must be the same.

So whatever width and height you put, mesh was the same for us to make sure the icons are nicely rounded.

So for example, like this, the icons around it, so we just need to center this in the middle with Flex.

Okay, so you're in order to do that, and then we're going to give it a margin left and right for us to space them.

And then case, it's going to be pointer and then we're going to do a transform.

Transition, I mean, transition, the Z for that.

Okay, so there it is.

So on, however, we might want to actually want to change the font size of this icon, these icons, so I'm going to target the eye.

So you can insert the icon and whatever the I change the font size and the color to white and then give the margin, left and right.

Of one, like so.

Okay, so when we have this icon, I'm going to say end.

However, what we want to happen, whenever I just want to change the background color of the icon, and the actual icon I tag, okay, so it's just in the color.

So let's see.

So now it's changing the color.

So I don't want to display this by default, okay, I want to only display this when I have this grid item.

So in here, too, I'm going to get rid of the to get rid of it.

So to get rid of it, I'm going to say I'm going to say go up at the three I'm gonna give a pastor zero opacity zero it means I'm gonna like hiding by stood there minding divisibility who pastor zero.

And then I'm also going to do scale zero, Transform, transform, scale, zero.

Okay.

And then let's do also a transition, the one we've been using.

Okay, so, um, I want to have a grid item.

I want to return these two default values, opacity and the scale.

Okay, so to do that, I'm just going to scroll down.

I'm just going to say, up here outside, I'm just going to say portfolio.

Portfolio item.

Okay, in hover.

So when I have the portfolio item is the grid item.

And then I'm gonna say dot have items on them to opacity and we'll set that to one scale also to one.

Okay, so let's see what we got.

Okay, so when I have it's, it's showing, but I just need to fix this image thing.

The image problem I don't know why it's not working for the let me just inspect the image.

Image with Uber sent height 30 pixels.

Okay, so that's the parent of the image and then the image itself, I'm gonna set the image itself height to 100%.

Something fishy is going on.

If you don't set the height object fit, oh, it's contained, it's supposed to be cover, smart fault, or a self contained, contained object fit to supposed to be cover.

So it's going to cover the whole grid item.

Alright, so now it's covering the whole grid item.

So everything works as expected.

So now what we need to do is just duplicate these portfolio items.

Okay, we can duplicate them by you can also actually, you know, animate the, the rotate, but I'm not going to do that in this video.

So let's go to the HTML.

So if we done display grid, grid, we're displaying three, three columns.

So what I'm going to do now is I'm just going to duplicate and change the values.

So we have the portfolio images, so the image can change from portfolio 123445, your you can use your own images if you want.

So you just you just need to change around the values.

Okay, so portfolio item, I'm going to collapse portfolio item.

And then I'm just going to duplicate this multiple times 12345 As many as many times as you want, save, and then go back, we should hopefully should have more portfolios, and then you just need to change around these images as well.

Okay, so yeah, I will, I will leave the rest up to you.

Portfolio item.

Okay, I'm just undoing this portfolios.

Okay, so I've pasted in the date with the data change.

So I've changed all of the images.

So you just need to do the same as you just need to change to your own images of your liking.

So I've changed the images.

So now yeah, let's move to the next section, if you remember this before, so the element was not showing is because I forgot to do something, when I expect I forgot to do percent of absolute on the first element.

So make sure you do position absolute, and then it will show somewhere down.

There it is.

So go to the steps starts tighter.

tighter, and then the content in here to position of absolute.

So hopefully now the line should show.

So now we should ever align.

There it is the line here.

Okay.

So that's it for the portfolios.

Now let's go for the blocks, the blocks is kind of similar to the portfolio because it's a great Azhar is going to be f is going to have, it's going to have three, three columns.

Okay, so we just need to also go to the blogs, portfolios, I'm going to collapse this.

And when I go to the blogs, I'm going to say dot blogs, content content that's like the parent, the main parent container.

So in there, I'm going to paste in the title and then the title, just change it to my blog.

So we've created this title before.

So it's inside the header, that's where actually inside the the about section, that's where we first created this title here.

So just copy the name main title.

We've started this without this title already.

So you just need to change the text.

Okay, so hopefully we should have main title in the blog section.

There it is.

My blogs.

Okay, so we have the main title.

So it's like the blog section.

So now, after the title, I'm just going to do dot blogs.

So in the blogs, I'm going to do the blogs, that's where I'm going to do all of the blogs.

So in the blogs, I'm gonna do dot not to block each individual blog.

So the blog is a great item.

I'm going to do to be duplicating this multiple times to create multiple grid items.

Okay, so the blog, I'm going to have an image img I'm going to say blog one.

Okay, so you can set whatever image you want to use.

So after that, I'm going to do dot blog, text.

And then in there, I'm gonna have an h4.

You can put whatever texts you desire, anything that you want.

And then after that, we're going to have a paragraph with random texts as well, like that.

Okay, that's it for the blog item, we just need to start this, there isn't much to it, we just need to start this and then we can go to the next section.

Okay, so we just need to go to the styles and just get started with the blogs.

So portfolios, portfolios, and then here, just going to do blogs section.

Okay, so here, we can do dots, blogs.

So the blog is going to be a grid display.

So that's the parent of each individual blog, grid.

So in here, we're just going to have three columns.

So the standard stuff we've been doing before, and then each individual blog, we're going to have a percentage relative.

And then background color is going to be gray five.

And we're going to give it a border radius of five pixels to make the corners be rounded, you know.

And then we're going to give it a box shadow, you can use the variable or you can use this one.

Okay, so one pixel, one pixel, one pixel on the Y, one pixel on the x and then 20 pixels for the blur.

Okay, and then when we have this blog item, what do we want to happen? So when we have one the image to sort of pop out of the blue container, I'm actually also going to increase the box shadow or copy this box shadow, paste.

And then I'm just going to increase like the opacity of the box shadow from point one to point three.

And then after that, I'm also going to transform this and then translate why I wanted the blog to go up slightly Elevate, so minus 50 pixels, I wanted to go up minus 55 pixels.

And then I'm going to apply the transition.

So the one we've been using, and then inside, inside that one we have also going to target image.

So image filter, filter, I'm going to do grayscale, I'm going to do zero.

Okay, and then what to do transform, translate, actually, the scale learn to scale the image.

I want it to be larger.

So one by 1.1.

So the image the normal scale is one, so I want it to be slightly larger by point one.

Okay, so it's like 10 larger by 10%.

I don't know.

Yeah.

10%.

Okay, so, and then, we're also going to do a boxer.

We're going to do a boxer for the image.

So the main boxer is on the y axis, which is four pixels.

So we wanted to show a lot of shadow on the Y axis.

Okay.

So now, let's save let's see what we got so far.

When I go to the blog section seems like there's a glitch somewhere.

Yep, there is a glitch.

I don't know what happened.

Plugs.

Me refresh this.

I don't know why it's glitching.

Okay, plugs.

That's, that's odd.

Let me double check the class names.

Blogs.

Blog item.

Oops, plus content.

I don't know what's going on.

Okay.

I think I know what's going on.

Go back.

Check the classes ID.

So the ID blogs.

Class.

Oh, this class name is matching our blog class name.

So get rid of this class name wrong.

We're not going to use it.

So get rid of that.

I don't know why this.

This class name didn't affect that.

Portfolio.

thing.

You can get rid of these class names.

We're not gonna use them.

Let's see if it's gonna affect anything.

Let's save.

Yep, nothing affected.

Yep, nothing affected here.

Okay.

Yeah, so We didn't use those class names up here.

So just get rid of them.

I think we're using this about class names.

So leave that for now.

If it's affecting it, or if it's affecting something, it means we're raising the class, just get rid of it.

Okay, so now, not glitches.

So there it is.

So the image sort of like pops out of the grid item, like, boom, boom, but we need to make it transition nicely smoothly.

So to do that, let's go back to the styles.

So after the have effect, after we finished with the hover, we need to now style the image or sort of the hover.

So I'm going to do image with 100%.

And then I'm going to do height 300 pixels.

And then I'm going to do object fit.

Object fit to cover to cover and then what to do, I want to give you like corners on the top, top right and top left was a border, radius top, top.

Border Radius, top.

Radius.

Well, the radius top, top left, so top left is going to be serpents top left, just give like five pixels.

And then we're going to do top right five pixels.

So let's save let's see what we have.

So there it is, we have a border top, top right and left.

So there it is.

Okay, so now we just need to tell the give it a transition and give the the filter.

So when we have the filter.

We need to affect the filter now actually, so future one of the present.

So here we said that filter to grayscale zero, and then he has like one or 2% and then a transition to make a slow transition slowly.

Oops.

Okay, so it's gonna transition slowly.

So it's grayscale.

Okay, when we have, it's going to go to one or two go to zero.

So by default, the grayscale is 1%.

When you have the grayscale is going to go to zero, which is the you know, black and white.

Okay, so the image is sort of like pops out.

Okay, so after the image, I'm going to do drudge blog.

Text.

So for the block text, I'm going to give it a margin margin top, actually margin top.

So for the margin top, I'm going to do minus seven pixels.

So you can play around with this value, we can try to find any value that you see fit.

But for this one, I'm fine, like seven pixels minus seven pixels to be a good value.

And then I'm going to do a padding top and bottom is going to be 1.1 REM.

Actually padding, no top and bottom around everything.

So I want to block texture padding around for 4.1 Ram.

Let me show you what I mean.

So as you can see here, there's like spacing around the text.

So that's the padding 1.1 Ram.

Okay, so that's that.

So now let's, I'm just going to do a border.

A border top.

Okay.

So I'm going to do but a top like this, it pixels.

Okay, so that's the border.

So whenever the border gets covered, because that's the effect we're looking for.

And then there's like a nice shadow.

Okay, seems like when I have the shadow on the x axis is too much, I might want to get rid of that.

box shadow X, Y four pixels.

So on the X, I'm going to set to zero on the x axis or on anything on the X.

Okay, since you didn't make any changes, but you can always reduce the blur.

Maybe to 15.

Okay, so can we just a blur to 15 Yeah, I think it looks good.

So now let's tell the text.

Okay, so now in the block, blocks text and we're tied to the h4.

I'm just going to change the font and the color.

So the font and then when we have when we have I'm going to set the color to green So it's just color, color secondary.

Okay, like that.

And then the after the edge for a monetary the paragraph, I'm just going to set the color as well.

Color to gray, gray too, and then give the line height.

So the spacing of the lines to RAM.

And then we're also going to do padding bottom of our RAM.

So just to give it a bit of spacing.

So now let's save.

Okay, so that's our blog item, it's fully styled.

So what we do, all we need to do now is just to populate the blog items.

Okay.

So to do that we've been doing this forever.

So we just need to get this grid item, and populate this multiple times, to whatever amount of blogs that you're looking for.

In this case, I'm just going to put them multiple times and change the values and images to whatever values that suits your need.

So just populate this multiple times, and change around the values.

Okay.

And then I'm just going to put like my own values, I don't waste your time doing this on screen.

So I've done that now.

There it is.

So now I've different content for the blogs items.

Okay, yeah, that's it for the blog.

Let me now let's move on to the contacts.

So did the contact section, we're going to have two sections left and right, because we're going to do some inputs.

Okay.

So for the contact section, go down here.

And then we're going to do the title.

So we're going to put a title, as usual, but first I'm going to do DOJ contacts container.

And then I'm going to paste in the title.

So the title is going to be contact.

If you still don't know we did this title from the beginning in the header, so we're just reusing that title component over and over just changing the values.

Okay, so and then I'm going to do dots, contact, contact content, container, contact content container.

Okay, so we're going to have just left contacts, and then we're going to have left and right contacts.

Left and right contacts left.

This one is right.

Contacts.

Okay.

So let's start with the left contacts.

Okay, so the left contacts we're going to have an h4 in the paragraph first.

So h4 in the paragraph.

So the h4 says contact me here and the paragraph just a random paragraph.

Okay, and then below that, we're going to have like another div code dot contact info.

So in the contact info is going to have some icons, a lot of icons for for the contact info.

Okay, so I'm just going to say, touch Contacts.

Item.

Okay.

And then in there, we're going to have an icon, dots icon, conduct item, and then we're going to have an actual icon.

So in here, I need location icon.

And then below the location, I am going to say location.

Okay, I'm going to save let's see what we have.

So when I go it says location, see there's an location item here icon.

There's a location item icon I mean, before the location text, okay, so I want to have multiple icons and text next to it.

Okay, so to do that, we just need to duplicate the contact it or multiple times and change around the icons.

Okay.

So in this case, actually after the icon and when to your paragraph.

And when I say London, United Kingdom.

Okay, so we're still in the contract item.

So we just need to duplicate the contract item multiple times.

Okay, for us to have multiple multiple items.

Okay, so I'm just going to paste in some content items, I don't want to waste your time doing this conduct items on screen.

So conduct item past that in multiple times change the icons and change the information to whatever you want.

So there it is.

So these are the icons that I'm using.

Okay, so we've done that.

So now let's to start doing the styles.

I'm going to say contact contact section.

Okay, so let's start on the contact.

So for the contact, we're going to do display flex, dots, contact content container.

Okay, so we're going to do display flex when everything will be next to each other.

Again, padding top 3.5 3.5.

Okay, then we're, first we're going to target the left content.

So deaths left's contacts, actually.

Contacts.

So for the left contacts, I'm going to do flex to, I want it to be smaller than the right one.

So the right one, I'm going to set that flex to one to make it cover the main space.

So now this is such a smaller, it's because I haven't put content on the other one.

So that's why it's, it looks weird at the moment.

Okay, so now let me put the content first.

So for us to see how things are progressing, let me put all of the content, all of the content that we need.

Okay, so below the conducts item here.

After so after the contact info after the contact info, I'm going to put another div.

So this one is going to be contacts.

Contacts.

Contact, I cons.

So once you have like some icons that are gonna lead to social to social media, okay, so in here, I'm going to say, dot contacts.

icon.

So this one is contact icons.

And then this one is contact the icon, okay, like that.

And then we'll do an anchor tag that's going to lead us to whatever platform WWE dot face book facebook.com on depends where wherever you want to go to just put a link there.

Okay, and then here, I'm just going to paste in your Facebook link.

And then make sure you put the target to blank if want to open that to a new tab.

targets to blank.

Okay, so that's the icon for Facebook.

I'm gonna paste in the rest of the items.

Okay, so we have Twitter and stuff.

Okay, that's it for the left side.

So we just need to go to the right side.

So the right side is going to have like a form.

When I say form, towards contact, contact form form like that.

Okay, so in here, we're just going to have some inputs.

And whenever div called input control dot input, control, okay, like that.

And then we're going to have two inputs.

The first one is input text, and then we're going to is going to be required.

required and then placeholder to a placeholder is going to be like your name.

Okay, so we're also going to do another input.

In order, we can just duplicate the one that we have.

And the other one is going to be email.

Your email.

Okay, like so.

So now we just need to duplicate this input control one more time.

Actually, not one more time.

Here, I'm gonna get rid of email.

Here I'm just gonna say In the sub type subjects, I don't know enter, subject, subject, like that.

And then I'm just going to also do input control.

And then this one is going to be text area, text area.

And then you can leave the name blank if you want.

And then the columns, I'm going to do 15 and then eight rows.

Like so.

Okay, so that's pretty much it, we just need the button, the button that we've created before.

And when I put it in a, I'm going to put in a class code dot submit btn I'm just going to paste in the button that we've created before.

So it's called main button, we've done that created our button before visit multiple times.

I'm just going to save this to see what we have to enter into.

Okay, so there we go.

That's why we got so now we just need to get started with styling this stuff.

So go to the styles.

Okay, so left contacts.

Where do you dots? Right? Contact.

Okay, so right contact.

And then for the right, I'm going to say flex, three.

So this one flex two, and then this one is flex three.

So there you go.

So this occupying more space.

Okay, flex three, and then margin.

Left is going to be something like maybe three RAM.

Okay, and then below that I'm going to do input.

Control.

Control the input control class.

Okay, I'm going to do margin, that margin top and bottom is gonna be 1.5 REM literal zero.

And then I'm gonna target the inputs inside the Okay.

And do border radius to the pixels.

And then I'm going to do font weight.

font weight inherits one size Eretz font family.

Inherit, okay, and then I'm going to do a padding, top and bottom is going to be point eight RAM.

Left and right is going to be one point while RAM, you can change these values to put values that you want.

Outline, there'll be none.

Border, I'm gonna give it to none as well.

But if none, and then we just need to do a background color and the width of one represent background color and color of white.

And then resize one to be none.

Because we don't want the form and the texture to be resized.

So I'm going to put a comma and then text area as well on the text area to have this tells us Oh, I'm going to save, save everything.

Let's see what we have.

So there it is.

Okay, but I want this your name and your email to be next to each other.

Okay, so I want these to be next to each other.

So to do that, I am going to give the input control this one, another class called input control.

Actually, I just do like this input control two.

Okay, so input control two after the input control.

That's where I'm going to tell that when to do display, flex, okay, and then I'm going to say last child, the last input, the last input, I'm going to give it a margin left.

margin left of 1.5 from the last child.

Okay, let's go and see what we got.

There it is.

So last child, this one is going to have a margin left of 1.5.

So everything looks equal like this.

Okay, so we can actually increase this font weight or this text to maybe something like 500 making more thicker, or you can leave it like this.

It's up to you what you want.

Okay, oh, you can also text area, you can say, placeholder message here like this.

And then you can have like a nice placeholder everywhere if you want like this, you can do a message here like that.

Okay, so that's that.

Now the button, we just need to, you know, center the button.

So to do the button after the after that after the input control, you can do dot submit BTN.

So just display flex, display flex, just for content flexed.

Okay, so let's go back, there is a button is showing nicely.

So now we just need to do the left side.

Alright, so let's go ahead into the left side, which is just styling the text and everything.

So the left side, where do we get some context items.

Okay, so we're doing flex two for the left, and then when I toggle the h4 So for the h4 margin top, I'm going to do one ram, font size to RAM.

And then I'm going to do text transform, transform to uppercase.

Okay, after that, I'm going to toggle the paragraph, I'm going to give it a margin top and bottom one REM Lanre line height of two REM, we've been reading this, we should have done that into a global global style, but it's okay.

Let's keep going.

And we'll do two to contacts.

Info.

So in contact info, we have a contact item.

That contacts item if you remember the class names, so just want to do display.

Flex didn't align items to center justify content space between displace them.

space between let's see what we have.

So there it is the spacing between.

Okay, so now we just need to target the paragraph inside the quotation there do p margin.

margin, top and bottom is 1.3.

And then zero left and right and then we're going to override the existing one, which using the important okay, and then we're going to do padding top and bottom.

Padding top and bottom is going to be zero and the left hand writes actually padding everything.

Just padding around everything which one to reset it to zero.

And then we're overriding with the important keyword.

Okay, so now everything we have a point three margin, top and bottom.

Okay for each item, so there's like a margin top 3.3 Ram.

Everything looks nice.

Now we just need to start the icons.

Okay.

So, after the paragraph, I'm going to say dot icon.

Okay, so for the icon, I'm going to say, I'm going to put them in a grid, display grid, display grid, and then in grid template columns I'm going to so I'm putting it in a grid because I want to restore this.

Okay, it's not showing why because I'll use the grid already.

So I'm just going to show you why grid template columns, I'm going to say 40 pixels for the first column, and then one fr for the second column, which is where the text is for fixes for the icon.

Okay.

And then I'm going to go back.

So the reason I did a grid is because I wanted this this text items to be in line with one another.

So if it's a grid is going to make sure they're aligned.

So when I inspect this, so as you can see, this one is a grid item.

Okay, so each grid item each item is going to have the first column of the grid is going to be With the pixels, no matter what of these grid items, each one is going to have a column, the first one of 40 pixels.

So hence they're going to have equal spaces and they're going to live, they're going to be on the same line, like that.

So you get the idea.

And then icon number two, the eye, the icon inside there, I'm going to say Display, flex, and then align items, center.

And then I'm going to do font size, the font size, I'm gonna change that to something like componentry ramp.

Okay, so there it is.

So now the icons are much bigger.

So now we just need to do the these icons here.

And then we're done for the contact page.

Okay, so write content, contact, contact info.

So contact info.

After the contact info, we need to do the contact icon dot contact icon.

So if you forgot to know what that is, is the contact icon.

Where is it? Where is it, where is somewhere down here.

So it's this this container here, contact icon container here.

So that's what we're doing now.

Okay, so now we're doing this container contact icon.

So we're going to do display, flex, display flex, and then I'm going to do margin top.

So for margin top is going to be sort of like to ram and then we're going to target the anchor tag in there, which is going to take us to external websites, I was just going to do display flex and give it a color, the center everything, we're doing that with Flex.

And then to make sure it's rounded, we've been doing this width and height must be the same.

And border border radius to 50%.

Okay, so, my I'm gonna do margin top and bottom zero, top and bottom, point for RAM left and right.

Okay, and then we're gonna do the transition, the one we've been doing.

Okay, and then on halfa.

When we have this, we just want to change the background color.

And also for the icon, so we just want to change the color to the primary color.

Okay, and then after the hover, just in general, not in the hover, we're going to start the eye icon, we're going to display flex, align items, center, justify content center font size 1.3 Ram.

Alright, so now there it is.

So now we have a nice animation.

Yeah, that's, this concludes our, our website.

Now we just need to work on the dark theme, light and dark mode.

And then we're done.

Okay, so now I'm just going to go to the HTML.

And I'm just going to put like an after the controls, I'm going to do dot, I'm going to say theme BTN.

Here, I'm just going to put like an, an icon for the two to toggle the dark mode light and dark mode.

Okay, so theme BTN.

So I just need to style that.

And then we're done.

We just need to start the theme BTN.

Okay.

So controls Okay, so after the controls, I'm going to touch theme BTN.

So here, I'm going to do padding, one ram, and then cursor to pointer.

And then the background.

Width and Height must be the same for us to make them rounded.

So I want the button to be rounded.

Okay, like that.

And then display.

Flex one to send everything with flex so you know that what's that is already and then margin.

Top and bottom is going to be point seven rem and then zero left and right.

Muscle going to paste in the box shadow.

You can put this into a variable so you don't have to do this.

And then I'm going to toggle the eye.

It's only changing the forces and the color is setting the pointer events to none.

So we don't click it Okay, so yeah, I mean, you know what I've been.

Let's see what we have, oh, it doesn't exist, because I've been coping the wrong styles.

Sorry, it's my it's my it's my fault, I've been looking at the wrong element, I'm going to do top 5%.

Right 3%.

And then I'm going to do with 70 pixels.

Same as the height.

So when to make sure this is rounded, height okay, and then we're going to do border radius 50%.

So it's going to be rounded, then I'm going to set the background color and give it a position of fixed and then center, the center with Flex.

Okay, like that.

So cursor pointer position or fixed.

So now it's gonna be here at the top, right? Okay, so we want to give it a box shadow.

So like what we did in the text transform.

Okay, so there it is.

So I'm going to do when active.

So when I click What won't happen when I click the button.

So I'm going to do transform.

And then I'm going to translate on the Y.

So I'm going to do like minus five fix fixes.

And then the is should be point one second, make sure it's very low, not high.

So if you put the value too high, you will not see the effect.

So for example, let me say point, five 5.6 pixels, not six pixels, seconds, point six seconds, when I click, you won't see the effect.

But when I hold, it takes like points, it takes a lot of time to do the effects you have to hold, but on default to be like quick when I click.

So that's why I'm using point one second to make sure like you can see the effect on click.

So when I click as you can see, like the button is like moving.

Or you can reduce this with not the width, I mean, the height of translation to minus three.

So when you click, it's like, you know, translating, okay, so that's that.

So now we just need to do the icon.

So the icon is just changing the font size and the color.

Certainly point of instrument.

Okay, so there it is.

So now we just need to work on the toggle.

So it's going to be really quick, we just need to go to JavaScript.

JavaScript after the session is active, we can say toggle theme.

Toggle theme.

And then here we're gonna say class theme btn is equal to document.

Document.

Dot query selector.

query selector.

And then here, we're going to do dots theme BTN.

That's the class name we've given to.

So here, I want to say tune button, I'm going to add an event listener.

add event listener, and then it's going to listen for click.

And then it's going to take in a callback function.

Don't worry, we can do an arrow function.

Now because we're using the this keyword.

Now I'm going to say let's alignment, then I'm going to say document, the element is going to be documented body, the body.

Okay? Document a body.

And then here, I'm just going to toggle the class element, which is the body dot class list.

Dot talk toggle.

On Click, okay, so we're just talking one click, I'm just going to put a class called light mode.

Okay, so when I click that, it's going to toggle this class on and off, on and off, on and off.

So now, let me save.

So let me inspect this.

So let's watch out for the body element.

So body here, so we were like selecting the body element in the JavaScript.

So now when I click this is toggling the class light.

It's editing the class and removing the class adding and removing the class.

Okay, so now we just need to set the light mode class.

So for the light mode, I'm going to go all the way app I want to hear, I'm going to light mode, that's the class name we're talking.

I'm gonna copy all of these colors here.

Okay, and then I'm gonna paste them down here.

Okay, so, for the for the light mode, you just need to exchange the colors you've used, for example, the, for the background, I've used the this dark color here.

So don't change the variable name, just need to change the property.

So I'm going to change it from the black color.

Oops, to the white color.

Okay, like that, and then save the, when I click the background is going to change to white.

Okay, so it's on this light mode class.

Okay, so you just need to change the values of the variables to different stuff, just mix them around.

Okay, so for me, I'm using white as the main background.

And then for the secondary, I'm using a different color, which is like sort of a pink color.

Okay, for the secondary.

So when I toggle the light, it's going to change to this one, pink color.

Okay, every secondary colors will change to this pink color.

Okay, so let's keep going.

I need also need to change the text color, which is white.

So for white, think I'm using some gray number.

White, I'm going to paste this for white, I'm actually using grateful.

So grateful.

That's where you're going to put white.

Okay, so this is great for now.

So it's just the variable name is still being used, but you just need to change the value of it.

Okay.

Yeah, let me see if we need to change anything else.

Okay, so lets me go to other components.

Okay, so, yeah, we might need to change some colors.

You know, instead of me going this way, changing the colors one by one, I'm just gonna copy, paste the colors that I found worked for me, you can change these colors to whatever you want.

So you just need to mix them around.

Don't change the variable name, because we've been using these variables for a reason.

So we just need to change the value of the variable on a different color mode.

Okay, so in this case, so what works for me is this color, color scheme.

thing really works for me very well.

You can, you know, use a different color scheme that you want.

It's really up to you.

But this one is really perfect for me.

Okay, everything was fine.

Yeah, I mean, this project isn't responsive.

I don't have time to make it responsive.

This is the only time I had to make the video.

But I It depends how many people have requested in the comments.

If you want me to if you want to see me doing the responsive stuff you can? Let me know in the comments.

And then I'll consider making a video about it or see how many people have requested.

Yeah, if you have any questions or anything.

Don't forget to ask me in the comments, or you can send me an email.

Yeah, that's it.

Please don't forget to like, subscribe if you're new house you on the next one.

Okay, so now let's work on the media queries.

Let's try to make this website responsive.

As you can see where we left off, the website is not responsive at all.

Okay, so we just want to try to make it adapts to whatever width we're using.

I'm actually using a different projects, but everything is going to be the same.

Everything is the same the classes everything is the same.

It's just a different folder name.

Okay, so now let's go into the styles and create a new style.

Then put, it's going to be a SASS partial to create a partial, we're going to use an underscore and then I'm going to say media and then dot CSS.

So this is a file, this file is going to be responsible for the media queries.

So I've already kind of looked at screen work where I need to do some breakpoints.

But if I haven't done that, you're gonna have to like find breakpoints which your website your website is going to start breaking.

So I'm going to start with a smaller screen.

I'm going to start with 600 pixels.

So I'm going to do at media and media screen screen, screen, and then end.

And then I want to say max width, max width max.

So the max width for this one, I want to put that to 600 pixels.

Okay, so make sure the spacing here is correct.

So if we do like this, it's not going to work.

So the spacing must be correct the same as I've done it.

So make sure everything is correct.

Okay, so I'm going to I'm going to start with the header.

Let's see in the header.

So at 600 pixels, it's 600.

So this is the size 600.

I want to have zero padding.

Okay, so as you can see, there's a lot of padding.

If I check to the in the Styles, it should be padding somewhere.

So this padding, right? Yeah, I'm going to set that to zero.

Okay, so that should be Yeah, so I'm going to set every every padding here to zero.

So I'm going to say header.

I'm going to set padding to zero.

Okay.

So also, the other thing is, for us to use these media queries, we need to import this file.

So let's go up to import a partial, just do at import.

And then I'm going to say media.

Okay, so you do need to include the file extension because Sassari knows knows what it is, it's a special.

So you don't need to include the extension here.

As I save, and I'm going to refresh, nothing works.

Because for me the chords to work, there must always always always be at the bottom of everything there must be down here after everything because everything is executed line by line.

So the media queries must be at the bottom like this.

And then you have to import them here down here instead of up top.

Okay, so now save and save the media.

And, yeah, let's see if submitted the Milica is working for the header, click the header.

Let's see.

So the mediocre is there.

So now the padding is set to zero.

For the header.

It's actually direct header derived header content that we need to also set the padding to zero, I believe this one, right header pin, right? We actually need to set that to zero.

Okay, so we're gonna say header, target header, header, and then dot right.

header.

And then I'm going to say padding zero to that.

Okay, so right header, padding zero.

Something weird is going on parent 00.

They're still fighting, right? Actually, we need to override everything.

So he's important.

So only use this important when it's really important when you have to.

So now we've overridden every, every all of the styles, all of the pairings.

Okay, so actually, we might want to set this to to ram, maybe just give it a little bit of padding around.

Yeah, let's say that to ram.

Okay, so we also want to get rid of these controls here.

So to do that, we can just say, dot controls.

That's the class name.

So if I want to double check the selector, inspect the controls, and find the class name.

There it is controls.

Okay, so for the controls, I must say top, I must add that to auto to auto auto.

And then we're going to say bottom because the bottom zero, I want it to be to be at the bottom and then flex direction is going to be a row now to the default or initial, you can say initial.

And then we're going to say justify content.

And then I'm going to send that and then we're going to say left, we're going to give it 50% Because wanting to be centered.

And then we're going to transfer transform and Translate X transform and Translate X minus 50%.

Only on the x axis.

So Translate X safe.

Let's see what we got.

So there they are.

The controls are down here.

And yeah, in there.

Actually, we also need to set the width to 100%.

And then we might also want to give it a background color to distinguish it be black with our content.

And then we're going to use gray five, gray five, that's the wrong color.

And then we're also going to do control the individual control.

So the individual control, we're going to give it a margin, one, Rem top and bottom.

And then point three REM left and right.

So now they're there, the controls are down here, instead of up.

So when I go over the width is not there anymore.

So now they're there.

Okay.

So now the controls will want them to be.

I'm also going to keep styling the header.

Actually any to decrease the theme button width.

So I'm going to say that theme BTN.

So we're going to decrease the width to 50 pixels, and height 250 pixels as well.

Okay, so width and height 50 pixels.

Okay, so now let's say let me let me just double check from recording.

Okay, so as you can see now is smaller on a smaller device.

Okay, so we also want to target the header content, header, content, or the content, if you don't know what it is, I'm going to inspect again, to show you the header content inspect.

So this is the header content.

It's a great as you can see, I'm going to tag that.

So the header content, we're going to change the grid.

So we're just going to say grid, template columns.

I'm just going to say one fr one Fr.

One TF.

Two columns.

Actually, no, no, no one if I just want fr, because we just want to have one column instead of two now.

So yes, whenever.

So now we have one column.

Okay, so it's to be messy.

Say, can bottom six RAM.

Okay.

So yeah, so And also, I want, maybe I might want the text actually to be at the top.

To do that, we just need to, you know, change these grid items, change them or swap them around.

So let's just keep going.

So now, I'm going to target the left header, I'm gonna say left header, I'm going to tag that.

I'm going to say, dot H shape, I'm going to get rid of that green shape.

And then I'm going to, I'm going to set that display to none.

So I don't want it anymore.

So as you can see, it's gone now.

So after the left header, let's go to the right header.

So the right header.

Okay, so for the right header, I'm going to stats, I want the right header to be at the top.

Okay, so how do we do that.

So we just need to change the grid.

So say grid row.

It's a grid item.

So I want it to be the starting point of view one.

So I'll show you what that means.

So when I inspect was the grid.

So this is the grid, right? So it starts at one it goes to, so I want I want this row it was a two to be at one to be in the first row.

Okay, so we want to also I'm going to set the width with width, I'll set it to 90%, maybe 90%.

Okay, and then I'm going to set margin zero auto to center margin, zero and auto just to center the content.

Okay, now inspect.

Okay, so everything was good.

Alright, so now let's, let's keep going.

Mostly want to toggle the name actually.

The name, font size.

I'm just going to change that to 2.5 2.5.

Ram.

Okay, so RAM Linsay.

Let's see is that inspect Name Font size that media.

So this one is not working.

We need to override that with important so when this was on over can sometimes you might need to override that.

Okay, like that.

And yeah, let's keep going.

So after the right header, we're going to target the header content.

So that header content and then left header.

And then we're going to target the image.

And then we're just also going to set the margin zero auto width said the same to 90%.

And 2%.

Okay, so, so there it is.

Okay.

So we also need to fix the height actually, there is an issue with the height inspect header.

Let me see if with a height set on the header.

So the height of the header set height is supposed to be min height.

So minimum height is going to be 100 VH, not the not a fixed height.

So we want to be able to scroll like this maybe.

So, let's go to the header and find header.

Actually, I'm just going to look for 100 VH, where I've said that valley 100 VH.

So here, instead of height, we're going to set that to mean height it media query actually hit media screen and max width, max width, and then we're going to do 600 pixels.

So this is going to be 600 pixels as to or six and then access under 10 pixels.

Max with it media screen.

And max width.

Oh, oh yeah, I don't know why this is not working.

Screen and all this the wrong thing.

Cut this, PR here, like this, and then save.

And then here we're gonna say min height.

100 VH.

Okay, so you can actually do media queries inside of the element or element that you want to do.

That's when you edit.

You can nest only in Sass, that's when you can do it with normal CSS.

You could not nest like this.

Okay, so it's no working.

Cancel this.

Just set that to the normal midnight to the normal header.

Okay, so yeah, now if the mean height, everything works.

Okay, so now let's check other pages.

Hope about now let's go to the About.

Okay, so let's go back to the media queries.

And then we're going to say dots about, about container.

So let's look at the about container to see which one it is about, about our session here.

About container, this one, that's what we're looking at.

Okay, so it's also a grid.

So we're going to fix that about container, grid template columns, we're just going to set that to one Fr.

Okay, and then we're gonna say right about so the write about, we're gonna say padding top 10 in top.

So for the padding top one, we said that to 2.5 Ram 2.5 Ram, that's what the padding top.

Okay, so I'm also going to set the right about grid template columns, or suggested that you want to have one, only one column to refer to.

Okay, so now let's go to the about okay, you cannot see it yet.

But everything is working, we just need to get rid of the, the paddings and everything about container, section two.

Okay, so, here, I'm going to get rid of the padding.

So get rid of the padding.

And I'm just gonna do section select the section.

So for the padding, I'm going to do padding, I'm going to say to REM 2.5, Rem, left and right, and then I'm going to override the existing pairings.

Okay, so yeah, as you can see, it looks good.

So if sometimes when you do like this, sometimes it doesn't override the, the old ones by now you don't need to do it because we don't need to override we don't need to do it.

Okay, looks good.

So now, let's let's go to the so we need to write about less here.

Let's go to here we need to do the left side.

So let's do the left about stuff the left about I'm going to say pending, right? I'm gonna set that to zero.

And then I'm going to target the paragraph in there.

I'm gonna say padding left Mr to zero also Okay.

Okay, everything looks good.

All right.

So we also need to target the timeline.

So here after here, I'm just going to say timeline.

So for the timeline, I'm just going to change the grid.

So I'm going to do just one fr, I just want to have one column for the timeline as well.

And then I'm just going to set the padding bottom to six, REM.

And let's save.

Let's see what our timeline looks like.

Yep, there it is.

Looks nice.

Okay.

So after that, we might also want to do the stats.

Okay, so let's do here after the timeline.

About stats.

So in the bus stats, we're going to tag the progress bars.

Progress bars, remember the class names.

And then we're just going to do one if that's what you want to have like a single column, excuse me.

Like that everything is good.

Okay, so now let's go to the blog section, let's see how the blogs are behaving.

These are the blogs.

So we also want a single column in the blogs.

Okay, so about, then we're just gonna say blogs.

So the template columns is just putting into a single column and then giving you the padding bottom from bottom six RAM.

Okay, so now, you see that if I go to the blogs, now we have a single column.

Okay, everything is good.

Okay, so that's that.

Now, we need to also do the context section.

Okay, so, actually portfolios, we missed the portfolios.

So the portfolios that shouldn't be here portfolios.

So we're working on this section.

Now, the portfolios, we want to do similar things.

Like here, so just copy this and put it here.

Okay, so it's quite similar.

Now, so let's see what we got.

portfolios.

Reaches everything looks nice.

Okay.

Okay, so we might also want to give to this portfolio as a margin top, but not yet.

Okay, so that's pretty much everything except the contact.

Contact.

content, content container.

Okay, so now let's look for the context content container.

Okay, there it is.

Inspect.

There is a grid.

So let's keep going.

We need to change the flex direction.

Flex direction.

We're going safe column.

Okay, so contact.

So the conduct was actually flex not a grid.

The contacts container is a flex not agree.

So we need to just change the direction of the flex.

Okay, so yeah, in the, I'm going to tell you the right contacts.

Right.

Contact.

Okay, so right contacts.

Right contact once a margin left.

And we said that zero, margin left zero.

And then I want to say margin talk was that to 2.5? REM.

So I've experimented with these values off camera just to make the video quicker.

But you can experiment even more with values if you want to.

Okay.

So yeah, that's for the right content.

So if I want to target the inspects one of these inputs, so I want to take an input control.

This one, I want to tag this.

So I'm going to copy the selector query selector.

I'm going to paste it after the contact container here, the selector so I'm looking for the input control number two So input control two.

Okay, so that's the class name, it's actually input, control two like this, I see two.

That's how I've named it.

So, but for this project I'm using I've named a different so it's input control two like this.

But in the project we need to get in the video its input control to input control, like see, I see two.

So here I'm using control two.

Okay, I'm just going to say flex direction, I'm going to put that column so that's for the input controller too.

And then I'm going to target the last child of that input control to and we say like this is a pseudo selector say last child, so I want to take the last child within the input control to the last challenge and when I say margin left, zero and then I also want margin top Excuse me.

margin top so for the margin top and we'll say that one perfect room okay, so let's go to the contact.

So as you can see, it's coming Nice.

So here inspect this was to have a margin left and visual so that is zero.

margin top zero it should be zero.

Input left's will contract to this one.

margin left what contractual as child margin top margin left zero, what's going on? This this destroy that inspects again it seems to have seems to have a margin left for some reason.

Last charge last year last charge I don't know why it still has the Oh, I think the media query is not applied.

Let me refresh this again.

And then I'm going to inspect flex direction column okay.

So this is the last child so I'm going to copy the selector here, copy the selector cut this and replace with the one you've copied online from the browser.

Okay, save.

Okay, now everything works.

I think it's because of spacing.

You actually need to put the spacing here.

So you need to space here.

Space and then yeah, everything work.

Okay, so yeah, everything is working Nice.

Everything's working fine.

So now we just need to mess around with this title here.

Okay, so let's do that.

The title is code.

Actually.

Contract item.

Contract item you know, let's make mess with the title first.

That main title.

So here we're talking the h2 and then font size.

We're gonna set that to ram and also we're going to say select this pan.

Font Size 2.5 Ram.

Okay, and then that PG text 2.5 from as font size like that.

Now, save.

Now, let's see what we get.

Yep.

So there it is.

I think we just need Omani to increase the this is a bit desperate to three round Okay.

Yep, I think So you can kind of mess around with this the size of the font size of that yeah so at this size is this media query the breakpoint looks really nice.

So you can kind of work out what breakpoints you need to make changes you know, I mean, so in this case, we need to fix this inspect.

Left header.

Left header, we need to set the header content height need to set min height think min height.

Or we actually need to set the height to 100 VH for that for the header content.

Okay, yes, everything comes nice to our breakpoint, breakpoint, sexual min height, header content we need to set min height here.

min height.

Okay, so let's go to find the header content.

Header content better content content content.

So we need to set a min height here.

min height, we'll set that to 100 VH.

Okay, so yeah.

So now here we can enter, try to find some breakpoints, which we also need to you know, kind of mess around with the styles a bit.

I think here the title it is a margin, which I don't want.

Right header which is a padding, which I don't want.

So here we should look for right? header.

Header new.

So here, it should be actually said parent 00.

refresh that.

Something weird is going on? Yes, it is zero and important.

Okay, so yeah, so now, everything should work nicely.

You can work with the font size, you can reduce the font size at a certain width, you can use the font size percentage.

Okay, so everything looks good.

So we just need to work on a way to, let's say, can find like a break point where everything starts to break and start, you know, doing some media queries there.

For example, I'll do another breakpoint maybe.

Okay, so I kind of contact when does contact says to break.

Okay, so for this contact, it breaks away too early.

So I'm going to do another breakpoint for the contact.

So here, I'm going to say it media I'm actually going to copy this copy this paste to here.

And then here I'm going to change this to 1432.

Okay, so for experiment with this values of camera, so here the contact breaks too early.

So I'm going to copy the contract every everything over the contract and when to cut it.

And then I'm going to do that early in this address size at 1432 of paste the contract stuff here.

Okay, so when I go to the contacts, now it's tasked to you know, adapt early nicely.

So we can also mess with the padding of the section.

So in this case, I'm going to mess around with the padding of the sections as well.

And once a section I'm going to do padding, top and bottom.

I'm going to do seven Ram 11 Ram left and right.

Okay, so refresh.

Something weird is going on.

Section.

Okay, max width Let's inspect to see the body Oh, the body is a class of sessions.

So the body is inheriting the I mean, the header is inheriting this section styles.

So in the header, we need to get rid of that.

So, here, I'm going to say header padding, zero.

Okay, so we actually need to override because the head is actually inheriting the section class.

Okay, so yeah, there it is.

So now when I, you know, start to decrease everything is going slowly, but it's gonna, it's gonna work.

Okay, so let's see.

Okay, so that's for the contact section, I'm going to do another media query.

I'm just going to do a media query just to sort of subdividing out.

So at this size, this section, I know that this size, I'm actually going to put another size maybe 1070.

Or, Yeah, let's do this size 1070 pixels here.

And we'll talk about container.

So that's the about and then grid template columns, I'm going to set that to one Fr.

And then in the I'm going to tell you the write about I'm just going to change the padding top to confirm.

To confirm, so that's for the parent top in the about, so that's 1000 pixels here, there it is.

So everything is going to flow nice in a single column.

Okay, and also I'm going to target the main title in here.

I'm gonna say main Titan, x two.

And then font size.

For REM span, and then for REM safe Okay, big Tex.

Size facility for muscle.

Let's see how that's going to look like.

Okay, we're gonna increase that to maybe 4.5 frame or 645.

Yeah.

Okay.

I think I'll stick to 4.5.

Okay, so that you can, you know, sort of give like a margin top of the, the content here, you can give it a margin top to specify between this title here.

So it's kind of up to you.

Okay, so let me check.

Let's do the portfolio show.

portfolios.

Let's do grid grid template columns.

Let's just do one fr, one Fr.

So this is the two columns.

Okay, so now we have two columns of portfolios.

Let's do the same thing for the blogs can duplicate this and chain these two blogs.

Okay, so the blogs also going to have two columns.

Okay, like that.

Okay, so two columns for the blog's? What do we need to mess around with again? So yeah, actually, let's do one more media query.

You can admit me as many media queries as you want for anything and you can customize and change everything that you want to change.

So here, I'm going to do 9970 pixels, nearly 70 pixels.

So here the section section.

I'm going to change the padding something top and bottom 07 Ram, six RAM Clifden, right.

Like this.

Now let's say let's decrease the width.

Okay, there it is.

Everything looks nice.

Okay.

So we also need to mess with this stuff here.

Windows is just to break.

You know, I think I might actually want this to happen early.

But what we did with the content, the header content header, theme button had a content lift header about.

Okay, I think I want this header stuff cut to happen early.

So I'm going to put that in the nine in the in 970.

And we put that in there.

Okay, so it happens early.

Okay, like that.

So I think that it makes a lot of sense for it to happen early than anticipated.

Yeah, I think that makes sense.

So we also need to do the same thing for the controls as well.

Controls, cut the controls.

Cut that.

And then we're going to make it happen early.

So you can you know, mess around with the values and see what where you want to start, you know, affecting your media queries.

So I think this idea of soldering that at this size.

Okay, I might also want to specify around these ones the controls.

So each control thing might reimagine.

I'm going to say to ram for this one.

Okay, control margin to ram.

Okay, to ram seems to be small.

Let's see, six is not working for some reason.

Let's override this.

Still not working? We'll see why.

Control.

Margin.

Oh, it's top and bottom is supposed to be left and right.

So it's supposed to be the other way around.

So let's bring it back to to ram is so this is top and bottom.

This is left and right.

So I want to apply the margin left and right.

Okay.

So, there it is.

So top and bottom, actually, I'm going to increase that to maybe 6.6.

Okay, so everything's going to look nice like this.

Okay, so yeah, you can you can kind of mess around with everything, just to kind of look for breakpoints where you want to, you know, affects your, your styles and elements, whatever.

I'm going to reduce this to 1.5.

Or one actually, yeah, you can kind of mess around with the media queries, the breakpoints, like where your stuff starts to break.

That's where you start, you know, doing the media queries, you can just create a break point for that.

For the blogs, the breaking quite early.

So it's something as some certain size, you might want to, you know, put the blocks in a single column.

Okay.

So yeah, actually, I'll do one more.

I'll do one more.

I didn't want to make this video long.

I'll just do one more now.

And then that's it.

So let's do let's do 700 pixels.

So in here, this section, I'm going to change this section here, just copy this section.

Here, we're just going to change the padding.

So that's two three.

Okay, so we also want to do the about section about stats, let's do the stats.

And then we're going to do the progress bars.

Actually, I think we've already done the progress plus let me double check about progress bars.

Yeah, I think yeah, we might want to progress bars.

Progress bars.

I think instead of doing the progress bars later, progress, progress bars here, instead of doing it here, copy this cut, and then we do it here early, rather than later.

So here we're just changing the display of the Progress bars.

We're going to have them into a single column at 700 Something big they certainly pixels.

Okay, so searches.

Everything looks nice.

I think yeah, everything looks nice.

So the timeline, it gets affected 600 pixels.

So, I mean, I think everything is really nice now if the idea of how to do the media queries, and everything, we can also kind of mess around with the main title here.

So we just need to, you know, set the font size, maybe to a smaller one.

And then maybe we can change the texture so the big text to a different font size so you can kind of mess around with the styles to see what kind of styles you're looking for.

And what what, I don't know any size, you can do any media query for inside so yeah, I think that's it for this video.

So if you've learned a lot of stuff, please don't forget to subscribe, comment, and share the video.

I'll see you on the next one.



Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

How do you write a website using JavaScript?

JavaScript Output.
Writing into an HTML element, using innerHTML ..
Writing into the HTML output using document.write() ..
Writing into an alert box, using window.alert() ..
Writing into the browser console, using console.log() ..

Can you use JavaScript alone?

Yes, JavaScript can be used without html. Node is another option. JavaScript was originally a web scripting language until node js was introduced.

Can you use JavaScript instead of HTML?

In recent years, JavaScript developers have realized that by defining a page's structure in JavaScript instead of in HTML (using frameworks such as React), they can simplify the development and maintenance of user interaction code that is otherwise much more complex to build.