Code Your Way - Week 8 (03/17/2025)

Hello World - The S.M.A.R.T. Way

W08 | 03/17 --- Present Project Proposals
W00 | 03/31 --- Spring Break
W09 | 03/31 --- "Hello World!"

• Learn HTML and CSS
• Build site in VS Code & Repo to Github
  

W10 | 04/07 --- Github Pages

• Fill out framework with content structure
• Build out interactions with javascript or React
• Refine and develop CSS palette

W11 | 04/14 --- Content curation and user testing

• ​Compile project list and assets
• Edit existing posts and descriptions​

W12 | 04/21 --- Content Curation
W13 | 04/28 --- Porting Domain and linking to Github 
W14 | 05/05 --- Final Presentation

SMART Criteria

Below is the SMART Criteria broken down (left) and outlines for my project (right):

1. Specific

• What is your project's Hello World? Be specific.
• This is the mission statement for your goal.
• What actions will you take? Don’t hesitate to get very detailed​

1. Specific​

• My project's "Hello World" will focus on a desktop webpage mock up to test out layout and scrolling functions.
• Work primarily with HTML and CSS, not worry about interactions in javascript and react till after spring break.

​2. Measurable​

• What does success for your goal look like? (How much? How well?)
• Are there specific tasks and deadlines to set as milestones in order to complete the main goal?

2. Measurable

• Create page with messy (smelly) code, refactor later
• Work through HTML & CSS tutorials to establish foundation for React and javascript next week
• Use text place holders (year1, year2, project name1, etc...)
• publish rough page to Github pages

3. Achievable

• Is this goal realistic and doable within a week?
• Consider any obstacles requirements and ask yourself:
• Does this goal inspire motivation or feel discouraging? If it feels overwhelming, how can you simplify it?
• What technologies, skills, or tools are required?
• What resources will support your work? (e.g., books, websites, tutorials, documentation, example projects)
• What assets, content, or code do you already have?
• What still needs to be created?
• Do you need to adjust your expectations to make this goal more achievable?

3. Achievable

• I am approaching this "hello world" draft as a bare-bone "north star template" to prevent me from deviating from scope as we go down the road
• I imagine trying to layout the webpage with the DOM elements to be very time consuming
• Reference some websites and their HTML & CSS, but also utilize the resources posted on the class Wiki
• Most of my projects are pretty well organized on my SSD, current webpage, or already outlined on my most recent CV, so the content is already there, just needs to be set up appropriately to upload to webpage

4. Relevant

• How does this step connect to your overall project goals?
• What will it help you do next?

4. Relevant

• This rigorous exercise with the DOM will create familiarity with the project but hopefully also help me feel empowered to refactor and program the site to be more efficient

5. Time-bound

• Can you complete it in a week?
• What’s a reasonable timeline for each step?
• Setting realistic timing improves your chances of succeeding.
• Time constraints also create a sense of urgency.

5. Time-Bound

• I have hope that this can be completed before the end of spring break, but ideally before 3/26 as I will be going on a trip (as I write this on 3/23)

Reflection & Documentation

• What puzzle(s) did you set out to solve? Become more familiar with HTML & CSS to feel comfortable enough to proceed with javascript interaction and potentially React after spring break
• What did you try? What worked? What didn’t? I tried just inspecting the code from the reference site, but I found that there were too many tags and syntactic elements that I could not understand, so I ended up working through the Interneting is Hard tutorials as a dictionary (or ikea assembly guide) and dissecting the existing code to understand what they did.
• Did you run into unexpected challenges or breakthroughs? I found it really hard to understand when and where to put certain styling rules, especially when there are various classes being nested.
• Do you need to adjust your approach, timeline, or resources? Luckily, this did not happen. For a few hours, I had considered readjusting my timeline and "hello world" scope to a figma mockup. However, once I got past the flexbox tutorial, I felt comfortable enough to create a bare bone website layout (no interactions).
• Revisit your original proposal. Does anything need to change? I think my initial intention to not require any additional "pages" will have to be reconsidered. I don't know much about the javascript that will be used, but after reviewing the reference site, it looks like there are unique URLs per project. The webpage itself just doesn't have to refresh (?!). But also, I plan to also host my blog on this site, too. So there might be a hidden page somewhere anyway.

Document your process and progress:

• Include links to your code and any references used 
  • My code: https://github.com/bethanylwu/portfolio/blob/main/index.html
  • My site: https://bethanylwu.github.io/portfolio/
  • Interneting is Hard Tutorials: https://internetingishard.netlify.app/html-and-css/
  • Reference site & code: https://kostasmurkudis.org/
• Cite any AI-generated code or documentation, noting how you used AI in your process. While I did not ask co-pilot any questions, I did use some auto-complete and auto-populate features in VS code.