Responsive-web-design

Learning challenge

DAY-1

BASICS OF HTML

• HTML Elements
• Creating headlines with h2 elements
• Paragraph element
• Intoduction to HTML5 Elements
• Adding images to the website
• Linking external pages with anchor elements
• Linking internal Sections of a Page with Anchor Elements

DAY-2

Implemented yesterday's learnings

OUTPUT/CODE

Hello People!

This is my Responsive Web Design Learning Challenge

This year I wanted to take up certain learning challenges to skill up, and Responsive web design is the first challenge I took up. It's my day-2 and I've tried implementing yesterday's learnings.

-> HTML Elements -> Creating headlines with h2 elements -> Paragraph element -> Intoduction to HTML5 Elements -> Adding images to the website -> Linking external pages with anchor elements -> Linking internal Sections of a Page with Anchor Elements.

So I have used all these concepts and implemented it to get a better idea on the topics.

You can keep an eye on my daily learnings on GitHub.

This links to my GitHub Repo

Thanks for checking this out, Have a nice day :)

DAY-3

Topics learnt

• Making dead links using Hash symbol
• Turning an image to link
• Creating Bulleteed Unordered List
• Creating Ordered List
• Adding Placeholder text to a text field
• Creating set of Radio Buttons
• Creating set of Checkboxes
• Using the Value attribute with Radio Buttons and Checkboxes
• Other basic HTML stuff like declaring DOCTYPE of HTML document etc.

DAY- 4 to 7 (CSS)

Topics Learnt

• Changing the color of text
• Using CSS selectors to style elements
• Using CSS Class to style elements
• Styling multiple elements with CSS class
• Changing font-size of element
• Setting the font family of an element
• Importing fonts from google
• Specifying how fonts should degrade
• Sizing the image
• Adding borders to the elements
• Using border-radius to make circular images and rounded borders
• Giving the div element a background color
• Setting an id for an element
• Using id attribute to style an element
• Adjusting the padding, margins
• Adding different padding, margins to each side of an element
• Using clock-wise notation to specify margin and padding of an element
• Using attribute selectors to style elements
• Understanding Absolute vs Relative units
• Inheriting styles from body element
• Prioritize one style over the other
• Overidding styles in subsequent CSS
• Overriding class declarations by styling ID attributes
• Overriding class declarations with inline styles
• Overriding all other styles using important
• Using Hex code (Hexadecimal code) to specify colors, mix colors
• Using abbreviated Hex code
• Using rgb values to color elements, to mix colors
• Using CSS variables
• Attaching fallback values to CSS variables
• Improving compatability with browser fallbacks
• Inheriting CSS variables
• Changing a variable for specific area
• Using media query to change a variable

With this, I finished the basic CSS required to learn for Responsive Web Design.