Media is too big
VIEW IN TELEGRAM
18. Mobile Navbar Hamburger Menu
Jen walks through how to display the navigation menu when the hamburger button is clicked using only HTML and CSS. Creating the animation effect and how to use `:focus` and `:focus-within` for keyboard navigation is also demonstrated in this lesson.
- https://codepen.io/jen4web/pen/mdgyVLJ
#lesson
Jen walks through how to display the navigation menu when the hamburger button is clicked using only HTML and CSS. Creating the animation effect and how to use `:focus` and `:focus-within` for keyboard navigation is also demonstrated in this lesson.
- https://codepen.io/jen4web/pen/mdgyVLJ
#lesson
Media is too big
VIEW IN TELEGRAM
19. Footer Exercise
Jen asks the students to build a footer for a webpage on their own. She provides instructions on how to mark up the footer and guidance on styling the footer using CSS properties like `background-color`, `background-size`, `padding`, `margin`, and `color`. Students are encouraged to add their own information, icons, and styling to make their footer look similar to the provided example.
#lesson
Jen asks the students to build a footer for a webpage on their own. She provides instructions on how to mark up the footer and guidance on styling the footer using CSS properties like `background-color`, `background-size`, `padding`, `margin`, and `color`. Students are encouraged to add their own information, icons, and styling to make their footer look similar to the provided example.
#lesson
Media is too big
VIEW IN TELEGRAM
20. Projects Using Figure
Jen guides students through coding the project section by setting up the HTML structure. She uses a figure element to associate an image with a caption that includes the course title and a list of skills. She also makes the image and the course title clickable by adding anchor tags with appropriate attributes and discusses the option of hiding one of the links for accessibility purposes.
- https://personal-portfolio.css.education/ch4.html
- https://codepen.io/jen4web/pen/zYXxPrq
#lesson
Jen guides students through coding the project section by setting up the HTML structure. She uses a figure element to associate an image with a caption that includes the course title and a list of skills. She also makes the image and the course title clickable by adding anchor tags with appropriate attributes and discusses the option of hiding one of the links for accessibility purposes.
- https://personal-portfolio.css.education/ch4.html
- https://codepen.io/jen4web/pen/zYXxPrq
#lesson
Media is too big
VIEW IN TELEGRAM
21. Project Exercise
Jen guides the students through marking up the HTML and making corrections to the code. She adds CSS styles to the section, including background color, padding, text color, and image sizing. Styling the figure captions, including the background color, opacity, text alignment, and font styles is also covered in this lesson.
#lesson
Jen guides the students through marking up the HTML and making corrections to the code. She adds CSS styles to the section, including background color, padding, text color, and image sizing. Styling the figure captions, including the background color, opacity, text alignment, and font styles is also covered in this lesson.
#lesson
Media is too big
VIEW IN TELEGRAM
22. CSS Grid
Jen demonstrates how to position figure captions on top of figures using CSS grid. She explain the concept of grid rows and columns and show how to use the grid properties to manipulate the positioning of the figure and figure caption elements. She also provides additional styling to adjust the font size and margin of the captions.
#lesson
Jen demonstrates how to position figure captions on top of figures using CSS grid. She explain the concept of grid rows and columns and show how to use the grid properties to manipulate the positioning of the figure and figure caption elements. She also provides additional styling to adjust the font size and margin of the captions.
#lesson
Media is too big
VIEW IN TELEGRAM
23. Grid Exercise
Jen is making changes to the HTML and CSS code to create a grid layout for a series of linked images. She add a div element to group the images and apply CSS styles to display the images in a grid format with equal width columns and a gap between them. She also add margin to create a visual separation between the top and bottom grids.
#lesson
Jen is making changes to the HTML and CSS code to create a grid layout for a series of linked images. She add a div element to group the images and apply CSS styles to display the images in a grid format with equal width columns and a gap between them. She also add margin to create a visual separation between the top and bottom grids.
#lesson
Media is too big
VIEW IN TELEGRAM
24. Tablet and Mobile Layouts
Jen walks through modifying the display of a webpage using media queries to make it responsive for tablet and mobile dimensions. She demonstrates how to stack items using the display block property and add spacing between elements. She also shows how to use Flexbox to achieve a specific layout for the set of images at the bottom of the page.
- https://codepen.io/jen4web/pen/poBvpar
#lesson
Jen walks through modifying the display of a webpage using media queries to make it responsive for tablet and mobile dimensions. She demonstrates how to stack items using the display block property and add spacing between elements. She also shows how to use Flexbox to achieve a specific layout for the set of images at the bottom of the page.
- https://codepen.io/jen4web/pen/poBvpar
#lesson
Media is too big
VIEW IN TELEGRAM
25. Featured Project Desktop CSS Exercise
Jen instructs students to create a featured section for a website including a large image and overlapping elements. She provides a starting CodePen and recommends starting with the markup and then adding styling. A possible solution for how to structure the HTML and CSS code for the featured section, including using grids to reorder elements and making adjustments for different breakpoints is also provided in the lesson.
- https://personal-portfolio.css.education/ch5.html
#lesson
Jen instructs students to create a featured section for a website including a large image and overlapping elements. She provides a starting CodePen and recommends starting with the markup and then adding styling. A possible solution for how to structure the HTML and CSS code for the featured section, including using grids to reorder elements and making adjustments for different breakpoints is also provided in the lesson.
- https://personal-portfolio.css.education/ch5.html
#lesson
Media is too big
VIEW IN TELEGRAM
26. Converting from Codepen to VSCode
Jen guides students through the process of setting up their project in VS Code and provides some of the necessary images as a download from GitHub. The HTML and CSS code is transferred into VS Code and style.css and index.html are also linked.
- https://personal-portfolio.css.education/ch6.html
- https://github.com/jen4web/fem-personal-portfolio
#lesson
Jen guides students through the process of setting up their project in VS Code and provides some of the necessary images as a download from GitHub. The HTML and CSS code is transferred into VS Code and style.css and index.html are also linked.
- https://personal-portfolio.css.education/ch6.html
- https://github.com/jen4web/fem-personal-portfolio
#lesson
Media is too big
VIEW IN TELEGRAM
27. Linking Fonts & Images
Jen guides students through embedding the fonts from Google Fonts. She also updates the image URLs in the HTML and CSS files from CodePen to the images they have downloaded from GitHub.
#lesson
Jen guides students through embedding the fonts from Google Fonts. She also updates the image URLs in the HTML and CSS files from CodePen to the images they have downloaded from GitHub.
#lesson
Media is too big
VIEW IN TELEGRAM
28. Addressing CSS Issues
Jen shows students how to preview their web page in a web browser using the "open in default browser" extension for Visual Studio Code. She also addresses some issues related to the positioning and styling of elements and provides solutions to fix them.
#lesson
Jen shows students how to preview their web page in a web browser using the "open in default browser" extension for Visual Studio Code. She also addresses some issues related to the positioning and styling of elements and provides solutions to fix them.
#lesson
Media is too big
VIEW IN TELEGRAM
29. Adding Background Styles
Jen demonstrates how to create jagged edges on a web page using background images. It is possible to have multiple background images on the same element and Jen demonstrates how to set it up by adding the URLs of the images separated by a comma. She also discusses the importance of the order of the background images and how to set the background-repeat and position for each image.
#lesson
Jen demonstrates how to create jagged edges on a web page using background images. It is possible to have multiple background images on the same element and Jen demonstrates how to set it up by adding the URLs of the images separated by a comma. She also discusses the importance of the order of the background images and how to set the background-repeat and position for each image.
#lesson
Media is too big
VIEW IN TELEGRAM
30. Creating Inside Page Exercise
Jen instructs students to create the inside page for the website, including marking up the code, changing the background image, and working on their flexbox and grid skills to lay out the webpage. She also walks through a possible solution for the HTML markup.
- https://personal-portfolio.css.education/ch7.html
#lesson
Jen instructs students to create the inside page for the website, including marking up the code, changing the background image, and working on their flexbox and grid skills to lay out the webpage. She also walks through a possible solution for the HTML markup.
- https://personal-portfolio.css.education/ch7.html
#lesson
Media is too big
VIEW IN TELEGRAM
31. Overriding CSS with Classes
Jen demonstrates overriding existing styles by adding new classes to the intro and featured sections. She also explains how to adjust the width and aspect ratio of the YouTube video using CSS.
#lesson
Jen demonstrates overriding existing styles by adding new classes to the intro and featured sections. She also explains how to adjust the width and aspect ratio of the YouTube video using CSS.
#lesson
Media is too big
VIEW IN TELEGRAM
32. Styling Images with Grid
Jen demonstrates how to style the figure element with multiple images by applying grid properties to arrange the images and captions in a desired layout. She also shows how to override conflicting styles and adds additional styling to improve the appearance of the images and captions.
#lesson
Jen demonstrates how to style the figure element with multiple images by applying grid properties to arrange the images and captions in a desired layout. She also shows how to override conflicting styles and adds additional styling to improve the appearance of the images and captions.
#lesson
Media is too big
VIEW IN TELEGRAM
33. Increasing CSS Specificity
Jen explains how to address conflicts in CSS styles and increase specificity to ensure that the desired styles are applied. How to position elements using a grid layout and add a background image with transparency to a specific div is demonstrated. She also shows how to remove a background image from a specific section by overriding the previous styles.
#lesson
Jen explains how to address conflicts in CSS styles and increase specificity to ensure that the desired styles are applied. How to position elements using a grid layout and add a background image with transparency to a specific div is demonstrated. She also shows how to remove a background image from a specific section by overriding the previous styles.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
34. Wrapping Up
Jen wraps up the course by congratulating students on creating a two-page website using HTML and CSS. She encourages students to think about the story they want to tell with their portfolio and suggests swapping in screenshots, code snippets, or other elements that are meaningful to them.
#lesson
Jen wraps up the course by congratulating students on creating a two-page website using HTML and CSS. She encourages students to think about the story they want to tell with their portfolio and suggests swapping in screenshots, code snippets, or other elements that are meaningful to them.
#lesson
Title: Getting a Software Engineering Job, v3
Description: Comprehensive guide to securing a software engineering job. Optimize your resume, GitHub profile, and LinkedIn. Prepare for technical interviews with advice from Jerome, who’s helped 300+ developers get jobs!
Link: https://frontendmasters.com/courses/getting-a-job-v3/
Time: 2 hours, 58 minutes
Lessons: 22 / 22
Tags: #course #frontendmasters #720p
Description: Comprehensive guide to securing a software engineering job. Optimize your resume, GitHub profile, and LinkedIn. Prepare for technical interviews with advice from Jerome, who’s helped 300+ developers get jobs!
Link: https://frontendmasters.com/courses/getting-a-job-v3/
Time: 2 hours, 58 minutes
Lessons: 22 / 22
Tags: #course #frontendmasters #720p
👍1
Media is too big
VIEW IN TELEGRAM
1. Introduction
Jerome Hardaway begins the course by sharing his experience helping veterans find software engineering jobs. The current market conditions and role of AI in the hiring process is also discussed.
- https://github.com/FrontendMasters/getting-a-job-v3/
#lesson
Jerome Hardaway begins the course by sharing his experience helping veterans find software engineering jobs. The current market conditions and role of AI in the hiring process is also discussed.
- https://github.com/FrontendMasters/getting-a-job-v3/
#lesson
Media is too big
VIEW IN TELEGRAM
2. Hiring Process & The Four Gatekeepers
Jerome discusses the gatekeepers in the hiring process and how to fit into a user matrix. The gatekeepers include application tracking systems, HR managers, and Developer Teams. Understanding these users helps applicants improve how they present themselves and their work during the interview process.
#lesson
Jerome discusses the gatekeepers in the hiring process and how to fit into a user matrix. The gatekeepers include application tracking systems, HR managers, and Developer Teams. Understanding these users helps applicants improve how they present themselves and their work during the interview process.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
3. Resume
Jerome discusses optimizing resumes for application tracking systems. A resume should clearly communicate experience, technical skills, achievements or awards, leadership, educational background, and other diverse projects, publications, or volunteer experience.
#lesson
Jerome discusses optimizing resumes for application tracking systems. A resume should clearly communicate experience, technical skills, achievements or awards, leadership, educational background, and other diverse projects, publications, or volunteer experience.
#lesson