Reflections on My First CSS Coding Experience!

 

Illustrated workshop concept with central Workshop text connected to icons and words: Training, Goal, Idea, Skills, Team, Practice, Results, and Trend. Black chalkboard background with colorful and white graphics.

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 address. to make it easy for participants to inquire further.

🔎 A carefully chosen image at the top of the card to enhance its visual appeal, with an alt tag for accessibility.

One of my favorite parts of the project was experimenting with a gradient background, which added depth and elegance to the card. I also played around with font colors and even added some fun emojis to give the card a lively touch. All these elements came together to create a professional and engaging invitation.

Obstacles Encountered and Solutions:

This project came with its fair share of challenges, mainly because it was my first time working with CSS. The main difficulty lay in linking CSS to HTML. The vast array of tags and the precise placement required initially overwhelmed me, as even minor mistakes could disrupt the entire structure.

The solution came through a combination of persistence and research. I watched several instructional videos, both in English and my native language, to better grasp the process of linking and applying CSS to an HTML document. Each time I faced an issue, I found that breaking the problem down and focusing on one small task at a time helped me progress. Slowly but surely, I gained confidence in applying various styles to the elements of my card, ensuring everything functioned as intended.

Successes and Lessons Learned:

Despite the hurdles, the experience was enriching. Designing the invitation card with CSS gave me insight into how powerful styling can be in web development. I now see CSS as an essential tool that enhances the basic structure of HTML, much like makeup beautifies and brings creativity to a face.

The project sparked my enthusiasm to continue exploring CSS. It was thrilling to realize that I could unlock even more advanced capabilities with more practice. The combination of HTML and CSS opens up a world of possibilities, allowing me to design web pages that function well and look polished and engaging.

Ultimately, this experience has motivated me to continue learning. I know the challenges will get tougher as I explore more advanced topics, but with persistence and patience, I am confident I will build a solid foundation to help me create even more sophisticated web designs.

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 Integrating CSS Stylesheets with HTML5 for My Web-Based Resume!

Image
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 web...
Read more