Watch Creating a Responsive Web Design

Name: Creating a Responsive Web Design
Genre: How To
Released: January 1, 2015

2015
1 Season

Creating a Responsive Web Design from Codify Design Studio is a comprehensive tutorial series that teaches you how to design and develop fully responsive websites. The show assumes that you already have a basic understanding of HTML, CSS, and JavaScript, but it starts from the basics to ensure that everyone can follow along.

Over the course of the series, you'll learn how to create a beautiful and functional website that looks great on any device. You'll start by learning the principles of responsive design, including how to use media queries to adjust your layout based on the screen size of the device. You'll then move on to creating a design and implementing it on a website.

One of the unique features of this series is that it is taught by a team of professional developers who work at Codify Design Studio. This means that you'll be learning the same techniques and tools that the pros use every day. You'll get an insider's look at the design process, and you'll pick up lots of tips and tricks along the way.

The show is split into several episodes, each of which covers a specific aspect of responsive design. The first episode is an introduction to the series and covers the basics of responsive design theory. You'll learn why responsive design is so important and how it can benefit your website. You'll also get an overview of the tools and technologies that you'll be using throughout the rest of the series.

In the second episode, you'll start with the basics of HTML and CSS. You'll learn how to create a basic layout using CSS and how to style your website to make it look great. You'll also learn how to use CSS grid to create a responsive layout that adjusts to different screen sizes.

In later episodes, you'll learn how to add interactivity to your website using JavaScript. You'll learn how to use jQuery to build dynamic menus and how to use AJAX to fetch data from an API. You'll also learn about other responsive design techniques, such as using SVG images and implementing a mobile-first approach to your design.

Throughout the series, you'll be following along with a real project. You'll start with a wireframe of the website and gradually build it up into a fully functional site. You'll learn how to use design tools like Sketch and Figma to create a mockup of your site, and you'll learn how to turn that mockup into a live website.

The show is presented in a clear and concise manner, making it easy to follow along even if you're a complete beginner. The presenters are knowledgeable and enthusiastic, and they do a great job of explaining complex concepts in a way that is easy to understand.

Overall, Creating a Responsive Web Design from Codify Design Studio is an excellent resource for anyone who wants to learn how to design and develop responsive websites. Whether you're a beginner or an experienced developer, this series has something to offer. It covers all the basics of responsive design, and it provides lots of practical tips and tricks that you can use in your own projects. Highly recommended!

Filter by Source

No sources available

Seasons

55. Where to go from here

Find more resources online that catalog and explain the full set of HTML elements and CSS properties available to you.

54. Setting page breaks with CSS

Using CSS to help inform possible page breaks when printing multiple pages.

53. Styling the footer

Making adjustments for printing the footer content.

52. Switching our image tags with CSS

Referencing alternate images with CSS when confronted with HTML image tags.

51. Setting up the Atmosphere section

Adjusting the layout and styles for the Atmosphere section.

50. Setting up the Main section

Adjusting the layout and styles for the main promotional area.

49. Displaying URLs when printing

Using CSS pseudo-elements to display the url destination of anchor links.

48. Setting up the header

Combining pseudo-elements and layout adjustments to optimize printing of the header composition.

47. Setting up the base styles

Creating the base styles for optimizing readability for print.

46. Linking a CSS file for print

Using a separate CSS file specifically for printing.

45. Strategy for printing

Considering the possibilities for transforming the display of our HTML content for the printed page.

44. Adjusting the footer

Making additional adjustments to the footer content.

43. Adjusting the How-To section

Making layout changes to the How-To section

42. Adjustments for the header and hero

Making content and layout adjustments to the logo and hero content

41. Adjusting the spacing of the navigation and footer

Making final layout adjustments tot he navigation and footer elements.

40. Rearranging the navigation

Converting the menus into a single, indented list for small screens.

39. Rearranging the how-to section

Adjusting the images, text, and blockquote in the How-To section

38. Rearranging the main and atmosphere sections

Making layout adjustments to the promotional and feature areas.

37. Adjusting to the logo and hero elements

Using an alternate logo and header information.

36. Moving the navigation for smaller screens

Relocating the navigation to follow to the content.

35. Making adjustments for medium screens

Creating layout adjustments for medium sized screens.

34. Making adjustments for large screens

Creating our first major layout adjustments for slightly smaller screens.

33. Making minor adjustments for larger screens

Making minor layout adjustments when the layout touches the browser's edges.

32. Adding indication arrows

Create triangles with CSS to indicate which menu items have sub menus.

31. Device compatibility options for nav

Adding support for ARIA, for multi-input devices and operating systems.

30. Showing and Hiding the nav sub menus

Set the display property of nested bullet lists to create the sub menu effect.

29. Styling the nav list-items and links

Style the anchor links within the bullet list to resemble a menu.

28. Re-positioning the Nav

Move the navigation menu below the content on smaller screens.

26. Adding content with pseudo-elements

Keep your HTML clean by adding design-related content with CSS.

25. Styling the How-To Section blockquote element

Add style and positioning properties to a pull quote.

24. Styling the How-To Section aside elements

Add CSS rules to style images and text within the How-To section.

23. Styling the Atmosphere section

Adding color, style and graphics in order to style the Atmosphere section.

22. Clearing floats with CSS pseudo-elements

Use pseudo-elements to add an element with clear properties to clear floating child elements.

21. Adding graphics to the main section

Adding SVG graphics to the columns in the main section.

20. Setting up three-column row

Learn to create columns using float properties.

19. Creating the button style

Style an anchor link into a button with a CSS animated rollover effect.

18. Style the logo and hero item

Transforming the anchor tag into a graphical logo link.

17. Style the heading and page container

Adding an image to the background of the header element.

16. Defining the basic text styles

Creating CSS rules for headings, paragraphs and anchor links.

15. Importing a Google Font

Learn to search and implement a Google font into your web page.

14. Adding the footer content

Add copyright text and hyperlinks to the bottom of the page.

13. Adding the navigation

Creating a bullet list to be used as the navigation.

12. Add content to the How-To section

Adding images, text, and column containers to the How-To section

11. Add content to atmosphere section

Adding an article, text and buttons to the Atmosphere section.

10. Add content to main section

Adding column containers and content into the main promotional section.

9. Adding content into the header

Add a linked logo and promotional content into the header area.

8. Creating the main HTML containers

These HTML5 elements allow us to structure the outter-most containers for our web layout.

7. The HTML strategy for our layout

We'll explore the HTML structure we'll need in order to create the desired layout.

6. Setting up our project

Download the exercise files from this lecture. First we'll gather files form the exercise files, then set up our main project folder.

5. About the exercise files

Learn about the project files, as well as the final project, that are provided with this course.

4. What you'll need to complete this course

This provides a list of software you'll need, if you want to follow along with the course.

3. Terms and technology we'll be covering

For those new to HTMl and CSS, we'll briefly talk about the anatomy of HTML elements and CSS rules.

2. About this course

See how we'll be creating a web design that will provide an optimal reading experience across various devices, as well as paper.

1. Introduction to this course

Get an overview of what's covered in this step-by-step course, including the final project, and technologies that will be covered.

Description

Genres

How To
Channel

Codify Design Studio

Premiere Date

January 1, 2015

If You Like Creating a Responsive Web Design, Then Try...

The Pioneer Woman

House Hunters International

Top TV Shows

Also on Codify Design Studio

Creating A Responsive HTML Email