# HTML ਪ੍ਰੈਕਟਿਸ ਅਸਾਈਨਮੈਂਟ: ਬਲੌਗ ਮੌਕਅੱਪ ਬਣਾਉਣਾ ## ਸਿੱਖਣ ਦੇ ਉਦੇਸ਼ ਆਪਣੇ HTML ਦੇ ਗਿਆਨ ਨੂੰ ਲਾਗੂ ਕਰਦੇ ਹੋਏ ਇੱਕ ਪੂਰੀ ਬਲੌਗ ਹੋਮਪੇਜ ਬਣਾਉਣ ਦੀ ਡਿਜ਼ਾਈਨ ਅਤੇ ਕੋਡਿੰਗ ਕਰੋ। ਇਹ ਹੱਥ-ਅਨੁਭਵ ਅਸਾਈਨਮੈਂਟ ਸੈਮਾਂਟਿਕ HTML ਦੇ ਅਵਧਾਰਨਾ, ਪਹੁੰਚਯੋਗਤਾ ਦੇ ਸ੍ਰੇਸ਼ਠ ਅਭਿਆਸਾਂ ਅਤੇ ਪੇਸ਼ੇਵਰ ਕੋਡ ਦੇ ਆਯੋਜਨ ਦੇ ਹੁਨਰਾਂ ਨੂੰ ਮਜ਼ਬੂਤ ਕਰੇਗਾ ਜੋ ਤੁਸੀਂ ਆਪਣੇ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਦੇ ਸਫਰ ਦੌਰਾਨ ਵਰਤੋਂਗੇ। **ਇਸ ਅਸਾਈਨਮੈਂਟ ਨੂੰ ਪੂਰਾ ਕਰਕੇ, ਤੁਸੀਂ:** - ਵੈੱਬਸਾਈਟ ਲੇਆਉਟ ਦੀ ਯੋਜਨਾ ਬਣਾਉਣ ਦੀ ਪ੍ਰੈਕਟਿਸ ਕਰੋਗੇ - ਸੈਮਾਂਟਿਕ HTML ਤੱਤਾਂ ਨੂੰ ਠੀਕ ਤਰੀਕੇ ਨਾਲ ਲਾਗੂ ਕਰੋਗੇ - ਪਹੁੰਚਯੋਗ, ਚੰਗੀ ਤਰ੍ਹਾਂ ਬਣਾਇਆ ਹੋਇਆ ਮਾਰਕਅੱਪ ਬਣਾਓਗੇ - ਟਿੱਪਣੀਆਂ ਅਤੇ ਆਯੋਜਨ ਨਾਲ ਪੇਸ਼ੇਵਰ ਕੋਡਿੰਗ ਦੀਆਂ ਆਦਤਾਂ ਵਿਕਸਿਤ ਕਰੋਗੇ ## ਪ੍ਰੋਜੈਕਟ ਦੀਆਂ ਲੋੜਾਂ ### ਭਾਗ 1: ਡਿਜ਼ਾਈਨ ਯੋਜਨਾ (ਦ੍ਰਿਸ਼ ਮੌਕਅੱਪ) **ਆਪਣੇ ਬਲੌਗ ਹੋਮਪੇਜ ਦਾ ਇੱਕ ਦ੍ਰਿਸ਼ ਮੌਕਅੱਪ ਬਣਾਓ ਜਿਸ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਵੇ:** - ਸਾਈਟ ਟਾਈਟਲ ਅਤੇ ਨੈਵੀਗੇਸ਼ਨ ਵਾਲਾ ਹੈਡਰ - ਮੁੱਖ ਸਮੱਗਰੀ ਖੇਤਰ ਜਿਸ ਵਿੱਚ ਘੱਟੋ-ਘੱਟ 2-3 ਬਲੌਗ ਪੋਸਟ ਪ੍ਰੀਵਿਊਜ਼ ਹੋਣ - ਸਾਈਡਬਾਰ ਜਿਸ ਵਿੱਚ ਵਾਧੂ ਜਾਣਕਾਰੀ (ਅਬਾਊਟ ਸੈਕਸ਼ਨ, ਹਾਲੀਆ ਪੋਸਟਾਂ, ਸ਼੍ਰੇਣੀਆਂ) ਹੋਵੇ - ਫੁੱਟਰ ਜਿਸ ਵਿੱਚ ਸੰਪਰਕ ਜਾਣਕਾਰੀ ਜਾਂ ਲਿੰਕ ਹੋਣ **ਮੌਕਅੱਪ ਬਣਾਉਣ ਦੇ ਵਿਕਲਪ:** - **ਹੱਥ ਨਾਲ ਬਣਾਈ ਸਕੈਚ**: ਕਾਗਜ਼ ਅਤੇ ਪੈਂਸਿਲ ਦੀ ਵਰਤੋਂ ਕਰੋ, ਫਿਰ ਆਪਣੀ ਡਿਜ਼ਾਈਨ ਦੀ ਫੋਟੋ ਲਵੋ ਜਾਂ ਸਕੈਨ ਕਰੋ - **ਡਿਜ਼ੀਟਲ ਟੂਲ**: Figma, Adobe XD, Canva, PowerPoint ਜਾਂ ਕੋਈ ਵੀ ਡ੍ਰਾਇੰਗ ਐਪਲੀਕੇਸ਼ਨ - **ਵਾਇਰਫ੍ਰੇਮ ਟੂਲ**: Balsamiq, MockFlow ਜਾਂ ਸਮਾਨ ਵਾਇਰਫ੍ਰੇਮਿੰਗ ਸਾਫਟਵੇਅਰ **ਆਪਣੇ ਮੌਕਅੱਪ ਸੈਕਸ਼ਨਾਂ ਨੂੰ ਲੇਬਲ ਕਰੋ** ਉਹ HTML ਤੱਤਾਂ ਨਾਲ ਜੋ ਤੁਸੀਂ ਵਰਤਣ ਦੀ ਯੋਜਨਾ ਬਣਾਈ ਹੈ (ਜਿਵੇਂ, "Header - `
`", "Blog Posts - `
`")। ### ਭਾਗ 2: HTML ਤੱਤਾਂ ਦੀ ਯੋਜਨਾ **ਆਪਣੇ ਮੌਕਅੱਪ ਦੇ ਹਰ ਸੈਕਸ਼ਨ ਨੂੰ ਖਾਸ HTML ਤੱਤਾਂ ਨਾਲ ਮੈਪ ਕਰਨ ਲਈ ਇੱਕ ਸੂਚੀ ਬਣਾਓ:** ``` Example: - Site Header →
- Main Navigation →