├── finished ├── README.md ├── styles.css.map ├── index.html ├── styles.scss ├── styles.css └── data.json ├── starter ├── README.md ├── index.html ├── styles.min.css ├── styles.scss └── styles.css └── README.md /finished/README.md: -------------------------------------------------------------------------------- 1 | ### This folder contains the finished code for the project 2 | -------------------------------------------------------------------------------- /starter/README.md: -------------------------------------------------------------------------------- 1 | ### This folder contains the code for the card layout. 2 | 3 | ### Continue working on the project from the [tutorial](https://www.freecodecamp.org/news/how-to-build-skeleton-screens-using-css-for-better-user-experience). 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # How to build Skeleton Screens with CSS for better UX 2 | 3 | Tech Stack: HTML, CSS(SCSS), Javascript 4 | 5 | Live demo: 6 | 7 | This repository is based on the tutorial ["How to build Skeleton Screens with CSS for better UX"](https://www.freecodecamp.org/news/how-to-build-skeleton-screens-using-css-for-better-user-experience) 8 | -------------------------------------------------------------------------------- /starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Skeleton Loading using CSS 9 | 10 | 11 |
12 | 13 | 14 |
15 |
16 | 17 |
18 |

19 | Writing Cleaner CSS Using BEM 20 |

21 |
22 | 23 |
24 |
25 | Mar 12, 2022 · 4m read time 26 |
27 | 28 |
29 | 30 |
31 |
32 | 33 |
34 | 35 | 36 | 37 |
38 | 39 | 40 |
41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /starter/styles.min.css: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": [ 5 | "starter.scss" 6 | ], 7 | "names": [], 8 | "file": "starter.css" 9 | } 10 | -------------------------------------------------------------------------------- /finished/styles.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": [ 5 | "styles.scss" 6 | ], 7 | "names": [], 8 | "file": "styles.css" 9 | } 10 | -------------------------------------------------------------------------------- /starter/styles.scss: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: "Source Sans Pro", sans-serif; 11 | min-height: 100vh; 12 | } 13 | 14 | a { 15 | text-decoration: none; 16 | } 17 | 18 | //Hides the broken image icon 19 | img[alt] { 20 | text-indent: -10000px; 21 | } 22 | 23 | .container { 24 | display: flex; 25 | flex-wrap: wrap; 26 | justify-content: center; 27 | align-items: center; 28 | margin: 5rem; 29 | 30 | @media screen and (max-width: 600px) { 31 | margin: -0.5rem; 32 | } 33 | } 34 | 35 | .card { 36 | background-color: #f5f8fc; 37 | box-shadow: 0 0 transparent, 0 0 transparent, 38 | 0 0.375rem 0.375rem -0.125rem rgba(168, 179, 207, 0.4); 39 | padding: 0.5rem; 40 | border-radius: 1rem; 41 | border: 1px solid rgba(82, 88, 102, 0.2); 42 | display: flex; 43 | flex-direction: column; 44 | justify-content: space-around; 45 | width: 330px; 46 | height: auto; 47 | transition: all 0.2s ease; 48 | margin: 2rem; 49 | 50 | &__header { 51 | margin-bottom: 1rem; 52 | display: flex; 53 | flex-direction: column; 54 | margin: 0.5rem 0 0.5rem 0.5rem; 55 | 56 | .header__img { 57 | height: 2rem; 58 | width: 2rem; 59 | object-fit: cover; 60 | border-radius: 50%; 61 | } 62 | 63 | .header__title { 64 | font-size: 1.0625rem; 65 | line-height: 1.375rem; 66 | color: #0e1217; 67 | font-weight: 700; 68 | margin: 0.5rem; 69 | } 70 | } 71 | 72 | &__body { 73 | margin: 0 0.5rem; 74 | 75 | .body__text { 76 | color: #525866; 77 | font-size: 0.8125rem; 78 | } 79 | 80 | .body__img { 81 | height: 10rem; 82 | margin: 0.5rem 0; 83 | 84 | img { 85 | width: 100%; 86 | height: 100%; 87 | object-fit: cover; 88 | margin: auto; 89 | border-radius: 0.75rem; 90 | } 91 | } 92 | } 93 | 94 | &__footer { 95 | display: flex; 96 | justify-content: space-around; 97 | align-items: center; 98 | margin: 0.5rem; 99 | } 100 | 101 | &:hover { 102 | border-color: rgba(82, 88, 102, 0.4); 103 | } 104 | } 105 | 106 | ion-icon { 107 | font-size: 1.5rem; 108 | color: #525866; 109 | cursor: pointer; 110 | transition: color 0.2s ease; 111 | 112 | &:hover { 113 | &:nth-of-type(1) { 114 | color: #15ce5c; 115 | } 116 | &:nth-of-type(2) { 117 | color: #15ce5c; 118 | } 119 | &:nth-of-type(3) { 120 | color: #fa6620; 121 | } 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Skeleton Loading using CSS 9 | 10 | 11 |
12 | 39 |
40 | 41 | 42 | 46 | 50 | 51 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /finished/styles.scss: -------------------------------------------------------------------------------- 1 | // Import Google Fonts 2 | @import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap"); 3 | 4 | * { 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | } 9 | 10 | body { 11 | font-family: "Source Sans Pro", sans-serif; 12 | min-height: 100vh; 13 | } 14 | 15 | a { 16 | text-decoration: none; 17 | } 18 | 19 | //Hides the broken image icon 20 | img[alt] { 21 | text-indent: -10000px; 22 | } 23 | 24 | .container { 25 | display: flex; 26 | flex-wrap: wrap; 27 | justify-content: center; 28 | align-items: center; 29 | margin: 5rem; 30 | 31 | @media screen and (max-width: 600px) { 32 | margin: -0.5rem; 33 | } 34 | } 35 | 36 | .card { 37 | background-color: #f5f8fc; 38 | box-shadow: 0 0 transparent, 0 0 transparent, 39 | 0 0.375rem 0.375rem -0.125rem rgba(168, 179, 207, 0.4); 40 | padding: 0.5rem; 41 | border-radius: 1rem; 42 | border: 1px solid rgba(82, 88, 102, 0.2); 43 | display: flex; 44 | flex-direction: column; 45 | justify-content: space-around; 46 | width: 330px; 47 | height: auto; 48 | transition: all 0.2s ease; 49 | margin: 2rem; 50 | 51 | &__header { 52 | margin-bottom: 1rem; 53 | display: flex; 54 | flex-direction: column; 55 | margin: 0.5rem 0 0.5rem 0.5rem; 56 | 57 | .header__img { 58 | height: 2rem; 59 | width: 2rem; 60 | object-fit: cover; 61 | border-radius: 50%; 62 | } 63 | 64 | .header__title { 65 | font-size: 1.0625rem; 66 | line-height: 1.375rem; 67 | color: #0e1217; 68 | font-weight: 700; 69 | margin: 0.5rem; 70 | } 71 | } 72 | 73 | &__body { 74 | margin: 0 0.5rem; 75 | 76 | .body__text { 77 | color: #525866; 78 | font-size: 0.8125rem; 79 | } 80 | 81 | .body__img { 82 | height: 10rem; 83 | margin: 0.5rem 0; 84 | 85 | img { 86 | width: 100%; 87 | height: 100%; 88 | object-fit: cover; 89 | margin: auto; 90 | border-radius: 0.75rem; 91 | } 92 | } 93 | } 94 | 95 | &__footer { 96 | display: flex; 97 | justify-content: space-around; 98 | align-items: center; 99 | margin: 0.5rem; 100 | } 101 | 102 | &:hover { 103 | border-color: rgba(82, 88, 102, 0.4); 104 | } 105 | } 106 | 107 | ion-icon { 108 | font-size: 1.5rem; 109 | color: #525866; 110 | cursor: pointer; 111 | transition: color 0.2s ease; 112 | 113 | &:hover { 114 | &:nth-of-type(1) { 115 | color: #15ce5c; 116 | } 117 | &:nth-of-type(2) { 118 | color: #15ce5c; 119 | } 120 | &:nth-of-type(3) { 121 | color: #fa6620; 122 | } 123 | } 124 | } 125 | 126 | .skeleton { 127 | animation: skeleton-loading 1s linear infinite alternate; 128 | } 129 | 130 | @keyframes skeleton-loading { 131 | 0% { 132 | background-color: hsl(200, 20%, 80%); 133 | } 134 | 100% { 135 | background-color: hsl(200, 20%, 95%); 136 | } 137 | } 138 | 139 | .skeleton-text { 140 | width: 100%; 141 | height: 0.7rem; 142 | margin-bottom: 0.5rem; 143 | border-radius: 0.25rem; 144 | } 145 | 146 | .skeleton-text__body { 147 | width: 75%; 148 | } 149 | 150 | .skeleton-footer { 151 | width: 30%; 152 | } 153 | -------------------------------------------------------------------------------- /starter/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap"); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | -webkit-box-sizing: border-box; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: "Source Sans Pro", sans-serif; 11 | min-height: 100vh; 12 | } 13 | 14 | a { 15 | text-decoration: none; 16 | } 17 | 18 | img[alt] { 19 | text-indent: -10000px; 20 | } 21 | 22 | .container { 23 | display: -webkit-box; 24 | display: -ms-flexbox; 25 | display: flex; 26 | -ms-flex-wrap: wrap; 27 | flex-wrap: wrap; 28 | -webkit-box-pack: center; 29 | -ms-flex-pack: center; 30 | justify-content: center; 31 | -webkit-box-align: center; 32 | -ms-flex-align: center; 33 | align-items: center; 34 | margin: 5rem; 35 | } 36 | 37 | @media screen and (max-width: 600px) { 38 | .container { 39 | margin: -0.5rem; 40 | } 41 | } 42 | 43 | .card { 44 | background-color: #f5f8fc; 45 | -webkit-box-shadow: 0 0 transparent, 0 0 transparent, 0 0.375rem 0.375rem -0.125rem rgba(168, 179, 207, 0.4); 46 | box-shadow: 0 0 transparent, 0 0 transparent, 0 0.375rem 0.375rem -0.125rem rgba(168, 179, 207, 0.4); 47 | padding: 0.5rem; 48 | border-radius: 1rem; 49 | border: 1px solid rgba(82, 88, 102, 0.2); 50 | display: -webkit-box; 51 | display: -ms-flexbox; 52 | display: flex; 53 | -webkit-box-orient: vertical; 54 | -webkit-box-direction: normal; 55 | -ms-flex-direction: column; 56 | flex-direction: column; 57 | -ms-flex-pack: distribute; 58 | justify-content: space-around; 59 | width: 330px; 60 | height: auto; 61 | -webkit-transition: all 0.2s ease; 62 | transition: all 0.2s ease; 63 | margin: 2rem; 64 | } 65 | 66 | .card__header { 67 | margin-bottom: 1rem; 68 | display: -webkit-box; 69 | display: -ms-flexbox; 70 | display: flex; 71 | -webkit-box-orient: vertical; 72 | -webkit-box-direction: normal; 73 | -ms-flex-direction: column; 74 | flex-direction: column; 75 | margin: 0.5rem 0 0.5rem 0.5rem; 76 | } 77 | 78 | .card__header .header__img { 79 | height: 2rem; 80 | width: 2rem; 81 | -o-object-fit: cover; 82 | object-fit: cover; 83 | border-radius: 50%; 84 | } 85 | 86 | .card__header .header__title { 87 | font-size: 1.0625rem; 88 | line-height: 1.375rem; 89 | color: #0e1217; 90 | font-weight: 700; 91 | margin: 0.5rem; 92 | } 93 | 94 | .card__body { 95 | margin: 0 0.5rem; 96 | } 97 | 98 | .card__body .body__text { 99 | color: #525866; 100 | font-size: 0.8125rem; 101 | } 102 | 103 | .card__body .body__img { 104 | height: 10rem; 105 | margin: 0.5rem 0; 106 | } 107 | 108 | .card__body .body__img img { 109 | width: 100%; 110 | height: 100%; 111 | -o-object-fit: cover; 112 | object-fit: cover; 113 | margin: auto; 114 | border-radius: 0.75rem; 115 | } 116 | 117 | .card__footer { 118 | display: -webkit-box; 119 | display: -ms-flexbox; 120 | display: flex; 121 | -ms-flex-pack: distribute; 122 | justify-content: space-around; 123 | -webkit-box-align: center; 124 | -ms-flex-align: center; 125 | align-items: center; 126 | margin: 0.5rem; 127 | } 128 | 129 | .card:hover { 130 | border-color: rgba(82, 88, 102, 0.4); 131 | } 132 | 133 | ion-icon { 134 | font-size: 1.5rem; 135 | color: #525866; 136 | cursor: pointer; 137 | -webkit-transition: color 0.2s ease; 138 | transition: color 0.2s ease; 139 | } 140 | 141 | ion-icon:hover:nth-of-type(1) { 142 | color: #15ce5c; 143 | } 144 | 145 | ion-icon:hover:nth-of-type(2) { 146 | color: #15ce5c; 147 | } 148 | 149 | ion-icon:hover:nth-of-type(3) { 150 | color: #fa6620; 151 | } 152 | /*# sourceMappingURL=starter.css.map */ 153 | -------------------------------------------------------------------------------- /finished/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap"); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | -webkit-box-sizing: border-box; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: "Source Sans Pro", sans-serif; 11 | min-height: 100vh; 12 | } 13 | 14 | a { 15 | text-decoration: none; 16 | } 17 | 18 | img[alt] { 19 | text-indent: -10000px; 20 | } 21 | 22 | .container { 23 | display: -webkit-box; 24 | display: -ms-flexbox; 25 | display: flex; 26 | -ms-flex-wrap: wrap; 27 | flex-wrap: wrap; 28 | -webkit-box-pack: center; 29 | -ms-flex-pack: center; 30 | justify-content: center; 31 | -webkit-box-align: center; 32 | -ms-flex-align: center; 33 | align-items: center; 34 | margin: 5rem; 35 | } 36 | 37 | @media screen and (max-width: 600px) { 38 | .container { 39 | margin: -0.5rem; 40 | } 41 | } 42 | 43 | .card { 44 | background-color: #f5f8fc; 45 | -webkit-box-shadow: 0 0 transparent, 0 0 transparent, 0 0.375rem 0.375rem -0.125rem rgba(168, 179, 207, 0.4); 46 | box-shadow: 0 0 transparent, 0 0 transparent, 0 0.375rem 0.375rem -0.125rem rgba(168, 179, 207, 0.4); 47 | padding: 0.5rem; 48 | border-radius: 1rem; 49 | border: 1px solid rgba(82, 88, 102, 0.2); 50 | display: -webkit-box; 51 | display: -ms-flexbox; 52 | display: flex; 53 | -webkit-box-orient: vertical; 54 | -webkit-box-direction: normal; 55 | -ms-flex-direction: column; 56 | flex-direction: column; 57 | -ms-flex-pack: distribute; 58 | justify-content: space-around; 59 | width: 330px; 60 | height: auto; 61 | -webkit-transition: all 0.2s ease; 62 | transition: all 0.2s ease; 63 | margin: 2rem; 64 | } 65 | 66 | .card__header { 67 | margin-bottom: 1rem; 68 | display: -webkit-box; 69 | display: -ms-flexbox; 70 | display: flex; 71 | -webkit-box-orient: vertical; 72 | -webkit-box-direction: normal; 73 | -ms-flex-direction: column; 74 | flex-direction: column; 75 | margin: 0.5rem 0 0.5rem 0.5rem; 76 | } 77 | 78 | .card__header .header__img { 79 | height: 2rem; 80 | width: 2rem; 81 | -o-object-fit: cover; 82 | object-fit: cover; 83 | border-radius: 50%; 84 | } 85 | 86 | .card__header .header__title { 87 | font-size: 1.0625rem; 88 | line-height: 1.375rem; 89 | color: #0e1217; 90 | font-weight: 700; 91 | margin: 0.5rem; 92 | } 93 | 94 | .card__body { 95 | margin: 0 0.5rem; 96 | } 97 | 98 | .card__body .body__text { 99 | color: #525866; 100 | font-size: 0.8125rem; 101 | } 102 | 103 | .card__body .body__img { 104 | height: 10rem; 105 | margin: 0.5rem 0; 106 | } 107 | 108 | .card__body .body__img img { 109 | width: 100%; 110 | height: 100%; 111 | -o-object-fit: cover; 112 | object-fit: cover; 113 | margin: auto; 114 | border-radius: 0.75rem; 115 | } 116 | 117 | .card__footer { 118 | display: -webkit-box; 119 | display: -ms-flexbox; 120 | display: flex; 121 | -ms-flex-pack: distribute; 122 | justify-content: space-around; 123 | -webkit-box-align: center; 124 | -ms-flex-align: center; 125 | align-items: center; 126 | margin: 0.5rem; 127 | } 128 | 129 | .card:hover { 130 | border-color: rgba(82, 88, 102, 0.4); 131 | } 132 | 133 | ion-icon { 134 | font-size: 1.5rem; 135 | color: #525866; 136 | cursor: pointer; 137 | -webkit-transition: color 0.2s ease; 138 | transition: color 0.2s ease; 139 | } 140 | 141 | ion-icon:hover:nth-of-type(1) { 142 | color: #15ce5c; 143 | } 144 | 145 | ion-icon:hover:nth-of-type(2) { 146 | color: #15ce5c; 147 | } 148 | 149 | ion-icon:hover:nth-of-type(3) { 150 | color: #fa6620; 151 | } 152 | 153 | .skeleton { 154 | -webkit-animation: skeleton-loading 1s linear infinite alternate; 155 | animation: skeleton-loading 1s linear infinite alternate; 156 | } 157 | 158 | @-webkit-keyframes skeleton-loading { 159 | 0% { 160 | background-color: #c2cfd6; 161 | } 162 | 100% { 163 | background-color: #f0f3f5; 164 | } 165 | } 166 | 167 | @keyframes skeleton-loading { 168 | 0% { 169 | background-color: #c2cfd6; 170 | } 171 | 100% { 172 | background-color: #f0f3f5; 173 | } 174 | } 175 | 176 | .skeleton-text { 177 | width: 100%; 178 | height: 0.7rem; 179 | margin-bottom: 0.5rem; 180 | border-radius: 0.25rem; 181 | } 182 | 183 | .skeleton-text__body { 184 | width: 75%; 185 | } 186 | 187 | .skeleton-footer { 188 | width: 30%; 189 | } 190 | /*# sourceMappingURL=styles.css.map */ 191 | -------------------------------------------------------------------------------- /finished/data.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "logoImage": "https://res.cloudinary.com/daily-now/image/upload/t_logo,f_auto/v1/logos/4a287b2e7cb5499bae863f8e7137cdb4", 5 | "title": "Writing Cleaner CSS Using BEM ", 6 | "details": "Mar 12, 2022 · 4m read time", 7 | "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/dd19e7a56475f39ab1c38167c02c7b58", 8 | "link": "https://israelmitolu.hashnode.dev/writing-cleaner-css-using-bem-methodology" 9 | }, 10 | { 11 | "id": 2, 12 | "logoImage": "https://daily-now-res.cloudinary.com/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp", 13 | "title": "The Beginner's Guide to Sass", 14 | "details": "Apr 05, 2022 · 8m read time", 15 | "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/bec6719be210973098293a32dc732d1e", 16 | "link": "https://www.freecodecamp.org/news/the-beginners-guide-to-sass/" 17 | }, 18 | { 19 | "id": 3, 20 | "logoImage": "https://res.cloudinary.com/daily-now/image/upload/t_logo,f_auto/v1/logos/devto", 21 | "title": "I made Squid Game with Javascript", 22 | "details": "Oct 25, 2021 · 3m read time", 23 | "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/1f947033365381cbe322ddf294ad7169", 24 | "link": "https://dev.to/0shuvo0/i-made-squid-game-with-javascript-10j9" 25 | }, 26 | { 27 | "id": 4, 28 | "logoImage": "https://res.cloudinary.com/daily-now/image/upload/t_logo,f_auto/v1/logos/4a287b2e7cb5499bae863f8e7137cdb4", 29 | "title": "Using Custom Cursors with Javascript for a Better User Experience", 30 | "details": "Feb 12, 2022 · 9m read time", 31 | "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/3d056b99c95b37cd35ae5cfc6a8b38be", 32 | "link": "https://israelmitolu.hashnode.dev/using-custom-cursors-with-javascript-for-a-better-user-experience" 33 | }, 34 | { 35 | "id": 5, 36 | "logoImage": "https://daily-now-res.cloudinary.com/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp", 37 | "title": "React Best Practices - Tips for Writing Better React Code in 2022", 38 | "details": "Feb 03, 2022 · 31m read time", 39 | "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/5a629fff5583f9ab5f0931d14736b299", 40 | "link": "https://www.freecodecamp.org/news/best-practices-for-react/" 41 | }, 42 | { 43 | "id": 6, 44 | "logoImage": "https://res.cloudinary.com/daily-now/image/upload/t_logo,f_auto/v1/logos/tnw", 45 | "title": "You suck at Googling: 5 tips to improve your search skills", 46 | "details": "Mar 31, 2022 · 4m read time", 47 | "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/e318150ae67c2083ff3585a96f366f7b", 48 | "link": "https://thenextweb.com/news/5-tips-to-improve-your-google-search-skills" 49 | }, 50 | { 51 | "id": 7, 52 | "logoImage": "https://res.cloudinary.com/daily-now/image/upload/t_logo,f_auto/v1/logos/logrocket", 53 | "title": "A better way of solving prop drilling in React apps", 54 | "details": "Jan 14, 2022 · 13m read time", 55 | "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/6fe4c4060bca638b419d8b2c63d8eaf7", 56 | "link": "https://blog.logrocket.com/solving-prop-drilling-react-apps/" 57 | }, 58 | { 59 | "id": 8, 60 | "logoImage": "https://res.cloudinary.com/daily-now/image/upload/t_logo,f_auto/v1/logos/dz", 61 | "title": "Golang and Event-Driven Architecture", 62 | "details": "Apr 18, 2022 · 6m read time", 63 | "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/d06eddd82c62288df6e2600bcda61579", 64 | "link": "https://dzone.com/articles/golang-and-event-driven-architecture" 65 | }, 66 | { 67 | "id": 9, 68 | "logoImage": "https://res.cloudinary.com/daily-now/image/upload/t_logo,f_auto/v1/logos/4a287b2e7cb5499bae863f8e7137cdb4", 69 | "title": "Introduction to Git In 16 Minutes", 70 | "details": "Mar 18, 2021 · 8m read time", 71 | "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/3c02111a8f242f607551500432e17a78", 72 | "link": "https://vickyikechukwu.hashnode.dev/introduction-to-git-in-16-minutes" 73 | }, 74 | { 75 | "id": 10, 76 | "logoImage": "https://res.cloudinary.com/daily-now/image/upload/t_logo,f_auto/v1/logos/4a287b2e7cb5499bae863f8e7137cdb4", 77 | "title": "How to Create a Sleek Preloader Animation Using GSAP Timeline", 78 | "details": "Jan 25, 2022 · 7m read time", 79 | "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/e238c35cb9d41dd9a5475602aef00119", 80 | "link": "https://israelmitolu.hashnode.dev/how-to-create-a-sleek-preloader-animation-using-gsap-timeline" 81 | } 82 | ] 83 | --------------------------------------------------------------------------------