WEB AUTHORING / Codecademy HTML CSS Bootstrap / Term 4, Week 12

(earlier progress of html css lesson can be viewed in earlier weeks)

screen-shot-2016-12-11-at-9-36-59-amscreen-shot-2016-12-11-at-9-37-21-amscreen-shot-2016-12-11-at-9-37-24-amscreen-shot-2016-12-11-at-9-37-36-amscreen-shot-2016-12-11-at-9-41-08-amscreen-shot-2016-12-11-at-9-41-10-amscreen-shot-2016-12-11-at-9-42-00-amscreen-shot-2016-12-11-at-9-45-09-amscreen-shot-2016-12-11-at-9-46-17-amscreen-shot-2016-12-11-at-9-47-18-amscreen-shot-2016-12-11-at-9-48-51-amscreen-shot-2016-12-11-at-9-49-07-amscreen-shot-2016-12-11-at-9-50-52-amscreen-shot-2016-12-11-at-9-52-37-amscreen-shot-2016-12-11-at-9-52-44-amscreen-shot-2016-12-11-at-9-57-51-amscreen-shot-2016-12-11-at-9-57-58-amscreen-shot-2016-12-11-at-10-00-09-amscreen-shot-2016-12-11-at-10-01-30-am

image

image

image

Advertisements

WEB AUTHORING / Website Progress / Term 4, Week 10-11

WEEK 10

New additions:

-Anchor page link (in Dreamweaver CC 2017, there’s no anchor tag anymore but you can just link by using class)

-Smooth anchor scrolling to complement the anchor link, done with JavaScript thanks to this man on some forum he’s amazingΒ I used the code on the comment

-Edited header on the discography page so that it’s only a back button (more relevant this way)

-Audio embed!

-Tracks & Preview buttons in Discography page

screen-shot-2017-01-15-at-2-17-58-pm

screen-shot-2017-01-15-at-3-07-06-pm
really have to fix that f**kup 😦 perhaps moving it one column to the right would help. 

screen-shot-2017-01-15-at-12-34-21-pm

 

WEB AUTHORING / Assignment Progress / Term 4, Week 10

Having finished the layout to the landing page, I’m now working on the discography page and figuring out how to embed audio (but not with the preset play, rewind and forward buttons because my audio will only be preview audio which can be viewed by clicking the preview button.)

How exactly do I do this?

ccb4daafe844ee7a907f3489842aa52f

 

Screen Shot 2017-01-10 at 9.48.29 AM.png
Bad news aside, I found a nicer look for the contact page on accident rather than blocking the section with solid color. All this happened because my Dreamweaver won’t cooperate in changing the text decoration style & color. Deep deep sighs.

TO DO LIST:

  • Remove gallery page off tour
  • Place logo on footer (besides the copyright)
  • Embed audio
  • Tidy accordion up

(((PROGRESS ARE UP ON A NEW POST)))

WEB AUTHORING / Website Progress / Term 4, Term Break

Inspirations & coding help!

https://spin.atomicobject.com/2015/05/31/scroll-anmiation-css-waypoints/

screen-shot-2017-01-01-at-6-01-56-pm
Helpful javascript library to add responsive audio to the page. Will use this for my discography page!
screen-shot-2017-01-01-at-5-52-33-pm
slideToggle function; Β will use this to build the discography page (where clicking on the image will trigger a drop down which contains track list & audio preview)

Progress so far with the website:

  • Edited the navbar (tried to make it transparent. Needs a new font though)
  • Edited the background
  • Am thinking of editing the discography page; the carouselΒ doesn’t feel effective at all.
  • Footer not fixed yet

This slideshow requires JavaScript.

Fullscreen view

960px view

Small device view

29/12/2016

screen-shot-2016-12-29-at-10-29-25-am
Can’t seem to get that button right. ughhhh.

screen-shot-2016-12-29-at-10-27-23-amscreen-shot-2016-12-29-at-10-26-33-amscreen-shot-2016-12-29-at-10-24-25-am

screen-shot-2016-12-29-at-9-37-22-am
Changed the discography page – text too small?
screen-shot-2016-12-29-at-9-36-58-am
Tour page as sleek as ever
screen-shot-2016-12-29-at-9-36-39-am
End page / footer
screen-shot-2016-12-29-at-9-36-29-am
Tour-Contact page
screen-shot-2016-12-29-at-9-36-17-am
Discography page

screen-shot-2016-12-29-at-9-36-07-amscreen-shot-2016-12-29-at-9-35-49-amscreen-shot-2016-12-29-at-9-35-35-am

01/01/2017Β 

So I tried to do the dropdown function with javascript/jquery, but it didn’t work at all (not to mention the jquery is really messy? What on earth happened to it?), so I ended up using the bootstrap built-in Accordion function (I copied the div classes and collapse functions onto my own div class).screen-shot-2017-01-01-at-8-16-21-pm

screen-shot-2017-01-01-at-8-31-57-pm
Desktop view; Some images need to be edited so it is darker (to improve text visibility). Description seems a bit too small (it was set it at 0.5em)

screen-shot-2017-01-01-at-8-32-08-pm

screen-shot-2017-01-01-at-8-32-20-pm
Panel expanded
screen-shot-2017-01-01-at-8-32-27-pm
Panel expanded
screen-shot-2017-01-01-at-8-32-42-pm
Smaller device view

screen-shot-2017-01-01-at-8-32-54-pm

screen-shot-2017-01-01-at-8-33-13-pm
Small device view

It still look like a mess when the browser size is small.

The problem I have with this is that when the page loads, it shows the panel directly instead of hiding it. Will fix this issue soon.

