Media is too big
VIEW IN TELEGRAM
7. Setup Urql Provider & Caching
Scott introduces the Urql library as a lightweight alternative to Apollo for client-side GraphQL. He walks through the process of setting up the urql client in a React app by creating a GQLProvider component that wraps the entire app and provides the client instance. The GQLProvider uses the Urql library to create a client with the necessary plugins and options, including the cache exchange and fetch options.
- https://clumsy-humor-894.notion.site/4-Urql-Er-kull-f978259d84c148df819e2ace9a45ac5c
#lesson
Scott introduces the Urql library as a lightweight alternative to Apollo for client-side GraphQL. He walks through the process of setting up the urql client in a React app by creating a GQLProvider component that wraps the entire app and provides the client instance. The GQLProvider uses the Urql library to create a client with the necessary plugins and options, including the cache exchange and fetch options.
- https://clumsy-humor-894.notion.site/4-Urql-Er-kull-f978259d84c148df819e2ace9a45ac5c
#lesson
Media is too big
VIEW IN TELEGRAM
8. Next.js & Course Project Q&A
Scott answers various questions from students such as the use of parentheses in Next.js routes, the relevance of server-side rendering (SSR) and caching in Next.js, when to use types in code, the advantages of using GraphQL in a microservice architecture, and setting headers in the Next.js config for access control.
#lesson
Scott answers various questions from students such as the use of parentheses in Next.js routes, the relevance of server-side rendering (SSR) and caching in Next.js, when to use types in code, the advantages of using GraphQL in a microservice architecture, and setting headers in the Next.js config for access control.
#lesson
Media is too big
VIEW IN TELEGRAM
9. Creating a Sign Up Mutation
Scott demonstrates how to use the GraphQL API explorer to create a mutation for signing up a user. He walks through the process of creating the mutation, specifying the required input arguments, and selecting the desired fields to be returned. He also explains the concept of input arguments, how they map to the variables passed in the GraphQL query, and how to export the mutation and use it in a separate file for the sign-up functionality.
- https://clumsy-humor-894.notion.site/5-Auth-b937ee9682d746a5a53ee96450686966
#lesson
Scott demonstrates how to use the GraphQL API explorer to create a mutation for signing up a user. He walks through the process of creating the mutation, specifying the required input arguments, and selecting the desired fields to be returned. He also explains the concept of input arguments, how they map to the variables passed in the GraphQL query, and how to export the mutation and use it in a separate file for the sign-up functionality.
- https://clumsy-humor-894.notion.site/5-Auth-b937ee9682d746a5a53ee96450686966
#lesson
Media is too big
VIEW IN TELEGRAM
10. Using Mutations in React
Scott demonstrates how to implement sign-up and sign-in functionality using GraphQL mutations. He creates the mutations and uses the `useMutation` hook to handle the mutations in the component. Scott also shows how to handle the response from the server and perform actions such as setting the token in local storage and redirecting the user to the homepage.
- https://clumsy-humor-894.notion.site/5-Auth-b937ee9682d746a5a53ee96450686967
#lesson
Scott demonstrates how to implement sign-up and sign-in functionality using GraphQL mutations. He creates the mutations and uses the `useMutation` hook to handle the mutations in the component. Scott also shows how to handle the response from the server and perform actions such as setting the token in local storage and redirecting the user to the homepage.
- https://clumsy-humor-894.notion.site/5-Auth-b937ee9682d746a5a53ee96450686967
#lesson
Media is too big
VIEW IN TELEGRAM
11. Nested Data Queries
Scott demonstrates how to make a query to retrieve issues from a GraphQL server using Apollo Studio to explore the schema and write the query. He also explains the concept of nested queries and the potential performance issues that can arise from recursive queries. Scott then shows an example of a recursive query and mentions some potential solutions to handle these performance issues.
- https://clumsy-humor-894.notion.site/6-Issues-query-d5560fd59bc1426b9131fa5e892ed540
#lesson
Scott demonstrates how to make a query to retrieve issues from a GraphQL server using Apollo Studio to explore the schema and write the query. He also explains the concept of nested queries and the potential performance issues that can arise from recursive queries. Scott then shows an example of a recursive query and mentions some potential solutions to handle these performance issues.
- https://clumsy-humor-894.notion.site/6-Issues-query-d5560fd59bc1426b9131fa5e892ed540
#lesson
Media is too big
VIEW IN TELEGRAM
12. Project Issues Queries
Scott explains how to create a query to fetch data from a GraphQL server using Urql in a React application. He demonstrates how to define the query, import it into the app, and use the `useQuery` hook to execute the query and handle loading and error states. He also shows how to map over the data and render the results in the component.
#lesson
Scott explains how to create a query to fetch data from a GraphQL server using Urql in a React application. He demonstrates how to define the query, import it into the app, and use the `useQuery` hook to execute the query and handle loading and error states. He also shows how to map over the data and render the results in the component.
#lesson
Media is too big
VIEW IN TELEGRAM
13. Wiring Queries to the UI
Scott demonstrates how to implement a create issue functionality in a web application using GraphQL and Apollo. He explains the process of making a mutation request to the server, handling the response, and updating the UI to display the newly created issue without having to refresh the page.
#lesson
Scott demonstrates how to implement a create issue functionality in a web application using GraphQL and Apollo. He explains the process of making a mutation request to the server, handling the response, and updating the UI to display the newly created issue without having to refresh the page.
#lesson
Media is too big
VIEW IN TELEGRAM
14. Refreshing Issues & Optimistic Updates
Scott discusses different solutions for updating data in a to-do list without refreshing the page. He explores options such as rerunning the query, using real-time updates, and implementing optimistic updates. Scott also briefly explains the purpose of the .db and .migrations folders in the project, which are related to the database schema and migrations.
#lesson
Scott discusses different solutions for updating data in a to-do list without refreshing the page. He explores options such as rerunning the query, using real-time updates, and implementing optimistic updates. Scott also briefly explains the purpose of the .db and .migrations folders in the project, which are related to the database schema and migrations.
#lesson
Media is too big
VIEW IN TELEGRAM
15. Update Issue Mutation
Scott explains how to implement a mutation to edit an issue in a GraphQL schema. He demonstrates how to create the mutation in the schema and then import and use it in the component where the editing functionality will be implemented. Scott also discusses how Urql, a caching library, can automatically update the cache when the mutation is performed, without the need for a network request.
- https://clumsy-humor-894.notion.site/8-Update-issue-ee026a482ec34fb1adc6968fe3ee0876
#lesson
Scott explains how to implement a mutation to edit an issue in a GraphQL schema. He demonstrates how to create the mutation in the schema and then import and use it in the component where the editing functionality will be implemented. Scott also discusses how Urql, a caching library, can automatically update the cache when the mutation is performed, without the need for a network request.
- https://clumsy-humor-894.notion.site/8-Update-issue-ee026a482ec34fb1adc6968fe3ee0876
#lesson
Media is too big
VIEW IN TELEGRAM
16. Urql Q&A
Scott discusses interacting with the local cache in Urql and answers a student's question regarding Urql compared to Apollo. He also discusses the use case for tools like Click for moving data between different sources.
#lesson
Scott discusses interacting with the local cache in Urql and answers a student's question regarding Urql compared to Apollo. He also discusses the use case for tools like Click for moving data between different sources.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
17. Wrapping Up
Scott wraps up the course by recommending building a UI where users can delete an issue using GraphQL mutations. He also mentions additional resources such as alternative libraries, code generation, and best practices in the GraphQL documentation.
#lesson
Scott wraps up the course by recommending building a UI where users can delete an issue using GraphQL mutations. He also mentions additional resources such as alternative libraries, code generation, and best practices in the GraphQL documentation.
#lesson
Title: Web Development Project: Personal Portfolio Website
Description: Create a personal portfolio website from scratch using HTML and CSS. Master responsive design techniques, CSS layout tools, and best practices for showcasing your work across devices.
Link: https://frontendmasters.com/courses/portfolio-website/
Time: 5 hours, 5 minutes
Lessons: 34 / 34
Tags: #course #frontendmasters #720p
Description: Create a personal portfolio website from scratch using HTML and CSS. Master responsive design techniques, CSS layout tools, and best practices for showcasing your work across devices.
Link: https://frontendmasters.com/courses/portfolio-website/
Time: 5 hours, 5 minutes
Lessons: 34 / 34
Tags: #course #frontendmasters #720p
Frontendmasters
Build a Responsive Portfolio Site | HTML, CSS, Flexbox & Grid
Create a personal portfolio website from scratch using HTML and CSS. Master responsive design techniques, CSS layout tools, and best practices for showcasing your work across devices.
❤1
Media is too big
VIEW IN TELEGRAM
1. Introduction
Jen Kramer introduces the course and explains that the goal is to build a portfolio website using only HTML and CSS. She walks through the different sections of the website, including an opening area, featured projects, projects, contact area, and footer. She also demonstrates how the website will look on different devices, such as tablets and mobile phones.
- https://personal-portfolio.css.education/
#lesson
Jen Kramer introduces the course and explains that the goal is to build a portfolio website using only HTML and CSS. She walks through the different sections of the website, including an opening area, featured projects, projects, contact area, and footer. She also demonstrates how the website will look on different devices, such as tablets and mobile phones.
- https://personal-portfolio.css.education/
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
2. Style Guide & Q&A
Jen introduces the technology and tools that will be used to build a website. She discusses the importance of having a style guide and explain how it can help streamline the design process. She also addresses the use of CSS frameworks and emphasizes the importance of having a strong foundation in HTML and CSS. The lesson concludes by explaining the approach that will be taken to break down the website design into smaller sections and then combine them into a full webpage.
#lesson
Jen introduces the technology and tools that will be used to build a website. She discusses the importance of having a style guide and explain how it can help streamline the design process. She also addresses the use of CSS frameworks and emphasizes the importance of having a strong foundation in HTML and CSS. The lesson concludes by explaining the approach that will be taken to break down the website design into smaller sections and then combine them into a full webpage.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
3. Base Color Variables
Jen begins by explaining the structure of the HTML code provided in CodePen. She then moves on to discussing the CSS code, including the use of CSS variables or custom properties to set up colors for the webpage. She also demonstrates how to set up these variables and provides examples using different color names and hex values.
- https://personal-portfolio.css.education/ch1.html
- https://codepen.io/jen4web/pen/mdgbOqL
#lesson
Jen begins by explaining the structure of the HTML code provided in CodePen. She then moves on to discussing the CSS code, including the use of CSS variables or custom properties to set up colors for the webpage. She also demonstrates how to set up these variables and provides examples using different color names and hex values.
- https://personal-portfolio.css.education/ch1.html
- https://codepen.io/jen4web/pen/mdgbOqL
#lesson
Media is too big
VIEW IN TELEGRAM
4. Using Color Variables
Jen demonstrates how to use CSS to create a series of colored boxes on a webpage. She starts by explaining the concept of flexbox and how it can be used to arrange elements. She also shows how to apply flexbox properties to a parent container and style the child elements using CSS variables. Common issues and errors that students may encounter while following along are also addressed in this lesson.
#lesson
Jen demonstrates how to use CSS to create a series of colored boxes on a webpage. She starts by explaining the concept of flexbox and how it can be used to arrange elements. She also shows how to apply flexbox properties to a parent container and style the child elements using CSS variables. Common issues and errors that students may encounter while following along are also addressed in this lesson.
#lesson
Media is too big
VIEW IN TELEGRAM
5. Fonts
Jen guides the students through setting up fonts for their web page. She explains how to use Google Fonts to find and select the desired fonts and then provides instructions on how to embed the fonts into the HTML code using the link href attribute. This lesson also demonstrates how to define font families using CSS variables and apply them to different elements on the web page, such as the body and headings.
#lesson
Jen guides the students through setting up fonts for their web page. She explains how to use Google Fonts to find and select the desired fonts and then provides instructions on how to embed the fonts into the HTML code using the link href attribute. This lesson also demonstrates how to define font families using CSS variables and apply them to different elements on the web page, such as the body and headings.
#lesson
Media is too big
VIEW IN TELEGRAM
6. Font Sizes
Jen demonstrates how to set up a type scale using CSS. She explains the concept of root relative M (rem) and why it is her preferred unit for font sizes. She also shows how to use variables and calculations to create harmonious font sizes that can be easily adjusted by changing the base size or scale.
#lesson
Jen demonstrates how to set up a type scale using CSS. She explains the concept of root relative M (rem) and why it is her preferred unit for font sizes. She also shows how to use variables and calculations to create harmonious font sizes that can be easily adjusted by changing the base size or scale.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
7. Apply Font Sizes Exercise
Jen explains how to apply font sizes to headings in a webpage using CSS. She demonstrates how to use variables and the font size property to set the font sizes for different heading tags. She also shows the power of using variables by easily scaling all the font sizes with a single change to the base font size or scale.
#lesson
Jen explains how to apply font sizes to headings in a webpage using CSS. She demonstrates how to use variables and the font size property to set the font sizes for different heading tags. She also shows the power of using variables by easily scaling all the font sizes with a single change to the base font size or scale.
#lesson
Media is too big
VIEW IN TELEGRAM
8. Link, Responsive Image & Default Spacing
Jen walks through various base changes that need to be made to a website. She covers topics such as changing link colors and states, adjusting image sizes and alignment, and removing default margins and padding from the body element. She also explains the use of variables and ratios in CSS styling.
#lesson
Jen walks through various base changes that need to be made to a website. She covers topics such as changing link colors and states, adjusting image sizes and alignment, and removing default margins and padding from the body element. She also explains the use of variables and ratios in CSS styling.
#lesson
Media is too big
VIEW IN TELEGRAM
9. HTML Text Markup
Jen introduces the concept of working with text in web design. She explains the three-step process of writing content, marking it up with HTML, and styling it with CSS. The students are then instructed to fill in their own information in a provided CodePen and mark up the text using appropriate HTML tags. How to add links and how to group the content using the section element is also covered in this section.
- https://personal-portfolio.css.education//ch2.html
- https://codepen.io/jen4web/pen/PogYONv
#lesson
Jen introduces the concept of working with text in web design. She explains the three-step process of writing content, marking it up with HTML, and styling it with CSS. The students are then instructed to fill in their own information in a provided CodePen and mark up the text using appropriate HTML tags. How to add links and how to group the content using the section element is also covered in this section.
- https://personal-portfolio.css.education//ch2.html
- https://codepen.io/jen4web/pen/PogYONv
#lesson
❤1