Sarah's COM 271 Website @sarahs271portfolio - Tumblr Blog

Lab 9

Link to my form: https://sarahvican.rhody.dev/photoform.html

Reflection 9

This week’s lab was a nice break from coding! It also gave me the chance to fully explore what my site could be if I had the coding prowess to fix all of the bugs with it. I really enjoyed the simplicity of just having to drag and drop everything. I initially began with WordPress, because I’ve made websites with them before and everyone says its the best for completely customizing your site. However, after sinking multiple hours into my attempt, I eventually gave up. I simply couldn’t do what I wanted within the themes that I chose, even as far as a custom background went. WordPress has been great in the past for building a highly custom site, but it wasn’t so great for trying to replicate one I already built.

Wix was SO MUCH EASIER!! I was nervous playing around with it before WordPress, but after the WordPress debacle I managed to find a way to start with no theme. A blank slate was exactly what I needed, and I was easily able to build my website exactly how I wanted. I’m happy to know that’s a tool I can use in the future, because in the past I knew relatively little about web design but now I feel more confident and if asked to create another website in a future course I could make a much more custom one with Wix. Overall, I’m happy with how my site came out and how similar it was to my actual one.

#reflections

Reflection 10

This week was STRESSFUL! GitHub was really difficult to learn for my group presentation, and we spent many hours on zoom trying to get the demo to work correctly. We even zoomed with Nathan to set up a merge conflict, but we still couldn’t get it to work when it came time to demo. Luckily Victoria saved us in the end! Then it was time for this week’s lab.

I actually enjoyed this week’s lab because it was fun trying to get everything perfect. It definitely bothers me that I couldn’t get everything exactly right (couldn’t seem to get the panel shadows to show up on the second page, couldn’t center the product label buttons over the images, couldn’t get the search bar height and outline exact), but overall I’m super proud of it! I spent a lot of time toggling back and forth between the real and replicated pages with pride, lol.

The most stressful part of the lab was I ended up taking on a lot of it myself. One of my partners was sick with COVID and dropped from the group, and the other was struggling with bootstrap as well as the HTML and CSS so I ended up doing most of the coding. I’m even more proud of the final result though, even though it was really just CSS and HTML! I was certainly happy JavaScript wasn’t necessary for the recreation. It took a couple minutes for me to remember all the HTML and CSS syntax, but once I did, everything came back fairly quickly (even my googling felt more informed than a month ago). September me would be impressed! Hopefully this sets me up well for my final project website.

#reflections

Lab 15

Desktop view:

Mobile view:

Classes:

container: fixed width container with widths determined by screen sites and equal margins on the left and right

my-3: top and bottom margins set to 1rem

my-4: top and bottom margins set to 1.5rem

row: a horizontal container that holds the columns and makes sure they’re aligned and wrapped properly

col-md-4: item spans 4 columns on medium screens and larger (≥768px)

col-md-8: item spans 8 columns on medium screens and larger ( ≥768px)

col-md-3 col-sm-6 mb-4: item spans 3 columns on medium screens and 6 columns on small screens with a bottom margin of 1.5 rem

img-fluid: an image that spans the full width of the screen

Links to my Redbubble recreation:

https://sarahvican.rhody.dev/Redbubble/homepage.html

https://sarahvican.rhody.dev/Redbubble/secondpage.html

Link to Github Repo (in case you want to look at the group contributions):

https://github.com/sarahvican/Lab-15

#labs

Lab 14

Which builder did you like better and why?

I liked Wix the best, because you could start with no theme and customize every last detail of your site! I was shocked at how much flexibility I had, I could literally put anything anywhere and make it any size, shape, and color, and Wix would let me.

Which builder did you choose for the assignment and why?

Wix, for the aforementioned reason that it provided me with the most streamlined and easiest way to have complete control over my site’s design. I know Wordpress is supposed to allow for the greatest customization, but I spent a long time trying to recreate my website on it and it wasn’t as intuitive as Wix, and I didn’t know how to create a theme-less design.

What's something the builders you didn't choose can do better than the one you did choose?

Wordpress definitely had more functionality than Wix in terms of add-ins, and I ended up not being able to recreate some things on Wix, like my weight conversion chart, that I probably could have on Wordpress.

Squarespace has better template themes than either of the other sites I used. If I was looking for a predesigned site, I would definitely choose Squarespace over Wix or Wordpress.

The most challenging aspect of recreating your site (and why)

The most challenging aspect was trying to recreate the interactive elements, like the navigation bar and the form. I ended up not being able to replicate either thing I added with JS on my site, because Wix had limited options.

