Reflections on Integrating CSS Stylesheets with HTML5 for My Web-Based Resume!

HTML5 and CSS3 logos on a gradient background with the text "External CSS Stylesheets.

As I advanced in my journey into web development, the process of integrating CSS3 stylesheets with HTML5 pages proved to be both exciting and challenging. This project specifically focused on creating a web-based résumé, allowing me to apply my knowledge of HTML and CSS to develop a well-structured and visually appealing online CV.

Project Overview

The goal of this project was to deepen my understanding of CSS and its relationship with HTML by building a dynamic web résumé. The résumé included:

⏩ My photo at the top for a personal touch.

⏩Three major sections: my name, education, previous experiences, and skills, each clearly highlighted with headers.

⏩ An external link to my LinkedIn profile for those interested in learning more about my professional background.

⏩A link to my university email for direct communication.

⏩An alt tag for my photo to ensure accessibility for visually impaired users.

I utilized gradient colors for the background to enhance the overall design, making the webpage visually appealing. Additionally, I experimented with font colors and added a few emojis to give the résumé a more engaging and fun look.

Obstacles Faced and Solutions

Although I felt more confident in my coding abilities compared to earlier experiences, integrating the CSS stylesheet with the HTML page presented new challenges. Merging these two components—HTML’s structure and CSS’s design elements—initially created some confusion. Small coding errors could easily disrupt the layout or functionality of the page.

To overcome these challenges, I spent time watching educational videos that clearly broke down the process of linking a CSS stylesheet with an HTML page step by step. This approach helped me understand the correct structure and format to use. Additionally, I faced a technical issue with the site (Postimage) I was using to upload images, which was temporarily down for maintenance and delayed my résumé's completion. However, I was able to troubleshoot the problems and submit the project before the time.

Successes and Lessons Learned

Creating my résumé webpage was both rewarding and insightful. I learned how crucial it is to carefully integrate CSS and HTML to produce functional and visually appealing web pages. Each small challenge taught me the importance of attention to detail and persistence in web development.

This project ignited a profound interest in programming and web design. With each new task, I feel increasingly enthusiastic about exploring the world of coding and discovering new ways to enhance my skills. I aspire to one day design and develop my own fully-fledged website from scratch. This experience has reinforced my belief that I will continue to grow in this field with patience and practice.

Comments

Post a Comment

Popular posts from this blog

Welcome to My First Blog!

Image
Hello everyone! My name is Hamid Almalki, and I am thrilled to start sharing my thoughts, experiences, and insights. With over 15 years of experience in education, I have spent 13 years teaching in the classroom and two years as an assistant principal. Currently, I am pursuing a master's degree in Curriculum and Instruction, which allows me to deepen my understanding of educational theories and practices and explore innovative ways to impact student learning. My education journey has been filled with passion, growth, and a commitment to helping students reach their fullest potential. I have a keen interest in two areas vital to the future of education: gifted education and educational technology. Despite their differences, both fields are centered around nurturing talent, fostering creativity, and leveraging innovation to enhance learning. In this blog, I aim to create a space where we can delve into the world of gifted education and educational technology. This is my very first ...
Read more

Reflections on My First HTML Coding Experience!

Image
  My first attempt at HTML coding has been an enlightening journey into a world I knew little about. The project aimed to understand the basic concepts of HTML coding by creating a simple webpage. As a beginner, the task seemed daunting at first, but through persistence and curiosity, I managed to create my first HTML page, showcasing a bit about me and my interests. Project Overview: The project focused on personalizing a webpage using basic HTML. I started by including a main title that introduced myself to the reader. Then, I added an image that captured a memorable moment from my family’s trip on a Disney Cruise. This was not only a nostalgic experience but also an opportunity to learn how to properly include images in HTML while adhering to accessibility best practices. I added an alt tag to describe the image, ensuring it was accessible to visually impaired users. Next, I included paragraphs about my experiences and interests, giving the reader a better understanding of who I...
Read more

Photo Editing by Using Pixlr-E

Image
🔍 Overview In this image, I enhanced it using Pixlr-E, experimenting with various tools to highlight colors, adjust the composition, and add creative effects. The experience was both challenging and rewarding as I explored Pixlr-E’s features in depth. While I had a basic understanding of Photoshop, I found Pixlr-E to be much easier and more effective in achieving my desired results. The first image, featuring a garden, was taken with my Huawei phone camera last summer. Detailed Description of the Changes: 📌Light and Color Adjustments: I adjusted the brightness and contrast to give the image a more vibrant look. By intensifying the color saturation, I made the flowers appear more vivid, especially the purple and pink ones. This transformation improved the overall colors and made the scene more visually appealing. 📌 Crop and Rotation Adjustments: I made a simple crop to remove unnecessary background elements and frame details, allowing the focus to be on the flowers and the sky. This ...
Read more

Accessibility

Image
When developing documents and websites, ensuring accessibility for individuals with disabilities is a critical priority. Here are three key considerations/modifications to ensure accessibility: 1. Use of Alt Text for Images Alt text describes images or graphics used in documents and websites for individuals who rely on screen readers. The alt text provides a verbal description, allowing users with visual impairments to understand the content that a sighted person would glean from an image. To make this modification:    - Ensure that every image includes descriptive alt text.    - For more complex images like graphs or charts, consider including long descriptions.   2. Proper Heading Structure: Headings organize content hierarchically and assist users who rely on screen readers to navigate through a document. By creating a clear heading structure:    - Use built-in styles in document software (e.g., Heading 1, Heading 2).   3. C...
Read more

Reflections on My First CSS Coding Experience!

Image
  Learning CSS coding was an exciting step forward in my journey into web development, following my initial exploration of HTML. The project I worked on was focused on designing an invitation card for an educational technology workshop, and it required me to apply both HTML and CSS to create an engaging and visually appealing product. This task deepened my understanding of web design and made me appreciate the relationship between structure and aesthetics. Project Overview: The core of the project was to design a digital invitation card that included all the essential information about the workshop. I began by learning the basics of CSS, which was crucial in adding the necessary stylistic elements to the HTML-based structure.  The invitation card featured: 🔎 A clear event title. 🔎Detailed information about the workshop's theme and purpose. 🔎 Specific details about the date, time, and place. 🔎 A quick contact option with an embedded email link via my university email addre...
Read more