top of page

Bare-minimum mini website project 2: with only HTML & CSS

CSS stands for Cascading Style Sheets!

There is a very interesting blog post as;


Where the author has explained the concept of "How browsers resolve competing CSS styles" or specificity in technical terms, with a beautiful waterfall model as cascading.


The CSS Cascade is the way our browsers resolve competing CSS declarations.

Every time we write a CSS declaration (or rule), it will enter the CSS Cascade, which will determine whether or not it will end up as the final style. The further down the cascade a declaration falls, the less likely it will end up as the final style [1].



Inline Vs Block elements: Snapshot


  • em, i , sub, sup, etc are inline elements - The ones that don’t take the entire length of the web page horizontally.

  • Heading, paragraph, etc are block elements - It takes the entire length of the web page horizontally.


A note on CSS Color


Named Color

  • Rgb

  • Rgb (red, green, blue)

  • Min.=0 to Max.=255


Hexadecimal Color

  • Min.=0 to Max.=FF

  • 0 to 9 and A to F I.e. 10 to 15


Rgba

  • a = alpha channel > Transparency

  • 0 to 1


We can use the "opacity" attribute to make the entire element transparent or opaque.




The WebPage Snapshot



A snapshot on the blog project


A snapshot on the blog project second image


A snapshot on the blog project third image



The Code



/* Below is the HTML Code */



<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Bitter:wght@300;400;500;700&family=Mukta:wght@300;400;500;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="app.css"> <title>General Blog Post</title> </head> <body> <div class="hero"> <h1>The Post: Gen AI</h1> <p>Generative artificial intelligence (generative AI, GAI or GenAI) is artificial intelligence capable of generating text, images or other data using generative models, often in response to prompts.Generative AI models learn the patterns and structure of their input training data and then generate new data that has similar characteristics</p> <hr> </div> <div class="content"> <p class="info">18.08.2050 | <span>ALL ABOUT GEN AI</span></p> <h2>All About GEN AI</h2> <p class="headline">Improvements in transformer-based deep neural networks enabled an AI boom of generative AI systems in the early 2020s. These include large language model (LLM) chatbots such as ChatGPT, Copilot, Bard, and LLaMA, and text-to-image artificial intelligence art systems such as Stable Diffusion, Midjourney, and DALL-E. Companies such as <code>OpenAI, Anthropic, Microsoft, Google, and Baidu</code> as well as numerous smaller firms have developed generative AI models.</p> <p>Generative AI has uses across a wide range of industries, including software development, healthcare, finance, entertainment, customer service,sales and marketing, art, writing, fashion, and product design. However, concerns have been raised about the potential misuse of generative AI such as cybercrime, and the use of fake news or deepfakes to deceive or manipulate people.</p> <p>But wait! What if you want more than just normal text on your page? Another common thing you might see in web pages are quotes. To make quotes, we can use the <code>blockquote</code> element and style it accordingly, so it stands out a bit as a non-body text quote.</p> <blockquote class="quote">"Jung believed that the shadow self is not entirely evil or bad, but rather a potential source of creativity and growth. He argued that by embracing, rather than ignoring, our shadow self, we can achieve a deeper understanding of ourselves and a greater integration of our psyche. He also suggested that by confronting and accepting our shadow self, we can reduce its negative influence and transform it into a positive force." <cite>– A wise person</cite></blockquote> <hr> <h3>a new section</h3> <p>And just like that, we've got a new section of content separated by a <code>hr</code> element (a 'horizontal rule' or a divider) and a new heading. Isn't putting content together fun?</p> <p>Notice as well that when we entered in the <code>H3</code> content, it was all lowercase, but now it's in a nice Title Case, where the first letter of each word is capitalized. We did that with CSS! Using <code>text-transform: capitalize;</code> we can implement title cased content.</p> <h4>Heading 4</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est dapibus, viverra metus ac, fermentum libero. Integer lobortis enim ac arcu malesuada ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <h5>Heading 5</h5> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est dapibus, viverra metus ac, fermentum libero. Integer lobortis enim ac arcu malesuada ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <h6>Heading 6</h6> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est dapibus, viverra metus ac, fermentum libero. Integer lobortis enim ac arcu malesuada ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <h3>Common Font Sizing Approaches</h3> <h4><code>px</code> (pixels)</h4> <p>Pixels are the simplest way to hard code your font size. By default the browser sets the root font size to <code>16px</code>, but you can change the font size in the <code>body</code> element or any other HTML element by setting <code>font-size</code> to any number of <code>px</code>.</p> <h4><code>em</code></h4> <p><code>em</code> units size font relative to the parent element. For example, if the <code>body</code> element is <code>16px</code>, and a nested <code>div</code> element's font size is set to <code>1.5em</code>, the browser will multiply <code>16px</code> x 1.5, resulting in <code>24px</code> font in the <code>div</code>.</p> <h4><code>rem</code> (root em)</h4> <p>Root <code>em</code> units are similar to em, but they are relative to the root font size instead of the parent element of whatever is being styled. For example, if the root font size (the font size of the body element) is set to <code>16px</code>, and we have a <code>p</code> element nested many layers down with a <code>font-size</code> set to <code>2rem</code>, that paragraph will have <code>32px</code> font. If the body font size ever changes, this paragraph will also change accordingly.</p> <h4>Which one do I use?</h4> <p>Great question! Generally, people try to stick to using <code>em</code> or <code>rem</code> over <code>px</code>, since they make responsive typography that scales up and down across different device widths much easier. Using px for your font sizes is not as dynamic, and you may find that writing media queries to update all the various element font sizes in pixels at different screen widths is not the most scalable approach to typography. </p> <p>Between <code>em</code> and <code>rem</code>, rem has a nice advantage of all elements being relative to one single root font value, where nested elements with parent/child font size dependencies can still be hard to manage with em units. When writing responsive styles, rem allows you to simply update the root font size at different screen sizes and all elements using rem units will adjust themselves accordingly creating a super easy-to-manage typography size system.</p> <p>In small projects you may not have an issues hard coding pixelage, but it's always important to understand the drawbacks of writing styles that may not be responsive or dynamic.</p> </div> <footer> <ul> <li> <a href="#privacy">Privacy Policy</a> </li> <li> <a href="#terms">Terms & Conditions</a> </li> <li> <a href="#about">About</a> </li> <li> <a href="#contact">Contact Us</a> </li> <li> <a href="#info">More Info</a> </li> </ul> </footer> </body> </html>




