**Week 07 Lab : Reflection on my 1st project**

My very first project was designing a copy of a page from the Yoga Journal. Link : https://codepen.io/nn2527/pen/MWozoRx.

I was very mindful about giving credits for this so I started my code by writing a comment <!--comment--> declaring the source of my content and images along with a link to the original page.Then I started with a heading because that is the first thing I want my viewer to see, so that they know what is the page about. Instead of an h1 <h1></h1> tag I chose an h2 <h2></h2> because I did not want extremely huge text. Then I inserted an image using <img></img> tag to set a context to the text that was to come so that the viewer gets an idea about what is to come. Right below the image, I used <h1></h1> to declare the topic of the content. Here, I deliberately wanted the text to be huge so that it attracts attention to the topic.

After setting the intention of my page through <h1></h1> and <h2></h2> headings and an image, I moved on to a subtitle using <h3></h3>. Right after that, I used <h5></h5> to mention the name of the author of the text and its publication date (becaue it is a web article from the Yoga Journal). Till here my text is in default font and color i.e. arial and black.

Here onwards, I started playing with the look of my page by trying different font sizes, colors and styles. I created the first paragraph <p></p> with a certain class name (.letsStyle) and styled it in CSS using the attributes of color, font-size and font-family. For font-family, I copied the font family CSS specifics from Google fonts, but did not realise that I have to copy the web link too to embed the font in my HTML -- so this is my learning from the first project.

Then I created another paragraph <p></p> tag but also added the <strong></strong> tag to it because this time I wanted my paragraph text to be strong aka bold so as to emphaise the text.

After this in my third paragraph I used the phrase tag for italics <em></em> to make my paragraph text italic and emphasized.

Then I gave my page a <hr> i.e. a horizontal rule to break the text and give the page some structure to say that one topic ends here and another one starts below the line.

I again used h3 <h3></h3> while introducing the next topic after the thematic break. Then I used the quotation tag <q></q> because I was quoting a saying. To style it in CSS i gave it a class (.wow) and gave it color, font-size and font-family attributes in CSS. I made the same mistake in font-family that I had done above.

Then I gave two consequent line break tags <br> to give some breathing space between one element of my page i.e. text and the other i.e. video.

Aftert this, I embedded a YouTube video in my html page using the inline frame tag <iframe>. I also mentioned the width and height attributes inside it and then moved on to the adding the source 'src' of my video. Then I added other attributes like title="" frameborder="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen by learning from the [W3 schools website](https://https://www.w3schools.com/tags/tag_iframe.ASP). At this point, I would also like to mention that I learn a lot from W3 Schools and asbolutely love their website, context, teaching method.

After the video, I made a division using the <div> tag because by now I was tired of making individual tags and styling them separately. I knew that div would make it easy for me to style anything inside it using the ID or class attributes.

Inside the div tag, I made another pargraph and a h6 heading. After which, I went on to making a new h2 outside of the div, followed by an independent strong text (sans any other tags). Hereafter, I made an ordered list using the <ol> tag and did some inline CSS to it (within the HTML itself) because I was tired of styling separately in CSS - but I know professor later discourgaed me from doing this so i don't do inline css anymore.

In my ordered list, I made 7 list items <li> which were the names of the 7 prime Chakras in the human body. Here onwards, I added another image and styled it like the first one using border and padding properties. For this image, I used the dashed border style but for the first one I had used the double border style.

Towards the end of my page, I made another div to save my time and effort and inserted two paragraphs and a couple of independent text elements using the <strong>, <em> and <small> attributes. I also hyper-linked the "yogajournal.com" by creating a hyperlink for it using the anchor <a> tag with its 'href' attribute to link the destination page to the anchor tag text.

Ultimtaely, I ended my code with another comment declaring the source of the HTML & CSS cheatsheet I referred to throught the creation of my project. The link to these cheatsheets was provided in the course material only though but still to be extra cautious, I mentioned them in my code so that the reader knows what all resources I used in the creation of my first project!

Takeaways : I learned that I am supposed to link the Google Font stylesheet in the head of my HTML page for it to work actually. I also learned that I am not supposed to use inline CSS at TC/Columbia. Major key learning was also that I do not have to give every tag an id or class attributes to style them in CSS. I can simply refer to them in my CSS by their 'tag' name unless I want to style them invidually, where I will have to allot them separate IDs/classes and style one by one! But for generally similar styling, no need to give everything a name or class.

Conclusion : By now I have made many more pages so I have a better idea about styling my web page in terms of its outlook i.e. alignment, font styles, and linking different parts within the same webpage using similar ids (href="#"). Now, as I have progressed in the last one month, I can also make it more responsive with JS or structured using Bootstrap. Overall, I am proud of my learning journey so far!

To answer the suggested points/questions -
* Was the project harder or easier than you expected?
I did not expect it to be very difficult and I do not think it was very difficult but it definitely did take more time and effort than I expected.

* What have been the most difficult obstacles you've encountered so far?
I think the major challenge is coming up now with Javascript with all the math required to do it not just in terms of actual calculations but also the syntax. In front of JS, I find HTML & CSS much simpler.

* Do you find that you like programming? Why or why not?
I am definitely liking it so far. It feels empowering to know that I can make something that can actually exist on the world wide web. If nothing big, a meaningful webpage can be my contribution to the world of 'internet' and that thought alone is so satisfying. In other words, to know that I am learning to create something useful that can genuinely add value to someone's existing knowledge system or feelings is worth all the effort for me. For example, I am good at creating art and craft. Going forward, I can create a webpage that talks about what and how I think when I am making a piece of art. If that alone can teach or inspire someone to make their own piece of art - my webpage will achieve its purpose > I will be at peace to know that I did the right thing by learning to code HTML, CSS & JS. Hence, I love what I am learning!