In this section, I will provide an overview of the accesibility standards and CSS optimisations techniques which were implemented within the website's source code in order to successfully completee this project. I made sure to follow accessibility standards and implemented CSS optimization techniques to improve the website's performance. This ensures that the page is user-friendly for both regular visitors and developers who may need to review or modify the source code.
If you want to check out the website, you can visit this URL: https://youngobz.github.io/Bootcamp-challenge-2/
To create the portfolio page, I started by writing the HTML code. I made sure to declare !DOCTYPE html to indicate that the document follows HTML5 standards. The HTML structure began with the html tag, which wraps the entire page.
In the head section, I added meta tags that define important details like the character encoding, compatibility settings, and viewport configuration. I also gave the page a title using the title tag. To connect the CSS styles, I linked an external CSS file called style.css using the link tag.
Moving on to the body section, I began by creating a header element that contains a navigation bar. This navigation bar, represented by the nav tag, allows users to easily navigate through different sections of the portfolio.
The main content of the page is organized within the main tag. I divided the content into sections using the section tag. The first section is labeled "About Me" and has the id="about-me". Inside this section, I wrote paragraphs to describe my background, motivations, and goals.
The second section is called "Work" and has the id="projects". To showcase my projects, I used a grid layout within a div class="grid-container". Inside this container, I created three project items represented by div class="item". Each item includes a title and an image.
Finally, I included a footer section at the bottom of the page. In the footer, I added a heading for "Contact Me" using the h2 id="Contact-Me" tag. For the contact details, I used an unordered list ul with list items li. This way, visitors can easily find my contact information and get in touch with me.
To style the page, I created a separate CSS file called style.css and linked it to the HTML document. In the CSS code, I defined styles for different elements and classes. For example, I set the background color, height, and padding for the header element. I also applied specific styles to the navigation bar, such as font choices, alignment, and spacing.
In the "About Me" section, I added padding and customized font styles to make it visually appealing. To achieve the grid layout in the "Work" section, I used the .grid-container class and positioned the images and titles within the grid items using CSS rules.
For the footer section, I set padding, alignment, and font styles to give it a neat appearance. The contact details within the footer have appropriate spacing, and I added an interactive touch by underlining the text when hovering over it.
By following this process, I successfully created an HTML page with corresponding CSS styles that fulfill the acceptance criteria. The page showcases my name, photo, information about me, the work I have completed during the bootcamp, and my contact details. Visitors can easily navigate through the page using the navigation bar and explore the showcased projects. The layout of the page is also designed to adapt to different screen sizes, ensuring a seamless user experience regardless of the device or screen size they are using. This means that the website will look and function well on desktop computers, laptops, tablets, and mobile devices.