/* Below is the CSS Code */


body { font-family: Mukta, sans-serif; font-size: 16px; margin: 0; padding: 0; letter-spacing: 0.5px; } h1, h2, h3, h4, h5, h6 { font-family: Bitter, serif; font-weight: 500; } h1 { font-size: 80px; font-weight: 400; letter-spacing: -1.5px; margin: 0; } h2 { font-size: 50px; letter-spacing: -0.5px; } h3 { font-size: 38px; letter-spacing: 0px; } h4 { font-size: 30px; letter-spacing: 0.25px; } h5 { font-size: 24px; letter-spacing: 0.25px; } h6 { font-size: 20px; letter-spacing: 0.25px; } code { color: #e95400; font-weight: bold; } .hero { background-color: #863ae8; height: 100vh; color: white; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; } .hero h1, .hero p { width: 75%; max-width: 900px; margin: 16px 0; } .hero hr { width: 50%; margin: 32px 0; } .content { max-width: 900px; margin: 0 auto; padding: 32px; } .content h3 { text-transform: capitalize; } .info { text-align: center; font-family: Bitter, serif; font-weight: bold; font-size: 14px; letter-spacing: 1.5px; } .info span { color: #e95400; } .headline { text-transform: uppercase; font-weight: 500; letter-spacing: 0px; margin: 40px 0; font-size: 18px; } .quote { font-style: italic; font-size: 14px; border-left: 2px solid #e95400; padding-left: 16px; margin: 32px 0 32px 32px; } .quote cite { display: block; font-weight: bold; margin-left: 20px; } footer { background-color: #863ae8; } footer ul { list-style: none; margin: 0 auto; width: 100%; max-width: 900px; text-align: center; padding: 28px 0; } footer ul li { display: inline; padding: 0 16px; } footer li a { text-decoration: none; color: white; } footer li a:hover { text-decoration: underline; }


The End.


Similar Projects:



References:

Comments


bottom of page