Saqib Waheed

100DayofCode

Challenge & Commitment

This is part of Alexander Kallaway's 100DaysOfCode challenge. More details about the challenge can be found here: 100daysofcode.com.

Commitment: I will code daily for the next 100 days.

Start Date	End Date
December 30, 2018	2019

Plan

• [-] Learn HTML
• [-] Learn CSS
• [-] Learn JavaScript
• [-] Become Familiar with DataBase(MongoDB)
• [-] Learn the basics of backend programming
• [-] Familarize myself with how everything flows and works together as a whole

Things I'll Do

👁‍🗨 Code review -[+] (https://www.freecodecamp.org/saqibwaheed)

1. Responsive Web Design Certification (300 hours)

Day 1: December 30, 2018 - Sunday

Basic HTML and HTML5

• Say Hello to HTML Elements
• Headline with the h2 Element
• Inform with the Paragraph Element
• Fill in the Blank with Placeholder Text
• Uncomment HTML
• Comment out HTML
• Delete HTML Elements
• Introduction to HTML5 Elements

Link to work:

• My FCC Code Portfolio

Day 2

Basic HTML and HTML5

• Add Images to Your Website
• Link to External Pages with Anchor Elements
• Link to Internal Sections of a Page with Anchor Elements
• Nest an Anchor Element within a Paragraph
• Make Dead Links Using the Hash Symbol
• Turn an Image into a Link
• Create a Bulleted Unordered List
• Create an Ordered List

Link to work:

• My FCC Code Portfolio

Day 3

Basic HTML and HTML5

• Create a Text Field
• Add Placeholder Text to a Text Field
• Create a Form Element
• Cerate a Submit Button to a Form
• Use HTML5 to Require a Field
• Creat a Set of Radio Buttons
• Creat a Set of Checkboxes
• Radio Buttons and Checkboxes by Default
• Nest Many Elements within a Single div Element
• Declare the Doctype of an HTML Document
• Define the Head and Body of an HTML Document

Link to work:

• My FCC Code Portfolio

Day 4

Basic CSS

• Change the Color of Text
• Use CSS Selectors to Style Elements
• Use a CSS Class to Style an Element
• Style Multiple Elements with a CSS Class
• Change the Font Size of an Element

Link to work:

• My FCC Code Portfolio

Day 5

Basic CSS

• Set the Font Family of an Element
• Import a Google Font
• Specify How Fonts Should Degrade
• Size Your Images
• Add Borders Around Your Elements

Link to work:

• My FCC Code Portfolio

Day 6

Basic CSS

• Make Circular Images with A Border Radius
• Adjust the Margin of An Element
• Adjust the Padding of An Element
• Use An Id Attribute To Style An Element
• Set the Id of An Element
• Give A Background Color To A Div Element

Link to work:

• My FCC Code Portfolio

Day 7

Basic CSS

• Use A Media Query To Change A Variable
• Change A Variable for A Specific Area
• Cascading Css Variables
• Improve Compatibility with Browser Fallbacks
• Attach A Fallback Value To A Css Variable
• Use A Custom Css Variable
• Create A Custom Css Variable
• Use Css Variables To Change Several Elements At Once
• Use Rgb To Mix Colors
• Use Rgb Values To Color Elements
• Use Abbreviated Hex Code
• Use Hex Code To Mix Colors
• Use Hex Code for Specific Colors
• Override All Other Styles By Using Important
• Override Class Declarations with Inline Styles
• Override Class Declarations By Styling Id Attributes
• Override Styles In Subsequent Css
• Prioritize One Style Over Another

Link to work:

• My FCC Code Portfolio

Day 8

Applied Visual Design

• Modify Fill Mode of An Animation
• Use Css Animation To Change the Hover State of A Button
• Learn How the Css Keyframes and Animation Properties Work
• Create A More Complex Shape Using Css and Html
• Create A Graphic Using Css
• Use the Css Transform Property Skewy To Skew An Element Along the Y Axis
• Use the Css Transform Property Skewx To Skew An Element Along the X Axis
• Use the Css Transform Scale Property To Scale An Element On Hover
• Use the Css Transform Scale Property To Change the Size of An Element
• Create Texture By Adding A Subtle Pattern As A Background Image
• Use A Css Linear Gradient To Create A Striped Element
• Create A Gradual Css Linear Gradient
• Adjust the Tone of A Color
• Adjust the Hue of A Color
• Adjust the Color of Various Elements To Complementary Colors
• Learn About Tertiary Colors
• Learn About Complementary Colors
• Center An Element Horizontally Using the Margin Property
• Change the Position of Overlapping Elements with the Z Index Property
• Push Elements Left Or Right with the Float Property
• Lock An Element To the Browser Window with Fixed Positioning
• Lock An Element To Its Parent with Absolute Positioning
• Move A Relatively Positioned Element with Css Offsets
• Change An Elements Relative Position
• Adjust the Hover State of An Anchor Tag
• Set the Line Height of Paragraphs
• Set the Font Size of Paragraph Text
• Set the Font Weight for Multiple Heading Elements
• Set the Font Size for Multiple Heading Elements
• Use the Text Transform Property To Make Text Uppercase
• Decrease the Opacity of An Element
• Add A Box Shadow To A Card Like Element
• Adjust the Size of A Header Versus A Paragraph Tag
• Adjust the Background Color Property of Text
• Create A Horizontal Line Using the Hr Element
• Use the S Tag To Strikethrough Text
• Use the Em Tag To Italicize Text
• Use the U Tag To Underline Text
• Use the Strong Tag To Make Text Bold
• Adjust the Height of An Element Using the Height Property
• Adjust the Width of An Element Using the Width Property
• Create Visual Balance Using the Text Align Property

Link to work:

• My FCC Code Portfolio

Day 9

Applied Visual Design

• Create Movement Using CSS Animation
• Create Visual Direction by Fading an Element from Left to Right
• Animate Elements Continually Using an Infinite Animation Count
• Make a CSS Heartbeat using an Infinite Animation Count
• Animate Elements at Variable Rates
• Animate Multiple Elements at Variable Rates
• Change Animation Timing with Keywords
• Learn How Bezier Curves Work
• Use a Bezier Curve to Move a Graphic
• Make Motion More Natural Using a Bezier Curve

Link to work:

• My FCC Code Portfolio

Day 10

Applied Accessibility

• Introduction to the Applied Accessibility Challenges
• Add a Text Alternative to Images for Visually Impaired Accessibility
• Know When Alt Text Should be Left Blank
• Use Headings to Show Hierarchical Relationships of Content
• Jump Straight to the Content Using the main Element
• Wrap Content in the article Element
• Make Screen Reader Navigation Easier with the header Landmark
• Make Screen Reader Navigation Easier with the nav Landmark
• Make Screen Reader Navigation Easier with the footer Landmark
• Improve Accessibility of Audio Content with the audio Element
• Improve Chart Accessibility with the figure Element
• Improve Form Field Accessibility with the label Element
• Wrap Radio Buttons in a fieldset Element for Better Accessibility
• Add an Accessible Date Picker
• Standardize Times with the HTML5 datetime Attribute
• Make Elements Only Visible to a Screen Reader by Using Custom CSS
• Improve Readability with High Contrast Text
• Avoid Colorblindness Issues by Using Sufficient Contrast
• Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information
• Give Links Meaning by Using Descriptive Link Text
• Make Links Navigatable with HTML Access Keys
• Use tabindex to Add Keyboard Focus to an Element
• Use tabindex to Specify the Order of Keyboard Focus for Several Elements

Link to work:

• My FCC Code Portfolio

Day 11

Responsive Web Design Principles

• Create a Media Query
• Make an Image Responsive
• Use a Retina Image for Higher Resolution Displays
• Make Typography Responsive

CSS Flexbox

• Use display: flex to Position Two Boxes
• Add Flex Superpowers to the Tweet Embed
• Use the flex-direction Property to Make a Row
• Apply the flex-direction Property to Create Rows in the Tweet Embed
• Use the flex-direction Property to Make a Column
• Apply the flex-direction Property to Create a Column in the Tweet Embed
• Align Elements Using the justify-content Property
• Use the justify-content Property in the Tweet Embed
• Align Elements Using the align-items Property
• Use the align-items Property in the Tweet Embed
• Use the flex-wrap Property to Wrap a Row or Column
• Use the flex-shrink Property to Shrink Items

Link to work:

• My FCC Code Portfolio

Day 12

CSS Flexbox

• Use the Flex Grow Property To Expand Items
• Use the Flex Basis Property To Set the Initial Size of An Item
• Use the Flex Shorthand Property
• Use the Order Property To Rearrange Items
• Use the Align Self Property

CSS Grid

• Create Your First Css Grid
• Add Columns with Grid Template Columns
• Add Rows with Grid Template Rows
• Use Css Grid Units To Change the Size of Columns and Rows
• Create A Column Gap Using Grid Column Gap
• Create A Row Gap Using Grid Row Gap
• Add Gaps Faster with Grid Gap
• Use Grid Column To Control Spacing
• Use Grid Row To Control Spacing
• Align An Item Horizontally Using Justify Self
• Align An Item Vertically Using Align Self
• Align All Items Horizontally Using Justify Items
• Align All Items Vertically Using Align Items
• Divide the Grid Into An Area Template
• Place Items In Grid Areas Using the Grid Area Property
• Use Grid Area Without Creating An Areas Template
• Reduce Repetition Using the Repeat Function
• Limit Item Size Using the Minmax Function
• Create Flexible Layouts Using Auto Fill
• Create Flexible Layouts Using Auto Fit
• Use Media Queries To Create Responsive Layouts
• Create Grids Within Grids

Link to work:

• My FCC Code Portfolio

Day 13

Introduction to the Responsive Web Design Projects

• Build a Tribute Page

Link to work:

• My FCC Code Portfolio

Day 14

• Build a Survey Form

Link to work:

• My FCC Code Portfolio

Day 15

• Build a Product Landing Page

Link to work:

• My FCC Code Portfolio

Day 16

Python-Crash-Course by Eric Matthes

“All of these projects are well thought out and presented in such a way that learning the subject matter and implementing it is much more an enjoyable pastime rather than an onerous task that must be completed. Eric took the time to deal with some rather complex projects and lay them out in a consistent, logical and pleasant manner that draws the reader into the subject willingly, which unfortunately, many authors fail to do.”

Chapter 1: Getting Started

• Hello World

Day 17

Chapter 2: Variables and Simple Datatypes

• Birthday
• Name

Day 18

Chapter 3: Introducing Lists

• Motorcycles
• Cars

Day 19

Chapter 4: Working With Lists

• Magicians
• Numbers
• Squares
• Players
• Foods
• Dimensions
• Sum
• List Comprehensions
• Exercise4.1
• Exercise4.2
• Exercise4.3
• Exercise4.10
• Exercise4.11
• Exercise4.13

Day 20

Chapter 5:If Statements

• Cars
• Toppings
• Magic Number
• Banned Users
• Voting
• Amusement Park
• Toppings2
• Toppings3
• Exercise5.3
• Exercise5.6
• Exercise5.7
• Exercise5.8
• Exercise5.9
• Exercise5.10
• Exercise5.11

Day 21

Chapter 6:Dictionaries

• Alien
• Favorite Languages
• Exercise6.1

Day 22

Chapter 6:Dictionaries

• Exercise6.2
• Exercise6.3
• Favorite Languages2
• Exercise6.4

Day 23

Chapter 6:Dictionaries

• Exercise6.5
• Exercise6.6

Day 24

Chapter 6:Dictionaries

• pizza
• Favorite_languages3
• Exercise6.7
• Exercise6.8
• Exercise6.9
• Exercise6.10
• Exercise6.11

Day 25

Chapter 7:User Input and While loops

• Parrot
• Greeter
• AGE
• Age.Comparison
• Rollercoster
• Modulo.Operator
• Even or Odd
• Exercise7.1
• Exercise7.2
• Exercise7.3
• Counting
• Parrot2
• Cities
• Counting2
• Exercise7.4

Day 26

Chapter 7:User Input and While loops

• Exercise7.5
• Exercise7.6
• Confirmed_Users
• Pets

Day 27

Chapter 7:User Input and While loops

• Mountain_Poll
• Exercise7.8
• Exercise7.9
• Exercise7.10

Day 28

Chapter 8: Functions

• Greeter
• Exercise8.1
• Exercise8.2
• Pets
• Keywords_Arguments