I also couldn’t do other key features, like make my interstellar skeleton header logo into a clickable link, so I had to make an extra Home button in my navbar.

The most challenging thing about using a website builder (and why)

Even though Wix allowed for SO MUCH customization, if I wanted to add unique interactive features to my site, it would be more difficult (and expensive) to do. Each website builder has its own unique limitations, so it’s all about finding whichever one works for that specific website.

Something you think was significantly simplified due to using a website builder (and why)

Surprisingly, my design is nearly the exact same on both sites. It SIGNIFICANTLY less time to place my text and image elements using the drag an drop feature, rather than manually spacing everything out and having to redo everything every time I wanted to adjust the location of an element. My website also looks a LOT better on Wix because I don’t have to debug anything!

The link to your rhody.dev site: https://sarahvican.rhody.dev/index.html

The link to your new site: https://sarahevican.wixsite.com/interstellarskeleton

#labs

Reflection 8

This week was definitely a mixed bag! I figured out the picture replacement pretty easily because I had done something similar on the Fish Website, and after some trial and error I even figured out my weight converter with minimal frustration (I haven’t made it look pretty yet though!). The form validation was pretty difficult, because for some reason I decided to have two required boxes and I had to get the alert working when either one wasn’t filled out and make sure the alert was for the proper one in the proper order, etc. It also took me way too long to figure out the red boxes, but now they work correctly for the most part! I also wanted to put the little * after the label because that’s the most common way to denote a requirement, and I’m happy I learned how to do that.

I’m hoping we’re almost done with these sites, because I was definitely too ambitious at the beginning and wasn’t able to execute my site how I would have liked, and now I’m ready to try again with more measured expectations lol. But I do like the fun little javascript details I added!!

#reflections

Lab 13

My form page

When the fields are left blank:

When the field is filled in incorrectly:

On my site, I replaced the image of the earth with a spinning gif when you hover over the image. For this I used the onmouseover event handler to change it and onmouseout to change it back. This was a similar process as with the Fish website, in which I changed the src for var img. I also made a weight converter so you can see how much you would weigh on every planet. For this I used onchange so when you hit enter or click out of the input field it will automatically change the weights, but it won’t change them while you’re typing. For each planet, I used document.getElementById(___).innerHTML = valNum * the conversion factor.

#labs

Reflection 7

This week was a lot easier than last week! The DOM tree made a lot of sense and I think I did it correctly for my index page. I also came up with some fun ideas for my site that I hope I’m able to do. The fish website was definitely the most difficult part but the playlist was really helpful this week. Once I figured out how to change the image, I thought changing the text color would be easy, but no matter what I did it wasn’t working. It took me way too long to realize I was missing the ‘s’ in ‘getElementsByTagName’ but then the rest of my code was correct! I also had to try a lot of different ways to do a confirmation box and none of them did anything (or did it correctly) so I was excited to finally figure it out. I’m still not very confident with my JS abilities and am mildly terrified for the lab this week but hopefully I’ll figure it out like I did with the fish website!

#reflections

Lab 12

DOM tree: Hopefully this is big enough!

Fish Site JSFiddle

Ideas for Astroskeleton:

1. Do a weight converter to see how much you’d weigh on the moon (use a function to take the user input number and multiply it by 0.165)

2. When you hover over the astroskeleton on the earth & moon page he spins! (Not sure how to do that yet though.)

3. When you click on the earth on the earth & moon page it’s replaced with a rotating gif!

4. Do parallax scrolling (I read you could do that on w3schools and it would look cool with space but also might look worse) because the content is largely transparent and looks like it’s floating in space.

4. Make a slideshow of all the images on my featured images page! Also not sure how to do this but w3schools made it look cool.

#labs

Reflection 6

Javascript is HARD!! I read all the resources and more and I’m picking up the language veerrrryyyyy sloooowwwwllllyyyyy. I’m hoping I’ll pick up more vocabulary as I go! Was frustrated because I wanted to go to office hours on Friday because I couldn’t figure them out but of course some work things came up and I couldn’t! Hoping to go next week because I couldn’t find any examples of this type of memory diagram or how to do them online so when i got lost there wasn’t much I could do. Luckily the actual coding itself was a lot easier than the memory diagrams!

This week was also crazy because of the election, so hopefully my head will be more in the game next week when the real scary parts of JavaScript begin. HTML and CS were a lot more intuitive and I’ve found myself doing a lot more research into the most basics of JS syntax (I don’t have a math brain). For now, I remain intimidated, but maybe this week will prove me wrong!

#reflections

Lab 11

Swapping JSFiddle

Summation JSFiddle (I input the number 4)

#labs

Reflection 5

