Week 3: HTML/CSS Basic Website – Hanna Rinderknecht-Mahaffy

Link: http://imanas.shanghai.nyu.edu/~hrm305/Week_3/

Concept: The concept for my portfolio home page was to have a section with picture previews of the different projects displayed on the site, as well as a navigation bar on the left-hand side of the page. I used basic HTML to create my content, and then an external style sheet to style the site. I also added the same background image to this page as is on my homepage. 

Process: 

-For my homepage, I created my basic content using html, including flexboxes and other <div> classes, such as a “navigation” class, a “content-box” class, etc. In my external CSS style sheet,  I styled my content by altering the margins and padding, width/height, color, font-weight, flex properties, adding borders and float properties. 

-I wanted to have the links in my nav bar actually link to other pages, so I started by linking my “about” page to my facebook account. For the interactive comics, audio, and video pages, I did not have my own content, so I linked these to some random example pages. 

-For my “Websites” page, I linked another website that I created in the past for another class. 

-For my “Photos” page, I created new html and css docs and used <div> tags and “polaroid” classes with 9 different photos from my trip over winter break. In the css page, I added borders to the photos and used basic margin, padding, height, and width properties to style a basic photo layout. 

New Concepts: 

-I employed the use of flexbox to create a broader “content” class, as well as individual “content-box” classes which contained the images on the homepage. In the css page styling of the content class, I used flex-wrap: wrap, and align-content: flex-start to correctly set up my flex boxes.

-In order to make my images more interesting, I used box-shadow to give the content-boxes an off-white shadow. The code I used is: . This gave my content-boxes more depth, which I thought looked better than just the images alone. 

-Instead of having a plain color background, I decided to insert a background image as my site’s background. 

Struggles: 

-I initially struggled with inserting a background image, because I was having issues inserting the image using external CSS. I eventually solved this problem by putting it in the <body> section of the <style> tag on the html page.  

Conclusion: Overall, I found this assignment to be fun and a good way to put the html and css skills I have learned into practice. If I had more time to work on this site,  I would like to add some more separate pages that I code myself for the links in the nav bar. I would also add some stylised icons with links to my social media, and perhaps a generic contact form. 

Leave a Reply