Devil May Cry A zip file of it Devil May Cry Site Google Slides As I’ve learned from CSS in Web Design 1 this time, we use a file called Sass or SCSS, which can be complex if you’re trying to learn to put all your CSS codes into one by using the 7 –… Continue reading Final Post

In my project, I made a Devil May Cry website using Bulma for the layout and Sass for customization. Here is what I completed: Completed Use Bulma to lay out the website Inserted images for the website Replace Bulma’s danger color with another shade of red by using Sass Adjust the image size in the… Continue reading Devil May Cry website Punchlist

Week 9 Component-Based CSS Its styles are scoped to specific components. You create separate CSS files (or use CSS Modules, SCSS, or styled-components) for each UI component, keeping structure and style tightly coupled. Here are the advantages: Organized and readable: Styles are grouped by component, so it’s easy to find and edit them. Scalability: Great… Continue reading Week 9 – CSS Libraries Part 2

Week 8 1. Columns (.columns, .column) Why? – It’s because Bulma’s grid system is simple and flexible, allowing for quick layout structuring. Use Case: Creating multi-column layouts for sections like feature highlights, pricing tables, or image/text combos. 2. Navbar (.navbar) Why? It provides a responsive, mobile-friendly navigation bar with minimal setup. Use Case: Structuring site… Continue reading Week 8 – CSS Libraries and Tools

Week 7 Direct Children Selector (>): This selector targets only the immediate children of a specified element. It ensures that the styles are applied only to those elements that are directly nested within the parent. All Children Selector (space): This selector applies styles to all descendant elements, regardless of their depth in the hierarchy. This… Continue reading Week 7 – Natours with Sass part 3

Week 5 The :not pseudo-class selector in CSS is used to select elements that do not match a specified selector. This allows you to apply styles to elements while excluding others based on certain criteria. The :not selector can take any valid CSS selector as its argument. Here’s a simple example to illustrate how the… Continue reading Week 5 – natours about section

I chose this because it just feels like you are actually in the game at the palm of your hands when playing a mobile game and that everything has came to life from that game experience.

Week 3 folder Example of Sass: // Define a color variable $primary-color: #3498db; // Use the color variable in your styles .header { background-color: $primary-color; color: #ffffff; } .button { background-color: $primary-color; border: none; color: #fff; padding: 10px 20px; cursor: pointer; } .button:hover { background-color: lighten($primary-color, 10%); } $primary-color is the variable name while #3498db… Continue reading Week 3 – Intro to NPM and Sass

Week 2 folder – includes version 2 and 3, barely any changes   Shows more a lot of grids and as well as wrapping the image and text in the grid-box as you can see in the code Inherited properties are color and font-family which one of the properties that can change the color of… Continue reading Week 2 – How CSS Works

Here is a link to the version 1 of Natours project setup 🙂 (Just click on version01.html since if you put index.html in Cyberduck and go to the index of your website when clicking on the folder it’ll go straight to the website without looking at your files weird but okay) Week 1 Folder transform:… Continue reading Design 2 – Week 1 – Natours project setup and start