CEIT419 Web Design
CEIT419 focuses on fundamentals of web design, covering HTML5, CSS3, and responsive web design techniques. Students will build and style web pages, work with layouts, and create interactive elements. The course emphasizes modern design principles, prototyping, and user experience considerations using Visual Studio Code (VS Code) as the primary development environment.
- Understand fundamental web design concepts.
- Create web pages using HTML5 with semantic markup.
- Apply CSS3 styling and master selectors and layouts.
- Utilize advanced CSS techniques such as Flexbox and Grid.
- Implement responsive web design for various screen sizes.
- Develop interactive web components with animations and transitions.
- Build and embed HTML forms, multimedia, and interactive elements.
- Create prototypes and iterate on web design concepts.
Course Objectives
Learning Materials
Resources
📍 Beginner
- Codecademy: Web Design
- Webflow University
- Scrimba: HTML & CSS
- W3Schools: CSS Tutorial
- W3Schools: HTML Tutorial
- HTML & CSS: Design and Build Websites – Jon Duckett (PDF)
- HTML Cheat Sheet
- CSS Cheat Sheet
📍 Intermediate
- FreeCodeCamp: Responsive Web Design
- Flexbox Adventure Game
- CSS Grid Attack Game
- MDN Web Docs: CSS Grid
- Intermediate Web Design YouTube Playlist
- CSS Advanced Selectors & Box Model (YouTube)
📍 Advanced
Roadmaps
Skills to Learn
📍 Beginner
- Learn basic HTML tags, elements, and attributes.
- Understand CSS styling, colors, fonts, and simple layouts.
- Practice building static web pages.
- Explore basic typography and web font integration.
📍 Intermediate
- Develop fluid and responsive layouts using CSS Flexbox and Grid.
- Implement media queries for mobile responsiveness.
- Work with backgrounds, lists, and positioning techniques.
- Create structured navigation and interactive elements.
📍 Advanced
- Build animated and interactive web pages with CSS transitions and animations.
- Implement JavaScript to enhance user interaction.
- Learn performance optimization techniques for faster websites.
- Apply best practices in accessibility and SEO.
- Develop a fully functional, responsive web design project.