/module-2-adv-css-demo-site

Application of CSS Properties: flexbox, basic grid, pseudo elements and basic animation.

Primary LanguageCSS

Module 2 | Advance CSS : Portfolio

Description:

A start-up project to showcase the skills I learned as a student in our Week 2: Session. By creating/building a portfolio page from the scratch using the application learned from Wk 1 to Wk2. There will have an additional properties and techniques applied on this website learned from the third party source. However, it is still relevant to the project scope for this learning period.

Link of the deployed project:

Can be found: Github Repo or [Gitlab UWA Bootcamp - Module 2] (Comment section)

Tools and Application use in this project:

Software Front-end Language
Adobe
Illustrator
VS Code Html5, CSS3

Challenges:

At first, you would think you are already on track with everything, but after planning out the visual look of your index page you are suddenly caught in a "brain fog moment". But during the process of building the website, there will have a code that won't work even how far you tried to search for a solution. Here are the following obstacles I noticed if you need instant support "it won't happen as you were working remotely" and lastly the time if you don't manage your time and allocate a big amount of time to the project "You're DONE/FINISH".

However, I didn't discourage myself on my first attempt, I keep telling myself your still a student, you're still learning. You choose this crazy path, so just keep going until you fully understand the code you use.

Finally, I made it! Another late submission, but with full of confidence, that I did something right :-)

Learn More of those ff:

  • Responsive website properties
  • SAAS
  • Bootstrap
  • Display: grid properties
  • and more...

Site map of the Portfolio webpage I created:

Index.html Portfolio.html
Top Banner Top Banner
Navigation Bar Navigation Bar
Hero Section Hero Section 
i. Welcome Msg    |    i. Loading Msg
ii. Contact form  |

Skillset section | i. Title | ii. (6) softwares | Footer section | Footer section i. Sitemap | i. Sitemap
ii. Socials Link | ii. Socials Link iii. Copyright Msg| iii. Copyright Msg

Mock-up image:

home screenshot portfolio screenshot

Procedure of building:

  1. Research for website inspiration
    1. Draw the draft in a piece of paper ; planning of website container
  2. Create folder inside your git master local drive.
    1. Folders to be created:
      1. css (stored css files)
      2. content / assets (stored images, mp4)
  3. Open VS Code and start coding
  4. Open Aodbe Illustrator
    1. to create favicon
    2. colour matching for web use
    3. create graphics featured on my portfolio website
  5. After finalising the output web result > Open Gitbash in your master folder
  6. Git init > git add . > commit > git push
  7. Touch README.md file > git add. > commit > git push
  8. Deployed!!!!

Third party source and web inspiration:

Pexels, font awesome, saaslandingpage.com(inspo)

Thank you, for taking time reading my README.md, hope it makes sense to the reader :-)