Lab 1 Reflection

     Lab 1 was about creating a main home page for our WCP portfolio. Before even starting to code my home page there was set up and clean up to do, mainly server set up and folder rearrangement. My DD site from last year was still online and when people would click the link to my portfolio, it would be the first thing to load. I no longer wanted this to happen, instead I wanted the user to be presented with 3 links that go to my VD, DD, and WCP works. To do this in Dreamweaver, I backed up all my DD files on my flash drive and computer and created a Web 2020 folder on the same level as the DD root folder (in the remote files panel). I then selected my entire DD folder and moved it inside of the Web 2020 folder, creating a VD and WCP folder inside the Web 2020 folder as well. In Dreamweaver, I set up my Web 2020, VD, DD, and WCP folders as different websites with appropriate file locations and roots, mainly to make it easy to edit each site individually and to avoid making mistakes uploading or taking down files.
      Now came the part where I got to code my home page. I started with the navigation since I had thought of a way to improve it from last year. My previous navigation was a fixed top bar which worked effectively but I realized if I needed more links, which I was going to need this year, the top navigation would become messy and cluttered. In lieu of this, I decided to create a hamburger menu for my portfolio, letting the user access links to other sections when they want and keeping it out of the way when they don't want it. It does require the user to take more steps to navigate but it was worth it for its tidiness. As for the main body, I wanted to make clear this portfolio was mine and what course it was for, just like last year. I choose a nice blue theme with background for the home page and created 3 sections: a top header, main middle, and bottom footer. In the middle was the course name, my name, and link to my bio, all in big and easy to see font and animated with a fade in for added effect. This accomplishes what I want my main page to do and it allows those seeing it to learn more about me. At the top was obviously the button to open up the hamburger menu but also a small text which said "Jawad's Portfolio", again to show that this is indeed my portfolio but also to create balance within the header and make good use of white space. Finally, within the footer, I added a copyright disclaimer and links to my social media so if whoever is viewing my portfolio is interested in contacting me, they have a way. These social media links had special icons with the logo of the social media company, something I was able to achieve by linking to a CSS library, a collection of classes I can put on certain element on my web page so that they look a certain way. This can be done one of 2 ways, either by downloading the library into your files and linking to it using the <link> tag or using an online link (CDN, Microsoft, etc.) in the link tag, the first of the 2 being the safer since it ensures the site will work even if one version of the library is taken off the Internet.
     These skills are important to a web designer since they are necessary in managing a site and making a site professional. Knowing how to rearrange files and set up new sites is necessary in keeping a site clean and functioning. Having too many files to manage at once opens up the opportunity to make mistakes and break a website so it is best to break it up and work on it. A professional site looks appealing and communicates its purpose effectively. Knowing how big certain elements should be, where they should be positioned, color schemes, etc. can help a web designer achieve these things and knowing small add ons, such as animation and CSS libraries, only add on to the professional look of the site.