Modern, Responsive Websites with HTML & CSS
HTML och CSS är de grundläggande byggstenarna på webben. Den här kursen ger dig de kunskaper och färdigheter som krävs för att bygga snygga, tillgängliga webbplatser som ser bra ut på alla enheter.
Boka utbildning
Du lär dig hur man bygger webbplatser som innehåller textelement, hyperlänkar, bilder, ljud och video, tabeller och formulär, allt stylat med de senaste CSS-teknikerna. Du lär dig också hur man gör webbplatserna responsiva från början.
(Vissa liknande kurser nämner HTML5 och CSS3. Vår gör det inte eftersom HTML5 antyder JavaScript, vilket inte täcks av denna kurs. Koden du producerar under kursen kommer att använda de mest uppdaterade funktionerna i båda språken).
Målgrupp och förkunskaper
Den här kursen vänder sig til dig som kommer att bygga eller underhålla webbplatser. Ingen tidigare erfarenhet av HTML eller CSS krävs.
Detaljerad information
Introduction
- Setting up the development environment
- How the web works
- HTML
- Elements, tags, and attributes
- HTML document structure
- An introduction to mobile-first development
- Special characters
- Comments
- CSS
- Rules, selectors, and properties
- Linking HTML and CSS
- Chrome's Developer Tools
- Publishing
Text Elements
- Headings and paragraphs
- Other text elements
- Styling text elements
- CSS values and units
- Web fonts
- Unordered and ordered lists
- Styling lists
Hyperlinks
- Hyperlinks
- URLs and paths
- Document fragments
- Email links
- Styling links
More CSS selectors
- Selectors (again)
- Selector lists
- Type, class, and ID selectors
- Attribute selectors
- Pseudo-classes and pseudo-elements
- Combinators
- The cascade, specificity and inheritance
- At-rules
Structuring content
- Block and inline elements
- The box model
- Styling boxes
- Semantic elements
- Line breaks and horizontal rules
- An introduction to layout using CSS Grid
Multimedia and embedding
- Images
- Image formats
- Figures and captions
- Styling images
- Background images
- Video and audio
- Media container formats
- Video text tracks
- Embedding content with iframe, embed, and object (briefly)
- SVG
- Icons
Tables
- Table rows and cells
- Headers
- Spanning
- Column groups
- Captions
- Semantic table tags
- Styling tables
Forms
- The purpose of forms
- Forms
- Labels and text boxes
- Buttons
- Styling forms
- Sending form data to the server
- Grouping form fields
- Input types and attributes
- Drop down boxes
- Progress bars
More layout
- Normal flow
- Floats
- Positioning
- Flexbox
- Multi-column layout
- Grid
- Responsive design
- Media queries
- Feature queries
- Responsive media
- Intrinsic layout patterns
More CSS properties
- Rounded corners
- Multiple backgrounds
- Gradients
- Shadows
- Text effects
- Transforms
- Transitions
- Animations
- And more…
CSS frameworks and preprocessors
- CSS frameworks
- The pros and cons of CSS frameworks
- Popular CSS frameworks
- CSS preprocessors
- CSS preprocessor features
- Popular CSS preprocessors
- CSS’s var function
Introduction to UI/UX design, SEO, & performance optimisation
- UI/UX design
- UI/UX design guidelines and best practices
- Search Engine Optimisation (SEO)
- HTML tags that are important for SEO
- SEO best practices
- Website performance optimisation