Website Project Process
Below are some of the handwritten notes I took from class and also rewatching certain lab recordings. It has main concepts, meanings and hotkeys for different functions and components of code.
Key Takeaways:
- semantics- gives the meaning, and is reflected by the visual design
- <meta> sets the responsive format
- style.css is the style sheet that specifies rules
- parts of a rule: selector, properties, and value
- media query- when a browser hits a certain resolution it applies new set of rules like font and size
- block elements stack, whereas inline sits by side
- order of navigation: nav, ul, li, a
I found taking notes of the things explained in class and the examples provided helped me have a sort of “study guide” so I could refer back to and know which recording I could go and watch if I needed clarification.
Additionally, when I actually tried to type the code and learn by experimenting and copy pasting things through trial and error, looking back at these notes make now sense and I can understand some of the meaning.
Much of the actual learning came down to sitting down and trying random combinations, deleting values, doubling values, and seeing the before and after changes.
Experimenting with Code from Class
To start building the website I though the simplest approach would be using some of the code worked on in class and customizing it. I used some of the code done during the lab when we inputed a Harry Styles photo into the webpage and played with opacity and pink backgrounds.
Lessons Learned
- name things correctly!
I noticed that a lot of the errors I was making was because I was forgetting or incorrectly naming image files so when they were being referred to or called up, the image was a broken link. This was easily fixed though.
- trial and error works with colors and sizing
A huge part of the experimentation process and figuring out what values and selectors of code affect the overall look is through trial and error. I messed around with changing margins, the padding em sizing, and also using the color selector to change up the colors.
One difficulty I had though, was using multiple fonts, so I chose to just stick with Quicksand and varying only the sizing through the h1 h2 and h3.
- save updates before refreshing and viewing in browser
If there were links to pages, I realized I needed to save that specific html file before seeing if it updated. I always checked my steps and very frequently opened my new edits in another browser to see if things changed or stayed the same and this also helped me easily backtrack without completely loosing work.
Customizing With My Own Images
Below are some process screenshots of figuring out how to input pictures and adjusting them to be linked on the proper pages. I tried the #logo option to keep one image above the navigation bar as a signature header.
Finding Background
Because I was using existing code I did from previous labs, I had to figure out places to change the background of different text elements, so it would be less pink. I also wanted to customize the menu bar to update with 4 parts to include an about page, works page, video, and sources page.
Below, I tried out more colors and changed the padding and margins a bit. I also changed the logo image above the navigation bar to make it less squarish, and more fitted equally to the navigation buttons. Finally I updated the paragraph texts to be parts of my essay.
Final Website
Reflection
I thought that if I had a bit more time I could have done more with making it more complex with columns, and making it look less “jank” with fixing the background on the footer. I made my website very basic and it is functional to display content in different sections, but I think I need more familiarity and practice to be more ambitious to actually design something that looks really professional. However, for having zero prior coding experience, this was definitely a learning curve and I’m surprised I was able to get somewhere from scratch after feeling a bit overwhelmed. I feel that my ability to figure out how things affect one another and notice patterns to simplify the process, like cutting and pasting things into different locations that I already coded really helped. Overall I thought it was challenging but I’ve gained a greater appreciation for actual coders who do this full time.
