Shannon Perez

Introduction to Web Design, course project landing page

Welcome to my course project portal page

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 was our first introduction to HTML and CSS coding and file management. We learned the importance of using proper file names, folder names, and organization. How to set up Adobe Dreamweaver and establish a functional coding environment; to develop good coding habits, such as formatting/indenting code and commenting in both HTML and CSS. Also, the basics and bone structure of HTML coding to create our first page.

Since this was my first time experiencing HTML and CSS coding, there is a lot to learn about coding and trying to understand the structure and process of creating a visual page. Especially, since the coding process is not exactly what we are familiar with when it comes to layout on a paper document.
Squint Studio Build-Along

The Squint Studio Build-Along is our lengthy project, which is still in progress. We are learning how to build a website with multiple pages and practicing good accessibility guidelines; while also being taught many new techniques and processes about HTML, CSS, and web design/development. With this website build, we are also learning how to create and apply external CSS stylesheets to our site to define the design and aesthetic of the site.

The Squint Studio Build-Along is a challenging project for me, mostly trying to remember which tags mean and do what and understanding how to create your layout structure before adding any styling. However, I have found that my interest is even more intrigued when it comes to creating and applying CSS stylesheets. I enjoy the endless possibilities you get with web-based design because you have so many more options than print design; you are not limited to the size of a piece of paper, and you can add things like animation and GIFs to enhance your site even more.
Gold Country Raptor Runs

For our AAD85 Class final project, we were given the opportunity to create our own website with a topic of our own choosing. For this project we had to create a website from start to finish by gathering all of contents for website such as, color scheme, pictures and the written content for the website. We also had to create our wire-frame and write all of own HTML5 and CSS coding using the skills we have learned through the semester.

As a growing designer, this course was able to help me better understand the process of how and what information to gather from the person or client needing a site created and use that information to create a user-friendly and visually pleasing site that represents their needs and their clients/users needs.

Helpful Resources for Web Design and Development

W3Schools

This site has a lot of information and is a great resource for an introduction to HTML coding. This site breakdown almost every HTML tag to help give you a better understanding of what each tag is and how it is used, such as providing examples of what the differences are between elements and attributes, etc. It provides the tag information in bite-size pieces.
My Great Learning: Introduction to CSS

I found this website to be helpful for beginner introductions to CSS. This site lays out its information similar to how the W3School website did for HTML. It breaks down CSS in an easy-to-follow format and provides visual coding examples, such as Inline CSS, Internal CSS, and External CSS. To help make it easier to understand how particular items are coded and how it is used explains how CSS code communicates with our HTML code, the building block of the Web.
CSS Zen Garden

This website is a great resource that not only visually displays how CSS can style a website, but also how you take content from the same website and manipulate it in multiple ways by just using CSS to give it a completely different look or feel. CSS allows us to have total control over the default style of a hypertext document.