Day 9-16 Basic CSS Front-end Developer RoadMap (2023 Edition)

basic css

A style sheet language called Cascading Style Sheets (CSS) describes how a document produced in a markup language like HTML is presented. The World Wide Web’s foundational technologies include CSS, HTML, and JavaScript. Layout, color, and font may all be separated from content and presentation using CSS.

By specifying the pertinent CSS in a separate.css file, this separation can make content more accessible, give a specification of presentation characteristics more flexibility and control, allow multiple web pages to share formatting, and reduce complexity and repetition in the structural content. (Source: Wikipedia)

If you’re unfamiliar with HTML and HTML5, I recommend reading the blog Day 1-8 of the Basic HTML and HTML5 Front-end Developer Roadmap (2023 Edition) for good beginners.

Now, let’s dive into the CSS (Cascading Style Sheets) part of the roadmap. CSS is a crucial component of front-end development as it allows you to control the layout and appearance of web pages.

The following tasks will help you build a strong understanding of CSS.

Learn the basic CSS

Cascading Style Sheet is a vital language for styling the front end of websites. Alongside HTML and JavaScript, CSS forms a cornerstone technology of the World Wide Web.

Check the following resources to learn and develop your skills:

W3Schools - Learn CSS

W3school Css

W3Schools is a popular online learning platform that provides comprehensive tutorials on various web technologies, including CSS.

For example, their CSS tutorial covers everything from the basics to advanced concepts and provides interactive examples to practice your skills.

Resources to learn with W3Schools: W3Schools — Learn CSS

Web.dev - Learn CSS

Web dev learn Css

web.dev is an official resource by Google that offers guidance on web development best practices. Their CSS (Cascading Style Sheet) learning section provides detailed articles, guides, and interactive examples to help you understand CSS concepts effectively.

Resources to learn CSS: web.dev — Learn CSS

FreeCodeCamp - Responsive Web Design

Basic Css freecodecamp

FreeCodeCamp is a nonprofit organization offering an extensive web development curriculum.

For example, their course covers HTML and CSS, building responsive and mobile-friendly websites. In addition, the course includes hands-on projects to apply your knowledge.

Resources to learn more with FreeCodeCamp: freeCodeCamp — Responsive Web Design

Learn to Code HTML & CSS

Learn shayhowe CSS

“Learn to Code HTML & CSS” is a beginner-friendly book by Shay Howe that provides a solid foundation in HTML and CSS. It covers the basics of both languages and progressively introduces more advanced topics.

In addition, the book includes exercises and examples to reinforce your learning.

Resources to learn Code HTML & CSS: Learn to Code HTML & CSS

CSS Crash Course For Absolute Beginners

Traversy Media, a popular YouTube channel for web development tutorials, has a CSS Crash Course specifically designed for absolute beginners. The video tutorial covers the fundamentals of CSS, selectors, box models, positioning, and more.

Resources to learn more with this video:

HTML and CSS Tutorial

The HTML and CSS Tutorial by The Net Ninja is a comprehensive video series that covers HTML and CSS from scratch. The tutorial explains various CSS concepts, including selectors, layout, responsive design, and transitions.

Follow the tutorial on YouTube:

CSS Masterclass - Tutorial & Course for Beginners:

Jonas Schmedtmann’s CSS Masterclass is an in-depth course available on Udemy. It covers CSS concepts, modern layout techniques, CSS animations, and building responsive websites. The course includes hands-on exercises and real-world projects to enhance your CSS skills.

Here the CSS Masterclass Course for Beginners:

Making layouts with CSS

The most important topics for making layouts are float, grid, Flexbox, placement, display, and box model. Use the topic below to find out more about the following:

  • Learn and Practice Flexbox
  • Game for learning CSS Grid
  • All about Floats
  • Positioning Types: How Do They Differ?
  • The Box Model
  • The CSS Display Property
  • A Complete Guide to Flexbox
  • A Complete Guide to Grid
  • Learn CSS Grid – Course
  • Learn CSS Grid for free

Learn and Practice Flexbox with FLEXBOX FROGGY

Flexboxfroggy

Flexbox, or CSS Flexible Box Layout, is a key tool for responsive web design. It helps arrange elements smoothly in a container, easily adapting to different screen sizes. It’s an essential skill for web developers, simplifying the process of aligning and distributing space among items in dynamic or unknown sizes.

