My own site!
By
@alinanoman
- 1 Devlogs
- 1 Total hours
It's very personal to me :D
Ship #1
I created a personal portfolio using HTML and CSS in Visual Studio. The goal of my website was to create a place where people can learn more about me, my interests, my activities, my projects and my future goals. I built it from scratch using an index.html file for the structure and content and a style.css file for the appearance. For the design I created a soft pastel lilac theme because lilac is my favorite color.
One of the biggest challenges was learning how HTML and CSS work together. I had to trouble shoot my problems in VS Code. Such as figuring out why certain files were not operating correctly, understand files types and learn how to properly formate my code. I experimented with different color, spacingd and fonts.
I am most proud that I was able to create my first and very own website from the ground up. I was also proud that I was able to apply my css and html skills.
When testing my site people should know that they can explore each section using the navigation bar at top. they can click different links to jump between the about me, activities, projects and goals section. The website is made to be viewed on a computer browser through the index.html file. users should make sure that both index.html and style.css are kept in the same folder.
53m 53s logged
Coded my Site! Today I made significant progress on my personal website using Visual Studio Code. I began by setting up the project structure and creating the two main files required for the website: index.html and style.css. While working on the setup, I learned the difference between HTML and CSS and how they work together to create a functional and visually appealing website. I spent time troubleshooting file organization issues, ensuring that both files were located in the same project folder and correctly linked using the stylesheet reference in the HTML file.After completing the basic setup, I developed the structure of my website in HTML. I created a header section that introduces me and includes navigation links to different parts of the site. I then added several sections containing information about myself, including an About Me section, activities and extracurricular involvement, engineering projects, and future goals. This allowed me to organize my content into a clear and professional layout while practicing the use of HTML elements such as headings, paragraphs, navigation bars, sections, and div containers.Once the content was in place, I focused on the visual design of the website by working extensively with CSS. I customized the appearance of the page by creating a lilac and pastel color scheme that matched the aesthetic I wanted. I adjusted the background colors, text colors, spacing, borders, and corner radii to create a softer and more welcoming design. I also added rounded cards for project information, styled navigation buttons, and implemented a gradient header to improve the overall appearance of the site. Throughout this process, I learned how CSS properties such as background-color, padding, margin, border-radius, font-family, and box-shadow affect the user interface.In addition to improving the visual design, I spent time troubleshooting coding errors and learning how to navigate Visual Studio Code more effectively. I learned how to create and rename files, distinguish between HTML and CSS files, interpret file icons, and resolve warnings related to empty CSS rule sets. These challenges helped me gain a stronger understanding of how web development projects are organized and how different technologies interact within a website.By the end of today’s work session, I successfully created a functional personal portfolio website with multiple sections, custom styling, and a cohesive visual theme. The website now highlights my interests, activities, engineering projects, and future aspirations in an organized and professional format. This progress provided valuable experience in both HTML and CSS while helping me build confidence in web development and problem-solving skills.