WEB AUTHORING / Assignment Progress / Term 4, Week 9

Inspirations:

https://www.behance.net/gallery/41508597/WRSDESIGN-UI-UX-webdesign-(LIVE)

Progress so far with website prototype:

screen-shot-2016-12-11-at-12-32-58-pm

screen-shot-2016-12-11-at-12-34-15-pm
Making the header (using code guideline from codecademy)

screen-shot-2016-12-11-at-3-11-25-pmscreen-shot-2016-12-11-at-3-13-41-pmscreen-shot-2016-12-11-at-3-13-48-pmscreen-shot-2016-12-11-at-3-13-51-pmscreen-shot-2016-12-11-at-3-43-06-pm

screen-shot-2016-12-11-at-3-43-10-pm
Text currently still come from the image itself. Will change this up soon.
screen-shot-2016-12-11-at-3-44-19-pm
Smaller view poses a problem.
screen-shot-2016-12-11-at-3-44-28-pm
Nav bar / header not properly coded yet

screen-shot-2016-12-11-at-9-33-23-pmscreen-shot-2016-12-11-at-10-02-15-pmscreen-shot-2016-12-11-at-10-02-36-pmscreen-shot-2016-12-11-at-10-02-54-pmscreen-shot-2016-12-11-at-10-03-36-pmscreen-shot-2016-12-11-at-10-03-47-pmscreen-shot-2016-12-11-at-10-04-00-pmscreen-shot-2016-12-11-at-10-04-10-pm

screen-shot-2016-12-12-at-1-14-12-pm
Found this nice color “rosybrown” that suits the feel.

screen-shot-2016-12-12-at-1-25-35-pm

screen-shot-2016-12-12-at-1-30-39-pm
Stylising the font

screen-shot-2016-12-12-at-1-30-49-pmscreen-shot-2016-12-12-at-1-30-58-pmscreen-shot-2016-12-12-at-1-42-39-pm

screen-shot-2016-12-12-at-1-42-49-pm
Caption still a bit too small
screen-shot-2016-12-12-at-1-43-25-pm
Nested a button onto the carousel

screen-shot-2016-12-12-at-1-43-51-pm

screen-shot-2016-12-12-at-2-08-18-pm
Making the tour page with jumbotron
screen-shot-2016-12-12-at-2-09-46-pm
Ditched the jumbotron idea.

screen-shot-2016-12-12-at-2-11-48-pmscreen-shot-2016-12-12-at-2-14-00-pmscreen-shot-2016-12-12-at-2-14-32-pmscreen-shot-2016-12-12-at-2-14-42-pm

screen-shot-2016-12-12-at-2-16-13-pm
Justified buttons

screen-shot-2016-12-12-at-2-16-43-pm

screen-shot-2016-12-12-at-2-17-24-pm
(So happy I came up with this by accident ahahahhaha)

screen-shot-2016-12-12-at-2-20-43-pm

screen-shot-2016-12-12-at-2-26-24-pm
Gif quality not the best though. Not too sure on how to compensate with this 😦

screen-shot-2016-12-12-at-2-26-36-pm

screen-shot-2016-12-12-at-2-55-05-pm
Fixed the navbar – it’s now fixed onto the top

screen-shot-2016-12-12-at-2-55-14-pmscreen-shot-2016-12-12-at-2-55-38-pmscreen-shot-2016-12-12-at-2-56-27-pmscreen-shot-2016-12-12-at-2-56-43-pm

screen-shot-2016-12-12-at-3-13-45-pm
Decided to place the album caption below the image for better readability. Might change the entire layout & image for this section though.
screen-shot-2016-12-13-at-9-29-50-am
added animate css

This slideshow requires JavaScript.

 

WEB AUTHORING / Prototype? / Term 4, Week 8

On this week’s episode of Crash Coding…

 

I opted to do my website in Dreamweaver, in favour of the bootstrap components (which I really need to learn more about).

I also realise that I need to return to codeacademy as soon as possible because I’ve forgotten quite a lot on how to code specific functions & css styling.

screen-shot-2016-12-07-at-8-09-46-am
(Have yet to figure out how to place the buttons center aligned & on the middle of the image)
screen-shot-2016-12-07-at-8-11-05-am
Linked the “English” button to the Parallax page. Haven’t changed the navigation bar yet (honestly I forgot how to duplicate the links wow)
screen-shot-2016-12-07-at-8-11-27-am
Carousel! The captions will definitely have to be larger than that; haven’t styled the font either.

http://getbootstrap.com

screen-shot-2016-12-07-at-8-16-37-am
Will definitely be useful very soon.

11/12/16

How To Parallax (Css)

Trying Parallax Effect

CSS Styling_Opacity

After seeing these guidelines, I think I’m going to change the concept of my website – I’ll probably make them all in one page, rather than having 2 pages (landing page – home parallax) like I originally intented to.

Will update with Codecademy and website progress soon!

 

WEB AUTHORING / Sketches & Flatplan / Term 4, Week 7

This week we worked on improving the siteflow, making wireframe & flatplan on Ai.

image

image

image

image

 

image
Enter a caption

 

screen-shot-2016-12-01-at-11-18-36-am
Landing page (separated from the rest of the page which will be all parallax-ed). Visitors can pick either English or Japanese language to the site.

Profile/About page – by hovering on each of the individual members, visitor can read on the member’s personal infos.

Newest album release – clicking tracklist on the right will show the album’s songs. Will probably add a Get it on iTunes button.

screen-shot-2016-12-01-at-11-19-33-am
Projects slideshow. Clicking “Full Discography” will lead you to another page
screen-shot-2016-12-01-at-11-19-49-am
Discography Page