By following this structured video course, you will learn how to convert fix-width layouts to responsive layouts, contain a fluid layout with maximum or minimum properties, write syntax for a media query, select breakpoints, write HTML to embed all the saved elements into a page, and add CSS to your site ensuring that you have the skills to create your very own responsive website quickly and efficiently.
Responsive Web Design – From Concept to Complete Site starts with an overview of the technology, the best practices to follow, and then moves on to a complete implementation of a responsive site using HTML5 and CSS3 media queries. After learning the essentials of responsive web design in the introductory section, you will walk through splitting a mockup into images and content areas, defining a fluid grid using those divisions, creating a percentage-based layout for the fluid grid with CSS, and then begin creating a full-functional responsive page. The latter section contains hands-on exercises that will walk you through all the HTML5 and CSS3 code required to build your sample page.
This course ends with an overview on the future of web design, the features you can use today, and tips on how to remain current in the field.
This video briefly introduces you to the topic of the video course.
·Understand what RWD is
·Get to know what will be covered in this section.
Here you’ll understand why Responsive Web Design is important for devices and also see an example of responsive designs.
·Know why RWD matters
·Get an overview of the devices on which RWD can be used
·Analyze its use on Mobile versus Desktop
Discussion of devices and resolutions.
• Overview of device breakpoints
When you should and shouldn't use RWD.
• Know the alternatives to RWD
• Get to know the pros/cons of RWD
In this video, you’ll get to know what you can expect from this video course.
• An overview of what will be covered in the video course
Learn how to create a percentage-based layout for fluid width CSS.
• Start with a pixel width layout and convert to percent percent
• Use the equation width = target/context
Learn the best practices while working with percentages.
• Learn how to deal with large decimals
• Work with the target/context formula
Learn how to take a mock-up and create percent percent widths.
• Start with a sample mock-up and learn how to calculate widths
• Work through sample layout
Fluid width layouts can only take you so far. You need media queries to adapt your layout to different device sizes. Here you will learn how to do this.
• Determine a breakpoint
• Program a breakpoint in CSS
• Determine how the content will move at breakpoint
Learn how to write the CSS for a media query.
• Code the breakpoints in CSS
• Learn the syntax of media query CSS
Finding out how to test a simple media query in the browser.
• Write your first media query
• Implement the code from previous video in the browser
Learn how to write media query code efficiently.
• Keep in mind that you should never duplicate the code
• Learn how to override the settings for media queries
Testing in the browser is not comparable to testing on actual mobile devices.Learn how to do this.
• Find out the render resolution of your mobile phone
• Learn how to use viewport meta tags
Understand the use of HTML for the demo site.
• Start the HTML code for our site
• Build an HTML layout for our demo site
Learn how to deal with some technicalities of responsive web design.
• Analyzing CSS reset options
• HTML5 Shiv & Boilerplate as a starting point for a responsive design
• Make a consistent layout for all modern browsers
Learn how to write the HTML for the container, header and navigation.
• Add the div logo
• Add UL and LI's for navigation
• Add the header element
Learn how to write the LI's for the 4 column content area by writing the HTML for columns.
• Add UL and LI's for the 4 column layout
• Add the filler text and headline tags
• Add images
Learn how to write the HTML for the footer.
• Add text in the left column of the footer
• Add the right column with images
This video shows you how to plan and then build the CSS for our sample site.
• Briefly cover the use of CSS
• Build CSS for container
Here you’ll learn how to create a fluid width layout that will allow the logo and navigation bar to grow and remain aligned.
• Calculate the percent width for logo
• Calculate the percent width for navigation
• Write the CSS
In this video, you’ll learn how to build list items and align them in the navigation.
• Build a framework for navigation LI's
• Format navigation styles
By using the debug tools to help find and correct errors in the page, we can use it to align the elements in the navigation bar.
• Style the navigation list items
• Make live adjustments with Inspect Element/Debug tools
Here you’ll learn how to align the header and the image inside it to fill the width of the body.
• Write styles for the header
• Scale the header image to fill the width of the element
This video shows you how to build a layout that fits the content of all the four columns
• Calculate the width for column styles
• Write the styles for the list item
Here you’ll understand how to format the headings and images in the fluid column.
• Write the style for image tag in the list item
• Create styles for h2
Learn how to create a layout that fills half the column and clears the content areas above it.
• Format the paragraphs in the columns
• Build the footer styles
• Format the right and left columns in the footer
Some elements in the body are still not aligned perfectly; final tweaking will fix that.
• Remove pixel width from the container
• Bind the scaling of the page with max-width
In this video, we’ll plan how to build the media queries and breakpoints for our site.
• Review the mock-ups
• Scale the layout and determine the breakpoints
Learn how to create the first breakpoint for tablet devices and a layout that adapts to tablet size.
• Write the media query CSS
• Modify the body style in the breakpoint
Learn how to reorient and resize the navigation bar and logo content on a tablet.
• Modify the width of the navigation bar and adjust alignment
• Make the logo and fill the logo div
Existing layout works great for standard tablet-sized devices, but we need to correct it for smaller devices.
• Build a media query for 600 px width
• Make the navigation bar fill the width of the device
• Center and shrink the logo
Vertical layout will not work on a mobile device. Learn how to switch the orientation for column and content.
• Adjust column width to fill 100percent
• Adjust the size and position of the image in the columns
Header needs to align appropriately in the tablet layout and the footer content needs to stack horizontally. In this video, you will learn how to do this.
• Adjust the text alignment of the header
• Adjust the footer content to fill the width, which will cause the content to stack
Our layout works great on large and small tablets, but it still needs a few more tweaks for phones.
• Write media query CSS for 480 px (and smaller) devices
• Hide the paragraph content in the four columns
• Adjust the navigation content to make it more visible on a small device
This video gives you an overview of advanced features and why they will be useful
Fonts don't scale like other elements. Know what are the options to deal with the issue.
• What is an EM and how do you use it
• Scaling EMs
An EM is a percent-based width, so you can also use percent for font size. EM's aren't ideal, and percent-based widths have limitations, which we will cover in this video.
• Working with percent-based font width
• Understand the problem of cascading/compounding sizes in percent or EM layouts
Here, we’ll take a look at the code in action where the EM and percent fail.
• Demonstrating the cascading/compounding problem with EM and percent
• Test the code
EM's and percent's compound properties, REMs are a good solution for modern browsers.
• Learn what is an REM
• Test our code using REMs
Some new CSS features that will make font scaling more user friendly. EM, percent, and REMs aren't ideal. In the future VM and VH will help.
• Learn about VM,VH,VMAX, and VMIN
• Check the browser compatibility
• Discuss how they will be used in the future
• Learn about FitText to scale the headline text
• Discuss background-size properties that allow background images to scale
• While using background-size, consider the background-position
While working with images in RWD, bandwidth is a concern. Using large images on small devices causes unnecessary bandwidth usage. Learn what other good options are available.
• Hide/show content
• Learn how images will work in the future of RWD
Starting a site from scratch: generate your own grid or using a premade solution.
• Analyze Bootstrap, Amazium and Unsemantic
RWD leads to a large code base, and pre-processors help with repetition and complex code. Here you’ll get to learn how this is done.
• Understand what a CSS Pre-processor is, along with examples
• Learn how Pre-processors provide variables, nesting, repeated code, and more
• Use links to other resources for programming and testing
Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.
With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.
From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.
Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.