Interactive Design / Project 3: Website

on

   

06.22.2022 - 06.29.2022 (Week 13 - Week 14)
Audrey Gracia Djohari / 0348120
Interactive Design
Bachelor of Design (Hons) in Creative Media / Taylor’s University
Project 3: Website (Final Project)

INSTRUCTION


PROJECT 3: WEBSITE

Instruction

Students are required to develop a minimum of 5 Pages of a Website. The Website should use valid XHTML and using external CSS. The content must use original text and original graphic design. The website should not have broken links and properly use HTML Tags.

Websites must be uploaded and hosted to a server (paid or free). Research findings, wireframes, and mood board have to be presented and uploaded in e-portfolio and Google Classroom.

Process

1) Website Design

This is the design of the 5 pages on the website. I use the landing page design but separate each section into different pages. I also add 2 more different designs for the sign-in page and cart/catalog page.

Figure 1.0: Website Design

2) Creating the Folder

First of all I created a folder for my HTML files, a CSS file for styling, and image files. I repeat the same step that I did when I created the landing page, but this time I have 5 HTML files because the website will consist of 5 pages: Home, Sign In, About Us, Shop, and Cart (catalogs).


Figure 1.1: HTML & CSS Document, 27.06.2022

Figure 1.2: Images, 27.06.2022


Fonts: *All fonts are downloaded from Google Fonts
  • Yeseva One Regular - titles
  • Futura - paragraphs & call to action
Figure 1.3: Fonts that I used

Color Scheme: 
  • FFFFFF (White) - background
  • FFC3A5 (Pale Salmon) - column & row
  • E9DAC9 (Sandy Beige) - column & row
  • 684007 (Dark Brown) - icons & text
Figure 1.4: Color Palette


3) Creating the Pages

I started my coding in Dreamweaver and I started with my navigation bar and footer as I need to include them on every page.

A. Home Page
Figure 1.5: Home Codes in Dreamweaver, 30.06.2022

Figure 1.6: Home Page, 05.07.2022

B. Sign-In Page
Figure 1.7: Sign-In Codes in Dreamweaver, 30.06.2022


Figure 1.8: Sign-In Page, 05.07.2022

C. About Us Page 

Figure 1.9: About Us Codes in Dreamweaver, 30.06.2022


Figure 1.10: About Us Page, 05.07.2022

D. Shop Page
Figure 1.11: Shop Codes in Dreamweaver, 30.06.2022


Figure 1.12: Shop Page, 05.07.2022

E. Cart page (Catalogs)
Figure 1.13: Cart Codes in Dreamweaver, 30.06.2022

Figure 1.14: Cart/Catalog Page, 05.07.2022

F. Contact Us


Figure 1.15: Contact Us Section, 05.07.2022


4) Linking
After I finished all of the pages' layouts, I link all of those page to one another in Dreamweaver by using <a class="link" href="file-name.html"> code.
5) Upload to Netlify

Lastly, I uploaded the folder to Netlify so I can get the website address free.

Figure 1.16: Uploading in Netlify, 05.06.2022


6) Attempts

These are some outcomes throughout the coding process. I finally got it right on my 3rd outcome which is also the one that I submit.
#1 Outcome: https://peony-florist-microsite.netlify.app (Not Final)
#2 Outcome: https://peonyflorist-final.netlify.app (Revised)
#3 Outcome: https://peonyflorist-submission.netlify.app (Submission)


Final Outcome

Final Landing Page Link: https://peonyflorist-submission.netlify.app (Submission)

*The pictures will take some time to load. I had made this website responsive to phone size, so you could look through it by phone as well.

Figure 2.0: Final Landing Page Video (Laptop Screen), 05.07.2022

Figure 2.1: Final Landing Page Video (Phone Screen), 05.07.2022

Figure 2.2: Final HTML Codes, 05.07.2022

Figure 2.3: Final CSS Codes, 05.07.2022 (Revised)

FEEDBACK

WEEK 15:
Specific Feedback
It looks great in desktop. The overall look and feel is consistent and like professional website. (via email)

REFLECTION

Experience
I feel that this final project is so much easier than the previous project (Working Landing Page). Because I am now more familiar with the codes and I could reuse some of the codes that I made in Project 2. The only hurdle I had was when I accidentally deleted all of my codes in Dreamweaver and I couldn't undo it. It was very stressful imagining how I must rewrite the codes all over again. But thank goodness I've copied my landing page codes in a PDF file so I could retrieve them. However, some margins and indentations were not copied so the HTML might look a bit messy. Also, this project seems so short and I didn't get enough feedback sessions actually. But overall, I truly like the process.

Observation
I observed that I have become more familiar with codings and I could now use my own intuition in figuring things out. I could link each page to one another easily without any problem. Furthermore, I could solve the background image problem quite fast. I also figured out how I could use only 1 CSS file for all the pages. 
  
Findings
I found that I managed to demonstrate creative use of Dreamweaver, and produce a satisfying outcome in the form of a website. This project really showed me how much potential Dreamweaver has as an application. It is an extremely useful tool for creating websites and I'm looking forward to deepened my knowledge even more in this software.

FURTHER READING


- Forms (Bootstrap)

Figure 3.0: 
Forms by Bootstrap
Reference: 

Otto, M. J. T. (2022, May 13). Forms. Bootstrap. Retrieved July 1, 2022, from https://getbootstrap.com/docs/4.4/components/forms/


1) Form controls
Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

2) Sizing
Set heights using classes like .form-control-lg and .form-control-sm. 

3) Readonly
Add the readonly boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

4) Form grid
More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.

5) Form row
You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.

Figure 3.1: 
Form Layout by Bootstrap

HTML Code:

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>


- How to create footer to stay at the bottom of a Web page? (GeeksforGeels)
Figure 3.1: 
GeeksforGeeks
Reference: 
To create a footer to stay at the bottom of a web page We can fix the position of it at the bottom of the webpage so that, if you scroll down that webpage you can still view the footer from any position at the page. To make a footer fixed at the bottom of the webpage, you could use position: fixed.

CSS Code:
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}


Comments

Post a Comment