Advanced css and html

Learn to Code Advanced HTML & CSS

Learn to Code Advanced HTML & CSS is written by designer & front-end developer Shay Howe.

Checkout Learn to Code HTML & CSS for a beginner’s guide front-end design & development.

Want to learn to more HTML & CSS, or study other topics? Find the right course for you.

Learn to Code Advanced

Develop & Style Websites

Learn to Code Advanced HTML & CSS takes a deeper look at front-end design and development, expanding on what is covered in the beginner’s guide. Studying modern front-end development, this guide teaches the latest for any designer looking to round out their front-end skills.

Learn to Code HTML & CSS the Book

Learn to Code HTML & CSS is an interactive beginner’s guide with one express goal: teach you how to develop and style websites with HTML and CSS. Outlining the fundamentals, this book covers all of the common elements of front-end design and development.

Looking for Beginner HTML & CSS Lessons?

Checkout these beginner focused HTML and CSS lessons, compiled into a simple and comprehensive guide dedicated to helping beginners learn HTML and CSS, working through all common components.

Join the Newsletter

To stay up to date and learn when new courses and lessons are posted, please sign up for the newsletter—spam free.

Источник

Advanced HTML and CSS

This course focuses on a single large-scale web project created by the instructor over the course of 10 weeks. Through this exercise, students learn how to adapt skills they have learned to real life web projects. Class lectures and demonstrations introduce students to HTML 5 and CSS3, which students are encouraged to incorporate into their projects. Peer feedback through critiques and discussions are central to this hybrid studio/lecture course.

Resources

Technical

Inspirational

Schedule

Week 1

Syllabus and Refresher HTML/CSS

Basic HTML/CSS Structure

     
My Website
 
 
Subtitle
 
Content goes here.
    

DOM = Document Object Model

HTML5 vs. older versions

• New elements: header, section, footer, aside, nav, main, article, figure
• Canvas
• SVG
• Audio
• Video

CSS3 vs. older versions

Exercise

Build a simple website, include these files within a folder:

• index.html file
• folder titled “images”
• folder titled “style” with a “main.css” file within
• folder titled “javascript” with a “main.js” file within
• three additional .html pages in the root folder

Build out the basic structure for each page before you worry about styling the page. Once you’ve included content, begin adding style. Note inheritance and how CSS maps to the HTML elements. Use properties like margin, padding, font-size, color, background-color, width, etc. Remember units like %, em, and px.

Challenge–write the least redundant, most concise HTML/CSS possible (e.g. try and avoid divs, use the same CSS for multiple components, etc.)

Week 2

Advanced Syntax: CSS selectors and inheritance & HTML sections, articles, code blocks

HTML Tags

  
This will show up as code, with the p tags
  

CSS Inheritance

• Depends heavily on HTML structure of page
• Can use selectors like ids (used once) and classes (reusable):

 
Apply id 'cat'
 
Apply class 'dog'
 

Body is the parent of article, article is the parent of heading and paragraph. Heading is the first child of article, and paragraph is the second child of article.

• Certain CSS properties don’t translate to children (e.g. padding or borders won’t auto cascade to all of the elements within the body, for obvious reasons)

