This course will be primarily focusing on HTML and CSS, but there will be some JavaScript as well. It is also important to note that we will be set up a "front end web development" environment and workflow for macOS. Closed captioning is available.
HTMLHint and Stylelint
FREE PREVIEWESLint and Prettier
VS Code
Hosting The Site
Cyberduck
Setting Up Git Part 1
Setting Up Git Part 2
Setting Up Git Part 3
Setting Up Git Part 4
Setting Up Github Part 5
Installing Node.js and NPM Part 1
Installing Node.js and NPM Part 2
What makes up a basic web page?
What exactly is HTML?
What exactly is HTML? (quiz)
The HTML Element Index
Rendering text content to the html page
Rendering text content to the html page
What does UTF-8 stand for?
The viewport and how it relates to the meta element
What is UTF-8?
The title element purpose and meaning
The body element purpose and meaning
The h1 element
Basic HTML wrap up assessment
Basic Git Commands Part 1
Basic Git Commands Part 2
Basic Git Cxommands
The purpose of this section
IP addresses
How the DNS system works
What is HTTP and how does it relate to websites?
Creating an account on Namecheap
Installing and Setting up Cyberduck
Basic CSS Part 1
Basic CSS Part 2
Basic CSS
What is a sticky footer?
Basic Site Navigation Desktop Part 1
Basic Site Navigation Desktop Part 2
Types of Intellectual Property Part 1
Types Of Intellectual Property Part 2
Types Of Intellectual Property Part 3
Creating a caption for a CC-Licensed image
Types Of Intellectual Property (quiz)
Installing HTMLHint, Stylelint, and Prettier
Completing the index.html markup
Merging the completing-home-markup branch into the main branch
Completing the basic portfolio.html markup
Sectioning Elements Part 1
Sectioning Elements Part 2
Sectioning Elements Part 3
Sectioning Elements (quiz)
The CSS Box Model Part 1
The CSS Box Model Part 2
The CSS Box Model Part 3
The CSS Box Model Part 4: Positioning text in an image
The CSS Box Model and Document Fllow (quiz)
CSS Media Queries Responsive Web Design Part 1
CSS Media Queries and Responsive Design Part 2
Merging responsive-navigation-smaller-viewports branch into main branch
CSS Media Queries and Responsive Design Part 3
Installing ESLint and Husky
Adding a media query to our portfolio responsive navigation
Completing the portfolio.html page styling: the CSS Grid image gallery
The CSS Grid min-width: 600px media query
The CSS Grid min-width: 900px media query
The CSS Grid min-width: 1350px media query
Adding classes and their styling to the figure elements
Adding classes and their styling to the figcaption elements
Adding a class to the CC licensing svg img elements
Merging the completing-portfolio-css-grid-styling branch into the main branch
Adding background images to index.html and portfolio.html with opacities < 100%
CSS Media Queries (quiz)
The img element in HTML5
So why are the display AND the margin property needed to center an image on the HTML page?
The background property and the img element
Responsive design with the CSS width property and height property with images
Creating the hamburger.js file
Merging the hamburgerjs branch into the main branch
Creating the about.html markup
Merging the about-markup branch into main and creating the about.html css
Merging the about-css branch into the main branch
The background-image property using JavaScript
The section element .quote-container class and the .addEventListener() method
The JavaScript .style property and the CSS background-image property
Adding the images used in hover.js to the images folder and merge the about-random-quote-images branch into the main branch
Creating the Intro Section and the Professional Experience Section
Creating the Resume Skills section
The resume footer and the contact info section
Merge the resume-markup branch into the main branch
resume-css part 1 - desktop
resume-css part 2 - desktop
resume-css part 3 - desktop
resume-css part 4 - desktop
resume-css part 5 - desktop
resume-css part 6 - desktop
resume-css part 7 - desktop
The @media (min-width: 480px){} media query
The @media (min-width: 900px){} media query part 1
The @media (min-width: 900px){} media query part 2
The @media (min-width: 900px){} media query part 3
The css-resume tooltips styling
Merge the resume-css branch into the main branch
Create the join page
Embed the ConvertKit subscription form in join.html and move internal styling into join.css
Move inline CSS from join.html markup into join.css
Adding a radial gradient to the background of the body element of the join.html page
Minor styling tweaks for improved accessibility
Removing the subscription form email input from the main-nav on expansion
HTML and CSS linting of the join.html page
Merge the create-join-page branch into the main branch
Basic SEO for Websites
Install Google Lighthouse and run an index.html audit
Running Lighthouse audits on the join.html and portfolio.html pages
Lighthouse audits contd and merge the seo branch into the main branch
Converting jpgs to webps, adding lazy-load to images, and merging the webp-lazy-load branch into the main branch
Highlighting the navigation link of the active page using JavaScript
Adding the .active class selector to the main.css file
Adding the .active class and animated text decoration CSS code to portfolio.css
Adding the .active class and animated text decoration CSS code to quote-cloud.css
Adding the .active class and animated text decoration CSS code to join.css
Merge the link-highlight branch into the main branch
Upload site content to the namecheap server using Cyberduck
Change about heading color on click and merge change-about-heading-color-on-click branch into main branch
Next Steps
Further improving our sites: removing unused css
Remaining Improvements to the Site Part 1
Remaining Improvements to the Site Part 2
Fixing NPM Issues
Link to the final site code and production site
Running npm audit fix 7.29.23 to fix all npm package vulnerabilities
