How to Learn HTML, CSS, DOM, Styled Components Quickly
#WEEK2DAY3
--
The advice that I liked was basically don’t try to learn it that much after the basics. You can always look em up, as you need them.
HTML
It’s basically these tags and the information is embedded in em.
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<title>Our first responsive web page with HTML5 and CSS3</title>
<meta name="description" content="A basic responsive web page – an example from Chapter 1" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="Header">
<a href="/" class="LogoWrapper"><img src="img/SOC-Logo.png" alt="Scone O'Clock logo"/></a>
<p class="Strap">Scones: the most resplendent of snacks</p>
</div>
<div class="IntroWrapper">
<p class="IntroText">Occasionally maligned and misunderstood; the scone is a quintessentially British classic.</p>
<div class="MoneyShot">
<p class="ImageCaption">Incredible scones, picture from Wikipedia</p>
</div>
</div>
<p>Recipe and serving suggestions follow.</p>
<div class="Ingredients">
<h3 class="SubHeader">Ingredients</h3>
<ul></ul>
</div>
<div class="HowToMake">
<h3 class="SubHeader">Method</h3>
<ol class="MethodWrapper"></ol>
</div>
</body>
</html>
Looks like that, but we want it to look sexy.
We do this with a combination of HTML and CSS.
Add this nifty html tag to html to make it more mobile friendly.
<meta name="viewport" content="width=device-width,initial-scale=1.0" />With the viewport meta tag we can also specify which zoom levels to allow:
<meta name="viewport" content="width=device-width, maximum-scale=3, minimum-scale=0.5" />Or disable it all together:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />Meta is part of the void tags:
area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr
For a full reference of all the HTML5 tags: https://www.w3.org/TR/html52/textlevel-semantics.html#textlevel-semantics
Here’s a boilerplate HTML to get started: https://html5boilerplate.com/
This is another useful resource to validate a site: https://validator.w3.org/
Semantic HTML
People can usually tell the hierarchy of your site and make sense of it. But HTML would also like crawlers to be able to understand your site. So semantic HTML tags help it to understand which part go together and what the main functionality of certain parts are.
- Main — there should only be one
<main>section - Section — there can be more than one, not for styling, if your section needs a
h1-h6then use it otherwise use a<div> - Nav — used for lots of links bundled together
- Article — for news content or blogs
- Aside — used for: quotes, ads, navigation items related to the main content
- Header — these are not just for the body, these can be inside every
<section> - Footer — just like header
- Address — this contains the contact information for the nearest body or article
You can use tools like this to check the outline of your web page, and make sure than search engines will understand the page.
Div
Semantically it should be your last choice, because it has 0 semantics, but also because of that, it is the most used tag.
p
Used for paragraphs, or any text that doesn’t fall into the other semantic text tags
Figure
Here’s how to use these:
<figure class="MoneyShot">
<img
class="MoneyShotImg"
src="https://assets.codepen.io/6362753/scones.jpg"
alt="Incredible scones baked to perfection and ready to eat"
/>
<figcaption class="ImageCaption">
This image isn't of scones I have made, instead it's a stock photo from Wikipedia
</figcaption>
</figure>Details and Summary
Here’s how to implement these:
<details>
<summary>I ate 15 scones in one day</summary>
<p>
Of course I didn't. It would probably kill me if I did. What a way to go.
Mmmmmm, scones!
</p>
</details>To make it open by default:
<details open>
<summary>I ate 15 scones in one day</summary>
<p>
Of course I didn't. It would probably kill me if I did. What a way to go.
Mmmmmm, scones!
</p>
</details>Inline or Text Level Tags
- Span — unopinionated tag, you might wanna wrap a text in this to style it
- b — think keywords, to undo the font weight
font-weight: normal; - Strong — to emphasize for importance, urgency
- Em — use to emphasize something, for styling but no emphasis use
i - i — use to show this element is different from the rest of the items
Obsolete Tags
- strike
- center
- font
- acronym
- frame
- frameset
- hgroup
Media Tags
<video src="myVideo.mp4"></video>
<audio src="myAudio.mp3"></audio>With additional attributes:
<video src="myVideo.mp4" width="640" height="480">
If you're reading this either the video didn't load or your browser is waaaayyyyyy old!
</video>With control attributes:
<video src="myVideo.mp4" width="640" height="480" controls autoplay>
If you're reading this either the video didn't load or your browser is waaaayyyyyy old!
</video>With even more functionality, basically for free:
<video src="myVideo.mp4" width="640" height="480" controls autoplay preload="auto" loop poster="myVideoPoster.png">
If you're reading this either the video didn't load or your browser is waaaayyyyyy old!
</video>With alternate media sources:
<video width="640" height="480" controls preload="auto" loop poster="myVideoPoster.png">
<source src="myVideo.mp5" type="video/hvec265" />
<source src="myVideo.mp4" type="video/mp4" />
<p><b>Download Video:</b> MP4 Format: <a href="myVideo.mp4">"MP4"</a></p>
</video>Type attribute tells the browser what this content’s MIME type is.
To make it responsive:
video {
max-width: 100%;
height: auto;
}For embedded videos, this tool can help you find the right CSS to copy and paste:
CSS
img {
max-width: 100%;
}This will make sure the image will grow to its 100% size within the bounds of the container.
img {
width: 100%;
}Whereas this will stretch the smaller logo image so that it fills up the entire container. The image will look bad.
Media Queries
Media queries allow us to set conditions for each CSS class.
Some terminology before we get started:
- Breakpoint — is the screen viewport the current device is using
- Viewport — height and width of the browser or screen
@media screen and (min-width: 800px) {
/* styles */
}This is basically the gist of making responsive design. Have different styling based on the screen size, and you set those breakpoints this way.
It seems like everyone has an approach they like. Some say start with mobile screens then go up.
Some say the opposite. Some say have the basic styling first, when you need a different behaviour then use media queries.
But most say, smallest screen first.
Media queries are kind of a conditional logic for CSS.
Reflections
- I find React part really simple, but the CSS part is more convoluted so I will spend some time learning CSS and that time will have to come off of React and AntDesign
Specifically, I’d like to learn more about:
- Fluid Layout
- Flexbox
- Responsive Images
- CSS Grid
- Selectors, type, color
- SVGs
- Transitions, Animations
- Forms
