Introduction to Front-End Development

Explore content management systems like WordPress to create posts, customize templates, and build styled pages with JavaScript, using code snippets and external files.

Explore in-browser web developer tools in Chrome and IE, learning to inspect elements, view styles, set breakpoints, use the source and debugger panels, and monitor network activity and cookies.

Explore online tools to test code snippets with JavaScript and CSS. Create a blue hello world heading, and attach event listeners for hover and click interactions to show live output.

Explore integrated development environments (IDEs) and local development with installable tools, and learn debugging, version control, and editors like Visual Studio Code and Microsoft Visual Studio for front-end development.

Trace the web’s evolution from Tim Berners-Lee’s CERN prototype to the W3C’s HTML milestones, including early HTML specs, doctype, image maps, and HTML 4.0/4.01.

Explore HTML 4.01 concepts that separate content from presentation, move styles to external CSS, and use proper document types (strict, transitional, frameset) with accessible markup.

Explore the HTML document structure from doctype to head, including title, meta tags, og properties, and linking stylesheets and scripts.

Explore the document body by distinguishing block level and inline elements, using div and span with id and class attributes, and applying accessible headings with proper opening and closing tags.

Learn how text and lists are structured in HTML, including paragraphs, line breaks, non-breaking spaces, ul, ol, li, anchors with href, and inline elements like em, strong, code, and abbr.

Explore how tables present information with headers, a body, and a footer, and use colspan to combine cells horizontally and vertically for flexible front-end layouts.

Explore how forms collect user data and send it to servers with get or post, using action and method attributes and inputs like text, password, radio, and submit buttons.

Explore what's new in HTML5, including a doctype, semantic elements like header, nav, aside, and section, figcaption usage, new input types, localStorage, sessionStorage, drag-and-drop APIs, and real-time messaging between documents.

Learn how css separates content from presentation, uses id and class selectors, declares properties with colon and semicolon, and applies styles via external files, style tags, or inline styles.

Explain how the browser builds the document’s object model and applies CSS rules through cascade and precedence, using selectors, group and descendant patterns, with examples like hello world and anchors.

Apply color to text or background using color and background properties, and control transparency with rgb and rgba values. Explore how the color palette and transparency affect visibility and layering.

Explore CSS text properties that control size, style, decoration, and alignment using absolute and relative units such as px, em, rem. Apply line height and text transform to improve readability.

Explore the CSS box model, including block and inline elements, width and height, padding, borders, margins, background, border images, and float, display, and visibility.

Master CSS3 selectors, including class, ID, and element selectors, plus pseudo-classes and attribute selectors. Learn to import custom fonts with font-face and apply media queries for responsive design.

Learn how the document object model treats a page as a tree of nodes, enabling traversal, styling, and dynamic changes like insertion or removal of nodes.

Explore vanilla javascript to add interactivity by manipulating the browser's dom with variables, functions, and event listeners. Use getElementById, getElementsByName, and querySelector to change content and styles on click.

Learn JavaScript libraries that speed development, offer DOM manipulation and charts, and how to link them for cross-browser support; discover Bootstrap for responsive styles and prebuilt styles to minimize size.

Explore how libraries like Bootstrap enable quick styling, how frameworks provide prebuilt structure for building and deploying web apps, and why a website comprises pages enabling user actions.

Learn how Ajax updates a web page in the same window without a full reload, using JavaScript to fetch data from the server.

Explore JavaScript object notation by building objects with curly braces, properties and values of various types, and render data to the dom using loops, functions, and simple tables.

Sketch and workflow illustrate planning a front-end page with header, book list table, internal and external links, responsive layouts across devices, and ajax content loading.

Explore html structure by building a page with doctype, html, head, and body, featuring a header, internal and external menus, and a table of authors and images.

Style your page using Bootstrap with minimized files and a script loaded in the correct order. Create a responsive navigation bar with collapsible menus, active highlights, and screen reader accessibility.

Add interactivity to a speech themed front-end, making a menu clickable and dynamically populate a table with books using JavaScript arrays, a data fetch function, and DOM updates.

Master front-end development by styling table cells, resizing images, and creating responsive layouts that simulate mobile view, including linking titles to an Amazon book.

The instructor thanks you for joining the introduction to front-end development course and expresses hope you enjoyed the experience.