The intention of this exercise is to give you more experience creating HTML files and styling them with CSS.
-
Using Visual Studio Code, open the folder
flexpath-html-and-css-in-depth-exerciseswherever you saved it on your device. -
Then open the
flexpath-html-and-css-in-depth-exercises/exercisesfolder. Inside are a collection of text files providing instructions for each exercise. For each exercise, create a new folder for using the exercise_xx format, and create your html and css files inside of there -
To test your code, you will just open your created .html files in your web browser and check that the rendered (displayed) contents meet the exercise requirements. We have provided you with a video
open-html-file-in-browser.mp4showing how to do this.You will right click the file and select either "Reveal in Finder" (Mac) or "Open in File Explorer" (Windows). Then, right-click the .html file and select "Open With". Then select your web browser to open the file.
VIDEO DISCLAIMER - You will need to clone the repo to your local device before you can watch the .mp4 file since GitHub does not support watching it from here.
Exercise solutions are in the /solution folder
-
HTML Fundamentals:
- Basic HTML syntax, including tags, attributes, and the structure of an HTML document.
- Creating headings, paragraphs, and lists.
- Inserting images and understanding the use of attributes like
srcandalt. - Using semantic HTML elements like
header,footer,nav,section, andarticle. - Creating forms with various input elements.
- Linking between pages using anchor tags (
<a>) and setting up navigation.
-
HTML Page Structure:
- Understanding the
doctypedeclaration and the importance of the<html>,<head>, and<body>tags. - Using meta tags for additional information like character encoding and viewport settings.
- Understanding the
-
CSS Basics:
- Styling text, including properties like
color,font-size,font-family, andtext-align. - Using inline, internal, and external CSS to apply styles to HTML elements.
- Understanding the CSS box model, including
margin,padding,border, andwidth. - Applying background colors, images, and gradients.
- Working with CSS selectors, including element, class, ID, and attribute selectors.
- Using CSS combinators like descendant and child selectors.
- Implementing responsive design using media queries.
- Styling text, including properties like
-
Layout Techniques:
- Using Flexbox for one-dimensional layout and positioning elements.
- Creating grid-based layouts with CSS Grid.
- Controlling layout and positioning with properties like
display,float,position, andz-index.
-
Advanced Styling:
- Adding transitions and animations for a dynamic user experience.
- Using pseudo-classes and pseudo-elements to style specific parts of elements.
- Understanding the concept of CSS specificity and the importance of the cascade.