{data.title}
8 |
9 | 
14 |
16 | {data.description}
15 |
17 |
20 | Source - {data.source.name}
18 |Author - {data.author}
19 |Tajammul
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /6 - react/news-demo/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /5 - js/JS-Basics/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |Let's Learn ES6 Concept
15 | 16 | 17 | -------------------------------------------------------------------------------- /6 - react/assignment-react-1/README.md: -------------------------------------------------------------------------------- 1 | # assignment-react-1 2 | 3 | ### Build a simple webapp using reactjs and breaking bad api 4 | 5 | - Create a new react project (either locally or on codesandbox) 6 | - Create reusable card component 7 | - Use fetch to call breaking bad api (url - https://www.breakingbadapi.com/api/characters) 8 | - Store the response in state 9 | - Map that response to the Card component 10 | - Push it if you've developed it locally, deploy to netlify, and share link 11 | - If you have developed on codesandbox then share the link -------------------------------------------------------------------------------- /4 - masterclass/images/bg-section-bottom-mobile-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /4 - masterclass/images/bg-section-top-mobile-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /3 - css/css-intermediate-challenge/images/icon-twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /4 - masterclass/images/bg-section-top-desktop-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /3 - css/css-one/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Cyan: hsl(179, 62%, 43%) 15 | - Bright Yellow: hsl(71, 73%, 54%) 16 | 17 | ### Neutral 18 | 19 | - Light Gray: hsl(204, 43%, 93%) 20 | - Grayish Blue: hsl(218, 22%, 67%) 21 | 22 | ## Typography 23 | 24 | ### Body Copy 25 | 26 | - Font size: 16px 27 | 28 | ### Font 29 | 30 | - Family: [Karla](https://fonts.google.com/specimen/Karla) 31 | - Weights: 400, 700 -------------------------------------------------------------------------------- /6 - react/news-demo/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 |{data.title}
8 |{data.description}
15 |Source - {data.source.name}
18 |Author - {data.author}
19 |Re-write the below Code using the ES6 Features you learned throughout this Module.
// Exercise 1 - Maybe use an Arrow Function?
12 | var double = function(value) {
13 | return value * 2;
14 | };
15 | console.log(double(10));
16 |
17 | // Exercise 2 - If only we could provide some default values...
18 | var greet = function (name) {
19 | if (name === undefined) { name = "Salman"; }
20 | console.log("Hello, " + name);
21 | };
22 | greet();
23 | greet("Anna");
24 |
25 | // Exercise 3 - Isn't there a shorter way to get all these Values?
26 | var numbers = [-3, 33, 38, 5];
27 | console.log(Math.min.apply(Math, numbers));
28 |
29 | // Exercise 4 - I have to think about Exercise 3 ...
30 | var newArray = [55, 20];
31 | Array.prototype.push.apply(newArray, numbers);
32 | console.log(newArray);
33 |
34 | // Exercise 5 - That's a well-constructed array.
35 | var testResults = [3.89, 2.99, 1.38];
36 | var result1 = testResults[0];
37 | var result2 = testResults[1];
38 | var result3 = testResults[2];
39 | console.log(result1, result2, result3);
40 |
41 | // Exercise 6 - And a well-constructed object!
42 | var scientist = {firstName: "Will", experience: 12};
43 | var firstName = scientist.firstName;
44 | var experience = scientist.experience;
45 | console.log(firstName, experience);
46 |