slides: https://docs.google.com/presentation/d/1M8S2UG9BvLPo17W6idXiWohRywQAYWH2F4VPiINn9gk/edit?usp=sharing zip file and website link: https://kyledharam.com/webdesign2 worldofsharks.zip Throughout this course, I learned how to better use HTML and CSS. Bulma was one of my favorite tools because it made layout and responsiveness easier, and I liked seeing live examples of how it works. I also got more confident using box models, flexbox, and… Continue reading The world of sharks link/reflection Kyle Dharam

Kyle Dharam First draft I might make it informative about sharks with a clean, minimalistic layout. Figuring out the layout right now Using Bulma for this

I like both Tailwind (Functional CSS) and Bulma (Component-based CSS), but I got confused with the terminal when using Tailwind at first. Overall, I prefer both but found Bulma simpler to start with, but Tailwind offers more flexibility once I get used to it.

Here are some Bulma components that are useful for building something quickly Here are some useful Bulma components for building quickly:

Kyle Dharam The reason for targeting direct children instead of all children is to apply the skew effect only to the parent while keeping the content inside the direct children upright. .parent { transform: skewY(-10deg); // Skew the parent > .child { // Target only direct children transform: skewY(10deg); // De-skew direct children to keep… Continue reading week7 natours with sass pt3

Kyle Dharam The :not pseudo-class in CSS is used to select elements that do not match a given selector /* Select all paragraphs except those with the class ‘exclude’ */p:not(.exclude) {color: red;} In this example, all <p> elements will have red text, except for those with the class exclude.

Kyle Dharam

Kyle Dharam In the tutorials 2 interesting CSS features were: not() Pseudo Selector: The :not() pseudo selector is used to apply styles to elements that do not match a certain selector. For example, to style all buttons except those with the class btn-outline-primary: button:not(.btn-outline-primary) { background-color: grey; calc() Function: The calc() function is used to perform calculations to determine CSS property values.… Continue reading natours with sass pt1 week4

week 3 Kyle Dharam // Define a color variable$primary-color: #3498db; // Use the color variablebody {background-color: $primary-color;color: #fff;} Using Sass variables allows you to maintain consistency in your stylesheets and makes it easier to update your colors. 

Kyle Dharam