Description & Concept

For my Project B Website Draft, I wanted it to look like a website that traveled from the past to reach the future to save the current society when they are in chaos. At first, I went for a scroll type look for my website to give it that “from the past” look but I realized that the society we live in today does not quite have that aesthetic, so I opted for a more futuristic background for my website. My website is a click-through, where the first page is the main title and the second page is the introduction. The third page is where an individual will be able to to interact with my sketch.

Coding

One of the most important parts of my code was .container because I was able to make and define the size of my canvas. I tried to play around with the numbers until I was satisfied with things like the width, padding, background, etc. I also added added a box shadow to give my canvas more dimension.

In order to go to the next page, I had to create buttons like ‘continue’ and ‘back’. I used w3schools to make my buttons and to create the hover effect. For the hover effect, I wanted the button to change colors so under .back-button: hover and .continue-button: hover, I changed the background color to white and text to black.

One difficulty while coding was my background image expanding when I was playing around with text values. I put the background-size as cover so the image wouldn’t repeat itself. I tried to resolve the background image expanding problem but the image ended up repeating itself and creating harsh lines so I left it as cover. 

Reflection

1.  How can orderly file name convention (html files, css files, images, etc.) prevent errors when building a website? Organized file names prevent errors by making it easy to locate and manage files and avoiding naming conflicts.
2. When would you want to use classes, when IDs? I would use classes for shared styles and behaviors and IDs for unique element identification.
3. Which limitations did you run into in the styling of your page? The size of my background image expanding so I would need to contain my text within the size of it or my image would stretch or repeat.
4. 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? WYSIWY has a user-friendly interface, does not require coding knowledge and is quick and easy. For HTML, we have full control over the code structure and precise styling control with CSS
5. Explain how different web technologies come together in your webpage. How is writing HTML or CSS different from writing p5.js (JavaScript)? In a webpage, HTML lays the foundation by defining the structure and content and CSS enhances its visual appeal through styling. On the other hand, p5.js brings interactivity and dynamic elements, allowing for animations, games, and interactive graphics. HTML and CSS focus on structure and presentation, while p5.js expands JavaScript’s capabilities for creative coding and interactive experiences. But having all HTML, CSS and p5.js creates both engaging and visually appealing webpages.