Flexbox Froggy is an ingenious way to learn Flexbox. It’s an interactive web game where you write Flexbox code to help a frog reach a lily pad. The game advances gradually, covering different aspects of Flexbox with increasing complexity.

It provides a hands-on, engaging approach to learning commands such as flex-direction, justify-content, and align-items. Flexbox Froggy turns a seemingly complex topic into a fun, educational game. By playing, you’ll quickly get a grip on Flexbox, boosting your web development skills. So give it a try and help Froggy with your newfound Flexbox knowledge!

Resource: Learn and Practice Flexbox with Flexfroggy

Learning CSS Grid with CSS Grid Garden

Css Grid garden

CSS Grid is a 2-dimensional layout system for web design, offering a flexible and robust approach to creating complex layouts. It enables developers to position items in rows and columns, making it indispensable for modern web design.

To master CSS Grid, CSS Grid Garden is an excellent resource. It’s an interactive game that teaches you how to use CSS Grid in a fun and engaging way. The goal is to water your garden by writing lines of code.

The game starts easy and gets progressively more challenging, covering all aspects of CSS Grid. So, embark on a learning journey with CSS Grid Garden and enhance your web design capabilities!

Resource: Learn Grid with CSSgridgarden

All About Floats learning with CSS-tricks

css-tricks all about floats

“Floats” are fundamental elements of CSS layouts. They allow elements to wrap alongside or around each other, typically for aligning images and text. CSS-Tricks is an excellent resource for learning about floats, providing clear explanations, diagrams, and practical examples.

You’ll understand the floats’ power, quirks, and workarounds by exploring this site.

From the clear ‘clearfix’ technique to the intricacies of layout flow, CSS-Tricks makes mastering floats manageable and enlightening. So begin your journey into CSS floats today, and unlock a new level of web design proficiency.

Resource: All about Floats

Absolute, Relative, Fixed Positioning: How Do They Differ?

Css-tricks positioining how do they differ

Absolute, Relative, and Fixed are CSS positioning schemes defining an element’s placement on a webpage. Relative positioning moves an element from its normal flow, retaining space.

Absolute positioning, on the other hand, removes an element from the flow, positioned relative to its nearest positioned ancestor.

Fixed positioning is absolute but relative to the browser window, remaining in place during scrolling. CSS-Tricks is a premier platform for mastering these concepts, offering extensive guides and interactive examples for hands-on learning.

Dive into the website to understand the practical differences between these CSS positioning methods.

Recourse: Learn Positioning Types: How Do They Differ?

The Box Model

Developer mozilla The box model

The Box Model is a fundamental concept in CSS, encapsulating an element’s padding, border, and margin. Therefore, understanding how it affects layout is essential, especially when designing responsive web pages.

The Mozilla Developer Network (MDN) offers comprehensive resources to learn about the Box Model.

Their interactive tutorials and documentation provide step-by-step guidance, while visual aids help to illustrate complex topics.

You can also use their examples for practice and check your understanding with their quizzes. Learning from MDN allows for mastering the Box Model in an engaging, effective manner.

Resourse : Learn The Box Model

The CSS Display Property

Freecodecamp the css display property

The CSS display property controls the layout of HTML elements. It’s adaptable, offering settings like display: none, block, inline-block, and table, each providing different visual behaviors. Display: none removes an element from the view, whereas display: table mimics table-like characteristics.

Inline-block facilitates horizontal element alignment. To master these concepts, Free Code Camp offers comprehensive interactive lessons. It’s a free online learning platform that takes you through practical CSS exercises, helping you grasp the complexities of the display property.

It’s a fantastic resource for both beginners and experienced coders.

Learn The CSS Display Property By Kolade Chris

A Complete Guide to Flexbox by Chris Coyier

css-flexbox-poster

This comprehensive guide describes anything about flexbox, focusing on all the different features of the parent element (the flex container) and the child elements (the flex items). It also has a timeline, demos, themes, and a chart that shows which browsers support what.

A Complete Guide to Flexbox with Chris Coyier

A Complete Guide to CSS Grid by Chris House

css-grid-poster

This in-depth CSS grid tutorial specializes in all the options for the grid parent container and the grid child elements with Chris House.

Learn CSS Grid - Course with WES BOS

Learn CSS Grid - Course

Learn CSS Grid course with zero dollars (0$). It’s totally free for beginners to learn CSS GRID WITH WES BOS. You have instant access to all 4 Hours and 25 PRETTY GOOD VIDEOS, all starter files, and completed HTML, CSS, and JS solutions for each exercise. It’s a really good CSS Grid education.

