![Thought Span](/img/default-banner.jpg)
- 18
- 149 446
Thought Span
Приєднався 10 чер 2015
Welcome to the Thoughtspan UA-cam channel. If you're looking to learn how to code or want to stay up to date on the latest front-end trends, then this is the UA-cam channel for you! This UA-cam channel focuses on frontend technologies primarily React. The channel will provide tutorials, tips, and resources for react developers. The channel will have a mix of videos that are tutorials, how-tos, and features on React. The goal of the channel is to provide helpful information to people who are learning React, or who want to learn more about React.
Make a complete website using React and Contentful - Part 2 - Creating the About Section Component
Buy me a Coffee: paypal.me/thoughtspan
This video is the part 2 of a multi-part series of the React and Contentful. If you have not watched the part 1 of this video series, I highly recommend to go and watch the part 1 of this series at this link here: ua-cam.com/video/yqe5UB_BF7Q/v-deo.html
In this video we will learn how to make a dynamic About section for a website using React JS and Contentful. We will also learn How to use the Context API in your current React project.
For this project I am using React for my frontend and Contentful as my backend for saving all the data. Contentful also provides the Content delivery APIs that we can utilize in our projects to make dynamic applications and web projects just like this one. Through this video, I want to share my knowledge on how to use Contentful and React together to make an awesome web project.
In this video, we will work on making an About Section for a website. We will learn how to enter our data in Contentful. We will also learn how to fetch this data from a frontend application like React. We will use modern workflows, and patterns to get this data on frontend. We will learn how to use React hooks like useState, useEffect, useCallback etc. We will use async and await and a lot more. Once we have the data available on the frontend, we will style it using SCSS.
In the later half of this video I will also show you how to utilize the Context API provided by React in your current applications. We will also learn How to organize and clean our React code, and split them into multiple files to make it more modular.
Please share your views, thoughts, questions and comments using the comments section below this video.
I will be releasing more videos on this series and on similar topics, so stay tuned. Please like this video and subscribe to my channel.
This is the link to a website where you can experience live in action both the components (1) Image Carousel Component (Covered in Part 1) and (2) About Component (Covered in this part) - dalmaa.vercel.app
This video is the part 2 of a multi-part series of the React and Contentful. If you have not watched the part 1 of this video series, I highly recommend to go and watch the part 1 of this series at this link here: ua-cam.com/video/yqe5UB_BF7Q/v-deo.html
In this video we will learn how to make a dynamic About section for a website using React JS and Contentful. We will also learn How to use the Context API in your current React project.
For this project I am using React for my frontend and Contentful as my backend for saving all the data. Contentful also provides the Content delivery APIs that we can utilize in our projects to make dynamic applications and web projects just like this one. Through this video, I want to share my knowledge on how to use Contentful and React together to make an awesome web project.
In this video, we will work on making an About Section for a website. We will learn how to enter our data in Contentful. We will also learn how to fetch this data from a frontend application like React. We will use modern workflows, and patterns to get this data on frontend. We will learn how to use React hooks like useState, useEffect, useCallback etc. We will use async and await and a lot more. Once we have the data available on the frontend, we will style it using SCSS.
In the later half of this video I will also show you how to utilize the Context API provided by React in your current applications. We will also learn How to organize and clean our React code, and split them into multiple files to make it more modular.
Please share your views, thoughts, questions and comments using the comments section below this video.
I will be releasing more videos on this series and on similar topics, so stay tuned. Please like this video and subscribe to my channel.
This is the link to a website where you can experience live in action both the components (1) Image Carousel Component (Covered in Part 1) and (2) About Component (Covered in this part) - dalmaa.vercel.app
Переглядів: 2 596
Відео
Make a complete website using React and Contentful - Part 1 - Image Carousel Component
Переглядів 16 тис.2 роки тому
Buy me a Coffee: paypal.me/thoughtspan In this video we will learn how to make a complete web project using React and Contentful. This video is the part 1 of a multi-part series that I plan to upload very soon. For this project I am using React for my frontend and Contentful as my backend. Through this video, I want to share my knowledge on how to use Contentful and React together to make an aw...
Make an image classification app using React and Tensorflow JS
Переглядів 20 тис.3 роки тому
In this video, we will learn how to make a simple Image Classification / Identification app using React and Tensorflow JS. Tensorflow JS is a machine learning library for Javascript. For this tutorial, there is no machine learning knowledge required. We are going to use the pre-trained machine learning model from Tensorflow JS called mobilenet. This model is specifically used for image classifi...
Make a simple food blog using React and Contentful
Переглядів 31 тис.4 роки тому
Buy me a Coffee: paypal.me/thoughtspan In this video I want to share my knowledge on how to use Contentful and React to make a simple single page blog application. Contentful gives you the platform to create your content for your website or an app. It also gives you the APIs that you can use to fetch the content and consume in React or any application. Link to the GIT Repository: bitbucket.org/...
How to add a pagination in Hugo
Переглядів 3,1 тис.6 років тому
Buy me a Coffee: paypal.me/thoughtspan This video shows how to add a pagination on your Hugo website in 3 steps. I will show you 2 different styles of pagination. One is a simple Pagination, and Other is a more modern and dynamic styled Pagination. Markup and styling for Simple Pagination: bit.ly/2JquLJ7 Markup and Styling for Advanced Pagination: bit.ly/2Nj05vF
How to create a webpage looking at a design mockup | Recipe Template | Part 3
Переглядів 1736 років тому
Understanding different ways to organize the html elements on a webpage. Understanding the difference between floats, inline-blocks and flex properties.
How to create a webpage looking at a design mockup | Recipe Template | Part2
Переглядів 1486 років тому
In this video we will learn how to add separators between the list items.
How to create a webpage looking at a design mockup | Recipe Template | Part1
Переглядів 1616 років тому
How to create a webpage looking at a design mockup | Recipe Template | Part1
Flexbox Use Case 1| Sticky Footer| How to keep the site footer always at the bottom of the page
Переглядів 1,7 тис.6 років тому
Buy me a Coffee: paypal.me/thoughtspan In this video, we will learn how to keep the site footer always at the bottom of the page regardless of the page content. We will solve the problem of footer floating in the middle of the page by using Flexbox property. Just 4 lines of code and your footer will always stick to the bottom of the page.
How to create navigation menus in Hugo
Переглядів 19 тис.6 років тому
Buy me a Coffee: paypal.me/thoughtspan
Introduction to CSS 3
Переглядів 556 років тому
This video is an introduction to styling the web pages using CSS3. We start with an unstyled HTML page, and apply the styles to individual elements from start to finish. We talk about using custom fonts using google fonts. We see how to use the web inspector console on browsers. We understand the difference between inline and block elements. Understand how to style the HTML elements from start ...
Introduction to HTML5 - Part2
Переглядів 306 років тому
This is a short introductory tutorial to HTML5 in Hindi / Urdu. This video is in continuation to my previous video that focuses mainly on the most commonly used HTML elements on a web page. This is the link to my previous video: ua-cam.com/video/VeowRTC6Xuk/v-deo.html This tutorial introduces the new user to the HTML elements like Links (External Links, Internal links, and Links to content with...
Introduction to HTML
Переглядів 1096 років тому
This is a short introductory tutorial to HTML in Hindi / Urdu. This tutorial focuses mainly on the most commonly used HTML elements on a web page. This tutorial introduces the new user to the HTML elements like Headings (h1, h2, h3 etc), paragraphs (p), line breaks (br), horizontal rule (hr), strong, em, Ordered lists (ol), Unordered lists (ul), Images (img), comments, and Links (a). This tutor...
Remove wrinkles without losing texture in Photoshop | Frequency Separation and Portrait Retouching
Переглядів 3197 років тому
This video explains the basic portrait retouching in Photoshop with Frequency Separation. This video is in Hindi / Urdu. It covers the concept of frequency separation, and why is it important. It also covers the spot removal from portraits using the spot healing brush tool. It covers the basics of selective sharpening, color correction, white balance adjustment, and post crop vignetting using C...
Reset your Wordpress Admin Credentials on localhost or live website
Переглядів 4457 років тому
In this video I am going to show you two different ways to get you back into WordPress admin section (WordPress dashboard), either by resetting your WordPress admin password (by editing the database), or by creating a new admin username and password (by editing the functions.php file). (1) The first method involves getting inside the database of the WordPress installation and resetting the pass...
Find your lost / misplaced Android Phone with this simple trick
Переглядів 1207 років тому
Find your lost / misplaced Android Phone with this simple trick
Migrate a Live Wordpress Website To Localhost
Переглядів 50 тис.9 років тому
Migrate a Live Wordpress Website To Localhost
Server Not Found Issue after installing wamp server
Переглядів 4,9 тис.9 років тому
Server Not Found Issue after installing wamp server
the dependencies does not support
source code?
can i get css code ?
where can i get the source code ?
i was not able to install node-sass got so manny errors but i installed dart-sass will that work ?
God bless u sir
what about backend
Hi, Hope you are doing well. Can You make a video on how to use custom trained model in react native app??? Furthermore if i want to use multiple models in one react native app how to do it? thanks
why mines error says "No backend found in registry."?
Where is Part-3? Can you share the link please.
Amazing tutorial. Thank you for this great tutorial.
models is null even using old version
Great stuff
why did you choose to use a class component when you could have used a function component
Not working for me. model not loading
AWESOME CONTENT! contentful indeed...
pls provide the source code for the same its difficult to write all the css
So well explained and one of the first, who explains more advanced stuff you can do with Hugo. You should do more :)
Nice Video
Really helpful!
Thank you man
just the exact thing I was looking to know. Great video man, thanks !
can i get the source code please ?
problem with marked
I think in the new version of Marked you need to import it as a named import and not as default. Try using this instead - import { marked } from 'marked';
Thank you sir it's working perfectly
Thank you for the code! Working greatly!
Thank you so much! This is brilliant, is part 3 coming?
What is the model used in this project and does it use progressive web app (pwa)?
Splendid! Now I can start making my company's blog site. Thank you so much mah dude.
It's show me this error. pls help Module not found: Error: Can't resolve '@tensorflow-models/mobilenet' in 'E:\potatodisease\my-app\src'
downgrade tensorflow/tfjs-converter and tensorflow/tfjs-cors module to 1.2.1 version to use the model
@@viralgupta7636 its still showing errors
@@vedikatyagi3269 did you solve it?
That was really well done 👍
Can you upload how to coding for react + tensorflow.js object detection?
Can u tell the windows command as I was using windows os
Is the css automatically aligned??
Is this code works??
Hey! Love you tutorial, very helpful, was wondering when you will be doing part 3? Maybe go over how you built your Nav?
Thanks so much, very helpful!
Awesome! Subscribed fella, here!
I wish you had made these tutorials as minimalism instead of adding so much code that isn't required such as logging errors etc. I want to see the bare minimum and what makes the code work, and while the error stuff is helpful in terms of creating a real website, it's confusing for people who are learning to interact with a 3rd party resource
Hello! I was wondering if you could share your Github repo
can you please share the code link
please uplade the source code very Thanks full you
A Shame you stopped making videos! Awesome tutorial and explanation ! thanks for sharing
Wasup guys, I am so grateful for Part-2 which is as good and consistent as Part-1. Keep up the good work buddy. I can't wait for Part-3. Cheers! =)
Hi everyone, I would encourage you all to give some likes and subscribe to Thought Span channel. I am a friend of Vikram and just like all of you I really enjoyed and learned a lot from this tutorial as I am a beginner in React. This tutorial was well thought and the content and explanations as well as the project was just amazing and outstanding. Thank you very much Vikram for all of your great efforts, your time and for your inspiration. Keep it up you are doing super great. Cheers brother. Looking forward for more.
Awsome video bro you deserve way much more likes then you have crisp clear explaination fluent english and a very big brain keep it up you will reach at the top bro 🚀🚀🚀🚀🚀🔥🔥🔥🔥🔥🔥
Very helpful, very good presentation - thanks a lot!
ᵖʳᵒᵐᵒˢᵐ
Very interesting. At this time your code is failing to run, any update ??
I think with the latest updates a lot might have changed. But If you try installing the packages with the same version that I am using in the video, then it should work. Let me know how it goes. :)
@@thoughtspan No I didn't try with your version, I just wanted to adapt your code to new versions but I failed.
@@thoughtspan i tried with same packages, and i still seeing an error in "const results = await model.classify(imageRef.current)" console says " Uncaught (in promise) TypeError: Cannot read properties of null (reading 'classify')", idk what to do :(
downgrade tensorflow/tfjs-converter and tensorflow/tfjs-cors module to 1.2.1 version to use the model
const results = await model.classify(imageRef.current) this line is showing error
i have the same issue, did you solve it?
downgrade tensorflow/tfjs-converter and tensorflow/tfjs-cors module to 1.2.1 version to use the model
classify is showing error instead of array