This week was fun because it was my first time seeing someone else’s site! I loved Christina’s site, and I wish I’d made mine simpler so it would work as well as hers. I dealt with a lot of bugs this week as I tried to change my site to be more responsive, but luckily Prof. Chavez was able to help me out with a few of them (although more has gone wrong since then!).

I’m really proud of getting my solar system content sorted out, because it looked like an absolute nightmare before I fixed it. My deep space page is all readable now, but it looks awful on mobile and I still have no idea how to get everything larger and centered correctly. Hopefully I’ll be able to figure that out soon with some more troubleshooting!

Lab 10

Link to my site

Photo’s of Christina’s site (I have no before pictures because I didn’t save them properly on my temporary laptop :(( just picture the list items not being there!! ):

Did your partner notice things about your site you hadn't thought of?

She noticed that on mobile, my table on my deep space page was really difficult to see because of how squished it was. She also saw that when my page shrunk, all of the text on my solar system page got jumbled because it overlapped instead of spacing out.

Did you notice things about your partner's site they hadn't thought of?

I noticed that her footer didn’t shrink with her page, so it looked like a large white bar at the bottom since her logo was offscreen on mobile and on different desktop window sizes. I also noticed that her lists weren’t centered, and would also disappear offscreen on mobile and as the viewport shrunk.

How much did your experience navigating your partner's site improve by the end of the lab?

It’s a lot better now! She removed the footer entirely and it looks a lot better, and she centered all the lists. They also now show up no matter what size I make the screen (my screenshots are from when I resized it to take up half my window.

How much did your partner's experience navigating your site improve by the end of the lab?

I hope it improved significantly! I redid my solar system page so that on smaller screen widths, my three columns of text turn to two and then one so everything is legible and nothing overlaps. I also changed the table on my deep space page so that it’s positioned under the text, not beside it, so s the screen width gets smaller it’s easier to see and doesn’t require horizontal scrolling.

Lab 7

https://sarahvican.rhody.dev/index.html

Color Scheme Inspiration:

How would your code change if you were using internal stylesheets?

If I was using internal style sheets, my CSS would be on the same sheet as my HTML rather than on an external CSS document.

Which is easier for a site that has multiple pages (internal or external stylesheets)?

External stylesheets are easier because you only need to change one file to change the look of multiple pages, as long as its linked in the HTML document.

What was the most challenging part of making your site look like your wireframe?

The most challenging part was physically moving each element around. I thought it would be as easy as just being able to position everything where I wanted it through the Float, Margin, and Position tags (and that’s what every tutorial I looked at also said) but for some reason nothing wanted to stay where it was supposed to. As a result, I ended up having to rely on margins for a lot of it and now the pages only really look okay full screen on a desktop.

Lab 7 Essential Questions

How do HTML and CSS work together to create sites?

HTML is for content, CSS is for the design and appearance of said content.

How do I program a basic website using HTML and CSS?

After you have your wireframe, you create the content in an HTML document, then use an internal (same file) or external (separate that’s linked in HTML) CSS stylesheet to define the design.

What is the CSS box model and why is it useful?

The CSS box model defines every element on the page as a rectangular box and underpins all of CSS. It consists of:

Content - The content of the box, where text and images appear

Padding - Clears an area around the content. The padding is transparent

Border - A border that goes around the padding and content

Margin - Clears an area outside the border. The margin is transparent

What are different ways to group and position my HTML elements?

Adding a <div class=“___”> tag to HTML groups it and allows it to be defined by CSS. You can also use <header> and <footer>. Then, you can position it on the page using CSS attributes (class or ID). Only assign HID once, but classes can be assigned multiple times.

Week 6 Reflection

This week I learned SO MUCH about HTML and how to program a site!! A lot of it was confusing and I had to do a lot of outside research, but I figured it out in the end. I think figuring out cPanel itself was more challenging than figuring out the actual coding! I found that once I got into a good flow, it was easy to lose track of time when I was working on a page.

The intro to HTML YouTube playlist in this week’s resources was especially helpful when I was getting started. My biggest challenge this week was definitely figuring out how to link images and between pages. It took a lot of trial and error, but eventually I managed to do everything right and was so excited when I loaded up my page and saw a picture there instead of my alt text!

Overall, I’m happy we finally took the leap into HTML, as I was super nervous and intimidated by Atom. But once I actually began doing it, I realized as long as I’m saving adequately I can make as many mistakes as I need to! Hopefully, though, I’ll make slightly fewer mistakes once we start CSS.

#reflections

Lab 6

This is the link to my site!

#labs

Trending Blogs

Recently Viewed Blogs

Sarah's COM 271 Website