How is this Free!? What’s the catch?

It’s no catch! 0$ free. A huge thanks to Mozilla Firefox, who has sponsored to create this course and offer it free for everyone.

Learn CSS Grid with Per Harald Borgen

Learn CSS Grid for free

This course teaches you CSS Grid through 14 videos. You’ll learn all the key concepts while creating three awesome layouts: a website, an image grid, and an article. Plus, you’ll learn how to combine CSS Grid with Flexbox with Per Harald Borgen.

Feel free to reach out to the instructor Per Harald Borgen on Twitter if you have feedback or questions.

In Scrimba, you’ll learn

You have access

  1. Access to all our free courses
  2. interactive, hands-on content
  3. 100s of code challenges
  4. join a friendly community

Before learning this course, you should have a basic understanding of HTML & HTML5. Here’s our suggested blog to get you up to speed.

Learn Basic HTML
Day 1-8 Basic HTML and HTML5 Front-end Developer RoadMap (2023 Edition)
HTML is the standard markup language for making web pages and web apps.

Responsive Design and Media Queries

Responsive web design is a way to make sure that your website looks good on all kinds of screens. You can use CSS media queries, percentage sizes, minimum or maximum widths, heights, etc.

What is Responsive Web Design?

Responsive Web Design (RWD) is an approach to web design aimed at making websites render well on a variety of devices and windows or screen sizes. It involves designing and developing a website so that the layout, images, and other elements adjust automatically to fit the screen on which the site is viewed.

This is important because users nowadays access websites through various devices, such as desktop computers, tablets, and smartphones, each with different screen sizes and resolutions.

Learn Responsive Design with web.dev

web dev

Learning responsive design is crucial in today’s web development environment, as it ensures that websites and applications adapt to different screen sizes and devices. The Web.dev platform is an excellent resource provided by Google, which offers guides and tutorials for modern web development, including responsive design.

Here’s a guide on how to learn responsive design with Web.dev.

Here's what you'll learn:

Beginner’s Guide to Responsive Web Design

Beginner’s Guide to Responsive Web Design
Check out the video Beginner’s Guide to Responsive Web Design:

Guide to responsive web design (RWD) in 2023

Learn the guide to responsive web design in 2023—your go-to resource for understanding responsive web design and how to do it well.

Five amazing tips for making responsive layouts the easy way

In this video, you learn to

  1. Introduction of responsive layouts
  2. The right mindset
  3. start with the global styling
  4. Avoid fixed sizes
  5. Use media queries to add complexity
  6. Take advantage of modern CSS

Brief Introduction To Responsive Web Design - HTML & CSS Tutorial

Here is the Brief Introduction To Responsive Web Design – HTML & CSS Tutorial.

You can learn and create a responsive website design from scratch in this video.

The teacher is the brilliant Kevin Powell, who’s well-known for his videos on HTML and CSS here on YouTube. You can check out his channel here:

Facebook
Pinterest
Twitter
LinkedIn

One Response

  1. If your website is not functioning properly in Internet Explorer but looks fine in Safari, it might be due to compatibility issues with older versions of Internet Explorer.

    Here are a few suggestions to help you fix this problem:
    Use modern web standards: Ensure that your website follows modern web standards and best practices. Avoid using deprecated or non-standard HTML, CSS, or JavaScript codes that might cause compatibility issues with older browsers like Internet Explorer.

    Test your website in different browsers: It’s important to test your website in multiple browsers, including different versions of Internet Explorer, Safari, Chrome, Firefox, and Edge. This will help you identify specific issues and understand how your website behaves across different platforms.

Leave a Reply

Your email address will not be published. Required fields are marked *

Let's Connect

This Website Uses Cookies

This website uses cookies to give you the best user experience and to analyze performance and traffic on our website. We never collect personal data. For more details, see our Cookie Policy

Contact us

We would be glad to have you visit the operation center.

Headquarters

Please complete the following form. Our team of specialists will assess your request and respond as soon as possible.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

CAPTA NOT DELL
Site Key:6LdXExcdAAAAAMRgziMjqokglXNmXSNKG0a2Qynv
……………
Secret Key :6LdXExcdAAAAAG1KqLLAq0l45muRas3IUGRB3sgD
……………
Score Threshold : 0.5

Contact us

We would be glad to have you visit the operation center.

Please complete the following form. Our team of specialists will assess your request and respond as soon as possible.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.