Week 05 Blog: Advancements in Web Design Techniques
In Week 05 of our Interactive Design course, we explored some essential web design techniques that enhance the styling and functionality of our websites. This week’s focus was on learning how to customize headings, integrate Google Fonts, and understand the use of IDs and classes in HTML and CSS. We also began using Adobe Dreamweaver, a user-friendly software that simplifies the web development process.
Customizing Headings
One of the key skills we learned was how to apply distinct styles to various heading levels (h1, h2, h3, etc.). By utilizing CSS, we can now customize each heading to improve visual hierarchy and readability. This skill is crucial for creating a structured layout that guides users through our content effectively.
Using Google Fonts
We also delved into the process of downloading fonts from Google Fonts. This involves copying the provided code and pasting it into the <head> element of our HTML documents. By separating fonts into different font families, we can enhance the aesthetics of our website and ensure that our typography aligns with our design goals. This flexibility in font choice allows for a more personalized and visually appealing user experience.
Developing Our Own Website
To put our newfound skills into practice, we were tasked with developing our personal websites and deploying them on Netlify. This assignment encourages us to apply what we’ve learned about styling, fonts, and layout while also familiarizing us with the deployment process. By sharing our personal websites online, we gain valuable experience in web design and development.
Understanding IDs and Classes
Another important concept covered was the difference between IDs and classes in HTML. IDs are unique identifiers for a single element on a page, while classes can be applied to multiple elements. Understanding when to use each is essential for effective styling and organization in our code. This distinction helps us assign styles correctly and maintain a cleaner codebase.
Introduction to Adobe Dreamweaver
A significant highlight of this week was our introduction to Adobe Dreamweaver. This powerful software allows us to insert images and elements visually, without the need to type extensive code. The real-time preview feature enables us to see changes instantly, making it a much more efficient tool than Notepad. This capability significantly reduces the learning curve for beginners and enhances productivity for experienced developers alike.
Conclusion
This week’s lessons were instrumental in expanding my understanding of web design techniques. The ability to customize headings, utilize diverse font styles, and work with tools like Adobe Dreamweaver will undoubtedly enhance my projects moving forward. I look forward to seeing how these skills will contribute to creating a more polished and engaging online presence for myself and my future work.
Comments
Post a Comment