4th Week Homework

 

This week homework is to use a clip-path method on "My Calendar" to create a different shape while writing the following codes on Visual Studio Code application.


Codes on Visual Studio Code

 

Clip-path result
 


 

Comments

Post a Comment

Popular posts from this blog

Image
  11th Week Homework  Part 4 - Build an App with Responsive Features For this 11-week homework assignment, I am excited to delve into the development of a Responsive App or Responsive Web Design App, building upon the code from our previous homework on the Chrome website. Let's explore and create together! To create a Responsive Web Design Application on the Chrome website, utilize the following CSS and HTML codes within the Visual Studio Code. These codes will ensure a responsive layout, seamlessly transitioning from landscape to portrait styles and ensuring that elements are displayed side by side. It is recommended to leverage Developer tools on the website for optimal implementation. The provided codes encompass features such as My Calendars, color options for selecting a favorite color, and a Post-it note to enhance the overall user experience. For clarity, I am attaching a video to elucidate the main points of creating the Responsive Web Design. 
Read more
Image
  9th Week Homework  Part 2 Calendar – Calendar CSS Formatting Regarding the 9th-week homework, there's a requirement to include background text, caret icons on both the left and right sides of the calendar month, enhance the current-day cell with icons and color, insert customize icons on the date, and integrate post-it notes settings from the previous calendar lesson. To assist with this, I've included notes and provided images of the relevant code snippets for your reference. Let's tackle this task together to ensure a comprehensive understanding and successful implementation.  To begin, insert the following codes under the <style> <head> <body> in the existing code from the previous lesson. Ensure to update the year from 2020 to the current year. CSS Setting Code After inserting the initial codes, make adjustments to the CSS settings using the provided codes in Visual Studio Code. Depending on personal preferences, both numbers, font-size, ...
Read more
Image
  10th Week Homework  Part 3 Calendar – Add dialog, color option, and popup (Modal) In this week's assignment, I've upgraded the HTML code for the color selection dialog in My Calendar. The improvements include formatting enhancements for color options, button styles, and the addition of a checkmark feature for selecting personal favorite colors. The overall appearance of the color selection dialog box has been refined, ensuring a polished look with attention to detail, including the presentation of the selection symbol. As a finishing touch, I've inserted a post-it note dialog to enhance the user experience or make notes for anything. Firstly, I will be incorporating dialog codes into the existing HTML from the previous homework assignment. Meanwhile, I will be making adjustments to the data information, such as modifying dates, months, and the overall calendar layout. Dialog codes Dialog codes adjustment Secondly, I will be integrating color-option codes into the ...
Read more