Welcome to my Course Project Directory!

The following projects have been created as a way to explore front-end Web design and development.

Main Course Projects

My First Page

This project served as an introduction to Adobe Dreamweaver, HTML, CSS, and basic coding principles. The main goal was to begin understanding how websites are structured and how different web languages work together to create a functional and visually organized page.

Through this activity, I practiced building a simple webpage from scratch, learning how HTML is used to structure content such as headings, paragraphs, and images, while CSS is used to control the visual design and layout. Using Dreamweaver also helped me become more familiar with a professional web development environment and how to navigate between code view and design view.

Overall, the project was focused on building foundational web design skills and developing confidence in writing and editing code. It served as an important first step in understanding how websites are created and how small changes in code can significantly impact the final design and user experience.
Squint Studio Build-Along

This project was focused on building our skills with Adobe Dreamweaver by following step-by-step video instructions from Professor Rishe. The goal was to become more comfortable working within the software while reinforcing both foundational and more advanced web design and coding techniques.

Throughout the project, we practiced using different HTML tags and writing code to structure multiple pages within a website. We also learned how to create and link an external CSS file, allowing for consistent styling across all pages. In addition, we explored more advanced skills such as organizing a multi-page site, managing file structure, and improving efficiency when editing and updating code within Dreamweaver.

Overall, this activity helped strengthen our understanding of how to build and manage a multi-page website while developing both basic and more advanced skills in HTML, CSS, and Dreamweaver.

Helpful Resources for Web Design and Development

UX vs UI: What’s the Difference?

The article explains that UX (User Experience) and UI (User Interface) design are closely related but distinct fields that work together to create effective digital products. UX design focuses on the overall experience a user has when interacting with a product, including usability, efficiency, and satisfaction. UX designers research user needs, plan structure and flow, and aim to reduce frustration while making products intuitive and meaningful to use.

In contrast, UI design deals with the visual and interactive elements of a product, such as screens, buttons, icons, and layouts. UI designers focus on how the product looks and how users interact with its interface.

The article emphasizes that UX goes beyond visuals and includes deeper layers like structure, strategy, and user research, while UI is more about the surface level presentation. Even though the two roles overlap and require collaboration, they involve different skills and responsibilities.

Overall, the key takeaway is that UX is about the entire user journey and experience, while UI is about the design of the interface users interact with and both are essential for creating successful, user-friendly products.

Working With Colors Guide

The CSS-Tricks article “A Nerd’s Guide to Color on the Web” explains how color works in digital design and how developers use it in web development. It begins by describing the difference between subtractive color mixing (used in paint) and additive color mixing (used on screens), where red, green, and blue light combine to create all colors, including white.

The article then explores common ways to represent color in code. These include RGB and RGBA values, which define colors using numerical light intensities, hex codes, which are a compact base-16 version of RGB, and HSL values, which describe colors in terms of hue, saturation, and lightness and are often easier for humans to understand.

It also discusses practical tools and techniques for working with color, such as CSS variables for organizing color systems, preprocessors for adjusting colors programmatically, and properties like gradients, shadows, and blend modes that create visual effects.

Finally, the article highlights the importance of accessibility and perception, noting that colors must be chosen with contrast and readability in mind, since a color’s effectiveness depends on its context and surrounding colors.

Overall, the main idea is that understanding both the technical and visual aspects of color allows developers to create more effective, flexible, and accessible web designs.

HTML and CSS Is Hard

The Interneting Is Hard HTML and CSS tutorial is a beginner-friendly guide that teaches the fundamentals of building websites from scratch. It explains that web development relies on three main technologies: HTML, CSS, and JavaScript. HTML is used to structure and give meaning to content, CSS is used to control the visual design and layout, and JavaScript adds interactivity.

The tutorial walks learners through the essential building blocks of web pages, including basic HTML elements like headings, paragraphs, links, and images, as well as how to organize files into a website structure. It emphasizes the importance of separating content (HTML) from presentation (CSS), allowing developers to reuse styles and maintain consistency across multiple pages.

It also introduces key CSS concepts such as selectors, the box model, layout techniques like Flexbox, and responsive design, which ensures websites work well on different screen sizes. More advanced topics include semantic HTML, forms, and web typography to improve usability and accessibility.

Overall, the main goal of the tutorial is to help beginners build a strong foundation in HTML and CSS through hands-on practice, enabling them to create clean, well-structured, and visually effective web pages.

Welcome to my Course Project Directory!

Main Course Projects

My First Page

Squint Studio Build-Along