سبق 1ਫੌਂਟ ਚੋਣ ਅਤੇ ਰੂਟ ਤੇ ਬੌਡੀ ਤੇ ਫੌਂਟਸ ਲਾਗੂ ਕਰਨਾ (font-family, ਫਾਲਬੈਕ ਫੌਂਟਸ)ਵੈੱਬ ਫੌਂਟਸ ਚੁਣਨ ਅਤੇ ਲਾਗੂ ਕਰਨਾ ਖੋਜੋ। ਤੁਸੀਂ ਰੂਟ ਅਤੇ ਬੌਡੀ ਤੇ ਫੌਂਟ-ਫੈਮਿਲੀ ਸੈੱਟ ਕਰੋਗੇ, ਵਿਚਾਰਯੋਗ ਫਾਲਬੈਕਸ ਨਿਰਧਾਰਤ ਕਰੋਗੇ ਅਤੇ ਫੌਂਟ ਸਟੈਕਸ ਦਾ ਲੁਕ, ਪਰਫਾਰਮੈਂਸ ਅਤੇ ਕ੍ਰੌਸ-ਡਿਵਾਈਸ ਇਕਸਾਰਤਾ ਤੇ ਅਸਰ ਨੂੰ ਸਮਝੋਗੇ।
Serif, sans-serif, and monospace basicsSetting base fonts on html and bodyCreating reliable font-family stacksUsing system fonts vs web fontsLoading Google Fonts safelyسبق 2ਸਾਧਾਰਨ ਪੇਜਾਂ ਲਈ ਲੇਆਊਟ ਬੇਸਿਕਸ: ਬਲਾਕ vs ਇਨਲਾਈਨ ਐਲੀਮੈਂਟਸ ਅਤੇ ਸੈਂਟਰਿੰਗ ਤਕਨੀਕਾਂਬਲਾਕ ਅਤੇ ਇਨਲਾਈਨ ਐਲੀਮੈਂਟਸ ਵਰਤ ਕੇ ਲੇਆਊਟ ਬੇਸਿਕਸ ਸਿੱਖੋ। ਤੁਸੀਂ ਕੰਟੈਂਟ ਨੂੰ ਸੈਂਟਰ ਕਰੋਗੇ, ਐਲੀਮੈਂਟ ਫਲੋ ਨੂੰ ਕੰਟਰੋਲ ਕਰੋਗੇ ਅਤੇ ਐਡਵਾਂਸਡ ਲੇਆਊਟ ਸਿਸਟਮਾਂ ਬਿਨਾਂ ਸਾਧਾਰਨ ਪੇਜ ਸਟ੍ਰਕਚਰ ਬਣਾਓਗੇ, ਜੋ ਛੋਟੇ ਬਿਗਨਰ ਪ੍ਰੋਜੈਕਟਸ ਲਈ ਆਦਰਸ਼ ਹੈ।
Block vs inline vs inline-blockCentering text with text-alignCentering blocks with auto marginsFull-width sections and fixed-width contentStacking sections for simple layoutsسبق 3ਰੰਗ ਅਤੇ ਬੈਕਗ੍ਰਾਊਂਡ: background-color, color, ਅਤੇ hex/RGB/HSL ਮੁੱਲ ਵਰਤਣਾCSS ਵਰਤ ਕੇ ਰੰਗਾਂ ਅਤੇ ਬੈਕਗ੍ਰਾਊਂਡ ਨੂੰ ਕੰਟਰੋਲ ਕਰਨਾ ਸਿੱਖੋ। ਤੁਸੀਂ background-color ਅਤੇ color ਲਾਗੂ ਕਰੋਗੇ, hex, RGB ਅਤੇ HSL ਫਾਰਮੈਟਸ ਦੀ ਤੁਲਨਾ ਕਰੋਗੇ ਅਤੇ ਟੈਕਸਟ ਪੜ੍ਹਨਯੋਗ ਰੱਖਣ ਵਾਲੇ ਸਾਧਾਰਨ, ਐਕਸੈਸੀਬਲ ਰੰਗ ਪੈਲੇਟਸ ਬਣਾਓਗੇ।
Setting text and background colorsHex, RGB, and HSL color formatsCreating simple color palettesContrast and basic accessibilityBackgrounds for sections and buttonsسبق 4ਹੈੱਡਿੰਗਸ ਅਤੇ ਲਿਸਟਾਂ ਨੂੰ ਸਟਾਈਲ ਕਰਨਾ: ਐਲੀਮੈਂਟਸ, ਕਲਾਸਾਂ ਅਤੇ ਐਲੀਮੈਂਟ ਸੈਲੈਕਟਰਸ ਨੂੰ ਟਾਰਗੈਟ ਕਰਨਾਐਲੀਮੈਂਟ, ਕਲਾਸ ਅਤੇ ID ਸੈਲੈਕਟਰਸ ਵਰਤ ਕੇ ਹੈੱਡਿੰਗਸ ਅਤੇ ਲਿਸਟਾਂ ਨੂੰ ਸਟਾਈਲ ਕਰਨਾ ਸਿੱਖੋ। ਤੁਸੀਂ ਖਾਸ ਕੰਟੈਂਟ ਨੂੰ ਟਾਰਗੈਟ ਕਰਨ ਦਾ ਅਭਿਆਸ ਕਰੋਗੇ, ਓਵਰ-ਸਪੈਸਿਫਿਕ ਨਿਯਮਾਂ ਤੋਂ ਬਚੋਗੇ ਅਤੇ ਪੇਜ ਸਟ੍ਰਕਚਰ ਤੇ ਨਿਖ਼ਤ ਕੰਟਰੋਲ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹੋਏ HTML ਨੂੰ ਸਾਫ਼ ਰੱਖੋਗੇ।
Element selectors for headings and listsUsing classes to style repeated patternsTargeting specific items with ID selectorsStyling ordered vs unordered listsRemoving and customizing list bulletsسبق 5ਬਟਨ ਸਟਾਈਲਿੰਗ: ਬੈਕਗ੍ਰਾਊਂਡ, ਰੰਗ, ਬਾਰਡਰ, ਬਾਰਡਰ-ਰੇਡੀਅਸ, ਪੈਡਿੰਗ, ਕਰਸਰ ਅਤੇ ਹੋਵਰ ਸਟੇਟਸਕਲਿੱਕਯੋਗ ਅਤੇ ਇਕਸਾਰ ਦਿਖਣ ਵਾਲੇ ਬਟਨ ਨੂੰ ਸਟਾਈਲ ਕਰਨਾ ਸਿੱਖੋ। ਤੁਸੀਂ ਬੈਕਗ੍ਰਾਊਂਡ, ਰੰਗ, ਬਾਰਡਰ, ਪੈਡਿੰਗ, ਬਾਰਡਰ-ਰੇਡੀਅਸ, ਕਰਸਰ ਅਤੇ ਹੋਵਰ ਸਟੇਟਸ ਨੂੰ ਕੰਟਰੋਲ ਕਰੋਗੇ ਤਾਂ ਜੋ ਐਕਸੈਸੀਬਲ, ਰੀਯੂਜ਼ਯੋਗ ਬਟਨ ਸਟਾਈਲਸ ਬਣਨ।
Resetting default button stylesPadding and hit area sizingBackground, text color, and bordersRounded corners with border-radiusHover and active visual feedbackسبق 6ਟਾਈਪੋਗ੍ਰਾਫੀ ਬੇਸਿਕਸ: font-size, line-height, font-weight, text-alignਮੁੱਖ CSS ਪ੍ਰਾਪਰਟੀਆਂ ਵਰਤ ਕੇ ਮਜ਼ਬੂਤ ਟਾਈਪੋਗ੍ਰਾਫੀ ਬਣਾਓ। ਤੁਸੀਂ font-size, line-height, font-weight ਅਤੇ text-align ਨੂੰ ਐਡਜਸਟ ਕਰੋਗੇ ਤਾਂ ਜੋ ਪੜ੍ਹਨਯੋਗ ਪੈਰਾਗ੍ਰਾਫਸ, ਸਾਫ਼ ਹੈੱਡਿੰਗਸ ਅਤੇ ਪੇਜ ਤੇ ਇਕਸਾਰ ਟੈਕਸਟ ਬਣੇ।
Choosing base font sizesSetting comfortable line-heightUsing font-weight for emphasisAligning text for different layoutsStyling headings vs body textسبق 7ਛੋਟੇ ਪੇਜਾਂ ਲਈ ਰੈਸਪਾਂਸਿਵ ਵਿਚਾਰ: max-width, ਵਿਊਪੋਰਟ ਯੂਨਿਟਸ, ਅਤੇ ਸਾਧਾਰਨ ਮੀਡੀਆ ਕੁਏਰੀਆਂਛੋਟੇ ਪੇਜਾਂ ਲਈ ਬੇਸਿਕ ਰੈਸਪਾਂਸਿਵ ਤਕਨੀਕਾਂ ਨੂੰ ਸਮਝੋ। ਤੁਸੀਂ max-width, ਵਿਊਪੋਰਟ ਯੂਨਿਟਸ ਅਤੇ ਸਾਧਾਰਨ ਮੀਡੀਆ ਕੁਏਰੀਆਂ ਵਰਤੋਗੇ ਤਾਂ ਜੋ ਫੋਨਾਂ, ਟੈਬਲੈਟਸ ਅਤੇ ਛੋਟੇ ਲੈਪਟਾਪ ਸਕ੍ਰੀਨਾਂ ਤੇ ਲੇਆਊਟ ਪੜ੍ਹਨਯੋਗ ਰਹੇ ਬਿਨਾਂ ਗੁੰਝਲਦਾਰ ਫ੍ਰੇਮਵਰਕਸ ਦੇ।
Using max-width for readable text blocksViewport units for flexible sizingSetting the meta viewport tagSimple media queries for small screensStacking elements on narrow viewportsسبق 8ਬਾਕਸ ਮਾਡਲ ਐਸੈਂਸ਼ੀਅਲਸ: ਮਾਰਜਨ, ਪੈਡਿੰਗ, ਬਾਰਡਰ ਅਤੇ box-sizingCSS ਬਾਕਸ ਮਾਡਲ ਨੂੰ ਮਾਸਟਰ ਕਰੋ ਤਾਂ ਜੋ ਐਲੀਮੈਂਟਸ ਉਮੀਦ ਅਨੁਸਾਰ ਵਿਹਾਰ ਕਰਨ। ਤੁਸੀਂ ਮਾਰਜਨ, ਪੈਡਿੰਗ, ਬਾਰਡਰ ਅਤੇ box-sizing ਨਾਲ ਕੰਮ ਕਰੋਗੇ ਤਾਂ ਜੋ ਸਪੇਸ ਨੂੰ ਕੰਟਰੋਲ ਕਰੋ, ਲੇਆਊਟ ਸਰਪ੍ਰਾਈਜ਼ ਤੋਂ ਬਚੋ ਅਤੇ ਸਾਫ਼, ਅਨੁਮਾਨਿਤ ਪੇਜ ਸਟ੍ਰਕਚਰ ਬਣਾਓ।
Content, padding, border, and marginVisualizing element boxes in DevToolsUsing box-sizing: border-boxControlling gaps between elementsCommon box model layout issuesسبق 9ਐਕਸਟਰਨਲ ਸਟਾਈਲਸ਼ੀਟ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਲਿੰਕ ਕਰਨਾ ਅਤੇ ਕੈਸਕੇਡ ਬੇਸਿਕਸਐਕਸਟਰਨਲ ਸਟਾਈਲਸ਼ੀਟਸ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਲਿੰਕ ਕਰਨ ਅਤੇ ਕੈਸਕੇਡ ਨੂੰ ਸਮਝਣ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ। ਤੁਸੀਂ ਵੇਖੋਗੇ ਕਿ ਸਰੋਤ ਆਰਡਰ, ਸਪੈਸਿਫਿਸਿਟੀ ਅਤੇ ਇਨਹੈਰੀਟੈਂਸ ਕਿਵੇਂ ਫੈਸਲਾ ਕਰਦੇ ਹਨ ਕਿ ਕਈ ਨਿਯਮਾਂ ਵਿੱਚੋਂ ਕੌਣ ਸਾ ਐਲੀਮੈਂਟ ਨੂੰ ਜਿੱਤਦਾ ਹੈ।
Using the link tag in HTML headLoading multiple CSS files safelyHow the cascade resolves conflictsSpecificity: element, class, and IDInheritance of common text propertiesسبق 10ਸਪੇਸਿੰਗ ਅਤੇ ਵਿਜ਼ੂਅਲ ਹਾਈਰਾਰਕੀ: ਮਾਰਜਨ, ਪੈਡਿੰਗ ਅਤੇ ਸੈਕਸ਼ਨ ਰੈਪਰਸ ਵਰਤਣਾਮਾਰਜਨ, ਪੈਡਿੰਗ ਅਤੇ ਰੈਪਰਸ ਨਾਲ ਵਿਜ਼ੂਅਲ ਹਾਈਰਾਰਕੀ ਬਣਾਉਣ ਨੂੰ ਖੋਜੋ। ਤੁਸੀਂ ਸੈਕਸ਼ਨਾਂ ਨੂੰ ਵੱਖ ਕਰਨਾ, ਸੰਬੰਧਿਤ ਕੰਟੈਂਟ ਨੂੰ ਗਰੁੱਪ ਕਰਨਾ ਅਤੇ ਵੱਖਰੇ ਸਕ੍ਰੀਨ ਸਾਈਜ਼ਾਂ ਤੇ ਕੰਮ ਕਰਨ ਵਾਲੇ ਇਕਸਾਰ ਸਪੇਸਿੰਗ ਨਾਲ ਅੱਖ ਨੂੰ ਗਾਈਡ ਕਰਨਾ ਸਿੱਖੋਗੇ।
Difference between margin and paddingCreating section wrappers with divsVertical rhythm between headings and textSpacing lists, images, and buttonsAvoiding collapsed or crowded layouts