Website Draft

Project Link

https://kaidiwangkaty.github.io/Katy_W/WebsiteDraft/

Introduction 

In this project,  I created the draft of the webpage for my project B utilizing the Box Model and exploring Flexbox. In my project B, I will incorporate the webcam tool which is shown as a p5 sketch in this mini project for now. In addition to that, I plan to categorize different facial expressions into different emotions so on the left, there is a list of boxes with emotion pictures that will be linked to different p5 sketches. The title and the webcam container are fixed while the emotion boxes are scrollable.

Demo/Visual Documentation

Coding

Flexbox

The key to making the boxes scrollable in my code is organizing them with Flexbox in columns. When the content exceeds the viewport height, the browser automatically makes the page scrollable.

I found Flexbox really comes in handy when we are arranging boxes.  It automatically handles different screen sizes and works well for both rows and columns layout which saves a lot of trouble from manual positioning. 

<div class="flexbox-content">

            <div class="box">angry</div>

            <div class="box">surprise</div>

            <div class="box">worried</div>

            <div class="box">sad</div>

            <div class="box">confused</div>

        </div>

.flexbox-content {

    display: flex;

    flex-direction: column;

    width: 50%;

    align-items: center;

    margin-top: 0;

}

Background Images

I found it quite easy to insert background images for boxes. Now in my design, they are just showing the positions but they also have huge potential to build effects without putting too many sketches in iframes.

.box{

    width: 300px;

    height: 200px;

    padding: 20px;

    margin:5px;

    display: inline-block;

    background-image: url('assets/body1.jpg');

    background-position: top;

}

Findings & Lesson Learned

I feel that there are many functions in CSS and HTML that are almost impossible to remember all in class but really need to be understood through practice. After this project, there are still huge numbers of functions I don't know about that I'm probably aware of because of the hints that jump out when I trigger something. But I did have good practice on some basic perspectives.

I got to be more familiar with the positioning details.

https://www.w3schools.com/css/css_boxmodel.asp

I got to understand Flexbox layout better.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://flexboxfroggy.com/

Besides that, there are some difficulties that I feel I need to overcome in the future through more practice: Even though the division of p5js, CSS and HTML is super clear, I sometimes couldn't react which one to make changes to for certain functions.

Reflection Prompts

• How can orderly file name convention (html files, css files, images, etc.) prevent errors when building a website?

Consistent and predictable naming ensures files are correctly referenced, avoiding broken links or encountering conflicts. Clear file names also make it easier for developers to identify and edit files, improving workflow.

Though my web design doesn't have many files to include yet, websites that are more long term and are planned to further develop usually have many files to organize. Thus naming plays an essential role.

• When would you want to use classes, when IDs?

I use classes when I want to apply the same styles or behavior to multiple elements because classes allow me to group similar elements together, whether I'm applying a common style in CSS or adding event listeners in JavaScript. For example, the boxes in this project.

IDs are meant to be unique, so I use them for elements that will only appear once on the page. They should identify specific elements that need to be uniquely styled or manipulated. For example, the title and the sketch in this project.

• Which limitations did you run into in the styling of your page?

Instead of being restricted by the coding tools, I felt limited by my own design. There are more than enough functions the code can provide and I'd like to try but because I don't plan to have very complicated logic structure for my final project since that's not my main focus. So I only got to practice basic positioning and styling. Didn't have much surprising obstables, just went through certain struggle to get familiar with the basic knowledge.

• How does editing and styling a text in (WYSIWYG) text editor, such as Microsoft Word, compare to writing HTML? What are advantages of each over the other?

Not sure if it's equipped by Visual Studio Code, when I was writing HTML there were many auto hints coming out and they usually turned out to be very useful. I didn't need to start everything from scratch. The certain logic and format of the computer language is of course both pro and con. It simplifies the communication and makes it more efficient but maybe at the cost of flexibility. I can't type whatever I want and expect it to work.

• Explain how different web technologies come together in your webpage. How is writing HTML or CSS different from writing p5.js (JavaScript)?

CSS layout technique: Flexbox

Visual Design: font; background image; spacing