Week Three

HTML & CSS, Project Management Techniques

During week 3 we learned about flex boxes and project management

We learned a lot about the agile methodology as well as scrums

Our lessons were as follows:

Monday - Flexboxes and more project work

Flex boxes are a good way to organize and layout your site, it has multiple related attributes, flexboxes are a very expansive topic that I suggest reading up on

You can read up on flexboxes here

Or you can read my wednesday notes which look into flexboxes more indepth

Tuesday - Project management and project work
We worked on a task around building a database for an archery club app as well as designing a ui for the app as well with a colour scheme of red with black and white, it also had some specific requirements such as being able to create an account, see average score, and look at older rounds as well as inputting new rounds


Wednesday - Flex boxes in depth and project work

Because of the importance of flex boxes, here is a look into all of the settings related to and around flex boxes

To make a container a flex box you can initialize it with the line "display:flex;"

Flexbox has a lot of related attributes which are:

Flex-direction - the direction items are stacked in

• Column - top to bottom
• Column-reverse - bottom to top
• Row - left to right
• Row-reverse - right to left

Flex-wrap - whether items should wrap or not

• Wrap - items will wrap if necessary
• Nowrap - items will not wrap (default)
• Wrap-reverse - items will wrap if necessary, in reverse order

Flex-flow - shorthand for setting both flex-direction and flex-wrap

example: "flex-flow: row wrap;"

Justify-content - used to align flex items

• Center - items will be aligned at the center of the container
• Flex-start - items will be aligned at the start of the container (default)
• Flex-end - items are aligned at the end of the container
• Space-around - displays items with space before, between, and after the lines

Align-items - also used to align flex items

• Center - aligns items in the middle of the container
• Flex-start - aligns items at the start of the container
• Flex-end - aligns items at the end of the container
• Stretch - stretches items to fill the container (default)
• Baseline - aligns items so that their baseline aligns

Align-content - aligns the flex lines

• Space-between - displays flex lines with equal space between them
• Space-around - displays the flex lines with space before, between, and after them
• Stretch - stretches the flex lines to take up remaining space (default)
• Center - displays the flex lines in the middle of the container
• Flex-start - displays the flex lines at the start of the container
• Flex-end - displays the flex lines at the end of the container

This is all of the related attributes for flexboxes that I could find, and also the reason I do not enjoy doing css notes however knowing about these are essentially for properly styling a site

Thursday - Project management and project work
We learned more about the software development cycle as well as learning how to do pseudo code using a flowchart to show a program flow
The agile Workflow is an iterative workflow where you constantly repeat reviewing and developing the software until it is in a release ready state
The agile workflow is broken up into multiple steps:
• Concept - the general idea and basic requirements of the software
• Design - fleshing out the concept with UI designs and pseudo code
• Develop - Coding feature and putting features into the main software
• Testing - testing all possible inputs including extremes to prevent it from breaking whilst a user is using the software
• Deploy - The code is deployed to a test group who will use the product and provide feedback
• Review - The current state of the software and all user reviews are considered and investigated to further improve user experience
• Release - The final product is released and is at a fully functional state with minimal bugs
• Maintenance - The software is updated and maintained regularly to squash any missed bugs and to further improve the software if necessary
The stages Design, Develop, Testing, Deploy, Review are repeated until it is a release ready software, this is the iterative part of the agile workflow, one iteration is often referred to as a sprint

Friday - Code Wars challenges assessment and Project work

We did an assessment where we were given an hour to beat 3 katas (coding challenges) at the level of 8,7,6 Kyu (increasing difficulty in lower numbers), I found them relatively easy, with the most interesting part being researching the toString() method and how it can convert between decimal, binary and hexadecimal

I personally extremely enjoy the small coding challenges that code wars provides as they feel very similar to a puzzle game, giving me satisfaction with every single one I complete, my current honour (score) is at 350 and it will probably increase a lot more as I frequently use code wars in my free time to sort of detox from any violent or stressful games I play, or I go on code wars when I've run out of puzzle games to play and am still in the mood for a mental challenge



Aside form code wars, we worked on our project which is this site, which is due in today however I will continue to update this throughout the whole course as it is a good way to consolidate what I learned and look back at anything I might have missed