Beginner's Roadmap for HTML, CSS

Beginner's Roadmap for
❍ HTML
❍ CSS

with practice problems and project ideas.
⇩
➊ HTML Topics (Basics)
➀ HTML Page Structure
➁ Elements, Tags & Attributes
➂ Empty/Void Element
➃ Heading Elements
h1 to h6
➄ Paragraph Elements
p, br etc.
➅ Container Elements
div, span etc.
➆ Form Based Elements
form, input, textarea, select,
button, datalist etc.
➇ Text Semantics
b, i, u, sub, sup,
small, strong, em, q, abbr etc.
➈ Text Blocks
blockquote, address
➉ Hyperlink
➀➀ Image
alt, max-width, aspect-ratio
➀➁ Lists
ordered, unordered
➀➂ Table
➀➃ Semantic Elements
header, footer, nav etc
➀➄ id and, class attributes
➀➅ Including Stylesheets
➀➆ Including JavaScript Files
➀➇ Setting FavIcon
➀➈ Setting Title

➋ CSS Topics (Basics)
➀ Box Model
➁ selectors and, combinators
➂ border, margin, padding, and outline
➃ border-radius
➄ background
➅ colors
simple, gradient, alpha transparency
➆ fonts
➇ display
block, inline, inline-block, etc.
➈ position
relative, absolute etc.
➉ dimension
top, left, height, width,
max-width, aspect-ratio etc.
➀➀ float
➀➁ overflow
➀➂ z-index

➌ CSS Topics (Medium)
➀ Specificity
➁ pseudo classes, elements
➂ opacity
➃ filter
➄ clip-path
➅ mask
➆ transform
➇ media
➈ Flex Box Layout
➉ Grid Layout
➀➀ animation

➍ HTML Topics (Medium)
➀ figure
➁ audio
➂ video
➃ map
➄ object
➅ embed

➎ Advanced Topics
➀ SEO
➁ Accessibility
➂ Responsiveness
➃ Performance

🚥 Notes
⬘ You can learn HTML and CSS in parallel.
⬗ For each HTML element, play with all its CSS properties.
⬙ The best approach would be to build a sample project along with learning.
⬖ Do not stop after this. At some point, learn JavaScript.

👩‍💻 Practice CSS
👩‍💻 Practice 50+ CSS Problems
Level of Difficulty: Easy to Medium
Problems on:
➊ CSS Selectors
➋ Background
➌ Border
➍ Margin
➎ Padding
➏ Outline
➐ Text
➑ Position
➒ Overflow
➓ Height/Width

➊ CSS Selectors
➀ Colour all p elements to pink
➁ Colour the element with id "elem" to blue
➂ Colour all the elements with class "redpara" to red
➃ Write minimal code to colour all p and, section elements to green

➋ Background
➀ Set entire page's background colour to gray
➁ Set background image for the entire page
➂ Show the background image repeating horizontally/vertically
➃ Show the background image at the top left corner and not repeated
➄ Show the background image fixed

➌ Border
➀ Show dotted border to a paragraph
➁ Set top border double, left border dotted, right border dashed and bottom border solid.
➂ Set border of 3px, double and color yellow to a h1
➃ Set the right border to dotted
➄ Draw a circle of radius 18px
➅ Draw an ellipse of radius 25px, 35px
➆ Draw a ring of radius 70px and width 15px

➍ Margin
➀ Set a margin of 10px to a button
➁ Set margin of 20px horizontally and 5px vertically to a paragraph
➂ Set different margin values for each side of an h1 element

➎ Padding
➀ Set top padding of a h1 element to 20px
➁ Set padding of 25px on each side to a paragraph
➂ Set padding of 15px horizontally and 10px vertically to a paragraph

➏ Outline
➀ Set a 10px solid outline border for a div element
➁ Set the outline border color to green for a paragraph

➐ Text
➀ Center align the text inside a p element
➁ Justify the text inside a p element
➂ Center align only the last line of text inside a p element
➃ Justify the last line of text inside a p element
➄ Style the text inside a paragraph to all uppercase
➅ Style the text inside a h1 to capitalized
➆ Remove underline from a hyperlink
➇ Strike through a text
➈ Display both overline and underline for a text
➉ Give space of 7px between letters
➀➀ Give space of 0.7 between lines in a paragraph
➀➁ Give space of 12px between words
➀➂ Display a text in a paragraph from right-to-left
➀➃ Indent the first line of a paragraph with 10px
➀➄ Display shadow of 7px (both horizontally and vertically) to a text inside a div
➀➅ Add a blur of 8px to the shadow

➑ Position
➀ Position some text on the top left corner of an image
➁ Position some text on the top right corner of an image
➂ Position some text on the bottom left corner of an image
➃ Position some text on the bottom right corner of an image
➄ Position some text on the centre of an image
➅ Display some text fixed at a specific position in a page
➆ Display some sticky text in a page

➒ Overflow
➀ Hide the scroll bar for an overflown paragraph
➁ Display the scroll bar to a paragraph only when it's overflown

➓ Height/Width
➀ Set the width of a paragraph to be half of the page.
➁ Set the height to 200px for a div
➂ Set the min width to 100px and max width to 300px for a p element
➃ Make an image responsive of the screen size

🏁 Finally
Consider practising these problems
❍ For making hands dirty with CSS
❍ To get a feel of "CSS is fun"
❍ For getting the confidence to design web pages
❍ For getting the required knowledge to build projects
❍ For interview preparation