This is the individual task that was required to understand the CSP requirements and how I can improve my own work.
Performance Task Grading Comment
Here is the AGILE Manifesto that we all decided on and created on Friday! These rules are in a 'ReadMe' file in our organization so anyone can access it when they need to!
AGILE Manifesto
This is a SCRUM board, labels, and milestones I made for the team where we can track the progress of the work ( I am still figuring out how to link the wireframes to pull reqs.!!). The milestones are a good way of making deadlines for the team so we can get things done and on track! I renamed the labels since they were hard to read if you didn't understand them/just looked at them, so I made them more readable at a first glance. The labels and milestones can be linked to an issue/project on the SCRUM board, the 'help wanted' label is a good way to communicate to your team that you need help on something on the SCRUM board! (the SCRUM board is accessible to the entire team, this means we can all see who is working on what since there are 'assignees' clearly labeled on the side)
Team SCRUM BoardMilestones!Labels
--
Down below is my exploration into CSS and HTML! At the beginning of the week I made a wireframe from the topic that the group agreed on (Cars/Storefront), I collected details on what some of these websites looked like, I explored websites like Amazon and car company websites like Toyota. Using the data I gathered I saw similarities in some of the formatting and created this wireframe. (also explored [chatGPT]() and auto generated the prompts, logo, and CTAs)
Wireframes for Website Draft
After creating the wireframe I researched more about CSS and used this link and this [link]() to help me understand CSS and HTML better. I realized that CSS is somewhat similar to Markdown in which when you get the hang of things and understand what does what, it becomes easier. During this exploration I decided that five key features I should use in the mock-up of the wireframe are: animations, intractable features, fonts!!, centering/formatting a website(grids[I haven't really done this yet]), and backgrounds!
Intractable Features:
Most of the pieces on the website are intractable, but they only link back to the 'home' page since I didn't link it back to anything else yet!!
the 'logo' on the top left of the page, when clicked it brings user back to home
CTA btns will serve a purpose and link to new pages, when clicked it will link to assigned pages
'Find Your Dream Car Today' will eventually link to the 'INVENTORY' page
Fonts:
Google has a helpful website where you can choose what fonts you want! They also have a feature where the font can be copyable into HTML and CSS
Google fonts website where they turn the font to code for you!:
What my code looks like with the copied links:
Centering/Formatting:
The centering and format is simple when you understand it, I usually have my Gem open/the server website so I can always reload the page to see if the object is where I want it to be! The 'align items' code helps align items since they use the default alignment!! Padding is basically space around the object!
Backgrounds:
The class has done backgrounds before and I just added a color/filter over it, I also used a gif for a movable background. Using a gif doesn't change the format for adding images you can just add images/banner.gif which, if you wanted to do a solid image it would be images/banner.png
Transitions:
I don't know if transitions can be animations (sort of)?? But using this it can add cool details to the website where the users cursor can interact with. I tried to do an underline transition for the CTA btns and I also looked at putting shapes around text, with transitions. Before removing the underline of the CTA it looked like a [link]() like that. The transition controls the animation speed. 'hover:' is basically when the cursor is above the element!!
Here is the 'Find Your Dream Car Today' box coding and transitions. The code is somewhat similar other than the formatting but, there is a border for the project! The 'cursor: pointer;' means the cursor turns to pointer when the box is hovered.
Hacks Week #17
This is the individual task that was required to understand the CSP requirements and how I can improve my own work. Performance Task Grading Comment
Here is the AGILE Manifesto that we all decided on and created on Friday! These rules are in a 'ReadMe' file in our organization so anyone can access it when they need to! AGILE Manifesto
This is a SCRUM board, labels, and milestones I made for the team where we can track the progress of the work ( I am still figuring out how to link the wireframes to pull reqs.!!). The milestones are a good way of making deadlines for the team so we can get things done and on track! I renamed the labels since they were hard to read if you didn't understand them/just looked at them, so I made them more readable at a first glance. The labels and milestones can be linked to an issue/project on the SCRUM board, the 'help wanted' label is a good way to communicate to your team that you need help on something on the SCRUM board! (the SCRUM board is accessible to the entire team, this means we can all see who is working on what since there are 'assignees' clearly labeled on the side) Team SCRUM Board Milestones! Labels
--
Down below is my exploration into CSS and HTML! At the beginning of the week I made a wireframe from the topic that the group agreed on (Cars/Storefront), I collected details on what some of these websites looked like, I explored websites like Amazon and car company websites like Toyota. Using the data I gathered I saw similarities in some of the formatting and created this wireframe. (also explored [chatGPT]() and auto generated the prompts, logo, and CTAs) Wireframes for Website Draft
After creating the wireframe I researched more about CSS and used this link and this [link]() to help me understand CSS and HTML better. I realized that CSS is somewhat similar to Markdown in which when you get the hang of things and understand what does what, it becomes easier. During this exploration I decided that five key features I should use in the mock-up of the wireframe are: animations, intractable features, fonts!!, centering/formatting a website(grids[I haven't really done this yet]), and backgrounds!
Intractable Features: Most of the pieces on the website are intractable, but they only link back to the 'home' page since I didn't link it back to anything else yet!!
Fonts: Google has a helpful website where you can choose what fonts you want! They also have a feature where the font can be copyable into HTML and CSS
Google fonts website where they turn the font to code for you!:
What my code looks like with the copied links:
Centering/Formatting: The centering and format is simple when you understand it, I usually have my Gem open/the server website so I can always reload the page to see if the object is where I want it to be! The 'align items' code helps align items since they use the default alignment!! Padding is basically space around the object!
Backgrounds: The class has done backgrounds before and I just added a color/filter over it, I also used a gif for a movable background. Using a gif doesn't change the format for adding images you can just add images/banner.gif which, if you wanted to do a solid image it would be images/banner.png
Transitions: I don't know if transitions can be animations (sort of)?? But using this it can add cool details to the website where the users cursor can interact with. I tried to do an underline transition for the CTA btns and I also looked at putting shapes around text, with transitions. Before removing the underline of the CTA it looked like a [link]() like that. The transition controls the animation speed. 'hover:' is basically when the cursor is above the element!!
Here is the 'Find Your Dream Car Today' box coding and transitions. The code is somewhat similar other than the formatting but, there is a border for the project! The 'cursor: pointer;' means the cursor turns to pointer when the box is hovered.
Next Week:
Product View and Cards!!