Introduction

HTML5 CSS3 JS Bootstrap 4

Certificate

Planning

• Expected Time: 60h ( 50h flow with course and 10h practices)
• Finish day: 23/08/2018

---

Day 1: 12/08/2018

Today's progress:

• Finish Section 1: Overview course Build 3 Real World Websites Using HTML5, CSS3, JS, Bootstraps 4.
• Finish Section 2: Setup editor.
• Finish Section 3: Learning how to use Photoshop in slice websites

Throughts:

• I am interesting this course

Link(s) to work:

1. Section 1
2. Section 2
3. Section 3

Day 2: 13/08/2018

Today's progress:

• Finish Section 4: Learning use Bootstrap 4

Throughts:

• Using Bootstrap save time code
• Responsive very cool
• You can use css and instead of utility class but these classes buy you some time and reduce the amount of css that your run.

Link(s) to work:

1. Section 4

Day 3: 14/08/2018

Today's progress:

• Finish Section 5: Learning Perprocessors Sass and Less

  • DRY principle (don't repeat yourself)
    • Variables
    • Maxins
    • Functions
  • Maintainability
  • Readability
  • Natural Extension

• Finish Section 6: Trello The Project Manager

  • Trello keeps track of everything

• Finish Section 7: OpenCharity Overview

  • Overview require of a website

• Finish Section 8: Prepare File

  • Step-by-step prepare file for project
  • Using Trello to keep track work
  • Make structure project's folder

• Finish Section 9: Linking File + Implementing Style sheet

  • Link file and font
  • Making some variables for color and font

Thoughts:

• Using SASS and Less is save code
• Should see general before code
• Keep track the process while working
• How to use Photoshop export image and font
• Using less helps to better reuse code

Link(s) to work:

1. Section 5
2. Section 6
3. Section 7
4. Section 8
5. Section 9

Day 4: 15/08/2018

Today's progress:

• Finish Section 10: Nav Bar - Part 1
  • Implement HTML for navbar
• Finish Section 11: Nav Bar - Part 2
  • Using jQuery make animation when scroll
• Finish Section 12: Header - Part 1
  • Implement HTML for header
  • It consists of two main parts
• Finish Section 13: Header - Part 2
  • Implement CSS to header
• Finish Section 14: Get Involved section
  • Implement UI for Get Involved section

Throughts:

Link(s) to work:

1. Section 10
2. Section 11
3. Section 12
4. Section 13
5. Section 14

Day 5: 16/08/2018

Today's progress:

• Finish Section 15: Mission section
• Finish Section 16: Member section
• Finish Section 17: Event section
• Finish Section 18: Blog section
• Finish Section 19: Contact section and Footer

Throughts:

• Bootstrap Carousel is old slider and can't be easily customized.

Link(s) to work:

1. Section 15
2. Section 16
3. Section 17
4. Section 18
5. Section 19

Day 6: 17/08/2018

Today's progress:

• Finish Section 20: Enhancements

  • Animate.css library

• Finish Section 21: Testing

  • Testing performance website, bug, optimize file

• Finish Section 22: Repo

  • Overview how to make OpenCharity project

• Finish Section 23: 404 Overview

• Finish Section 24: 404 Prepare File

Throughts:

• Test website is importain
• Optimize the picture helps performance very fast

Link(s) to work:

1. Section 20
2. Section 21
3. Section 22
4. Section 23
5. Section 24

Day 7: 18/08/2018

Today's progress:

• Finish Section 25: 404 Start Code
  • Implement UI
  • Style page
  • Add animation
• Finish Section 26: Recap
  • A few other ways for 404 page
• Finish Section 27: Merkury Overview
  • Overview how to make Merkury project
• Finish Section 28: Prepare Files
  • Apply Trello steps
• Finish Section 29: Linking Files
  • define variables for font and color in style.less
  • use bootstrap 4, popper.js, jquery.js in project
• Finish Section 30: Navbar Part 1
  • Implement UI nav bar
  • Make nav bar by template nav bar in bootstrap 4 component
• Finish Section 31: Navbar Part 2
  • Implement animation for UI navbar by jquery

Throughts:

• Using z-index, @keyframes, position to this page.
• The jQuery API is great
• Make animation for page by @keyframes

Link(s) to work:

1. Section 25
2. Section 26
3. Section 27
4. Section 28
5. Section 29
6. Section 30
7. Section 31

Day 8: 19/08/2018

Today's progress:

• Finish Section 32: Header
  • Implement UI for header
• Finish Section 33: Services Section
  • Implement UI for services section
• Finish Section 34: Features Section
  • Implement UI for features section
• Finish Section 35: Drag and Drop Section part 1
  • Implement IO for drag and drop section
• Finish Section 36: Drag and Drop Section part 2
  • Improved UI for drag and drop section.
  • Using jQuery UI create action for task.

Throughts:

• @keyframes make animation easy
• jQuery ui makes dragging and dropping simple.

Link(s) to work:

1. Section 32
2. Section 33
3. Section 34
4. Section 35
5. Section 36

Day 9: 20/08/2018

Today's progress:

• Finish Section 37: Template Section
  • Implement UI for Template section
• Finish Section 38: Pricing Section
  • Implement UI for Pricing section
• Finish Section 39: Join - Section + Footer
  • Implement UI for Join section and Footer

Throughts:

• Remind of ::before display: inline display: flex

Link(s) to work:

1. Section 37
2. Section 38
3. Section 39

Day 10: 21/08/2018

Today's progress:

• Finish Section 40: Enhancements
  • Fix bug UI in small devices
  • Effects when crolling pages
• Finish Section 41: Testing
  • Compressing images.
  • Cross browser testing.
  • static sites host.
  • W3C markup validation server.
  • Website speed test.
  • Deloy website in biballoon.com
• Finish Section 42: Recap
  • Summarizes the code Merkury project process.
• Finish Section 43: Important Tips
  • Have three directions after learning this course

Throughts:

• CSS effect is quite interesting
• I was test build and deploy, directly from my GitLab repository.

Link(s) to work:

1. Section 40
2. Section 41
3. Section 42
4. Section 43

Day 11: 26/08/2018

Today's progress:

• Folder Structure include:
  • assets:
    • img
    • font
  • styles
  • script
• Finish html before code css.
• Using extension 'pixelperfect' or code to check distance elements.

Throughts:

• HTML CSS is not as simple as i throught.

Link(s) to work:

Day 12: 27/08/2018

Today's progress:

• Create folder structure for project
• Learn more about the functionality of each folder

Throughts:

• Should detail the tasks of each file in each folder

Link(s) to work

• Day 1

Day 13: 06/09/2018

Today's progress:

• Apply pixelpefect to merkury page
• Learn more about HTML CSS

Throughts:

• Understand the use of margin and padding in CSS
• Not confuse class name
• The order of restricting the use of z-index tags

Link(s) to work:

• Day 2

Day 14: 12/09/2018

Today's progress:

• Visual regression test
• Production build

Throughts:

• Visual regression test:
  • Apply regression test and its importance in frontend development
  • Jest to test all Javascript
  • Selenium WebDriver
  • Puppeteer
  • PhantomJS
  • After the test, if there is a difference, there are two options:
    • Reject code if too much deviation from the template
    • Accepted to meet according to code logic
• Production build
  • Have two enviroment:

    • Staging:

      • Dev and localhost:
        • Fast to build
        • Debugge able

    • Production:

        - Fast to run
        - Because: minify HTML, CSS, JS and obfucate JS
        - CSS: Critical/ above the fold, remove used CSS
      

Link(s) to work:

• none