• Home
  • Jobs
  • Courses
  • Advice
  • Login
  • Register
  • Employer ?
    • Login
    • Register
    • Employer Services
Find Course Providers Courses Advice
  • Products
    • Find Course Providers
    • Courses Advice
  • Advertise Your Courses
    Advertise Your Courses for Free

    Learn CSS Flexboxes Practically | Simpliv

    Course by Simpliv LLC

    (Course Id: 244602 | 103 Views) Posted 00 UNK
    Category:
    Education, Information Technology
    How the course is given:
    Online
    When the courses is given:
    Flexible
    Qualification Level:
    Short Course/Training Certification
    Course Duration:
    01:08:04
    Price:
    $ 9.99
    Location:
    Fremont, CA 

    Registration is Available at Anytime

    View Courses by this company

    Course Description

    Description

    This class is about learning how flexboxes work.

    Did you hear about them before?

    It's a module, that has roots at Mozilla. It's a big timesaver for Frontend developers.

    You'll never want to create an HTML page without flexboxes after this course.

    We'll learn only basic things. Specification mostly.

    All CSS properties related to flexboxes.

    And we'll have a set of easy practical lessons.

    For each practice lesson, I advise you to recreate an example from scratch(no copy-paste) by your hands.

    Be aware, that this course touching only flexbox basics, so you need to know HTML and CSS. Check other courses for learning HTML/CSS basics.

    TOOLKIT

    Github(https://github.com/) - if you ok to share your code with other - My current pick Bitbucket(https://bitbucket.org/) - if you want to have a free storage

    Google drive(https://www.google.com/drive/) or Dropbox(https://www.dropbox.com/?landing=dbv2) - if you just want to save your code at cloud

    You can also use Codesandbox(https://codesandbox.io) or other online editors.

    For practice lessons, I'll use CodePen(http://codepen.io).

    But I'm sure - for your project, you'll decide to use a code editor.

    Code editors Sublime(https://www.sublimetext.com/3) - I use it around 6 years. small size and everything important Atom(https://atom.io/) because it's backed by the GitHub team and it also has a Github sync.

    If you want to save your project tasks, you can use Trello(https://trello.com)

    If you want to have some flexbox practice, you can check this game: https://flexboxfroggy.com/

    Additional materials

    Flexbox prefixing https://autoprefixer.github.io/ (i recommend this option) 

    https://github.com/nattarnoff/flexbox-prefixes(Sass sample) 

    https://github.com/pandao/prefixes.scss/blob/master/src/flexbox.scss (Sass sample)


    Basic knowledge
    • You should have basic knowledge in HTML/CSS
    • In my practical lessons i'm using HTML5 and SCSS but it's easy to understand how it actually works

    What will you learn

    You'll learn how actually use flexboxes and how experienced developers using it right now.

    You class project - that you should do after completing this course will be:

    Your project is to create a page with recipe cards. Nothing complex, but you need to use flexboxes. Don't use CSS grids or Bootstrap.

    It should have a Header, Footer, Navigation(linked to recipe cards at content).With three or more blocks-cards with details about your favorite dishes.

    You can use a plain CSS or SASS.

    As a code style and "best practice" example you can use SMACSS https://smacss.com/

    BUT you restricted to use BEM approach(it's good if you don't know what I'm talking about).

    Be cool with your code, use comments, if you want to create easy to understand code structure.

    Data

    Find any web version of recipe website and pick any layout that you want to replicate.

    If you need actual data for your blocks, you can check it at the plugin, that we've built: https://github.com/GroceriStar/static-data-plain/blob/master/data/dirty/Recipe/Recipe4/recipe-short-version.json

    the main structure of the recipe is(but not limited too)

    recipe   - header     -- title     -- image   - description       -- data   - ingredients list     -- data   - directions list     -- data 

    You can start to work on your project before finishing the whole course.

    I propose you to create a plan, split things into small chunks and move forward by closing this small tasks.

    I'll be happy if you do not just complete this project, but go forward and make it better.

    So take time, generate ideas and experiment.

    If you want to learn how to code == you should code as much as possible. You can polish this project, while you'll like the code quality.

    Please don't worry, if something wouldn't be easy to understand at the first time. Share your process with other students in our Project Directory.

    It's much easy to solve problems together!

    Additional Assesment(For A+) 0)

    You can make this page looks better or have additional features, like responsiveness

    • Each recipe in our example has one image. You can create an image gallery.
    • You can add easing animations, so scrolling(after clicking on top menu) will have cool animation.https://matthewlein.com/tools/ceaserhttps://css-tricks.com/ease-out-in-ease-in-out/

    https://easings.net/

    https://developer.mozilla.org/en- US/docs/Web/CSS/CSSTransitions/UsingCSS_transitions

    https://loading.io/easing/

    • you can create a calendar, using flexboxes. it'll help you master flexboxes completely.

    Additional things to read:

    About CSS code organization

    https://smacss.com/https://davidwalsh.name/format-css-files

    https://medium.com/gusto-design/creating-the-perfect-css-system-fa38f5bcdd9e

    Mozilla Dev Network is a great source for reading details about Flexboxes

    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout

    Ebooks

    https://unravelingflexbox.com/

    https://www.oreilly.com/library/view/flexbox-in-css/9781491981474/(O'Reilly books always best)

    https://www.smashingmagazine.com/2016/02/the-flexbox-reading-list/

    ENROLL COURSE

    About the Provider

    Simpliv is a global online learning marketplace that transforms lives by offering online training on a wide variety of topics. Created with the aim of making education accessible to all, Simpliv removes barriers to education among all communities, imparts life skills to learners, and bridges gaps in learning through cost-effective courses. Simpliv believes that learning has no boundaries. It brings learning to any person who wants to learn, whether it is management, technology, life sciences,... Read More

    Course Provider Contact

    Simpliv LLC
     39658 Mission Boulevard, Fremont,
    CA 94539, USA.
      Phone: +510-849-6155
      Email: sudheer@simpliv.com
    Saved

    Related Courses

      Flexible Education Courses

      Flexible Information Technology Courses

      Education Short Course/Training Certification Courses

      Information Technology Short Course/Training Certification Courses

      Education Courses in California

      Information Technology Courses in California

      All Education Courses

      All Information Technology Courses

      Courses at Simpliv LLC

    About Us

    Ethiojobs.net is the first online recruitment solution provider introduced in Ethiopia. The website advertises jobs across a wide range of job types by different employers, including private, local, international, multinational, who are hiring in Ethiopia.

    Job -Seekers

    • Find Jobs
    • Register
    • Post CVs
    • Job Alerts

    Employers

    • Login
    • Register
    • Post Jobs
    • Services

    Contact us

    • Snap Plaza 8th floor, Bole Next to The Millennium hall. Addis Ababa, Ethiopia

    • +251-116-67-33-24
      +251-924 91 08 47
    • info@ethiojobs.net
    • About Us
    • Contact Us
    • FAQ's
    • Courses Terms & Conditions
    • Privacy Policy
    • Sitemap

    © 2021 Powered by Ethiojobs.net. All Rights Reserved.