Skip to content

Matthew-Rizky-Hartadi/PBP-Assignment2

Repository files navigation

Link Heroku App

https://pbp-assignment-2-matthew.herokuapp.com/

To Do List website: https://pbp-assignment-2-matthew.herokuapp.com/todolist/

CSS

CSS can be divided into three types, namely inline, internalA, and external CSS. These types are differentiated based on the position of the CSS code. Inline CSS would have the CSS code inside of the HTML tag. Internal CSS would have the CSS code in a style tag in the HTML file (<style></style>). Lastly, external CSS would create a new CSS file, and then linked to the HTML file from the link tag. Each type has its pros and cons. You can easily and quickly insert CSS rules to an HTML page with inline CSS. That’s why this method is useful for testing or previewing the changes, and performing quick-fixes to your website, but, Adding CSS rules to every HTML element is time-consuming and makes your HTML structure messy. With internal CSS, since you’ll only add the code within the same HTML file, you don’t need to upload multiple files, however, it would increase the page's size and loading time. For external CSS, since the CSS code is in a separate document, your HTML files will have a cleaner structure and are smaller in size. But, Your pages may not be rendered correctly until the external CSS is loaded.

HTML5 Tag

a = defines a hyperlink

b = displays text in bold style

body = defines the document's body

br = produces single line break

button = creates a clickable button

div = specifies a division or section

footer = represents the footer of the document

form = defines an HTML form for user input

header = represents the header of a document

h1 - h6 = defines HTML headings

html = efines the root of an HTML document

img = represents an image

input = defines an input control

li = defines a list item

link = defines the relationship between the current document and an external resource

and many more.

CSS selectors

:active = selects an active link

::after = insert something after the content of each

element

::before = insert something before the content of each

element

:checked = selects every checked input element

:focus = selects the input element which has focus

:hover = selects links on mouse over

:link = selects all unvisited links

:nth-child(n) = selects every

element that is the second child of its parent

:valid = selects all input elements with a valid value

and many more.

Implementation

  1. Customizing the pages using CSS

In the main page, cards are created for each of the task. In the HMTL file, the information of the tasks are iterated inside a card class to make the information inside the card.

image

Add the css to make the card and the effects

image

image

Add CSS to the login, register and create-task pages as well with the added corresponding classes.

image

image

image

  1. Deploy to Heroku

To deploy to Heroku, firstly, create an app in your Heroku account. Then, copy API Key from your Heroku account and add 2 new repository secrets with your Heroku app name and Heroku API Key. Lastly, re-run the failed workflows. After the deployment status becomes successful, the application can be accessed from the link at the top of this file.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published