Create and style the "Template programmed by students" block

[AliHassan7]

Set up:

• Before working on this task, ensure that you have successfully downloaded Drupal Console by completing this short task: Install Drupal Console

• To begin working on this task, create a branch based off of the updated develop branch using the following convention: proj-me-initials-47

• This task involves creating a custom block that will be placed inside our custom proj_me_core custom module. Ensure that you have already created the custom module from the following task: Create a custom module using the Drupal Console

• Let us use the Drupal console to create a custom block which will contain HTML for the "Template programmed by students" block!

  • Inside of vagrant and in proj-me, run the following command to create a custom block using Drupal Console: vendor/drupal/console/bin/drupal generate:plugin:block.
  • First question that the Drupal Console will ask you is "Enter the module name". Drupal Console is asking which module you want to put this custom block in. We want to put this custom block in our custom module that we created in the task mentioned earlier, so answer this question by typing the modules machine name: proj_me_core.
  • Enter the plugin class name: DebugAcademy
  • Enter the plugin label: Debug Academy Block
  • Enter the plugin id: debug_academy_block
  • Enter the theme region to render the Plugin Block: (Just hit Enter on your keyboard and it'll go to the next question)
  • Do you want to load services from the container: no
  • Do you want to generate a form structure: no
  • Do you confirm generation: yes
  • You have successfully created a custom block inside of a custom module. How impressive is that!

• To place your block in the footer region, navigate to Structure » Block Layout and place it in the footer region. (Under footer region, click on Place block and Search for the "Debug Academy" custom block).
  To see the code of your block, use your file finder to navigate to your custom module located at proj-me/web/modules/custom/proj_me_core/ and use sublime text to open the file located at src/Plugin/Block/DebugAcademy.php.

  • To add HTML to your custom block, place your HTML inside the single quotation marks following $build['debug_academy_block']['#markup'] =.

• This task consists of Adding the "Template programmed by students of the career-changing Debug Academy." text. You can style the block using SASS and then compiling it like you have been. Note that "Debug Academy" should be highlighted, underlined, and should link to debugacademy.com

• For your convenience, an image of the design has been added to the bottom of this issue.

• The background color of the block is #181818. The font color is #525252. The "Debug Academy" color is #ffae3f.

• This color of the bottom border should be #292929.

• Apply other SASS styling as necessary

• Upon completion of the task, please commit and push all your work to your fork of the proj-me repository. You do not need to export your configuration for this task. Remember to create a pull request.

• Leave a comment on this issue when you:

  • Start working on this task
  • Have a question about this task
  • Complete this task (please comment on this task with a link to your pull request).

[AliHassan7]

[ByronGary]

working

[ByronGary]

finished 0bf418c

[msheikh12]

Started working

[msheikh12]

Completed #82