Throughout the term, I have been working dilligently each week in reading and testing out various types of HTML and CSS coding. I would spend hours on the Pluralsight library reading and watching videos. The website has so much useful information; I almost felt that it was better than google in terms of finding what I needed when it came to HTML 5 and CSS. Some of the steps that I took to ensure that I would make the site as close to what I wanted as possible were researching everything that I did. I believe before I even started making the site, I researched different websites that were built with only HTML and CSS.
I went to Google and I searched websites that only used HTML and CSS. By doing this, I was able to gain an understanding of what I was able to do. I also spent more time researching the first page (home page) than almost any other page I worked on. I felt that in order to capture the viewers attention, I needed something that would lure them in from the beginning. By creating a home page with a hero-image background and a single button that sent them straight to the products page, it caught their attention and made them stay to see what else the site offered.
In order to meet all the steps required for this site, I did all the homework to the best of my ability each week, I would email the professor if I had a question, and I would constantly research and read about the code I wanted to put in the site. I found that by reading and researching what you wanted to put in the site, it helped me learn a lot and it helped me develop better code. I know that in order to keep on top of this site and programming, I have to keep reading and learning new things. I plan to keep updatin this site and testing my new knowledge even after this class is over.
I chose this layout (font, backgrounds, color scheme) because I felt that it brought more attention to the text and products I was trying to advertise. Like I already mentioned, the home page was designed the way it was so it would capture the viewers attention with a page that was simple and straight to the point. The full image background with a button leading to another page seemed fitting. There was not a lot of flair going on, yet it captured the viewers attention and made them want to explore deeper.
The second page, Products, I needed to find a way to showcase the products that my "uncle" sold. I found that the best way to do this was through columns and rows that float next to each other. By doing this I was able to add photos to each one along with a short description of what products were offered. I kept the same full image background with some transparency. Along with the background, I kept the white font. What is different about this page than the homepage is the products page has a navigation bar at the top. I needed to create a way for the viewer to navigate the site, and a horizontal navigation bar was the easiest and quickest way to do that. I had the navigation bar float to the left side of the page, and I added a hover effect for more visuals and flair.
The third page, shop, came out to be more of a contact and shopping page. I listed a fake phone number, address, and email for the company. I also created a form that was centered in the page for the person to fill out with their full name, email address and phone number. It also asked them which way they wanted to be contacted; email or phone. I also added a drop down box asking the user what they were interested in and a comment box for any questions of special requests. I enlarged and centered the form so it looks clean and professional to the eyes. At the top below the contact and location information I added links for Facebook, Instagram, Twitter and Youtube. These links go to the homepage of each site, as I never created a pages on these sites for the class. I was able to find the CSS and HTML code to make these buttons look professional and colored correctly.
The fourth page, Reviews, is nothing fancy at all. It is just a few headers with paragraphs and fake reviews to make it look like people submitted reviews and they were posted to the website. I definitely feel like I am lacking a lot here. I feel this page has potential to be something more. I kept the same theme of a full image background, the navigation bar and the white font.
The final page, About, consists of a lot of paragraphs that are in wrapped in divs for formatting purposes. I made the "About Page" text centered at the top with a break between the navigation bar and the text. I also added a break line under the text to make the page seem more appealing to read. I realized at this point I forgot to add a video to the site, so I added one at the bottom of the page; just a quick 2 second one saying thank you, come again. I think the video is a great way to end the site and tell everyone who looks at it goodbye and thank you for the great term.
Like I mentioned before, I want to keep updating this website with the new code that I am going to learn. I want to dive more into CSS Javascript and PHP. I want to add a way for users to add reviews and have them automatically posted on the site on the Reviews page. I want to modify the form on the Shop page to make it better and have the user more involved. I was thinking of making it where they could select pictures of what they wanted and it would convert those pictures to text when the user submits their request. I definitely want to play around with the font types and colors. What I did is plain, and I feel that I can do better with it. I would want to play around with the navigation bar and dive into making more pages which would expand on the nav bar. I also want to make a mobile version of the page so when it is opened on a phone or tablet, it will look differently. The user on a mobile device will be able to just pick and choose what they want to order and it may be linked up to UberEats. All-in-all, I want to keep this going and possibly freelance after I graduate. So, if anyone wants to team up and learn together, email me and we can set up study sessions and bounce ideas back and forth off each other and keep the motivation going.