Media Query’s

Hey everyone this is going to be the last devlog before I ship and I have done mainly fixing items for different devices.

So mainly in the style.css code we do @media (max-width: 768px) { so then in this code we set width of the different containers, the 768 px is the size of the different devices. So for this size I do 600px for the different containers. And for the header and footer there was a bug well not really a bug since I coded it but even after it being on different device the page was massive, so the problem was I was making them 8000 pixels long so that the whole header background is full. But I realized that was wrong and I had to do width: 100%; for the width. This gets the screen size and makes the width that size. I mainly had to do that but I implemented in many spots. But when I was changing the media query size, I also had to change the font size, because on a computer you can see big, but if you keep that big font size it will look massive on a small device, also it cuts off. So I had to add that and then I finished. I didnt realized to upload to github pages takes like 5 minutes even after every commit, but I kept testing and finished my first portfolio. Bye guys!

Day 2

Hey everyone, I have done so much in the past day and my understanding for html and css is now so big. Before I started this project I had no idea how to even make a website, now I can build containers with backgrounds and borders using the div element in html.

What I have done

You might be wondering what I have create a navagation bar which when you press on the link it takes you to the appropriate seciton. One cool thing I added in the css was making the scroll-behavior of the overall html to smooth so that this made the page look like it was scrolling when you pressed the nav link! I saw te sidequest for the personal website needed 3 seperate sections so I have added a landing section, and about me, projects, links and a footer. The landing section is the first thing people see when they enter the page, so I wanted it to be very welcoming with a profile picture. I used flex layouts. I used the flex layouts for multiple div containers. I used it as rows and columns to make different items align in different ways.
Next the about me talks a little bit about who I am and what I like doing, and I am going to add a photo of me. I have a game section for all the games I have made and it uses so many containers each row is one container then all those 3 rows are put in another container, and those are put in one full container used to make like the box/background. In the game section I learned how to make the user click over a certain area to go to a link. Then in the last/or second to last section I included links. The links is basically the same thing as the games I used the hover feature. Then I had to set the width in the code so all of them are the same, both the boxes and the images. Lastly is the footer. It is the exact same as the navigation bar which is header but just footer. I was surprised for a lot of things like I didnt expect that the color property would be for text I thought it was for like the color for everything. Then I kept trying to type corner radius because in figma that is what it is. But it is actually border radius 😭. So there were many surprising things and I learned so much, I have some things to fix then I will be shipping!

Website Start

Hello everyone, I am just starting to learn html and css, I have always wanted to do it but thought it was too complicated so today is the day I actualy start putting the time in it. So so far I have learned how to add custom fonts images, padding, gaps, margins, bold, and italics. I am still confused on spacings between like images and text. But as you can see in the screen shot provided I have the links to the games, and at the bottom it says other projects. This is not going to be the final look as it is going to be scrollable. So later on I will include more items like about me, my mission. Anyways thank you guys, lets hope my first webdiste goes well.