12.02. Steps to follow to get into HTML and CSS
A must for a designer who wants to improve their development skills is to learn minimal HTML and CSS styles to see how their designs translate into code.
01. Steps to follow to learn HTML
HTML is a framework language that will form the skeleton of your website, so to speak. Every element must be contained and declared in order to be able to style it later with CSS.
Introduction to HTML overview
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Images in HTML
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Adding vector graphics to the Web
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Getting started with HTML
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
What's in the head? Metadata in HTML
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
HTML text fundamentals
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Creating hyperlinks
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Advanced text formatting
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Document and website structure
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Structuring a page of content
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Multimedia and embedding overview
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
02. Basic concepts for learning CSS
While HTML gives structure and semantics to your website, CSS styles the elements to fit your design.
CSS first steps overview
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
What is CSS?
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Getting started with CSS
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
How CSS is structured
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
How CSS works
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Using your new knowledge
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
03. CSS building blocks
Knowing how the cascade of this language works is essential to be able to apply inheritance to all the types of selectors we have available, units, sizes...
CSS building blocks overview
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Images, media, and form elements
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Styling tables
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Debugging CSS
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Organizing your CSS
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Cascade and inheritance
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
CSS selectors
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
The box model
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Backgrounds and borders
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Handling different text directions
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Overflowing content
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Values and units
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Sizing items in CSS
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
04. CSS text styling
One of the pillars of CSS is knowing how to style text. Learn how to apply the different typography settings of your designs to the font in your code.
Styling text overview
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Fundamental text and font styling
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Styling lists
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Styling links
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Web fonts
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Assessment: Typesetting a community school homepage
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
05. CSS design tools
Learn how to use the fundamental layout tools and techniques available such as Flexbox or CSS Grid and learn how to arrange your CSS code in an organised and scalable way.
CSS layout overview
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Beginner's guide to media queries
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Legacy Layout Methods
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Supporting Older Browsers
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Fundamental Layout Comprehension
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Introduction to CSS layout
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Normal Flow
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Flexbox
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Grids
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Floats
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Positioning
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Multiple-column Layout
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Responsive design
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
06. Practice what you've learned about HTML and CSS
Thanks to freecodecamp we have hundreds of interactive learning resources to practice everything from the basics of HTML and CSS to complete projects to test your skills.
Basic HTML and HTML5
freecodecamp
freecodecamp
Level Beginner
Unknown
Basic CSS
freecodecamp
freecodecamp
Level Beginner
Unknown
Applied Visual Design
freecodecamp
freecodecamp
Level Beginner
Unknown
Applied Accessibility
freecodecamp
freecodecamp
Level Beginner
Unknown
Responsive Web Design Principles
freecodecamp
freecodecamp
Level Beginner
Unknown
CSS Flexbox
freecodecamp
freecodecamp
Level Beginner
Unknown
CSS Grid
freecodecamp
freecodecamp
Level Beginner
Unknown
Responsive Web Design Projects
freecodecamp
freecodecamp
Level Medium
Unknown
07. Increase your knowledge by learning JavaScript
For all those people who want to go deeper into the subject, it is advisable to continue studying JavaScript, one of the most widespread languages globally, along with Python and Java.
JavaScript Algorithms and Data Structures
freecodecamp
freecodecamp
Level Advanced
Unknown
Front End Development Libraries
freecodecamp
freecodecamp
Level Advanced
Unknown
Data Visualization
freecodecamp
freecodecamp
Level Advanced
Unknown
Topic complete! 🎉🎉🎉
Congratulations! We recommend you to continue studying with us, completely free of charge, to reach your goal and apply for the job you are looking for. Don't forget to donate to keep the project alive 💖💖💖
13.01
Design QA ->
When the design is finally implemented, before uploading it to production we must carry out an exhaustive analysis to check that the implementation has been correct.
Stay up to date or donate to the project
This project is created by one person only, so if you subscribe to the newsletter, or collaborate by donating coffees to maintain the database, or recommend new resources, you will be more than welcome 💜
Explore all subjects in Block V - Develop & Testing
Explore all the topic in each subject. Each subject is divided into different topics that contain a series of resources to study. Start from 0 or wherever you want.
