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
Media is too big
VIEW IN TELEGRAM
Media is too big
VIEW IN TELEGRAM
11. Styling Text on a Background Image
Jen guides students through adding a background image to a webpage using CSS. She starts by copying the URL of the image and then creates a new style for the outermost box of the webpage. She also sets the background-position to determine where the image should be displayed on the page, changes the text color, adds padding and margin, and makes the links more readable.
#lesson
Jen guides students through adding a background image to a webpage using CSS. She starts by copying the URL of the image and then creates a new style for the outermost box of the webpage. She also sets the background-position to determine where the image should be displayed on the page, changes the text color, adds padding and margin, and makes the links more readable.
#lesson
Media is too big
VIEW IN TELEGRAM
12. Text on Background Image Exercise
Jen guides the students through coding the "Contact Me" section of a webpage. The students are given instructions to personalize the provided text, mark up the HTML, and add styling to the section. She provides a solution and explains the HTML markup and CSS styling used. The lesson also covers concepts such as text alignment and the use of variables in CSS.
#lesson
Jen guides the students through coding the "Contact Me" section of a webpage. The students are given instructions to personalize the provided text, mark up the HTML, and add styling to the section. She provides a solution and explains the HTML markup and CSS styling used. The lesson also covers concepts such as text alignment and the use of variables in CSS.
#lesson