These last two weeks have been more Independant and hands-on, using all of the skills and notes we have learned from the first half of the semester. We went through a process of creating a website from the start using the written content, CSS, and HTML. We started with the mobile view moved onto the larger views with media queries. Here were my struggles and strengths with these assignments.\u00a0
<\/p>\n\n\n\n\n\n\n\n
The two main projects these past couple of weeks were the Zen Music Festival and the Sacramento Writer\u2019s websites. These had us creating the HTML from scratch (with the content included) and adding the CSS styling for the mobile view. My initial thoughts were that mobile view layouts were simple, requiring little layout styling. I was able to get most of the HTML content without any problems. I also got most of the layout, fonts, colors, and elements without any problems. <\/p>\n\n\n\n
My main problems were the headers and footers of the websites. Most of the logos or h1 content were styled differently than what I\u2019m used to. For example, the h1 in the Sacramento Writer\u2019s Groups used <span>, which was difficult to style the different h1 logos for the header and footer. Also, the logo for the Zen Music Festival had text inside of an image. I was unsure if I had to use absolute positioning or a different solution. <\/p>\n\n\n\n
One thing I struggle with in CSS is wondering if my solution is the correct solution. I know that there are several different ways to create the same result in CSS. One can use positioning, grid, or flex to get the same result with enough trial and error. The only difference is how much the code can be simplified or if it is redundant. I also worry that my CSS code would have trouble translating to other layout views. <\/p>\n\n\n\n
After I got the answers for this week’s sites, I was proud most of my answers were very similar to the original design. I just mixed up some of the header and footer elements, which made it difficult to find the right solution. However, I was able to copy all of the layout and styling after I followed the directions. <\/p>\n\n\n\n
Once the HTML was correct, I had to convert these mobile websites into larger window sizes using media queries. The conversion has been pretty simple, with just changing the layout and widths for most of the values. I had some trouble finding the correct layout rules, but I just needed to look through my notes again to find and review the best ones. Overall, these last two week\u2019s assignments have been useful at practicing mobile first processes.<\/p>\n","protected":false},"excerpt":{"rendered":"
These last two weeks have been more Independant and hands-on, using all of the skills and notes we have learned from the first half of the semester. We went through a process of creating a website from the start using the written content, CSS, and HTML. We started with the mobile view moved onto the … Continue reading “Week 10: The Responsive Design Experience”<\/span><\/a><\/p>\n","protected":false},"author":110,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[240],"tags":[],"class_list":["post-2016","post","type-post","status-publish","format-standard","hentry","category-aad-086-sp25"],"_links":{"self":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/2016","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/users\/110"}],"replies":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/comments?post=2016"}],"version-history":[{"count":1,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/2016\/revisions"}],"predecessor-version":[{"id":2017,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/2016\/revisions\/2017"}],"wp:attachment":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/media?parent=2016"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/categories?post=2016"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/tags?post=2016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}