• CSS gives the ability to select very specific combinations of elements. Some useful syntax includes
  • div p – all p’s that are inside divs
  • div > p – all p’s that are children of div
  • div, p – selects both div and p elements
  • p:first-child – selects all of the p first children
  • p:nth-child(2) — selects all of the p second children
  • p:nth-last-child(2) — selects all of the second-to-last p children
  • p::first-line — selects each first line of p element
  • p:first-of-type — selects each first letter of p elements

  Build out a web page that uses at least five of the selectors listed above. Add a video and a code block.

  Week 3

  CSS Transitions and Animations and Intro to Sass

  CSS Transitions and Animations

  • Many CSS properties can be animated. Common ones include colors, size, location and rotation. CSS animations and transitions are designated using vendors (e.g. -webkit-), which are callouts to specific browsers to allow for compatibility. Keep in mind that JavaScript permits more control over animation triggers and properties, but there is a ton you can do with CSS3 alone.
  Transitions are triggered by actions like mouse hover or click. They go from A to B, and don’t have the same capabilities to move as animations. With transitions, you can define property, duration, delay, and timing.

  Animations are not triggered by actions. They allow for flexible use of keyframes. They can also be set to loop specific amounts of time.

   #shape < width: 300px; height: 200px; background-color: green; animation: myName 5s infinite; >@keyframes myName < from to > 

  Intro to Sass

  Sass is a CSS preprocessor (processes into normal CSS) that allows for the use of variables and avoids redundancy and repetition in CSS. Sass allows for nesting of elements to automatically designate inheritance, allows for the use of operators, and many other things.

  • Install sass
  1. gem install sass
  2. sass -v
  3. cd [yoursite]
  4. Save .scss file
  5. sass –watch [yourfile].scss:[yourfile].css

   $bodyFont: Tahoma, sans-serif; $bodyColor: #000; body

  Assignment: Build a page with three animations that are “aware” of each other. Add two on-hover transitions. Use any properties and elements that you’d like.

  Week 4

  Responsive websites: Media queries, platforms, building dynamic grids, CSS frameworks

  Scaling Sites

  With the variety of devices we use to browse websites, it’s important to be aware of the appearance of your sites on multiple platforms. There are numerous ways to build sites that reconfigure based on screen size. Responsive websites create fluidity based off percentages; adaptive sites have fixed dimensions that they adhere to (and oftentimes the content is presented in a strategically different way)

  Frameworks

  Demo: Build a grid using percentages and no frameworks.
  Make it adaptive: use a media query
  Download bootstrap
  Use bootstrap to build a grid that adapts to multiple screens.
  Grid Templates
  Class Demo File

  Week 5 and 6

  Intro to jQuery, parallax and carousels

  • Responsive
  • Site with a clear purpose
  • Workflow that favors the purpose of the site
  • Clean CSS

  Today’s Agenda

  jQuery

  jQuery (whose motto is “write less, do more”) is a JavaScript library that avoids the tedious structure of JavaScript by condensing syntax and providing quick solutions to a multitude of JavaScript-related tasks.

  You write jquery statements like sentences. They have a subject and actions that happen in the order they’re listed.

  jQuery relies on the use of CSS selectors to call out elements.

  “The h1 element is clicked and then hidden.”

  Events are actions that trigger a function, like ‘click’ or ‘mouseleave’
  List of Events

  Demo: Use jQuery functions to build a dynamic web page

  Parallax

  Carousel

  Week 7

  User Experience: Forms and navigation

  Forms come up in many websites. They can either be an easy experience for the user, or a complete nightmare.
  Spacing, copy, and overall appearance have huge impacts on forms.

  Forms

  Text areas and ‘select’ from a list of items are also used often.
  Put elements within a form tag, including the submit button. This will allow for action once submitting the form (e.g. send to server, send to email).

  Navigation

  Although we’ve talked a lot about site structures that will lead to a more enjoyable user experience, there are also some quick ways to build off that.

  Back button

  Conversely, you can do the same thing with

  If there is no forward history, the link will be null.

  jQuery toggle nav dropdown

  We mentioned toggling buttons last week, but here is the code to go along with the demo where we will toggle subsets of a navigation menu:

   $("#topicsList").hide(); $("#topics").click(function() < $( "#topicsList" ).toggle();>); 

  Week 8

  Data and how to use it: Data visualization, using external data, APIs

  Today, after our critique and demo we will have a workday. The goal is to have some HTML to show by the end of class.

  Google Analytics

  Data Visualization

  Demo

  Simple Bar Chart Practice styling svgs. Notice how the data is structured. D3 CSV Line Graph More complex, but easy to tweak. Uses CSV instead of an array.

  Week 9

  Tying it all together: SEO, usability, hosting

  Today is mainly a work day. I will meet with everyone individually to see your progress.
  Please take screenshots of your work and email them to me by next week.

  Site Deployment

  Once you’re ready to put your site online, it’s best to go through and make sure it’s in an optimal state for navigation.

  Search Engine Optimization

  • It helps to write down words that would trigger a search to pull up your site, and incorporate them into the copy of your site.
  • Images with text baked into them will not help with SEO, so it is best practice to add a caption or alt text to the html itself.
  • Sites that are constantly updated also have higher chances of appearing early in a search.

  Usability

  General usability of a site is harder to achieve than you might think. Even professionals are aware of this, since something like the copy of a button can dramatically affect the amount of people who choose to buy something on a site. That’s why, instead of the “all-knowing” approach, many website makers use testing.

  A/B testing includes alternate forms of parts of a site or entire pages that load randomly. Google Analytics has a tool that can measure activity based off the different page views, which allows you to see the preferred experience.
  “The Ultimate Guide to A/B Testing”
  Google Experiments

  If A/B testing seems a little tedious, sit down with a friend or someone at a coffeeshop and let them navigate your site. Any feedback is valuable feedback! It’s easy to miss things when you are the one building the site.
  Think about your content as telling a story. What will lead a person to get from one place to another? The user is in dialogue with your site. Is it easy to converse?

  Hosting

  Hosting should’ve been made familiar to you in previous classes. There are a ton of ways to get a website out there:

  Week 10

  Final Critique

  Where to Next?

  With three HTML/CSS classes under your belt, you’ve gained a lot of knowledge! What should you pursue next?

  Learn

  Build

  If you don’t practice, you won’t get better…building up your portfolio is also really, really important.

  • Talk to your favorite non-profit about redesigning a website as a volunteer project if you feel like you aren’t ready to do paid work (or if you’re feeling generous…)
  • Family and friends often have projects that could use a website.
  • Sites like craigslist are great to find paying clients. Just look for freelance web design/developer jobs.

  Outside of the Screen

  Internet of Things
  Video Explanation
  Basically, IoT means machines with sensors on them that feed data to the cloud. Thus making things like condition monitoring possible.
  IoT scale
  Sensors
  Arduino
  Raspberry Pi

  Источник

  Learn Advanced HTML and CSS Concepts [Updated — 2023]

  HTML and CSS are building blocks of the web. However learning the syntax is not enough. This course teaches you more advanced parts about HTML and CSS, including modern syntax.

  

  What you will get:

  

  Learn Advanced HTML and CSS Concepts [Updated — 2023]

  HTML and CSS are building blocks of the web. However learning the syntax is not enough. This course teaches you more advanced parts about HTML and CSS, including modern syntax.

  Course Outcomes

  Description

  Basic HTML and CSS is a great start for frontend web development. However you should learn about semantic HTML, variables in CSS, functions and how to stay up to date with all these changes.

  This course will cover some of the advanced and less discussed parts of HTML, including but not limited to:

  • Semantic HTML and why it is required
  • CSS3 functions
  • CSS3 variables
  • Importance of meta tags
  • Media queries in CSS
  • How to make websites responsive and work across multiple screen sizes
  • Introduction to animations with CSS

  You will find interactive hands-on exercises as well along the way to assist you in learning by doing.

  Course Structure

  33 lecture s • 3h 4m total duration

  Источник