HTML & CSS
Some useful references to go through to refresh your HTML & CSS knowledge:
- HTML5 Tutorial by MDN Web Docs: HTML5 is a markup language used for structuring and presenting content on the World Wide Web.
- CSS 3 Tutorial by MDN Web Docs: CSS3 stands for Cascading Style Sheet level 3, which is the advanced version of CSS. It is used for structuring, styling, and formatting web pages. Several new features have been added to CSS3, and it is supported by all modern web browsers.
- Learn to Code HTML & CSS: By designer & front-end developer Shay Howe.
- Code Guide: Standards for developing consistent, flexible, and sustainable HTML and CSS.
- HTML Cheat Sheet: To have an all-in-one place under the hood for HTML.
- Semantic HTML: Using HTML elements to structure your content based on each element’s meaning, not its appearance.
- CSS Cheat Sheet: To have all-in-one place under the hood for CSS.
- Flexbox Froggy: Flexbox Froggy is a game for learning CSS flexbox.
- CSS Flexbox Fundamentals Visual Guide: A fundamental guide to learning CSS Flexbox.
- CSS Grid Garden: Grid Garden is a game for learning CSS grid layout.
- Learn CSS Layout: To learn CSS layout, you can follow this article.
- Learn BEM—Block Element Modifier: BEM is a front-end naming method for organizing and naming CSS classes. The Block, Element, Modifier methodology is a popular naming convention for class names in HTML and CSS. It helps to write clean CSS by following some simple rules.
- BEM Best Practices – BEM-Examples: BEM best practices and examples.
- SASS: CSS Preprocessor.
Try it out!
1. Create a responsive layout where there are three columns on large screens, but on smaller screens, the columns stack vertically. Each column must have equal width and contain dynamic content.
<!DOCTYPE html>
<html>
<head>
<title>Sample Page </title>
<style>
.container{
display:flex
}
.column{
flex: 1;
padding: 10px;
background-color: #d3d3d3;
margin: 5px
}
</style>
</head>
<body>
<div class="container">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>
</body>
</html>
Ideas to Explore:
- What are semantic tags? Why are they used?
- What are data attributes in HTML, and how can they be used in JS?
- What are the differences between different position values?
- What are pseudo-classes and pseudo-elements in CSS? Read about their differences.
Quizzes